jollywhoppers.com
Bluesky app fork with some witchin' additions 馃挮
witchsky.app
bluesky
fork
client
samuel.fm
1import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
2import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
3import {RemoveScrollBar} from 'react-remove-scroll-bar'
4
5import {usePalette} from '#/lib/hooks/usePalette'
6import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
7import {type Modal as ModalIface} from '#/state/modals'
8import {useModalControls, useModals} from '#/state/modals'
9import * as UserAddRemoveLists from './UserAddRemoveLists'
10
11export function ModalsContainer() {
12 const {isModalActive, activeModals} = useModals()
13
14 if (!isModalActive) {
15 return null
16 }
17
18 return (
19 <>
20 <RemoveScrollBar />
21 {activeModals.map((modal, i) => (
22 <Modal key={`modal-${i}`} modal={modal} />
23 ))}
24 </>
25 )
26}
27
28function Modal({modal}: {modal: ModalIface}) {
29 const {isModalActive} = useModals()
30 const {closeModal} = useModalControls()
31 const pal = usePalette('default')
32 const {isMobile} = useWebMediaQueries()
33
34 if (!isModalActive) {
35 return null
36 }
37
38 const onPressMask = () => {
39 closeModal()
40 }
41 const onInnerPress = () => {
42 // TODO: can we use prevent default?
43 // do nothing, we just want to stop it from bubbling
44 }
45
46 let element
47 if (modal.name === 'user-add-remove-lists') {
48 element = <UserAddRemoveLists.Component {...modal} />
49 } else {
50 return null
51 }
52
53 return (
54 // eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors
55 <TouchableWithoutFeedback onPress={onPressMask}>
56 <Animated.View
57 style={styles.mask}
58 entering={FadeIn.duration(150)}
59 exiting={FadeOut}>
60 {/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors */}
61 <TouchableWithoutFeedback onPress={onInnerPress}>
62 <View
63 style={[
64 styles.container,
65 isMobile && styles.containerMobile,
66 pal.view,
67 pal.border,
68 ]}>
69 {element}
70 </View>
71 </TouchableWithoutFeedback>
72 </Animated.View>
73 </TouchableWithoutFeedback>
74 )
75}
76
77const styles = StyleSheet.create({
78 mask: {
79 // @ts-ignore
80 position: 'fixed',
81 top: 0,
82 left: 0,
83 width: '100%',
84 height: '100%',
85 backgroundColor: '#000c',
86 alignItems: 'center',
87 justifyContent: 'center',
88 },
89 container: {
90 width: 600,
91 // @ts-ignore web only
92 maxWidth: '100vw',
93 // @ts-ignore web only
94 maxHeight: '90vh',
95 paddingVertical: 20,
96 paddingHorizontal: 24,
97 borderRadius: 8,
98 borderWidth: 1,
99 },
100 containerMobile: {
101 borderRadius: 0,
102 paddingHorizontal: 0,
103 },
104})