d451f82f54
* add native ios code outside of ios project * helper script * going to be a lot of these commits to squash...backing up * save * start of an expo plugin * create info.plist * copy the view controller * maybe working * working * wait working now * working plugin * use current scheme * update intent path * use better params * support text in uri * build * use better encoding * handle images * cleanup ios plugin * android * move bash script to /scripts * handle cases where loaded data is uiimage rather than uri * remove unnecessary logic, allow more than 4 images and just take first 4 * android build plugin * limit images to four on android * use js for plugins, no need to build * revert changes to app config * use correct scheme on android * android readme * move ios extension to /modules * remove unnecessary event * revert typo * plugin readme * scripts readme * add configurable scheme to .env, default to `bluesky` * remove debug * revert .gitignore change * add comment about updating .env to app.config.js for those modifying scheme * modify .env * update android module to use the proper url * update ios extension * remove comment * parse and validate incoming image uris * fix types * rm oops * fix a few typos
109 lines
2.6 KiB
TypeScript
109 lines
2.6 KiB
TypeScript
import React from 'react'
|
|
import {StyleSheet, View} from 'react-native'
|
|
import Animated, {FadeIn, FadeInDown, FadeOut} from 'react-native-reanimated'
|
|
import {ComposePost} from '../com/composer/Composer'
|
|
import {useComposerState} from 'state/shell/composer'
|
|
import {usePalette} from 'lib/hooks/usePalette'
|
|
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
|
import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
|
|
import {
|
|
EmojiPicker,
|
|
EmojiPickerState,
|
|
} from 'view/com/composer/text-input/web/EmojiPicker.web'
|
|
|
|
const BOTTOM_BAR_HEIGHT = 61
|
|
|
|
export function Composer({}: {winHeight: number}) {
|
|
const pal = usePalette('default')
|
|
const {isMobile} = useWebMediaQueries()
|
|
const state = useComposerState()
|
|
const isActive = !!state
|
|
useWebBodyScrollLock(isActive)
|
|
|
|
const [pickerState, setPickerState] = React.useState<EmojiPickerState>({
|
|
isOpen: false,
|
|
pos: {top: 0, left: 0, right: 0, bottom: 0},
|
|
})
|
|
|
|
const onOpenPicker = React.useCallback((pos: DOMRect | undefined) => {
|
|
if (!pos) return
|
|
setPickerState({
|
|
isOpen: true,
|
|
pos,
|
|
})
|
|
}, [])
|
|
|
|
const onClosePicker = React.useCallback(() => {
|
|
setPickerState(prev => ({
|
|
...prev,
|
|
isOpen: false,
|
|
}))
|
|
}, [])
|
|
|
|
// rendering
|
|
// =
|
|
|
|
if (!isActive) {
|
|
return <View />
|
|
}
|
|
|
|
return (
|
|
<Animated.View
|
|
style={styles.mask}
|
|
aria-modal
|
|
accessibilityViewIsModal
|
|
entering={FadeIn.duration(100)}
|
|
exiting={FadeOut}>
|
|
<Animated.View
|
|
entering={FadeInDown.duration(150)}
|
|
exiting={FadeOut}
|
|
style={[
|
|
styles.container,
|
|
isMobile && styles.containerMobile,
|
|
pal.view,
|
|
pal.border,
|
|
]}>
|
|
<ComposePost
|
|
replyTo={state.replyTo}
|
|
quote={state.quote}
|
|
onPost={state.onPost}
|
|
mention={state.mention}
|
|
openPicker={onOpenPicker}
|
|
text={state.text}
|
|
/>
|
|
</Animated.View>
|
|
<EmojiPicker state={pickerState} close={onClosePicker} />
|
|
</Animated.View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
mask: {
|
|
// @ts-ignore
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
backgroundColor: '#000c',
|
|
alignItems: 'center',
|
|
},
|
|
container: {
|
|
marginTop: 50,
|
|
maxWidth: 600,
|
|
width: '100%',
|
|
paddingVertical: 0,
|
|
paddingHorizontal: 2,
|
|
borderRadius: 8,
|
|
marginBottom: 0,
|
|
borderWidth: 1,
|
|
// @ts-ignore web only
|
|
maxHeight: 'calc(100% - (40px * 2))',
|
|
},
|
|
containerMobile: {
|
|
borderRadius: 0,
|
|
marginBottom: BOTTOM_BAR_HEIGHT,
|
|
// @ts-ignore web only
|
|
maxHeight: `calc(100% - ${BOTTOM_BAR_HEIGHT}px)`,
|
|
},
|
|
})
|