diff options
Diffstat (limited to 'src/view/com/composer/Composer.tsx')
| -rw-r--r-- | src/view/com/composer/Composer.tsx | 92 |
1 files changed, 50 insertions, 42 deletions
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index 9f60923d6..1ed6b98a5 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -6,6 +6,7 @@ import { Keyboard, KeyboardAvoidingView, Platform, + Pressable, ScrollView, StyleSheet, TouchableOpacity, @@ -28,8 +29,6 @@ import {UserAvatar} from '../util/UserAvatar' import * as apilib from 'lib/api/index' import {ComposerOpts} from 'state/shell/composer' import {s, colors, gradients} from 'lib/styles' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {sanitizeHandle} from 'lib/strings/handles' import {cleanError} from 'lib/strings/errors' import {shortenLinks} from 'lib/strings/rich-text-manip' import {toShortUrl} from 'lib/strings/url-helpers' @@ -46,7 +45,7 @@ import {Gallery} from './photos/Gallery' import {MAX_GRAPHEME_LENGTH} from 'lib/constants' import {LabelsBtn} from './labels/LabelsBtn' import {SelectLangBtn} from './select-language/SelectLangBtn' -import {EmojiPickerButton} from './text-input/web/EmojiPicker.web' +import {SuggestedLanguage} from './select-language/SuggestedLanguage' import {insertMentionAt} from 'lib/strings/mention-manip' import {Trans, msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -63,6 +62,7 @@ import {useComposerControls} from '#/state/shell/composer' import {emitPostCreated} from '#/state/events' import {ThreadgateSetting} from '#/state/queries/threadgate' import {logger} from '#/logger' +import {ComposerReplyTo} from 'view/com/composer/ComposerReplyTo' type Props = ComposerOpts export const ComposePost = observer(function ComposePost({ @@ -70,10 +70,11 @@ export const ComposePost = observer(function ComposePost({ onPost, quote: initQuote, mention: initMention, + openPicker, }: Props) { const {currentAccount} = useSession() const {data: currentProfile} = useProfileQuery({did: currentAccount!.did}) - const {activeModals} = useModals() + const {isModalActive, activeModals} = useModals() const {openModal, closeModal} = useModalControls() const {closeComposer} = useComposerControls() const {track} = useAnalytics() @@ -175,11 +176,11 @@ export const ComposePost = observer(function ComposePost({ [onPressCancel], ) useEffect(() => { - if (isWeb) { + if (isWeb && !isModalActive) { window.addEventListener('keydown', onEscape) return () => window.removeEventListener('keydown', onEscape) } - }, [onEscape]) + }, [onEscape, isModalActive]) const onPressAddLinkCard = useCallback( (uri: string) => { @@ -260,7 +261,11 @@ export const ComposePost = observer(function ComposePost({ setLangPrefs.savePostLanguageToHistory() onPost?.() onClose() - Toast.show(`Your ${replyTo ? 'reply' : 'post'} has been published`) + Toast.show( + replyTo + ? _(msg`Your reply has been published`) + : _(msg`Your post has been published`), + ) } const canPost = useMemo( @@ -269,11 +274,17 @@ export const ComposePost = observer(function ComposePost({ (!requireAltTextEnabled || !gallery.needsAltText), [graphemeLength, requireAltTextEnabled, gallery.needsAltText], ) - const selectTextInputPlaceholder = replyTo ? 'Write your reply' : `What's up?` + const selectTextInputPlaceholder = replyTo + ? _(msg`Write your reply`) + : _(msg`What's up?`) const canSelectImages = useMemo(() => gallery.size < 4, [gallery.size]) const hasMedia = gallery.size > 0 || Boolean(extLink) + const onEmojiButtonPress = useCallback(() => { + openPicker?.(textInput.current?.getCursorPosition()) + }, [openPicker]) + return ( <KeyboardAvoidingView testID="composePostView" @@ -287,7 +298,9 @@ export const ComposePost = observer(function ComposePost({ onAccessibilityEscape={onPressCancel} accessibilityRole="button" accessibilityLabel={_(msg`Cancel`)} - accessibilityHint="Closes post composer and discards post draft"> + accessibilityHint={_( + msg`Closes post composer and discards post draft`, + )}> <Text style={[pal.link, s.f18]}> <Trans>Cancel</Trans> </Text> @@ -319,7 +332,7 @@ export const ComposePost = observer(function ComposePost({ onPress={onPressPublish} accessibilityRole="button" accessibilityLabel={ - replyTo ? 'Publish reply' : 'Publish post' + replyTo ? _(msg`Publish reply`) : _(msg`Publish post`) } accessibilityHint=""> <LinearGradient @@ -331,14 +344,18 @@ export const ComposePost = observer(function ComposePost({ end={{x: 1, y: 1}} style={styles.postBtn}> <Text style={[s.white, s.f16, s.bold]}> - {replyTo ? 'Reply' : 'Post'} + {replyTo ? ( + <Trans context="action">Reply</Trans> + ) : ( + <Trans context="action">Post</Trans> + )} </Text> </LinearGradient> </TouchableOpacity> ) : ( <View style={[styles.postBtn, pal.btn]}> <Text style={[pal.textLight, s.f16, s.bold]}> - <Trans>Post</Trans> + <Trans context="action">Post</Trans> </Text> </View> )} @@ -374,22 +391,7 @@ export const ComposePost = observer(function ComposePost({ <ScrollView style={styles.scrollView} keyboardShouldPersistTaps="always"> - {replyTo ? ( - <View style={[pal.border, styles.replyToLayout]}> - <UserAvatar avatar={replyTo.author.avatar} size={50} /> - <View style={styles.replyToPost}> - <Text type="xl-medium" style={[pal.text]}> - {sanitizeDisplayName( - replyTo.author.displayName || - sanitizeHandle(replyTo.author.handle), - )} - </Text> - <Text type="post-text" style={pal.text} numberOfLines={6}> - {replyTo.text} - </Text> - </View> - </View> - ) : undefined} + {replyTo ? <ComposerReplyTo replyTo={replyTo} /> : undefined} <View style={[ @@ -411,7 +413,9 @@ export const ComposePost = observer(function ComposePost({ onError={setError} accessible={true} accessibilityLabel={_(msg`Write post`)} - accessibilityHint={`Compose posts up to ${MAX_GRAPHEME_LENGTH} characters in length`} + accessibilityHint={_( + msg`Compose posts up to ${MAX_GRAPHEME_LENGTH} characters in length`, + )} /> </View> @@ -440,7 +444,9 @@ export const ComposePost = observer(function ComposePost({ onPress={() => onPressAddLinkCard(url)} accessibilityRole="button" accessibilityLabel={_(msg`Add link card`)} - accessibilityHint={`Creates a card with a thumbnail. The card links to ${url}`}> + accessibilityHint={_( + msg`Creates a card with a thumbnail. The card links to ${url}`, + )}> <Text style={pal.text}> <Trans>Add link card:</Trans>{' '} <Text style={[pal.link, s.ml5]}>{toShortUrl(url)}</Text> @@ -449,6 +455,7 @@ export const ComposePost = observer(function ComposePost({ ))} </View> ) : null} + <SuggestedLanguage text={richtext.text} /> <View style={[pal.border, styles.bottomBar]}> {canSelectImages ? ( <> @@ -456,7 +463,19 @@ export const ComposePost = observer(function ComposePost({ <OpenCameraBtn gallery={gallery} /> </> ) : null} - {!isMobile ? <EmojiPickerButton /> : null} + {!isMobile ? ( + <Pressable + onPress={onEmojiButtonPress} + accessibilityRole="button" + accessibilityLabel={_(msg`Open emoji picker`)} + accessibilityHint={_(msg`Open emoji picker`)}> + <FontAwesomeIcon + icon={['far', 'face-smile']} + color={pal.colors.link} + size={22} + /> + </Pressable> + ) : null} <View style={s.flex1} /> <SelectLangBtn /> <CharProgress count={graphemeLength} /> @@ -532,17 +551,6 @@ const styles = StyleSheet.create({ textInputLayoutMobile: { flex: 1, }, - replyToLayout: { - flexDirection: 'row', - borderTopWidth: 1, - paddingTop: 16, - paddingBottom: 16, - }, - replyToPost: { - flex: 1, - paddingLeft: 13, - paddingRight: 8, - }, addExtLinkBtn: { borderWidth: 1, borderRadius: 24, |