diff --git a/src/state/models/shell-ui.ts b/src/state/models/shell-ui.ts index b84d6ece98..525a01ba2c 100644 --- a/src/state/models/shell-ui.ts +++ b/src/state/models/shell-ui.ts @@ -14,6 +14,18 @@ export class ConfirmModal { } } +export class MenuModal { + name = 'menu' + + constructor( + public title: string, + public options: any, // TODO: Before commit string | (() => JSX.Element), + public onPressConfirm: () => void | Promise, + ) { + makeAutoObservable(this) + } +} + export class EditProfileModal { name = 'edit-profile' @@ -98,6 +110,7 @@ export class ShellUiModel { | ServerInputModal | ReportPostModal | ReportAccountModal + | MenuModal | undefined isLightboxActive = false activeLightbox: ProfileImageLightbox | ImagesLightbox | undefined @@ -140,7 +153,9 @@ export class ShellUiModel { | EditProfileModal | ServerInputModal | ReportPostModal - | ReportAccountModal, + | ReportAccountModal + | MenuModal, + // TODO: Create a MODALS interface, don't repeat ) { this.isModalActive = true this.activeModal = modal diff --git a/src/view/com/modals/Menu.tsx b/src/view/com/modals/Menu.tsx new file mode 100644 index 0000000000..67e8902275 --- /dev/null +++ b/src/view/com/modals/Menu.tsx @@ -0,0 +1,127 @@ +import React, {useState} from 'react' +import { + ActivityIndicator, + StyleSheet, + TouchableOpacity, + View, +} from 'react-native' +import LinearGradient from 'react-native-linear-gradient' +import {Text} from '../util/text/Text' +import {useStores} from '../../../state' +import {s, colors, gradients} from '../../lib/styles' +import {ErrorMessage} from '../util/error/ErrorMessage' + +export const snapPoints = ['25%'] + +export function Component({ + title, + // message, + options, + onPressConfirm, +}: { + title: string + // message: string | (() => JSX.Element) + options: any // TODO Before commit + onPressConfirm: () => void | Promise // TODO: remove? +}) { + console.log('-meeennuuu') + const store = useStores() + const [isProcessing, setIsProcessing] = useState(false) + const [error, setError] = useState('') + // const onPress = async () => { + // setError('') + // setIsProcessing(true) + // try { + // await onPressConfirm() + // store.shell.closeModal() + // return + // } catch (e: any) { + // setError(e.toString()) + // setIsProcessing(false) + // } + // } + return ( + + {/* {title} */} + {/* {typeof message === 'string' ? ( + {message} + ) : ( + message() + )} */} + + {options.map(({Icon, text, onPress, danger}) => { + return ( + + + + {text} + + + ) + })} + + {/* {error ? ( + + + + ) : undefined} */} + {/* {isProcessing ? ( + + + + ) : ( + + + Confirm + + + )} */} + + ) +} + +const styles = StyleSheet.create({ + title: { + textAlign: 'center', + fontWeight: 'bold', + fontSize: 24, + marginBottom: 12, + }, + description: { + // textAlign: 'center', + fontSize: 18, + color: colors.gray5, + // marginBottom: 10, + }, + btn: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + width: '100%', + borderRadius: 32, + padding: 14, + backgroundColor: colors.gray1, + }, + option: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-start', + columnGap: 10, + marginVertical: 8, + }, + optionsContainer: { + flex: 1, + justifyContent: 'center', + paddingHorizontal: 22, + // backgroundColor: 'red', + marginBottom: 30, + }, +}) diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index e0e18d54ae..12c99bb529 100644 --- a/src/view/com/modals/Modal.tsx +++ b/src/view/com/modals/Modal.tsx @@ -7,6 +7,7 @@ import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop' import * as models from '../../../state/models/shell-ui' +import * as MenuModal from './Menu' import * as ConfirmModal from './Confirm' import * as EditProfileModal from './EditProfile' import * as ServerInputModal from './ServerInput' @@ -46,6 +47,11 @@ export const Modal = observer(function Modal() { {...(store.shell.activeModal as models.ConfirmModal)} /> ) + } else if (store.shell.activeModal?.name === 'menu') { + snapPoints = MenuModal.snapPoints + element = ( + + ) } else if (store.shell.activeModal?.name === 'edit-profile') { snapPoints = EditProfileModal.snapPoints element = (