| 1 | import { Pressable } from "react-native"; |
| 2 | |
| 3 | import { AppText } from "./AppText"; |
| 4 | import { ListRowLayout, type ListRowContentProps } from "./ListRowLayout"; |
| 5 | import { ThemedSwitch } from "./ThemedSwitch"; |
| 6 | |
| 7 | /** A null value means the selected environments disagree; activation sets them all on. */ |
| 8 | export function ListToggleRow( |
| 9 | props: Omit<ListRowContentProps, "detail"> & { |
| 10 | readonly value: boolean | null; |
| 11 | readonly onValueChange: (value: boolean) => void; |
| 12 | }, |
| 13 | ) { |
| 14 | return ( |
| 15 | <ListRowLayout |
| 16 | icon={props.icon} |
| 17 | label={props.label} |
| 18 | description={props.description} |
| 19 | disabled={props.disabled} |
| 20 | accessory={ |
| 21 | props.value === null ? ( |
| 22 | <Pressable |
| 23 | accessibilityLabel={`Set ${props.label} on for selected environments`} |
| 24 | accessibilityRole="button" |
| 25 | accessibilityHint={props.description} |
| 26 | accessibilityState={{ disabled: Boolean(props.disabled) }} |
| 27 | disabled={props.disabled} |
| 28 | className="rounded-full bg-subtle px-3 py-2 active:opacity-70" |
| 29 | onPress={() => props.onValueChange(true)} |
| 30 | > |
| 31 | <AppText className="text-sm font-t3-medium text-foreground">Mixed · Set on</AppText> |
| 32 | </Pressable> |
| 33 | ) : ( |
| 34 | <ThemedSwitch |
| 35 | accessibilityLabel={props.label} |
| 36 | accessibilityHint={props.description} |
| 37 | disabled={props.disabled} |
| 38 | onValueChange={props.onValueChange} |
| 39 | value={props.value} |
| 40 | /> |
| 41 | ) |
| 42 | } |
| 43 | /> |
| 44 | ); |
| 45 | } |