2f3fc4fe4e
* Dont append the server's domain name when a custom domain is used * Update the settings look & feel and add a tool to remove accounts from the switcher * Try not rendering the bottomsheet when no modal is active. There are cases where the bottomsheet decides to show itself when it's not supposed to. It seems obvious to do what this change is doing -- just dont render bottomsheet if no modal is active -- but previously we experienced issues with that approach. This time it seems to be working, so we're gonna yolo try it. * Implement a handle-change modal with support for custom domains (closes #65)
99 lines
3.4 KiB
TypeScript
99 lines
3.4 KiB
TypeScript
import React, {useRef, useEffect} from 'react'
|
|
import {View} from 'react-native'
|
|
import {observer} from 'mobx-react-lite'
|
|
import BottomSheet from '@gorhom/bottom-sheet'
|
|
import {useStores} from 'state/index'
|
|
import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
|
|
|
|
import * as ConfirmModal from './Confirm'
|
|
import * as EditProfileModal from './EditProfile'
|
|
import * as ServerInputModal from './ServerInput'
|
|
import * as ReportPostModal from './ReportPost'
|
|
import * as RepostModal from './Repost'
|
|
import * as ReportAccountModal from './ReportAccount'
|
|
import * as DeleteAccountModal from './DeleteAccount'
|
|
import * as ChangeHandleModal from './ChangeHandle'
|
|
import {usePalette} from 'lib/hooks/usePalette'
|
|
import {StyleSheet} from 'react-native'
|
|
|
|
const DEFAULT_SNAPPOINTS = ['90%']
|
|
|
|
export const ModalsContainer = observer(function ModalsContainer() {
|
|
const store = useStores()
|
|
const bottomSheetRef = useRef<BottomSheet>(null)
|
|
const pal = usePalette('default')
|
|
const onBottomSheetChange = (snapPoint: number) => {
|
|
if (snapPoint === -1) {
|
|
store.shell.closeModal()
|
|
}
|
|
}
|
|
const onClose = () => {
|
|
bottomSheetRef.current?.close()
|
|
store.shell.closeModal()
|
|
}
|
|
|
|
const activeModal =
|
|
store.shell.activeModals[store.shell.activeModals.length - 1]
|
|
|
|
useEffect(() => {
|
|
if (store.shell.isModalActive) {
|
|
bottomSheetRef.current?.expand()
|
|
} else {
|
|
bottomSheetRef.current?.close()
|
|
}
|
|
}, [store.shell.isModalActive, bottomSheetRef, activeModal?.name])
|
|
|
|
let snapPoints: (string | number)[] = DEFAULT_SNAPPOINTS
|
|
let element
|
|
if (activeModal?.name === 'confirm') {
|
|
snapPoints = ConfirmModal.snapPoints
|
|
element = <ConfirmModal.Component {...activeModal} />
|
|
} else if (activeModal?.name === 'edit-profile') {
|
|
snapPoints = EditProfileModal.snapPoints
|
|
element = <EditProfileModal.Component {...activeModal} />
|
|
} else if (activeModal?.name === 'server-input') {
|
|
snapPoints = ServerInputModal.snapPoints
|
|
element = <ServerInputModal.Component {...activeModal} />
|
|
} else if (activeModal?.name === 'report-post') {
|
|
snapPoints = ReportPostModal.snapPoints
|
|
element = <ReportPostModal.Component {...activeModal} />
|
|
} else if (activeModal?.name === 'report-account') {
|
|
snapPoints = ReportAccountModal.snapPoints
|
|
element = <ReportAccountModal.Component {...activeModal} />
|
|
} else if (activeModal?.name === 'delete-account') {
|
|
snapPoints = DeleteAccountModal.snapPoints
|
|
element = <DeleteAccountModal.Component />
|
|
} else if (activeModal?.name === 'repost') {
|
|
snapPoints = RepostModal.snapPoints
|
|
element = <RepostModal.Component {...activeModal} />
|
|
} else if (activeModal?.name === 'change-handle') {
|
|
snapPoints = ChangeHandleModal.snapPoints
|
|
element = <ChangeHandleModal.Component {...activeModal} />
|
|
} else {
|
|
return <View />
|
|
}
|
|
|
|
return (
|
|
<BottomSheet
|
|
ref={bottomSheetRef}
|
|
snapPoints={snapPoints}
|
|
index={store.shell.isModalActive ? 0 : -1}
|
|
enablePanDownToClose
|
|
keyboardBehavior="fillParent"
|
|
backdropComponent={
|
|
store.shell.isModalActive ? createCustomBackdrop(onClose) : undefined
|
|
}
|
|
handleIndicatorStyle={{backgroundColor: pal.text.color}}
|
|
handleStyle={[styles.handle, pal.view]}
|
|
onChange={onBottomSheetChange}>
|
|
{element}
|
|
</BottomSheet>
|
|
)
|
|
})
|
|
|
|
const styles = StyleSheet.create({
|
|
handle: {
|
|
borderTopLeftRadius: 10,
|
|
borderTopRightRadius: 10,
|
|
},
|
|
})
|