forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {StyleSheet, View} from 'react-native'
2import {DismissableLayer, FocusGuards, FocusScope} from 'radix-ui/internal'
3import {RemoveScrollBar} from 'react-remove-scroll-bar'
4
5import {useA11y} from '#/state/a11y'
6import {useModals} from '#/state/modals'
7import {type ComposerOpts, useComposerState} from '#/state/shell/composer'
8import {atoms as a, flatten, useBreakpoints, useTheme} from '#/alf'
9import {ComposePost, useComposerCancelRef} from '../com/composer/Composer'
10
11const BOTTOM_BAR_HEIGHT = 61
12
13export function Composer({}: {winHeight: number}) {
14 const state = useComposerState()
15 const isActive = !!state
16
17 // rendering
18 // =
19
20 if (!isActive) {
21 return null
22 }
23
24 return (
25 <>
26 <RemoveScrollBar />
27 <Inner state={state} />
28 </>
29 )
30}
31
32function Inner({state}: {state: ComposerOpts}) {
33 const ref = useComposerCancelRef()
34 const {isModalActive} = useModals()
35 const t = useTheme()
36 const {gtMobile} = useBreakpoints()
37 const {reduceMotionEnabled} = useA11y()
38
39 FocusGuards.useFocusGuards()
40
41 return (
42 <FocusScope.FocusScope loop trapped asChild>
43 <DismissableLayer.DismissableLayer
44 role="dialog"
45 aria-modal
46 style={flatten([
47 {position: 'fixed'},
48 a.inset_0,
49 {backgroundColor: '#000c'},
50 a.flex,
51 a.flex_col,
52 a.align_center,
53 !reduceMotionEnabled && a.fade_in,
54 ])}
55 onFocusOutside={evt => evt.preventDefault()}
56 onInteractOutside={evt => evt.preventDefault()}
57 onDismiss={() => {
58 // TEMP: remove when all modals are ALF'd -sfn
59 if (!isModalActive) {
60 ref.current?.onPressCancel()
61 }
62 }}>
63 <View
64 style={[
65 styles.container,
66 !gtMobile && styles.containerMobile,
67 t.atoms.bg,
68 t.atoms.border_contrast_medium,
69 !reduceMotionEnabled && [
70 a.zoom_fade_in,
71 {animationDelay: 0.1},
72 {animationFillMode: 'backwards'},
73 ],
74 ]}>
75 <ComposePost
76 cancelRef={ref}
77 activeAccountDid={state.activeAccountDid}
78 replyTo={state.replyTo}
79 quote={state.quote}
80 onPost={state.onPost}
81 onPostSuccess={state.onPostSuccess}
82 mention={state.mention}
83 text={state.text}
84 imageUris={state.imageUris}
85 videoUri={state.videoUri}
86 openGallery={state.openGallery}
87 />
88 </View>
89 </DismissableLayer.DismissableLayer>
90 </FocusScope.FocusScope>
91 )
92}
93
94const styles = StyleSheet.create({
95 container: {
96 marginTop: 50,
97 maxWidth: 600,
98 width: '100%',
99 paddingVertical: 0,
100 borderRadius: 8,
101 marginBottom: 0,
102 borderWidth: 1,
103 // @ts-expect-error web only
104 maxHeight: 'calc(100% - (40px * 2))',
105 overflow: 'hidden',
106 },
107 containerMobile: {
108 borderRadius: 0,
109 marginBottom: BOTTOM_BAR_HEIGHT,
110 // @ts-expect-error web only
111 maxHeight: `calc(100% - ${BOTTOM_BAR_HEIGHT}px)`,
112 },
113})