chore: Make segmented list more ergonomic

It was a bit of a weird mechanism to pass in the on item press when there were heterogenous types, not all requiring on press handlers.

This change restructues it a bit so that each item is in charge of its own on press. This lets us use touchable ripple too rather than an elevation.

Author: LiamMorrow

app/src/components/presentation/foundation/editors/decimal-editor.tsx

@@ -4,7 +4,7 @@ import {
 } from '@/utils/locale-bignumber';
 import React, { useState, useEffect } from 'react';
 import { TextStyle } from 'react-native';
-import { TextInput } from 'react-native-paper';
+import { TextInput, TextInputProps } from 'react-native-paper';
 import BigNumber from 'bignumber.js';
 
 interface DecimalEditorProps {
@@ -15,8 +15,11 @@ interface DecimalEditorProps {
   testID?: string;
 }
 
-export function DecimalEditor(props: DecimalEditorProps) {
-  const { value, onChange } = props;
+export function DecimalEditor(
+  props: DecimalEditorProps &
+    Partial<Omit<TextInputProps, keyof DecimalEditorProps>>,
+) {
+  const { value, onChange, testID, label, style, ...rest } = props;
   const [text, setText] = useState(localeFormatBigNumber(props.value) || '-');
   const [editorValue, setEditorValue] = useState(value);
 
@@ -43,22 +46,23 @@ export function DecimalEditor(props: DecimalEditorProps) {
   }, [value, editorValue]);
   return (
     <TextInput
-      testID={props.testID}
+      testID={testID}
       value={text}
       inputMode={'decimal'}
-      label={props.label}
+      label={label}
       keyboardType={'decimal-pad'}
       onChangeText={handleTextChange}
       submitBehavior="blurAndSubmit"
       returnKeyType="done"
       selectTextOnFocus
-      style={[props.style]}
+      style={[style]}
       onBlur={() => {
         if (text === '') {
           setText('0');
         }
         onChange(editorValue);
       }}
+      {...rest}
     />
   );
 }

app/src/components/presentation/foundation/segmented-list-switch.tsx

@@ -16,6 +16,7 @@ export function SegmentedListSwitch(props: ListSwitchProps) {
     <SegmentListFormElement
       label={props.label}
       icon={props.icon}
+      onPress={() => props.onValueChange(!props.value)}
       right={
         <Switch
           value={props.value}

app/src/components/presentation/foundation/segmented-list.tsx

@@ -1,6 +1,7 @@
 import Icon from '@/components/presentation/foundation/gesture-wrappers/icon';
+import TouchableRipple from '@/components/presentation/foundation/gesture-wrappers/touchable-ripple';
 import { AppIconSource } from '@/components/presentation/foundation/ms-icon-source';
-import { rounding, spacing, useAppTheme } from '@/hooks/useAppTheme';
+import { rounding, spacing } from '@/hooks/useAppTheme';
 import { useBottomSheetScrollableCreator } from '@gorhom/bottom-sheet';
 import { LegendList } from '@legendapp/list';
 import { ReactNode } from 'react';
@@ -14,7 +15,6 @@ type TupleKeysNum<T extends readonly unknown[]> = Exclude<
 >;
 export function SegmentedList<TItems extends readonly unknown[]>(props: {
   renderItem: (item: TItems[number], index: TupleKeysNum<TItems>) => ReactNode;
-  onItemPress?: (item: TItems[number], index: TupleKeysNum<TItems>) => void;
   itemKey?: (item: TItems[number], index: TupleKeysNum<TItems>) => string;
   items: TItems;
   scrollable?: boolean;
@@ -24,7 +24,6 @@ export function SegmentedList<TItems extends readonly unknown[]>(props: {
 }) {
   const BottomSheetScrollable = useBottomSheetScrollableCreator();
   const itemKey = props.itemKey ?? ((_, index) => String(index));
-  const onItemPress = props.onItemPress;
   if (!props.scrollable) {
     return (
       <View style={[{ gap: spacing[0.5] }, props.style]}>
@@ -33,11 +32,6 @@ export function SegmentedList<TItems extends readonly unknown[]>(props: {
             key={itemKey(item, index as TupleKeysNum<TItems>)}
             isFirst={index === 0}
             isLast={index === props.items.length - 1}
-            onPress={
-              onItemPress
-                ? () => onItemPress(item, index as TupleKeysNum<TItems>)
-                : undefined
-            }
           >
             {props.renderItem(item, index as TupleKeysNum<TItems>)}
           </SegmentedListItem>
@@ -61,11 +55,6 @@ export function SegmentedList<TItems extends readonly unknown[]>(props: {
           key={itemKey(item, index as TupleKeysNum<TItems>)}
           isFirst={index === 0}
           isLast={index === props.items.length - 1}
-          onPress={
-            onItemPress
-              ? () => onItemPress(item, index as TupleKeysNum<TItems>)
-              : undefined
-          }
         >
           {props.renderItem(item, index as TupleKeysNum<TItems>)}
         </SegmentedListItem>
@@ -77,46 +66,48 @@ export function SegmentedList<TItems extends readonly unknown[]>(props: {
 export function SegmentListFormElement(props: {
   label: string;
   icon: AppIconSource;
+  onPress?: () => void;
   line2?: ReactNode | string;
   right?: ReactNode | string;
 }) {
+  const Wrapper = props.onPress ? TouchableRipple : View;
   return (
-    <View>
-      <View
-        style={{
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-        }}
-      >
+    <Wrapper onPress={props.onPress}>
+      <View style={{ padding: spacing[4] }}>
         <View
           style={{
             flexDirection: 'row',
-            gap: spacing[2],
+            justifyContent: 'space-between',
             alignItems: 'center',
           }}
         >
-          <Icon size={20} source={props.icon} />
-          <Text variant="labelLarge">{props.label}</Text>
+          <View
+            style={{
+              flexDirection: 'row',
+              gap: spacing[2],
+              alignItems: 'center',
+            }}
+          >
+            <Icon size={20} source={props.icon} />
+            <Text variant="labelLarge">{props.label}</Text>
+          </View>
+          {typeof props.right === 'string' ? (
+            <Text variant="labelLarge">{props.right}</Text>
+          ) : (
+            props.right
+          )}
         </View>
-        {typeof props.right === 'string' ? (
-          <Text variant="labelLarge">{props.right}</Text>
-        ) : (
-          props.right
-        )}
+        {props.line2}
       </View>
-      {props.line2}
-    </View>
+    </Wrapper>
   );
 }
 
 function SegmentedListItem(props: {
   isFirst: boolean;
   isLast: boolean;
   children: ReactNode;
-  onPress: undefined | (() => void);
 }) {
-  const { colors } = useAppTheme();
   const style = match(props)
     .with(
       {
@@ -130,13 +121,8 @@ function SegmentedListItem(props: {
     .with({ isFirst: false, isLast: false }, () => styles.middleItem)
     .exhaustive();
   return (
-    <Card
-      mode="elevated"
-      elevation={0}
-      style={[{ backgroundColor: colors.surfaceContainerHigh }, style]}
-      onPress={props.onPress}
-    >
-      <Card.Content>{props.children}</Card.Content>
+    <Card mode="contained" style={[style, { padding: 0, overflow: 'hidden' }]}>
+      {props.children}
     </Card>
   );
 }

app/src/components/presentation/stats/exercise-list-summary.tsx

@@ -48,9 +48,11 @@ export function ExerciseListSummary(props: { stats: GranularStatisticView }) {
     >
       <SegmentedList
         items={topWeightedExercises}
-        onItemPress={onItemPress}
         renderItem={(item) => (
-          <WeightedExerciseStatSummary exerciseStats={item} />
+          <WeightedExerciseStatSummary
+            onPress={onItemPress}
+            exerciseStats={item}
+          />
         )}
       />
       <AppBottomSheet

app/src/components/presentation/stats/weighted-exercise-list-searcher.tsx

@@ -51,9 +51,11 @@ export function WeightedExerciseListSearcher({
       <SegmentedList
         scrollable
         items={filteredExercises}
-        onItemPress={onItemPress}
         renderItem={(item) => (
-          <WeightedExerciseStatSummary exerciseStats={item} />
+          <WeightedExerciseStatSummary
+            onPress={onItemPress}
+            exerciseStats={item}
+          />
         )}
       />
     </View>

app/src/components/presentation/stats/weighted-exercise-stat-summary.tsx

@@ -1,45 +1,51 @@
 import Icon from '@/components/presentation/foundation/gesture-wrappers/icon';
+import TouchableRipple from '@/components/presentation/foundation/gesture-wrappers/touchable-ripple';
 import { spacing } from '@/hooks/useAppTheme';
 import { WeightedExerciseStatistics } from '@/store/stats';
 import { View } from 'react-native';
 import { Text } from 'react-native-paper';
 
 export function WeightedExerciseStatSummary({
   exerciseStats,
+  onPress,
 }: {
   exerciseStats: WeightedExerciseStatistics;
+  onPress: (item: WeightedExerciseStatistics) => void;
 }) {
   return (
-    <View
-      style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: spacing[2],
-      }}
-    >
-      <View style={{ flex: 1 }}>
-        <Text variant="bodyMedium">{exerciseStats.exerciseName}</Text>
-        <View
-          style={{
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-          }}
-        >
-          <Text variant="bodySmall">
-            Total lifted:{' '}
-            {exerciseStats.totalVolumeStatistics.totalValue.shortLocaleFormat(
-              0,
-            )}
-          </Text>
-          <Text variant="bodySmall">
-            1RM:{' '}
-            {exerciseStats.max1RMPerSessionStatistics.currentValue.shortLocaleFormat(
-              0,
-            )}
-          </Text>
+    <TouchableRipple onPress={() => onPress(exerciseStats)}>
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          padding: spacing[4],
+          gap: spacing[2],
+        }}
+      >
+        <View style={{ flex: 1 }}>
+          <Text variant="bodyMedium">{exerciseStats.exerciseName}</Text>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+            }}
+          >
+            <Text variant="bodySmall">
+              Total lifted:{' '}
+              {exerciseStats.totalVolumeStatistics.totalValue.shortLocaleFormat(
+                0,
+              )}
+            </Text>
+            <Text variant="bodySmall">
+              1RM:{' '}
+              {exerciseStats.max1RMPerSessionStatistics.currentValue.shortLocaleFormat(
+                0,
+              )}
+            </Text>
+          </View>
         </View>
+        <Icon source="chevronRight" size={24} />
       </View>
-      <Icon source="chevronRight" size={24} />
-    </View>
+    </TouchableRipple>
   );
 }