From ef67dad60c342a14c2c4eee89ddb8b02195bb83c Mon Sep 17 00:00:00 2001 From: ShridharGoel <35566748+ShridharGoel@users.noreply.github.com> Date: Thu, 30 May 2024 02:12:46 +0530 Subject: [PATCH 01/13] Align inline icons with text in Android LHN --- .../LHNOptionsList/LHNOptionsList.tsx | 60 ++++++++++++------- src/styles/index.ts | 8 +++ 2 files changed, 46 insertions(+), 22 deletions(-) diff --git a/src/components/LHNOptionsList/LHNOptionsList.tsx b/src/components/LHNOptionsList/LHNOptionsList.tsx index 6405e3026b1a0..d04b400023023 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.tsx +++ b/src/components/LHNOptionsList/LHNOptionsList.tsx @@ -69,36 +69,52 @@ function LHNOptionsList({ const emptyLHNSubtitle = useMemo( () => ( - + {translate('common.emptyLHN.subtitleText1')} - + + + {translate('common.emptyLHN.subtitleText2')} - + + + {translate('common.emptyLHN.subtitleText3')} ), - [theme, styles.alignItemsCenter, styles.textAlignCenter, translate], + [styles.emptyLHNDetailsContainer, styles.mh1, styles.textAlignCenter, theme.icon, theme.placeholderText, translate], ); /** diff --git a/src/styles/index.ts b/src/styles/index.ts index 5627adb018348..0d1bac489fa0b 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4939,6 +4939,14 @@ const styles = (theme: ThemeColors) => reportListItemActionButtonMargin: { marginLeft: variables.searchTypeColumnWidth, }, + + emptyLHNDetailsContainer: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + flexWrap: 'wrap', + textAlign: 'center', + }, } satisfies Styles); type ThemeStyles = ReturnType; From 81f47de231fcd02b1dd3dc02809db7440ca9d0d8 Mon Sep 17 00:00:00 2001 From: ShridharGoel <35566748+ShridharGoel@users.noreply.github.com> Date: Thu, 30 May 2024 20:32:12 +0530 Subject: [PATCH 02/13] Update --- src/styles/index.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 0d1bac489fa0b..900954b744c49 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4941,10 +4941,10 @@ const styles = (theme: ThemeColors) => }, emptyLHNDetailsContainer: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - flexWrap: 'wrap', + ...flex.flexRow, + ...flex.alignItemsCenter, + ...flex.justifyContentCenter, + ...flex.flexWrap, textAlign: 'center', }, } satisfies Styles); From b37cc7042c25ff2e9bbbee550875b5f7c763e5d9 Mon Sep 17 00:00:00 2001 From: ShridharGoel <35566748+ShridharGoel@users.noreply.github.com> Date: Fri, 31 May 2024 12:47:50 +0530 Subject: [PATCH 03/13] Update --- .../LHNOptionsList/LHNOptionsList.tsx | 20 +++++++------------ src/styles/index.ts | 8 -------- 2 files changed, 7 insertions(+), 21 deletions(-) diff --git a/src/components/LHNOptionsList/LHNOptionsList.tsx b/src/components/LHNOptionsList/LHNOptionsList.tsx index d04b400023023..5dd606897c409 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.tsx +++ b/src/components/LHNOptionsList/LHNOptionsList.tsx @@ -69,12 +69,10 @@ function LHNOptionsList({ const emptyLHNSubtitle = useMemo( () => ( - + {translate('common.emptyLHN.subtitleText1')} @@ -88,10 +86,8 @@ function LHNOptionsList({ additionalStyles={styles.mh1} /> {translate('common.emptyLHN.subtitleText2')} @@ -105,10 +101,8 @@ function LHNOptionsList({ additionalStyles={styles.mh1} /> {translate('common.emptyLHN.subtitleText3')} diff --git a/src/styles/index.ts b/src/styles/index.ts index 900954b744c49..5627adb018348 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4939,14 +4939,6 @@ const styles = (theme: ThemeColors) => reportListItemActionButtonMargin: { marginLeft: variables.searchTypeColumnWidth, }, - - emptyLHNDetailsContainer: { - ...flex.flexRow, - ...flex.alignItemsCenter, - ...flex.justifyContentCenter, - ...flex.flexWrap, - textAlign: 'center', - }, } satisfies Styles); type ThemeStyles = ReturnType; From 49006c9d06266db51d1586ae58a3cbff2c44650b Mon Sep 17 00:00:00 2001 From: ShridharGoel <35566748+ShridharGoel@users.noreply.github.com> Date: Fri, 31 May 2024 16:18:41 +0530 Subject: [PATCH 04/13] Update --- src/components/LHNOptionsList/LHNOptionsList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LHNOptionsList/LHNOptionsList.tsx b/src/components/LHNOptionsList/LHNOptionsList.tsx index 5dd606897c409..3f3c97fec09dd 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.tsx +++ b/src/components/LHNOptionsList/LHNOptionsList.tsx @@ -108,7 +108,7 @@ function LHNOptionsList({ ), - [styles.emptyLHNDetailsContainer, styles.mh1, styles.textAlignCenter, theme.icon, theme.placeholderText, translate], + [styles.alignItemsCenter, styles.flexRow, styles.justifyContentCenter, styles.flexWrap, styles.textAlignCenter, styles.mh1, theme.icon, theme.placeholderText, translate], ); /** From 1bd5fa13e18dbf57f77215bb4d40409fb7d21d1d Mon Sep 17 00:00:00 2001 From: ShridharGoel <35566748+ShridharGoel@users.noreply.github.com> Date: Sat, 1 Jun 2024 13:34:16 +0530 Subject: [PATCH 05/13] Update --- .../LHNOptionsList/LHNOptionsList.tsx | 31 ++++++-------- src/components/TextBlock.tsx | 40 +++++++++++++++++++ 2 files changed, 53 insertions(+), 18 deletions(-) create mode 100644 src/components/TextBlock.tsx diff --git a/src/components/LHNOptionsList/LHNOptionsList.tsx b/src/components/LHNOptionsList/LHNOptionsList.tsx index 3f3c97fec09dd..edd037bd7d68c 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.tsx +++ b/src/components/LHNOptionsList/LHNOptionsList.tsx @@ -10,7 +10,6 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import LottieAnimations from '@components/LottieAnimations'; import {ScrollOffsetContext} from '@components/ScrollOffsetContextProvider'; -import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import usePermissions from '@hooks/usePermissions'; import usePrevious from '@hooks/usePrevious'; @@ -24,6 +23,7 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import OptionRowLHNData from './OptionRowLHNData'; import type {LHNOptionsListOnyxProps, LHNOptionsListProps, RenderItemProps} from './types'; +import TextBlock from "@components/TextBlock"; const keyExtractor = (item: string) => `report_${item}`; @@ -70,42 +70,37 @@ function LHNOptionsList({ const emptyLHNSubtitle = useMemo( () => ( - - {translate('common.emptyLHN.subtitleText1')} - + textStyles={[styles.textAlignCenter, styles.textNormal]} + text={translate('common.emptyLHN.subtitleText1')} + /> - - {translate('common.emptyLHN.subtitleText2')} - + textStyles={[styles.textAlignCenter, styles.textNormal]} + text={translate('common.emptyLHN.subtitleText2')} + /> - - {translate('common.emptyLHN.subtitleText3')} - + textStyles={[styles.textAlignCenter, styles.textNormal]} + text={translate('common.emptyLHN.subtitleText3')} + /> ), [styles.alignItemsCenter, styles.flexRow, styles.justifyContentCenter, styles.flexWrap, styles.textAlignCenter, styles.mh1, theme.icon, theme.placeholderText, translate], diff --git a/src/components/TextBlock.tsx b/src/components/TextBlock.tsx new file mode 100644 index 0000000000000..d9cc99e8a7384 --- /dev/null +++ b/src/components/TextBlock.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import type { StyleProp, TextStyle } from 'react-native'; +import { Text } from 'react-native'; +import useTheme from "@hooks/useTheme"; + +type TextWordProps = { + /** The color of the text */ + color?: string; + + /** Styles to apply to each text word */ + textStyles?: StyleProp; + + /** The full text to be split into words */ + text: string; +}; + +function TextWord({ color, textStyles, text }: TextWordProps) { + const theme = useTheme(); + const words = text.split(' '); + + return ( + <> + {words.map((word, index) => ( + + {word} + + ))} + + ); +} + +TextWord.displayName = 'TextWord'; + +export default TextWord; From 33b2b1fe3dfebcf4c53eabb07b71b61da51fc6d9 Mon Sep 17 00:00:00 2001 From: ShridharGoel <35566748+ShridharGoel@users.noreply.github.com> Date: Sat, 1 Jun 2024 13:46:11 +0530 Subject: [PATCH 06/13] Lint --- src/components/LHNOptionsList/LHNOptionsList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LHNOptionsList/LHNOptionsList.tsx b/src/components/LHNOptionsList/LHNOptionsList.tsx index edd037bd7d68c..80cabb9fb7613 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.tsx +++ b/src/components/LHNOptionsList/LHNOptionsList.tsx @@ -21,9 +21,9 @@ import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import TextBlock from "@components/TextBlock"; import OptionRowLHNData from './OptionRowLHNData'; import type {LHNOptionsListOnyxProps, LHNOptionsListProps, RenderItemProps} from './types'; -import TextBlock from "@components/TextBlock"; const keyExtractor = (item: string) => `report_${item}`; From 7f995841bd44c46289ef61131411931ba506d619 Mon Sep 17 00:00:00 2001 From: ShridharGoel <35566748+ShridharGoel@users.noreply.github.com> Date: Sat, 1 Jun 2024 18:21:45 +0530 Subject: [PATCH 07/13] Update --- .../LHNOptionsList/LHNOptionsList.tsx | 5 +--- src/components/TextBlock.tsx | 30 +++++++++---------- 2 files changed, 16 insertions(+), 19 deletions(-) diff --git a/src/components/LHNOptionsList/LHNOptionsList.tsx b/src/components/LHNOptionsList/LHNOptionsList.tsx index 80cabb9fb7613..05b7e150fc538 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.tsx +++ b/src/components/LHNOptionsList/LHNOptionsList.tsx @@ -10,6 +10,7 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import LottieAnimations from '@components/LottieAnimations'; import {ScrollOffsetContext} from '@components/ScrollOffsetContextProvider'; +import TextBlock from '@components/TextBlock'; import useLocalize from '@hooks/useLocalize'; import usePermissions from '@hooks/usePermissions'; import usePrevious from '@hooks/usePrevious'; @@ -21,7 +22,6 @@ import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import TextBlock from "@components/TextBlock"; import OptionRowLHNData from './OptionRowLHNData'; import type {LHNOptionsListOnyxProps, LHNOptionsListProps, RenderItemProps} from './types'; @@ -72,7 +72,6 @@ function LHNOptionsList({ diff --git a/src/components/TextBlock.tsx b/src/components/TextBlock.tsx index d9cc99e8a7384..0770bd0891cc5 100644 --- a/src/components/TextBlock.tsx +++ b/src/components/TextBlock.tsx @@ -1,9 +1,10 @@ -import React from 'react'; -import type { StyleProp, TextStyle } from 'react-native'; -import { Text } from 'react-native'; -import useTheme from "@hooks/useTheme"; +import React, {memo, useMemo} from 'react'; +import type {StyleProp, TextStyle} from 'react-native'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; +import Text from './Text'; -type TextWordProps = { +type TextBlockProps = { /** The color of the text */ color?: string; @@ -14,19 +15,18 @@ type TextWordProps = { text: string; }; -function TextWord({ color, textStyles, text }: TextWordProps) { +function TextBlock({color, textStyles, text}: TextBlockProps) { const theme = useTheme(); - const words = text.split(' '); + const styles = useThemeStyles(); + + const words = useMemo(() => text.match(/(\S+\s*)/g) ?? [], [text]); return ( <> - {words.map((word, index) => ( + {words.map((word) => ( {word} @@ -35,6 +35,6 @@ function TextWord({ color, textStyles, text }: TextWordProps) { ); } -TextWord.displayName = 'TextWord'; +TextBlock.displayName = 'TextBlock'; -export default TextWord; +export default memo(TextBlock); From 9a5608750bab8c0fded409e94637cd5d506d76eb Mon Sep 17 00:00:00 2001 From: ShridharGoel <35566748+ShridharGoel@users.noreply.github.com> Date: Tue, 4 Jun 2024 02:08:17 +0530 Subject: [PATCH 08/13] Update --- src/components/LHNOptionsList/LHNOptionsList.tsx | 9 ++++++--- src/components/TextBlock.tsx | 7 ++----- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/LHNOptionsList/LHNOptionsList.tsx b/src/components/LHNOptionsList/LHNOptionsList.tsx index 05b7e150fc538..4cac95ed9527d 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.tsx +++ b/src/components/LHNOptionsList/LHNOptionsList.tsx @@ -71,7 +71,8 @@ function LHNOptionsList({ () => ( diff --git a/src/components/TextBlock.tsx b/src/components/TextBlock.tsx index 0770bd0891cc5..5d1414d95ebae 100644 --- a/src/components/TextBlock.tsx +++ b/src/components/TextBlock.tsx @@ -16,17 +16,14 @@ type TextBlockProps = { }; function TextBlock({color, textStyles, text}: TextBlockProps) { - const theme = useTheme(); - const styles = useThemeStyles(); - const words = useMemo(() => text.match(/(\S+\s*)/g) ?? [], [text]); return ( <> {words.map((word) => ( {word} From b5ccc54e52ea634818c9ba08e4f419021f2d61a9 Mon Sep 17 00:00:00 2001 From: Shridhar Goel <35566748+ShridharGoel@users.noreply.github.com> Date: Tue, 4 Jun 2024 14:47:17 +0530 Subject: [PATCH 09/13] Update LHNOptionsList.tsx --- src/components/LHNOptionsList/LHNOptionsList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LHNOptionsList/LHNOptionsList.tsx b/src/components/LHNOptionsList/LHNOptionsList.tsx index 4cac95ed9527d..f906b8efb35b2 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.tsx +++ b/src/components/LHNOptionsList/LHNOptionsList.tsx @@ -103,7 +103,7 @@ function LHNOptionsList({ /> ), - [styles.alignItemsCenter, styles.flexRow, styles.justifyContentCenter, styles.flexWrap, styles.textAlignCenter, styles.mh1, theme.icon, theme.placeholderText, translate], + [styles.alignItemsCenter, styles.flexRow, styles.justifyContentCenter, styles.flexWrap, styles.textAlignCenter, styles.mh1, theme.icon, theme.textSupporting, styles.textNormal, translate], ); /** From e307c86e8a18df915c599c0128c2efb05bb12909 Mon Sep 17 00:00:00 2001 From: Shridhar Goel <35566748+ShridharGoel@users.noreply.github.com> Date: Tue, 4 Jun 2024 14:47:33 +0530 Subject: [PATCH 10/13] Update TextBlock.tsx --- src/components/TextBlock.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/TextBlock.tsx b/src/components/TextBlock.tsx index 5d1414d95ebae..ea7899b1c5332 100644 --- a/src/components/TextBlock.tsx +++ b/src/components/TextBlock.tsx @@ -1,7 +1,5 @@ import React, {memo, useMemo} from 'react'; import type {StyleProp, TextStyle} from 'react-native'; -import useTheme from '@hooks/useTheme'; -import useThemeStyles from '@hooks/useThemeStyles'; import Text from './Text'; type TextBlockProps = { From a72b9310fb501802316f267a223d7a546fdf9332 Mon Sep 17 00:00:00 2001 From: ShridharGoel <35566748+ShridharGoel@users.noreply.github.com> Date: Tue, 4 Jun 2024 16:22:40 +0530 Subject: [PATCH 11/13] Update --- src/components/LHNOptionsList/LHNOptionsList.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/LHNOptionsList/LHNOptionsList.tsx b/src/components/LHNOptionsList/LHNOptionsList.tsx index f906b8efb35b2..27325be54168b 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.tsx +++ b/src/components/LHNOptionsList/LHNOptionsList.tsx @@ -103,7 +103,18 @@ function LHNOptionsList({ /> ), - [styles.alignItemsCenter, styles.flexRow, styles.justifyContentCenter, styles.flexWrap, styles.textAlignCenter, styles.mh1, theme.icon, theme.textSupporting, styles.textNormal, translate], + [ + styles.alignItemsCenter, + styles.flexRow, + styles.justifyContentCenter, + styles.flexWrap, + styles.textAlignCenter, + styles.mh1, + theme.icon, + theme.textSupporting, + styles.textNormal, + translate, + ], ); /** From 95643f6e112ad68a744752f688b3f3feca6b3157 Mon Sep 17 00:00:00 2001 From: Shridhar Goel <35566748+ShridharGoel@users.noreply.github.com> Date: Wed, 12 Jun 2024 22:26:23 +0530 Subject: [PATCH 12/13] Update TextBlock.tsx --- src/components/TextBlock.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/TextBlock.tsx b/src/components/TextBlock.tsx index ea7899b1c5332..68206f218ec9c 100644 --- a/src/components/TextBlock.tsx +++ b/src/components/TextBlock.tsx @@ -1,3 +1,8 @@ +/** + * TextBlock component splits a given text into individual words and displays + * each word within a Text component. + */ + import React, {memo, useMemo} from 'react'; import type {StyleProp, TextStyle} from 'react-native'; import Text from './Text'; From b3523c9cae6d4c905247c2b20ae05df93eb072c5 Mon Sep 17 00:00:00 2001 From: ShridharGoel <35566748+ShridharGoel@users.noreply.github.com> Date: Fri, 14 Jun 2024 02:13:52 +0530 Subject: [PATCH 13/13] Lint fix --- src/components/TextBlock.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/TextBlock.tsx b/src/components/TextBlock.tsx index 68206f218ec9c..8b036f42f4cc2 100644 --- a/src/components/TextBlock.tsx +++ b/src/components/TextBlock.tsx @@ -2,7 +2,6 @@ * TextBlock component splits a given text into individual words and displays * each word within a Text component. */ - import React, {memo, useMemo} from 'react'; import type {StyleProp, TextStyle} from 'react-native'; import Text from './Text';