| 1 | import { Host, ModalBottomSheet, RNHostView } from "@expo/ui/jetpack-compose"; |
| 2 | import { Pressable, View, useWindowDimensions } from "react-native"; |
| 3 | import { withUniwind } from "uniwind"; |
| 4 | import { AndroidSheetHeader } from "../../components/AndroidScreenHeader"; |
| 5 | import { AppText as Text } from "../../components/AppText"; |
| 6 | import type { WorktreeSetupSheetProps } from "./worktree-setup-sheet"; |
| 7 | |
| 8 | const NativeBottomSheet = withUniwind(ModalBottomSheet, { |
| 9 | containerColor: { fromClassName: "containerColorClassName", styleProperty: "accentColor" }, |
| 10 | }); |
| 11 | |
| 12 | export function WorktreeSetupSheet({ children, height, onClose }: WorktreeSetupSheetProps) { |
| 13 | const window = useWindowDimensions(); |
| 14 | return ( |
| 15 | <Host style={{ position: "absolute", width: 0, height: 0 }}> |
| 16 | <NativeBottomSheet |
| 17 | onDismissRequest={onClose} |
| 18 | skipPartiallyExpanded |
| 19 | containerColorClassName="accent-sheet-solid" |
| 20 | > |
| 21 | <RNHostView matchContents> |
| 22 | <View |
| 23 | style={{ |
| 24 | width: Math.min(window.width, 640), |
| 25 | height: Math.min((height || 360) + 64, window.height * 0.85), |
| 26 | }} |
| 27 | > |
| 28 | <AndroidSheetHeader |
| 29 | title="Worktree setup" |
| 30 | trailing={ |
| 31 | <Pressable |
| 32 | accessibilityRole="button" |
| 33 | accessibilityLabel="Close setup details" |
| 34 | onPress={onClose} |
| 35 | className="min-h-11 justify-center px-2" |
| 36 | > |
| 37 | <Text className="font-t3-medium text-sm text-foreground">Done</Text> |
| 38 | </Pressable> |
| 39 | } |
| 40 | /> |
| 41 | {children} |
| 42 | </View> |
| 43 | </RNHostView> |
| 44 | </NativeBottomSheet> |
| 45 | </Host> |
| 46 | ); |
| 47 | } |