lenooby09.tech
fork
Configure Feed
Select the types of activity you want to include in your feed.
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
fork
Configure Feed
Select the types of activity you want to include in your feed.
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 ChangePasswordModal from './ChangePassword'
10import * as CreateOrEditListModal from './CreateOrEditList'
11import * as DeleteAccountModal from './DeleteAccount'
12import * as InviteCodesModal from './InviteCodes'
13import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
14import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
15import * as UserAddRemoveLists from './UserAddRemoveLists'
16
17export function ModalsContainer() {
18 const {isModalActive, activeModals} = useModals()
19
20 if (!isModalActive) {
21 return null
22 }
23
24 return (
25 <>
26 <RemoveScrollBar />
27 {activeModals.map((modal, i) => (
28 <Modal key={`modal-${i}`} modal={modal} />
29 ))}
30 </>
31 )
32}
33
34function Modal({modal}: {modal: ModalIface}) {
35 const {isModalActive} = useModals()
36 const {closeModal} = useModalControls()
37 const pal = usePalette('default')
38 const {isMobile} = useWebMediaQueries()
39
40 if (!isModalActive) {
41 return null
42 }
43
44 const onPressMask = () => {
45 closeModal()
46 }
47 const onInnerPress = () => {
48 // TODO: can we use prevent default?
49 // do nothing, we just want to stop it from bubbling
50 }
51
52 let element
53 if (modal.name === 'create-or-edit-list') {
54 element = <CreateOrEditListModal.Component {...modal} />
55 } else if (modal.name === 'user-add-remove-lists') {
56 element = <UserAddRemoveLists.Component {...modal} />
57 } else if (modal.name === 'delete-account') {
58 element = <DeleteAccountModal.Component />
59 } else if (modal.name === 'invite-codes') {
60 element = <InviteCodesModal.Component />
61 } else if (modal.name === 'content-languages-settings') {
62 element = <ContentLanguagesSettingsModal.Component />
63 } else if (modal.name === 'post-languages-settings') {
64 element = <PostLanguagesSettingsModal.Component />
65 } else if (modal.name === 'change-password') {
66 element = <ChangePasswordModal.Component />
67 } else {
68 return null
69 }
70
71 return (
72 // eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors
73 <TouchableWithoutFeedback onPress={onPressMask}>
74 <Animated.View
75 style={styles.mask}
76 entering={FadeIn.duration(150)}
77 exiting={FadeOut}>
78 {/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors */}
79 <TouchableWithoutFeedback onPress={onInnerPress}>
80 <View
81 style={[
82 styles.container,
83 isMobile && styles.containerMobile,
84 pal.view,
85 pal.border,
86 ]}>
87 {element}
88 </View>
89 </TouchableWithoutFeedback>
90 </Animated.View>
91 </TouchableWithoutFeedback>
92 )
93}
94
95const styles = StyleSheet.create({
96 mask: {
97 // @ts-ignore
98 position: 'fixed',
99 top: 0,
100 left: 0,
101 width: '100%',
102 height: '100%',
103 backgroundColor: '#000c',
104 alignItems: 'center',
105 justifyContent: 'center',
106 },
107 container: {
108 width: 600,
109 // @ts-ignore web only
110 maxWidth: '100vw',
111 // @ts-ignore web only
112 maxHeight: '90vh',
113 paddingVertical: 20,
114 paddingHorizontal: 24,
115 borderRadius: 8,
116 borderWidth: 1,
117 },
118 containerMobile: {
119 borderRadius: 0,
120 paddingHorizontal: 0,
121 },
122})