From 4c5a96b9a2a4fb9c900a3552dcd556ee4e428979 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sat, 25 May 2024 10:06:37 +0800 Subject: [PATCH 1/5] apply the emoji only line height to composer component --- src/components/Composer/index.native.tsx | 3 ++- src/components/Composer/index.tsx | 5 ++++- .../ComposerWithSuggestions/ComposerWithSuggestions.tsx | 7 +------ src/styles/utils/index.ts | 7 +++++++ 4 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx index 4d135cdd88e2..63dd9408e27f 100644 --- a/src/components/Composer/index.native.tsx +++ b/src/components/Composer/index.native.tsx @@ -64,6 +64,7 @@ function Composer( onClear(); }, [shouldClear, onClear]); + const isOnlyEmojiLineHeight = useMemo(() => StyleUtils.getOnlyEmojiLineHeight(value), [value]); const maxHeightStyle = useMemo(() => StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), [StyleUtils, isComposerFullSize, maxLines]); const composerStyle = useMemo(() => StyleSheet.flatten(style), [style]); @@ -78,7 +79,7 @@ function Composer( rejectResponderTermination={false} smartInsertDelete={false} textAlignVertical="center" - style={[composerStyle, maxHeightStyle]} + style={[composerStyle, maxHeightStyle, isOnlyEmojiLineHeight]} markdownStyle={markdownStyle} autoFocus={autoFocus} /* eslint-disable-next-line react/jsx-props-no-spreading */ diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index f8bff00f3689..7a8062211337 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -305,6 +305,8 @@ function Composer( return styles.overflowAuto; }, [shouldContainScroll, styles.overflowAuto, styles.overflowScroll, styles.overscrollBehaviorContain, styles.overflowHidden, isScrollBarVisible]); + const isOnlyEmojiLineHeight = useMemo(() => StyleUtils.getOnlyEmojiLineHeight(value), [value]); + const inputStyleMemo = useMemo( () => [ StyleSheet.flatten([style, {outline: 'none'}]), @@ -313,9 +315,10 @@ function Composer( scrollStyleMemo, StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), isComposerFullSize ? ({height: '100%', maxHeight: 'none' as DimensionValue} as TextStyle) : undefined, + isOnlyEmojiLineHeight, ], - [style, styles.rtlTextRenderForSafari, scrollStyleMemo, StyleUtils, maxLines, isComposerFullSize], + [style, styles.rtlTextRenderForSafari, scrollStyleMemo, StyleUtils, maxLines, isComposerFullSize, isOnlyEmojiLineHeight], ); return ( diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index 8112bdc6dae0..9adf9e9bf619 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -731,11 +731,6 @@ function ComposerWithSuggestions( // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - const isOnlyEmojiLineHeight = useMemo(() => { - const isOnlyEmoji = EmojiUtils.containsOnlyEmojis(value); - return isOnlyEmoji ? {lineHeight: variables.fontSizeOnlyEmojisHeight} : {}; - }, [value]); - return ( <> @@ -749,7 +744,7 @@ function ComposerWithSuggestions( onChangeText={onChangeText} onKeyPress={triggerHotkeyActions} textAlignVertical="top" - style={[styles.textInputCompose, isComposerFullSize ? styles.textInputFullCompose : styles.textInputCollapseCompose, isOnlyEmojiLineHeight]} + style={[styles.textInputCompose, isComposerFullSize ? styles.textInputFullCompose : styles.textInputCollapseCompose]} maxLines={maxComposerLines} onFocus={onFocus} onBlur={onBlur} diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 4c2f9a180518..176248b601b1 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -5,6 +5,7 @@ import type {EdgeInsets} from 'react-native-safe-area-context'; import type {ValueOf} from 'type-fest'; import type ImageSVGProps from '@components/ImageSVG/types'; import * as Browser from '@libs/Browser'; +import * as EmojiUtils from '@libs/EmojiUtils'; import * as UserUtils from '@libs/UserUtils'; // eslint-disable-next-line no-restricted-imports import {defaultTheme} from '@styles/theme'; @@ -1126,6 +1127,11 @@ function getAmountWidth(amount: string): number { return width; } +function getOnlyEmojiLineHeight(text: string = ''): TextStyle { + const isOnlyEmoji = EmojiUtils.containsOnlyEmojis(text); + return isOnlyEmoji ? {lineHeight: variables.fontSizeOnlyEmojisHeight} : {}; +} + const staticStyleUtils = { positioning, combineStyles, @@ -1199,6 +1205,7 @@ const staticStyleUtils = { getButtonStyleWithIcon, getCharacterWidth, getAmountWidth, + getOnlyEmojiLineHeight, }; const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ From 40d9bfbccff9bd36ff1ae1d32a45fd20b79965f2 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sat, 25 May 2024 10:17:54 +0800 Subject: [PATCH 2/5] fix lint --- .../ComposerWithSuggestions/ComposerWithSuggestions.tsx | 1 - src/styles/utils/index.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index 9adf9e9bf619..95ec572b4881 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -44,7 +44,6 @@ import willBlurTextInputOnTapOutsideFunc from '@libs/willBlurTextInputOnTapOutsi import type {ComposerRef, SuggestionsRef} from '@pages/home/report/ReportActionCompose/ReportActionCompose'; import SilentCommentUpdater from '@pages/home/report/ReportActionCompose/SilentCommentUpdater'; import Suggestions from '@pages/home/report/ReportActionCompose/Suggestions'; -import variables from '@styles/variables'; import * as EmojiPickerActions from '@userActions/EmojiPickerAction'; import * as InputFocus from '@userActions/InputFocus'; import * as Report from '@userActions/Report'; diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 176248b601b1..5945391b428b 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1127,7 +1127,7 @@ function getAmountWidth(amount: string): number { return width; } -function getOnlyEmojiLineHeight(text: string = ''): TextStyle { +function getOnlyEmojiLineHeight(text = ''): TextStyle { const isOnlyEmoji = EmojiUtils.containsOnlyEmojis(text); return isOnlyEmoji ? {lineHeight: variables.fontSizeOnlyEmojisHeight} : {}; } From d38a5893f5380b2a2a0299fe811bd447d4395e65 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sat, 25 May 2024 10:25:15 +0800 Subject: [PATCH 3/5] fix lint --- src/components/Composer/index.native.tsx | 2 +- src/components/Composer/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx index 63dd9408e27f..bd35087ac5f1 100644 --- a/src/components/Composer/index.native.tsx +++ b/src/components/Composer/index.native.tsx @@ -64,7 +64,7 @@ function Composer( onClear(); }, [shouldClear, onClear]); - const isOnlyEmojiLineHeight = useMemo(() => StyleUtils.getOnlyEmojiLineHeight(value), [value]); + const isOnlyEmojiLineHeight = useMemo(() => StyleUtils.getOnlyEmojiLineHeight(value), [StyleUtils, value]); const maxHeightStyle = useMemo(() => StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), [StyleUtils, isComposerFullSize, maxLines]); const composerStyle = useMemo(() => StyleSheet.flatten(style), [style]); diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 7a8062211337..933ffa3bb126 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -305,7 +305,7 @@ function Composer( return styles.overflowAuto; }, [shouldContainScroll, styles.overflowAuto, styles.overflowScroll, styles.overscrollBehaviorContain, styles.overflowHidden, isScrollBarVisible]); - const isOnlyEmojiLineHeight = useMemo(() => StyleUtils.getOnlyEmojiLineHeight(value), [value]); + const isOnlyEmojiLineHeight = useMemo(() => StyleUtils.getOnlyEmojiLineHeight(value), [StyleUtils, value]); const inputStyleMemo = useMemo( () => [ From 8f834932baaf011e642076cd69735d9082f5f52e Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 29 May 2024 14:26:12 +0800 Subject: [PATCH 4/5] refactor the code --- src/components/Composer/index.native.tsx | 7 ++++--- src/components/Composer/index.tsx | 8 ++++---- src/styles/utils/index.ts | 6 ------ 3 files changed, 8 insertions(+), 13 deletions(-) diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx index bd35087ac5f1..2fbd635ed42e 100644 --- a/src/components/Composer/index.native.tsx +++ b/src/components/Composer/index.native.tsx @@ -10,6 +10,7 @@ import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable'; +import * as EmojiUtils from '@libs/EmojiUtils'; import type {ComposerProps} from './types'; function Composer( @@ -33,6 +34,7 @@ function Composer( ) { const textInput = useRef(null); const {isFocused, shouldResetFocus} = useResetComposerFocus(textInput); + const textContainsOnlyEmojis = useMemo(() => EmojiUtils.containsOnlyEmojis(value ?? ''), [value]); const theme = useTheme(); const markdownStyle = useMarkdownStyle(value); const styles = useThemeStyles(); @@ -64,9 +66,8 @@ function Composer( onClear(); }, [shouldClear, onClear]); - const isOnlyEmojiLineHeight = useMemo(() => StyleUtils.getOnlyEmojiLineHeight(value), [StyleUtils, value]); const maxHeightStyle = useMemo(() => StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), [StyleUtils, isComposerFullSize, maxLines]); - const composerStyle = useMemo(() => StyleSheet.flatten(style), [style]); + const composerStyle = useMemo(() => StyleSheet.flatten([style, textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {}]), [style, textContainsOnlyEmojis, styles]); return ( , ) { + const textContainsOnlyEmojis = useMemo(() => EmojiUtils.containsOnlyEmojis(value ?? ''), [value]); const theme = useTheme(); const styles = useThemeStyles(); const markdownStyle = useMarkdownStyle(value); @@ -305,8 +307,6 @@ function Composer( return styles.overflowAuto; }, [shouldContainScroll, styles.overflowAuto, styles.overflowScroll, styles.overscrollBehaviorContain, styles.overflowHidden, isScrollBarVisible]); - const isOnlyEmojiLineHeight = useMemo(() => StyleUtils.getOnlyEmojiLineHeight(value), [StyleUtils, value]); - const inputStyleMemo = useMemo( () => [ StyleSheet.flatten([style, {outline: 'none'}]), @@ -315,10 +315,10 @@ function Composer( scrollStyleMemo, StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), isComposerFullSize ? ({height: '100%', maxHeight: 'none' as DimensionValue} as TextStyle) : undefined, - isOnlyEmojiLineHeight, + textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {}, ], - [style, styles.rtlTextRenderForSafari, scrollStyleMemo, StyleUtils, maxLines, isComposerFullSize, isOnlyEmojiLineHeight], + [style, styles.rtlTextRenderForSafari, styles.onlyEmojisTextLineHeight, scrollStyleMemo, StyleUtils, maxLines, isComposerFullSize, textContainsOnlyEmojis], ); return ( diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index ab7957a0597c..cd85fd08f367 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1122,11 +1122,6 @@ function getAmountWidth(amount: string): number { return width; } -function getOnlyEmojiLineHeight(text = ''): TextStyle { - const isOnlyEmoji = EmojiUtils.containsOnlyEmojis(text); - return isOnlyEmoji ? {lineHeight: variables.fontSizeOnlyEmojisHeight} : {}; -} - const staticStyleUtils = { positioning, combineStyles, @@ -1199,7 +1194,6 @@ const staticStyleUtils = { getButtonStyleWithIcon, getCharacterWidth, getAmountWidth, - getOnlyEmojiLineHeight, getBorderRadiusStyle, }; From 2b25e7f2118e2418dd81c284a594513859ee2fc7 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 29 May 2024 14:27:59 +0800 Subject: [PATCH 5/5] remove unused import --- src/styles/utils/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index cd85fd08f367..abd479e6d79d 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -5,7 +5,6 @@ import type {EdgeInsets} from 'react-native-safe-area-context'; import type {ValueOf} from 'type-fest'; import type ImageSVGProps from '@components/ImageSVG/types'; import * as Browser from '@libs/Browser'; -import * as EmojiUtils from '@libs/EmojiUtils'; import * as UserUtils from '@libs/UserUtils'; // eslint-disable-next-line no-restricted-imports import {defaultTheme} from '@styles/theme';