diff options
Diffstat (limited to 'src')
4 files changed, 109 insertions, 91 deletions
diff --git a/src/screens/Messages/Conversation/MessageInput.tsx b/src/screens/Messages/Conversation/MessageInput.tsx index 3848bcab3..d477a20c1 100644 --- a/src/screens/Messages/Conversation/MessageInput.tsx +++ b/src/screens/Messages/Conversation/MessageInput.tsx @@ -12,6 +12,7 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {HITSLOP_10} from '#/lib/constants' import {atoms as a, useTheme} from '#/alf' import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane' @@ -60,44 +61,49 @@ export function MessageInput({ ) return ( - <View - style={[ - a.flex_row, - a.py_sm, - a.px_sm, - a.pl_md, - a.mt_sm, - t.atoms.bg_contrast_25, - {borderRadius: 23}, - ]}> - <TextInput - accessibilityLabel={_(msg`Message input field`)} - accessibilityHint={_(msg`Type your message here`)} - placeholder={_(msg`Write a message`)} - placeholderTextColor={t.palette.contrast_500} - value={message} - multiline={true} - onChangeText={setMessage} - style={[a.flex_1, a.text_md, a.px_sm, t.atoms.text, {maxHeight}]} - keyboardAppearance={t.name === 'light' ? 'light' : 'dark'} - scrollEnabled={isInputScrollable} - blurOnSubmit={false} - onFocus={onFocus} - onBlur={onBlur} - onContentSizeChange={onInputLayout} - ref={inputRef} - /> - <Pressable - accessibilityRole="button" + <View style={a.p_sm}> + <View style={[ - a.rounded_full, - a.align_center, - a.justify_center, - {height: 30, width: 30, backgroundColor: t.palette.primary_500}, - ]} - onPress={onSubmit}> - <PaperPlane fill={t.palette.white} /> - </Pressable> + a.w_full, + a.flex_row, + a.py_sm, + a.px_sm, + a.pl_md, + t.atoms.bg_contrast_25, + {borderRadius: 23}, + ]}> + <TextInput + accessibilityLabel={_(msg`Message input field`)} + accessibilityHint={_(msg`Type your message here`)} + placeholder={_(msg`Write a message`)} + placeholderTextColor={t.palette.contrast_500} + value={message} + multiline={true} + onChangeText={setMessage} + style={[a.flex_1, a.text_md, a.px_sm, t.atoms.text, {maxHeight}]} + keyboardAppearance={t.name === 'light' ? 'light' : 'dark'} + scrollEnabled={isInputScrollable} + blurOnSubmit={false} + onFocus={onFocus} + onBlur={onBlur} + onContentSizeChange={onInputLayout} + ref={inputRef} + /> + <Pressable + accessibilityRole="button" + accessibilityLabel={_(msg`Send message`)} + accessibilityHint="" + hitSlop={HITSLOP_10} + style={[ + a.rounded_full, + a.align_center, + a.justify_center, + {height: 30, width: 30, backgroundColor: t.palette.primary_500}, + ]} + onPress={onSubmit}> + <PaperPlane fill={t.palette.white} /> + </Pressable> + </View> </View> ) } diff --git a/src/screens/Messages/Conversation/MessageInput.web.tsx b/src/screens/Messages/Conversation/MessageInput.web.tsx index 5ecaad3ae..2370b52db 100644 --- a/src/screens/Messages/Conversation/MessageInput.web.tsx +++ b/src/screens/Messages/Conversation/MessageInput.web.tsx @@ -45,47 +45,48 @@ export function MessageInput({ ) return ( - <View - style={[ - a.flex_row, - a.py_sm, - a.px_sm, - a.pl_md, - a.mt_sm, - t.atoms.bg_contrast_25, - {borderRadius: 23}, - ]}> - <TextareaAutosize - style={StyleSheet.flatten([ - a.flex_1, - a.px_sm, - a.border_0, - t.atoms.text, - { - backgroundColor: 'transparent', - resize: 'none', - paddingTop: 6, - }, - ])} - maxRows={12} - placeholder={_(msg`Write a message`)} - defaultValue="" - value={message} - dirName="ltr" - autoFocus={true} - onChange={onChange} - onKeyDown={onKeyDown} - /> - <Pressable - accessibilityRole="button" + <View style={a.p_sm}> + <View style={[ - a.rounded_full, - a.align_center, - a.justify_center, - {height: 30, width: 30, backgroundColor: t.palette.primary_500}, + a.flex_row, + a.py_sm, + a.px_sm, + a.pl_md, + t.atoms.bg_contrast_25, + {borderRadius: 23}, ]}> - <PaperPlane fill={t.palette.white} /> - </Pressable> + <TextareaAutosize + style={StyleSheet.flatten([ + a.flex_1, + a.px_sm, + a.border_0, + t.atoms.text, + { + backgroundColor: 'transparent', + resize: 'none', + paddingTop: 4, + }, + ])} + maxRows={12} + placeholder={_(msg`Write a message`)} + defaultValue="" + value={message} + dirName="ltr" + autoFocus={true} + onChange={onChange} + onKeyDown={onKeyDown} + /> + <Pressable + accessibilityRole="button" + style={[ + a.rounded_full, + a.align_center, + a.justify_center, + {height: 30, width: 30, backgroundColor: t.palette.primary_500}, + ]}> + <PaperPlane fill={t.palette.white} /> + </Pressable> + </View> </View> ) } diff --git a/src/screens/Messages/Conversation/MessageItem.tsx b/src/screens/Messages/Conversation/MessageItem.tsx index ba10978e8..ba1bcfd39 100644 --- a/src/screens/Messages/Conversation/MessageItem.tsx +++ b/src/screens/Messages/Conversation/MessageItem.tsx @@ -153,7 +153,7 @@ function Metadata({ style={[ t.atoms.text_contrast_medium, a.text_xs, - a.mt_xs, + a.mt_2xs, a.mb_lg, style, ]}> diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/Conversation/MessagesList.tsx index 5fedf062a..55e1e43c0 100644 --- a/src/screens/Messages/Conversation/MessagesList.tsx +++ b/src/screens/Messages/Conversation/MessagesList.tsx @@ -6,14 +6,18 @@ import { View, } from 'react-native' import {KeyboardAvoidingView} from 'react-native-keyboard-controller' +import {useSafeAreaInsets} from 'react-native-safe-area-context' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' +import {isIOS} from '#/platform/detection' import {useChat} from '#/state/messages' import {ConvoItem, ConvoStatus} from '#/state/messages/convo' -import {isWeb} from 'platform/detection' +import {useSetMinimalShellMode} from '#/state/shell' import {MessageInput} from '#/screens/Messages/Conversation/MessageInput' import {MessageItem} from '#/screens/Messages/Conversation/MessageItem' +import {atoms as a} from '#/alf' import {Button, ButtonText} from '#/components/Button' import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' @@ -112,13 +116,24 @@ export function MessagesList() { [], ) + const setMinShellMode = useSetMinimalShellMode() + useFocusEffect( + useCallback(() => { + setMinShellMode(true) + return () => setMinShellMode(false) + }, [setMinShellMode]), + ) + + const {bottom: bottomInset} = useSafeAreaInsets() + return ( <KeyboardAvoidingView - style={{flex: 1, marginBottom: isWeb ? 20 : 85}} + style={[a.flex_1, {marginBottom: bottomInset}]} + keyboardVerticalOffset={isIOS ? 60 : 25} behavior="padding" - keyboardVerticalOffset={70} - contentContainerStyle={{flex: 1}}> + contentContainerStyle={a.flex_1}> <FlatList + ref={flatListRef} data={ chat.state.status === ConvoStatus.Ready ? chat.state.items : undefined } @@ -150,17 +165,13 @@ export function MessagesList() { /> } removeClippedSubviews={true} - ref={flatListRef} - keyboardDismissMode="none" + keyboardDismissMode="on-drag" + /> + <MessageInput + onSendMessage={onSendMessage} + onFocus={onInputFocus} + onBlur={onInputBlur} /> - - <View style={{paddingHorizontal: 10}}> - <MessageInput - onSendMessage={onSendMessage} - onFocus={onInputFocus} - onBlur={onInputBlur} - /> - </View> </KeyboardAvoidingView> ) } |