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