1import { Platform, View } from "react-native";
2import { useResolveClassNames } from "uniwind";
3
4import { cn } from "../lib/cn";
5import { SymbolView } from "./AppSymbol";
6import { ListRowLayout } from "./ListRowLayout";
7import { MaterialRadioIndicator } from "./MaterialRadioIndicator";
8import { RowPressable } from "./RowPressable";
9
10export function ListChoiceRow(props: {
11 readonly label: string;
12 readonly description?: string;
13 readonly selected: boolean;
14 readonly separated?: boolean;
15 readonly disabled?: boolean;
16 readonly onPress: () => void;
17}) {
18 const rippleStyle = useResolveClassNames("bg-subtle-strong");
19 return (
20 <RowPressable
21 accessibilityRole="radio"
22 accessibilityLabel={props.label}
23 accessibilityHint={props.description}
24 accessibilityState={{ checked: props.selected, disabled: Boolean(props.disabled) }}
25 disabled={props.disabled}
26 onPress={props.onPress}
27 android_ripple={{ color: rippleStyle.backgroundColor }}
28 unstable_pressDelay={Platform.OS === "android" ? 50 : undefined}
29 className={cn(
30 props.selected ? "bg-subtle" : "bg-grouped-card",
31 props.separated && "border-t border-border-subtle",
32 )}
33 >
34 <ListRowLayout
35 label={props.label}
36 description={props.description}
37 disabled={props.disabled}
38 accessory={
39 <View
40 accessibilityElementsHidden
41 importantForAccessibility="no-hide-descendants"
42 className="size-6 items-center justify-center"
43 >
44 {Platform.OS === "android" ? (
45 <MaterialRadioIndicator selected={props.selected} />
46 ) : props.selected ? (
47 <SymbolView
48 name="checkmark"
49 size={18}
50 tintColorClassName="accent-primary-text"
51 type="monochrome"
52 weight="semibold"
53 />
54 ) : null}
55 </View>
56 }
57 />
58 </RowPressable>
59 );
60}