diff options
Diffstat (limited to 'src/view/shell/Composer.tsx')
-rw-r--r-- | src/view/shell/Composer.tsx | 122 |
1 files changed, 60 insertions, 62 deletions
diff --git a/src/view/shell/Composer.tsx b/src/view/shell/Composer.tsx index ac155887c..d7c6a80b7 100644 --- a/src/view/shell/Composer.tsx +++ b/src/view/shell/Composer.tsx @@ -6,73 +6,71 @@ import {ComposerOpts} from 'state/models/ui/shell' import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' import {usePalette} from 'lib/hooks/usePalette' -export const Composer = observer( - ({ - active, - winHeight, - replyTo, - onPost, - onClose, - quote, - mention, - }: { - active: boolean - winHeight: number - replyTo?: ComposerOpts['replyTo'] - onPost?: ComposerOpts['onPost'] - onClose: () => void - quote?: ComposerOpts['quote'] - mention?: ComposerOpts['mention'] - }) => { - const pal = usePalette('default') - const initInterp = useAnimatedValue(0) +export const Composer = observer(function ComposerImpl({ + active, + winHeight, + replyTo, + onPost, + onClose, + quote, + mention, +}: { + active: boolean + winHeight: number + replyTo?: ComposerOpts['replyTo'] + onPost?: ComposerOpts['onPost'] + onClose: () => void + quote?: ComposerOpts['quote'] + mention?: ComposerOpts['mention'] +}) { + const pal = usePalette('default') + const initInterp = useAnimatedValue(0) - useEffect(() => { - if (active) { - Animated.timing(initInterp, { - toValue: 1, - duration: 300, - easing: Easing.out(Easing.exp), - useNativeDriver: true, - }).start() - } else { - initInterp.setValue(0) - } - }, [initInterp, active]) - const wrapperAnimStyle = { - transform: [ - { - translateY: initInterp.interpolate({ - inputRange: [0, 1], - outputRange: [winHeight, 0], - }), - }, - ], + useEffect(() => { + if (active) { + Animated.timing(initInterp, { + toValue: 1, + duration: 300, + easing: Easing.out(Easing.exp), + useNativeDriver: true, + }).start() + } else { + initInterp.setValue(0) } + }, [initInterp, active]) + const wrapperAnimStyle = { + transform: [ + { + translateY: initInterp.interpolate({ + inputRange: [0, 1], + outputRange: [winHeight, 0], + }), + }, + ], + } - // rendering - // = + // rendering + // = - if (!active) { - return <View /> - } + if (!active) { + return <View /> + } - return ( - <Animated.View - style={[styles.wrapper, pal.view, wrapperAnimStyle]} - aria-modal - accessibilityViewIsModal> - <ComposePost - replyTo={replyTo} - onPost={onPost} - onClose={onClose} - quote={quote} - mention={mention} - /> - </Animated.View> - ) - }, -) + return ( + <Animated.View + style={[styles.wrapper, pal.view, wrapperAnimStyle]} + aria-modal + accessibilityViewIsModal> + <ComposePost + replyTo={replyTo} + onPost={onPost} + onClose={onClose} + quote={quote} + mention={mention} + /> + </Animated.View> + ) +}) const styles = StyleSheet.create({ wrapper: { |