| 1 | import { useNavigation } from "@react-navigation/native"; |
| 2 | import type { ComponentProps } from "react"; |
| 3 | import { Platform } from "react-native"; |
| 4 | |
| 5 | import { ListRow } from "../../../components/ListRow"; |
| 6 | import type { SettingsLegalDocumentTarget, SettingsSheetTarget } from "./settings-sheet-targets"; |
| 7 | |
| 8 | export function SettingsRow(props: { |
| 9 | readonly disabled?: boolean; |
| 10 | readonly icon: ComponentProps<typeof ListRow>["icon"]; |
| 11 | readonly label: string; |
| 12 | readonly value?: string; |
| 13 | readonly valuePosition?: "below" | "trailing"; |
| 14 | readonly target?: SettingsSheetTarget; |
| 15 | readonly fullScreenTarget?: SettingsLegalDocumentTarget; |
| 16 | readonly onPress?: () => void; |
| 17 | }) { |
| 18 | const navigation = useNavigation(); |
| 19 | const valueBelow = |
| 20 | props.valuePosition === "below" || |
| 21 | (props.valuePosition === undefined && Platform.OS === "android"); |
| 22 | return ( |
| 23 | <ListRow |
| 24 | icon={props.icon} |
| 25 | label={props.label} |
| 26 | description={valueBelow ? props.value : undefined} |
| 27 | detail={valueBelow ? undefined : props.value} |
| 28 | disabled={props.disabled} |
| 29 | onPress={() => { |
| 30 | if (props.target) { |
| 31 | navigation.navigate("SettingsSheet", { |
| 32 | screen: "SettingsContent", |
| 33 | params: { screen: props.target }, |
| 34 | }); |
| 35 | } else if (props.fullScreenTarget) { |
| 36 | navigation.navigate(props.fullScreenTarget); |
| 37 | } else { |
| 38 | props.onPress?.(); |
| 39 | } |
| 40 | }} |
| 41 | /> |
| 42 | ); |
| 43 | } |