lenooby09.tech
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
1import React from 'react'
2import {TouchableWithoutFeedback, StyleSheet, View} from 'react-native'
3import {observer} from 'mobx-react-lite'
4import {useStores} from 'state/index'
5import {usePalette} from 'lib/hooks/usePalette'
6import type {Modal as ModalIface} from 'state/models/shell-ui'
7
8import * as ConfirmModal from './Confirm'
9import * as EditProfileModal from './EditProfile'
10import * as ServerInputModal from './ServerInput'
11import * as ReportPostModal from './ReportPost'
12import * as ReportAccountModal from './ReportAccount'
13import * as CropImageModal from './crop-image/CropImage.web'
14
15export const ModalsContainer = observer(function ModalsContainer() {
16 const store = useStores()
17
18 if (!store.shell.isModalActive) {
19 return null
20 }
21
22 return (
23 <>
24 {store.shell.activeModals.map((modal, i) => (
25 <Modal key={`modal-${i}`} modal={modal} />
26 ))}
27 </>
28 )
29})
30
31function Modal({modal}: {modal: ModalIface}) {
32 const store = useStores()
33 const pal = usePalette('default')
34
35 if (!store.shell.isModalActive) {
36 return null
37 }
38
39 const onPressMask = () => {
40 if (modal.name === 'crop-image') {
41 return // dont close on mask presses during crop
42 }
43 store.shell.closeModal()
44 }
45 const onInnerPress = () => {
46 // do nothing, we just want to stop it from bubbling
47 }
48
49 let element
50 if (modal.name === 'confirm') {
51 element = <ConfirmModal.Component {...modal} />
52 } else if (modal.name === 'edit-profile') {
53 element = <EditProfileModal.Component {...modal} />
54 } else if (modal.name === 'server-input') {
55 element = <ServerInputModal.Component {...modal} />
56 } else if (modal.name === 'report-post') {
57 element = <ReportPostModal.Component {...modal} />
58 } else if (modal.name === 'report-account') {
59 element = <ReportAccountModal.Component {...modal} />
60 } else if (modal.name === 'crop-image') {
61 element = <CropImageModal.Component {...modal} />
62 } else {
63 return null
64 }
65
66 return (
67 <TouchableWithoutFeedback onPress={onPressMask}>
68 <View style={styles.mask}>
69 <TouchableWithoutFeedback onPress={onInnerPress}>
70 <View style={[styles.container, pal.view]}>{element}</View>
71 </TouchableWithoutFeedback>
72 </View>
73 </TouchableWithoutFeedback>
74 )
75}
76
77const styles = StyleSheet.create({
78 mask: {
79 position: 'absolute',
80 top: 0,
81 left: 0,
82 width: '100%',
83 height: '100%',
84 backgroundColor: '#000c',
85 alignItems: 'center',
86 justifyContent: 'center',
87 },
88 container: {
89 width: 500,
90 paddingVertical: 20,
91 paddingHorizontal: 24,
92 borderRadius: 8,
93 },
94})