veryroundbird.house
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
samuel.fm
1import {Fragment, useEffect, useRef} from 'react'
2import {StyleSheet} from 'react-native'
3import {SafeAreaView} from 'react-native-safe-area-context'
4import BottomSheet from '@discord/bottom-sheet/src'
5
6import {usePalette} from '#/lib/hooks/usePalette'
7import {useModalControls, useModals} from '#/state/modals'
8import {FullWindowOverlay} from '#/components/FullWindowOverlay'
9import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
10import * as DeleteAccountModal from './DeleteAccount'
11import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
12import * as UserAddRemoveListsModal from './UserAddRemoveLists'
13
14const DEFAULT_SNAPPOINTS = ['90%']
15const HANDLE_HEIGHT = 24
16
17export function ModalsContainer() {
18 const {isModalActive, activeModals} = useModals()
19 const {closeModal} = useModalControls()
20 const bottomSheetRef = useRef<BottomSheet>(null)
21 const pal = usePalette('default')
22 const activeModal = activeModals[activeModals.length - 1]
23
24 const onBottomSheetChange = async (snapPoint: number) => {
25 if (snapPoint === -1) {
26 closeModal()
27 }
28 }
29
30 const onClose = () => {
31 bottomSheetRef.current?.close()
32 closeModal()
33 }
34
35 useEffect(() => {
36 if (isModalActive) {
37 bottomSheetRef.current?.snapToIndex(0)
38 } else {
39 bottomSheetRef.current?.close()
40 }
41 }, [isModalActive, bottomSheetRef, activeModal?.name])
42
43 let snapPoints: (string | number)[] = DEFAULT_SNAPPOINTS
44 let element
45 if (activeModal?.name === 'user-add-remove-lists') {
46 snapPoints = UserAddRemoveListsModal.snapPoints
47 element = <UserAddRemoveListsModal.Component {...activeModal} />
48 } else if (activeModal?.name === 'delete-account') {
49 snapPoints = DeleteAccountModal.snapPoints
50 element = <DeleteAccountModal.Component />
51 } else if (activeModal?.name === 'content-languages-settings') {
52 snapPoints = ContentLanguagesSettingsModal.snapPoints
53 element = <ContentLanguagesSettingsModal.Component />
54 } else {
55 return null
56 }
57
58 if (snapPoints[0] === 'fullscreen') {
59 return (
60 <SafeAreaView style={[styles.fullscreenContainer, pal.view]}>
61 {element}
62 </SafeAreaView>
63 )
64 }
65
66 const Container = activeModal ? FullWindowOverlay : Fragment
67
68 return (
69 <Container>
70 <BottomSheet
71 ref={bottomSheetRef}
72 snapPoints={snapPoints}
73 handleHeight={HANDLE_HEIGHT}
74 index={isModalActive ? 0 : -1}
75 enablePanDownToClose
76 android_keyboardInputMode="adjustResize"
77 keyboardBlurBehavior="restore"
78 backdropComponent={
79 isModalActive ? createCustomBackdrop(onClose) : undefined
80 }
81 handleIndicatorStyle={{backgroundColor: pal.text.color}}
82 handleStyle={[styles.handle, pal.view]}
83 backgroundStyle={pal.view}
84 onChange={onBottomSheetChange}>
85 {element}
86 </BottomSheet>
87 </Container>
88 )
89}
90
91const styles = StyleSheet.create({
92 handle: {
93 borderTopLeftRadius: 10,
94 borderTopRightRadius: 10,
95 },
96 fullscreenContainer: {
97 position: 'absolute',
98 top: 0,
99 left: 0,
100 bottom: 0,
101 right: 0,
102 },
103})