| 1 | import { Platform } from "react-native"; |
| 2 | |
| 3 | import { useResolveClassNames } from "uniwind"; |
| 4 | import { SymbolView } from "./AppSymbol"; |
| 5 | import { ListRowLayout, type ListRowContentProps } from "./ListRowLayout"; |
| 6 | import { RowPressable } from "./RowPressable"; |
| 7 | |
| 8 | /** A navigation row owns its look; callers supply content and destination behavior. */ |
| 9 | export function ListRow(props: ListRowContentProps & { readonly onPress: () => void }) { |
| 10 | const rippleStyle = useResolveClassNames("bg-subtle-strong"); |
| 11 | return ( |
| 12 | <RowPressable |
| 13 | accessibilityRole="button" |
| 14 | accessibilityLabel={[props.label, props.description, props.detail].filter(Boolean).join(", ")} |
| 15 | accessibilityState={{ disabled: Boolean(props.disabled) }} |
| 16 | disabled={props.disabled} |
| 17 | onPress={props.onPress} |
| 18 | android_ripple={{ color: rippleStyle.backgroundColor }} |
| 19 | unstable_pressDelay={Platform.OS === "android" ? 50 : undefined} |
| 20 | className="bg-grouped-card" |
| 21 | > |
| 22 | <ListRowLayout |
| 23 | {...props} |
| 24 | accessory={ |
| 25 | <SymbolView |
| 26 | name="chevron.right" |
| 27 | size={16} |
| 28 | tintColorClassName="accent-chevron" |
| 29 | type="monochrome" |
| 30 | weight="semibold" |
| 31 | /> |
| 32 | } |
| 33 | /> |
| 34 | </RowPressable> |
| 35 | ); |
| 36 | } |