| 1 | import { Host } from "@expo/ui/jetpack-compose"; |
| 2 | import { MaterialSegmentedButtons } from "./MaterialSegmentedButtons.android"; |
| 3 | import { View } from "react-native"; |
| 4 | |
| 5 | import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider"; |
| 6 | import type { SegmentedControlProps } from "./SegmentedControl.types"; |
| 7 | |
| 8 | export function MaterialSegmentedControl<Value extends number | string>( |
| 9 | props: SegmentedControlProps<Value>, |
| 10 | ) { |
| 11 | const { themeAppearance } = useAppearancePreferences(); |
| 12 | return ( |
| 13 | <View className={props.className}> |
| 14 | <View importantForAccessibility="no-hide-descendants"> |
| 15 | <Host |
| 16 | matchContents={{ vertical: true }} |
| 17 | colorScheme={themeAppearance} |
| 18 | ignoreSafeAreaKeyboardInsets |
| 19 | style={{ width: "100%" }} |
| 20 | > |
| 21 | <MaterialSegmentedButtons {...props} /> |
| 22 | </Host> |
| 23 | </View> |
| 24 | <View pointerEvents="none" className="absolute inset-0 flex-row"> |
| 25 | {props.options.map((option) => ( |
| 26 | <View |
| 27 | key={String(option.value)} |
| 28 | accessible |
| 29 | accessibilityRole={props.role ?? "button"} |
| 30 | accessibilityLabel={option.accessibilityLabel ?? option.label} |
| 31 | accessibilityState={{ selected: option.value === props.selected }} |
| 32 | accessibilityActions={[{ name: "activate" }]} |
| 33 | onAccessibilityAction={() => props.onSelect(option.value)} |
| 34 | className="flex-1" |
| 35 | /> |
| 36 | ))} |
| 37 | </View> |
| 38 | </View> |
| 39 | ); |
| 40 | } |