From f9f9b783e30d1902f9a4c3e02ab09788c05c2d70 Mon Sep 17 00:00:00 2001 From: Zhiyuan Zheng Date: Thu, 18 Mar 2021 23:32:31 +0100 Subject: [PATCH] Fixed #67 --- src/components/Header/Center.tsx | 2 +- src/screens/Compose.tsx | 44 +++-- src/screens/Compose/EditAttachment/Root.tsx | 7 +- src/screens/Compose/Root.tsx | 165 +++++++++--------- .../Compose/Root/Footer/Attachments.tsx | 2 +- src/screens/Compose/Root/Footer/Emojis.tsx | 2 +- .../Compose/Root/Header/SpoilerInput.tsx | 2 +- src/screens/Compose/Root/Header/TextInput.tsx | 2 +- src/screens/Tabs/Me/Switch/Root.tsx | 2 +- 9 files changed, 123 insertions(+), 105 deletions(-) diff --git a/src/components/Header/Center.tsx b/src/components/Header/Center.tsx index cbd1424e..6edae7aa 100644 --- a/src/components/Header/Center.tsx +++ b/src/components/Header/Center.tsx @@ -23,7 +23,7 @@ const HeaderCenter = React.memo( /> ) }, - () => true + (prev, next) => prev.content === next.content ) const styles = StyleSheet.create({ diff --git a/src/screens/Compose.tsx b/src/screens/Compose.tsx index 5d0f1838..608e9b39 100644 --- a/src/screens/Compose.tsx +++ b/src/screens/Compose.tsx @@ -340,6 +340,12 @@ const ScreenCompose: React.FC = ({ [totalTextCount, composeState] ) + const headerContent = useMemo(() => { + return `${totalTextCount} / ${maxTootChars}${ + __DEV__ ? ` Dirty: ${composeState.dirty.toString()}` : '' + }` + }, [totalTextCount, maxTootChars, composeState.dirty]) + return ( = ({ name='Screen-Compose-Root' component={ComposeRoot} options={{ + ...Platform.select({ + ios: { + headerTitle: headerContent, + headerTitleStyle: { + fontWeight: + totalTextCount > maxTootChars + ? StyleConstants.Font.Weight.Bold + : StyleConstants.Font.Weight.Normal, + fontSize: StyleConstants.Font.Size.M + }, + headerTintColor: + totalTextCount > maxTootChars + ? theme.red + : theme.secondary + }, + android: { + headerCenter: () => + } + }), headerLeft, - headerTitle: `${totalTextCount} / ${maxTootChars}${ - __DEV__ ? ` Dirty: ${composeState.dirty.toString()}` : '' - }`, - headerTitleStyle: { - fontWeight: - totalTextCount > maxTootChars - ? StyleConstants.Font.Weight.Bold - : StyleConstants.Font.Weight.Normal, - fontSize: StyleConstants.Font.Size.M - }, - headerTintColor: - totalTextCount > maxTootChars ? theme.red : theme.secondary, - headerCenter: () => ( - - ), headerRight }} /> diff --git a/src/screens/Compose/EditAttachment/Root.tsx b/src/screens/Compose/EditAttachment/Root.tsx index 6aca40f6..e6dd3c18 100644 --- a/src/screens/Compose/EditAttachment/Root.tsx +++ b/src/screens/Compose/EditAttachment/Root.tsx @@ -1,7 +1,7 @@ import AttachmentVideo from '@components/Timeline/Shared/Attachment/Video' import { StyleConstants } from '@utils/styles/constants' import { useTheme } from '@utils/styles/ThemeManager' -import React, { useContext, useMemo } from 'react' +import React, { useContext, useMemo, useRef } from 'react' import { useTranslation } from 'react-i18next' import { ScrollView, StyleSheet, Text, TextInput, View } from 'react-native' import ComposeContext from '../utils/createContext' @@ -55,8 +55,10 @@ const ComposeEditAttachmentRoot: React.FC = ({ index }) => { } }) + const scrollViewRef = useRef(null) + return ( - + {mediaDisplay} @@ -67,6 +69,7 @@ const ComposeEditAttachmentRoot: React.FC = ({ index }) => { styles.altTextInput, { borderColor: theme.border, color: theme.primary } ]} + onFocus={() => scrollViewRef.current?.scrollToEnd()} autoCapitalize='none' autoCorrect={false} maxLength={1500} diff --git a/src/screens/Compose/Root.tsx b/src/screens/Compose/Root.tsx index 66f45819..8ed0369a 100644 --- a/src/screens/Compose/Root.tsx +++ b/src/screens/Compose/Root.tsx @@ -4,7 +4,13 @@ import { useSearchQuery } from '@utils/queryHooks/search' import { StyleConstants } from '@utils/styles/constants' import { useTheme } from '@utils/styles/ThemeManager' import { forEach, groupBy, sortBy } from 'lodash' -import React, { useCallback, useContext, useEffect, useMemo } from 'react' +import React, { + useCallback, + useContext, + useEffect, + useMemo, + useRef +} from 'react' import { FlatList, Image, StyleSheet, View } from 'react-native' import { Circle } from 'react-native-animated-spinkit' import ComposeActions from './Root/Actions' @@ -30,90 +36,93 @@ const prefetchEmojis = ( }) } -const ComposeRoot: React.FC = () => { - const { theme } = useTheme() +const ComposeRoot = React.memo( + () => { + const { theme } = useTheme() - const { composeState, composeDispatch } = useContext(ComposeContext) + const { composeState, composeDispatch } = useContext(ComposeContext) - const { isFetching, data, refetch } = useSearchQuery({ - type: - composeState.tag?.type === 'accounts' || - composeState.tag?.type === 'hashtags' - ? composeState.tag.type - : undefined, - term: composeState.tag?.text.substring(1), - options: { enabled: false } - }) + const { isFetching, data, refetch } = useSearchQuery({ + type: + composeState.tag?.type === 'accounts' || + composeState.tag?.type === 'hashtags' + ? composeState.tag.type + : undefined, + term: composeState.tag?.text.substring(1), + options: { enabled: false } + }) - useEffect(() => { - if ( - (composeState.tag?.type === 'accounts' || - composeState.tag?.type === 'hashtags') && - composeState.tag?.text - ) { - refetch() - } - }, [composeState.tag]) + useEffect(() => { + if ( + (composeState.tag?.type === 'accounts' || + composeState.tag?.type === 'hashtags') && + composeState.tag?.text + ) { + refetch() + } + }, [composeState.tag]) - const { data: emojisData } = useEmojisQuery({}) - useEffect(() => { - if (emojisData && emojisData.length) { - let sortedEmojis: { title: string; data: Mastodon.Emoji[] }[] = [] - forEach( - groupBy(sortBy(emojisData, ['category', 'shortcode']), 'category'), - (value, key) => sortedEmojis.push({ title: key, data: value }) - ) - composeDispatch({ - type: 'emoji', - payload: { ...composeState.emoji, emojis: sortedEmojis } - }) - prefetchEmojis(sortedEmojis) - } - }, [emojisData]) + const { data: emojisData } = useEmojisQuery({}) + useEffect(() => { + if (emojisData && emojisData.length) { + let sortedEmojis: { title: string; data: Mastodon.Emoji[] }[] = [] + forEach( + groupBy(sortBy(emojisData, ['category', 'shortcode']), 'category'), + (value, key) => sortedEmojis.push({ title: key, data: value }) + ) + composeDispatch({ + type: 'emoji', + payload: { ...composeState.emoji, emojis: sortedEmojis } + }) + prefetchEmojis(sortedEmojis) + } + }, [emojisData]) - const listEmpty = useMemo(() => { - if (isFetching) { - return ( - - - - ) - } - }, [isFetching]) + const listEmpty = useMemo(() => { + if (isFetching) { + return ( + + + + ) + } + }, [isFetching]) - const listItem = useCallback( - ({ item }) => ( - - ), - [composeState] - ) + const listItem = useCallback( + ({ item }) => ( + + ), + [composeState] + ) - return ( - - Math.random().toString()} - /> - - - - - ) -} + return ( + + Math.random().toString()} + /> + + + + + ) + }, + () => true +) const styles = StyleSheet.create({ base: { diff --git a/src/screens/Compose/Root/Footer/Attachments.tsx b/src/screens/Compose/Root/Footer/Attachments.tsx index 85acd838..28fa9afb 100644 --- a/src/screens/Compose/Root/Footer/Attachments.tsx +++ b/src/screens/Compose/Root/Footer/Attachments.tsx @@ -246,7 +246,7 @@ const ComposeAttachments: React.FC = () => { snapToAlignment='center' renderItem={renderAttachment} snapToOffsets={snapToOffsets} - keyboardShouldPersistTaps='handled' + keyboardShouldPersistTaps='always' showsHorizontalScrollIndicator={false} data={composeState.attachments.uploads} keyExtractor={item => diff --git a/src/screens/Compose/Root/Footer/Emojis.tsx b/src/screens/Compose/Root/Footer/Emojis.tsx index bc7605b5..807370a8 100644 --- a/src/screens/Compose/Root/Footer/Emojis.tsx +++ b/src/screens/Compose/Root/Footer/Emojis.tsx @@ -76,7 +76,7 @@ const ComposeEmojis: React.FC = () => { item.shortcode} renderSectionHeader={listHeader} diff --git a/src/screens/Compose/Root/Header/SpoilerInput.tsx b/src/screens/Compose/Root/Header/SpoilerInput.tsx index 512c85c2..c7fcd970 100644 --- a/src/screens/Compose/Root/Header/SpoilerInput.tsx +++ b/src/screens/Compose/Root/Header/SpoilerInput.tsx @@ -46,7 +46,7 @@ const ComposeSpoilerInput: React.FC = () => { }) }} ref={composeState.textInputFocus.refs.spoiler} - scrollEnabled + scrollEnabled={false} onFocus={() => composeDispatch({ type: 'textInputFocus', diff --git a/src/screens/Compose/Root/Header/TextInput.tsx b/src/screens/Compose/Root/Header/TextInput.tsx index 56c144d2..bd1987fc 100644 --- a/src/screens/Compose/Root/Header/TextInput.tsx +++ b/src/screens/Compose/Root/Header/TextInput.tsx @@ -52,7 +52,7 @@ const ComposeTextInput: React.FC = () => { }) }} ref={composeState.textInputFocus.refs.text} - scrollEnabled + scrollEnabled={false} > {composeState.text.formatted} diff --git a/src/screens/Tabs/Me/Switch/Root.tsx b/src/screens/Tabs/Me/Switch/Root.tsx index 66be5f38..005e9fd4 100644 --- a/src/screens/Tabs/Me/Switch/Root.tsx +++ b/src/screens/Tabs/Me/Switch/Root.tsx @@ -54,7 +54,7 @@ const ScreenMeSwitchRoot: React.FC = () => { const instanceActive = useSelector(getInstanceActive) return ( - + {t('content.existing')}