Eric Bailey
55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import React from 'react'
|
|
import {Modal, View} from 'react-native'
|
|
|
|
import {useDialogStateControlContext} from '#/state/dialogs'
|
|
import {useComposerState} from '#/state/shell/composer'
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import {Outlet as ToastPortalOutlet, ToastProvider} from '#/components/Toast'
|
|
import {ComposePost, useComposerCancelRef} from '../com/composer/Composer'
|
|
|
|
export function Composer({}: {winHeight: number}) {
|
|
const {setFullyExpandedCount} = useDialogStateControlContext()
|
|
const t = useTheme()
|
|
const state = useComposerState()
|
|
const ref = useComposerCancelRef()
|
|
|
|
const open = !!state
|
|
const prevOpen = React.useRef(open)
|
|
|
|
React.useEffect(() => {
|
|
if (open && !prevOpen.current) {
|
|
setFullyExpandedCount(c => c + 1)
|
|
} else if (!open && prevOpen.current) {
|
|
setFullyExpandedCount(c => c - 1)
|
|
}
|
|
prevOpen.current = open
|
|
}, [open, setFullyExpandedCount])
|
|
|
|
return (
|
|
<Modal
|
|
aria-modal
|
|
accessibilityViewIsModal
|
|
visible={open}
|
|
presentationStyle="pageSheet"
|
|
animationType="slide"
|
|
onRequestClose={() => ref.current?.onPressCancel()}>
|
|
<ToastProvider offsetTop={a.pt_lg.paddingTop}>
|
|
<View style={[t.atoms.bg, a.flex_1]}>
|
|
<ComposePost
|
|
cancelRef={ref}
|
|
replyTo={state?.replyTo}
|
|
onPost={state?.onPost}
|
|
onPostSuccess={state?.onPostSuccess}
|
|
quote={state?.quote}
|
|
mention={state?.mention}
|
|
text={state?.text}
|
|
imageUris={state?.imageUris}
|
|
videoUri={state?.videoUri}
|
|
/>
|
|
</View>
|
|
<ToastPortalOutlet />
|
|
</ToastProvider>
|
|
</Modal>
|
|
)
|
|
}
|