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
77 lines
1.7 KiB
TypeScript
77 lines
1.7 KiB
TypeScript
import React, {useEffect} from 'react'
|
|
import {observer} from 'mobx-react-lite'
|
|
import {Animated, Easing, Platform, StyleSheet, View} from 'react-native'
|
|
import {ComposePost} from '../com/composer/Composer'
|
|
import {useComposerState} from 'state/shell/composer'
|
|
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
|
|
import {usePalette} from 'lib/hooks/usePalette'
|
|
|
|
export const Composer = observer(function ComposerImpl({
|
|
winHeight,
|
|
}: {
|
|
winHeight: number
|
|
}) {
|
|
const state = useComposerState()
|
|
const pal = usePalette('default')
|
|
const initInterp = useAnimatedValue(0)
|
|
|
|
useEffect(() => {
|
|
if (state) {
|
|
Animated.timing(initInterp, {
|
|
toValue: 1,
|
|
duration: 300,
|
|
easing: Easing.out(Easing.exp),
|
|
useNativeDriver: true,
|
|
}).start()
|
|
} else {
|
|
initInterp.setValue(0)
|
|
}
|
|
}, [initInterp, state])
|
|
const wrapperAnimStyle = {
|
|
transform: [
|
|
{
|
|
translateY: initInterp.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: [winHeight, 0],
|
|
}),
|
|
},
|
|
],
|
|
}
|
|
|
|
// rendering
|
|
// =
|
|
|
|
if (!state) {
|
|
return <View />
|
|
}
|
|
|
|
return (
|
|
<Animated.View
|
|
style={[styles.wrapper, pal.view, wrapperAnimStyle]}
|
|
aria-modal
|
|
accessibilityViewIsModal>
|
|
<ComposePost
|
|
replyTo={state.replyTo}
|
|
onPost={state.onPost}
|
|
quote={state.quote}
|
|
mention={state.mention}
|
|
text={state.text}
|
|
imageUris={state.imageUris}
|
|
/>
|
|
</Animated.View>
|
|
)
|
|
})
|
|
|
|
const styles = StyleSheet.create({
|
|
wrapper: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
bottom: 0,
|
|
width: '100%',
|
|
...Platform.select({
|
|
ios: {
|
|
paddingTop: 24,
|
|
},
|
|
}),
|
|
},
|
|
})
|