Skip to content

Align inline icons with text in Android LHN #42801

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
iwiznia merged 16 commits into from
Jun 14, 2024
Merged

Align inline icons with text in Android LHN #42801

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
ef67dad
Align inline icons with text in Android LHN
ShridharGoel May 29, 2024
81f47de
Update
ShridharGoel May 30, 2024
b37cc70
Update
ShridharGoel May 31, 2024
5212792
Merge branch 'main' of https://github.com/Expensify/App into magic-lhn
ShridharGoel May 31, 2024
49006c9
Update
ShridharGoel May 31, 2024
1bd5fa1
Update
ShridharGoel Jun 1, 2024
33b2b1f
Lint
ShridharGoel Jun 1, 2024
7f99584
Update
ShridharGoel Jun 1, 2024
0f7b013
Merge branch 'main' of https://github.com/Expensify/App into magic-lhn
ShridharGoel Jun 3, 2024
9a56087
Update
ShridharGoel Jun 3, 2024
b5ccc54
Update LHNOptionsList.tsx
ShridharGoel Jun 4, 2024
e307c86
Update TextBlock.tsx
ShridharGoel Jun 4, 2024
a72b931
Update
ShridharGoel Jun 4, 2024
fdfe029
Merge branch 'main' of https://github.com/Expensify/App into magic-lhn
ShridharGoel Jun 4, 2024
95643f6
Update TextBlock.tsx
ShridharGoel Jun 12, 2024
b3523c9
Lint fix
ShridharGoel Jun 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 45 additions & 29 deletions src/components/LHNOptionsList/LHNOptionsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +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 Text from '@components/Text';
import TextBlock from '@components/TextBlock';
import useLocalize from '@hooks/useLocalize';
import usePermissions from '@hooks/usePermissions';
import usePrevious from '@hooks/usePrevious';
Expand Down Expand Up @@ -69,36 +69,52 @@ function LHNOptionsList({

const emptyLHNSubtitle = useMemo(
() => (
<View>
<Text
color={theme.placeholderText}
style={[styles.textAlignCenter]}
>
{translate('common.emptyLHN.subtitleText1')}
<Icon
src={Expensicons.MagnifyingGlass}
width={variables.emptyLHNIconWidth}
height={variables.emptyLHNIconHeight}
small
inline
fill={theme.icon}
additionalStyles={styles.alignItemsCenter}
/>
{translate('common.emptyLHN.subtitleText2')}
<Icon
src={Expensicons.Plus}
width={variables.emptyLHNIconWidth}
height={variables.emptyLHNIconHeight}
small
inline
fill={theme.icon}
additionalStyles={styles.alignItemsCenter}
/>
{translate('common.emptyLHN.subtitleText3')}
</Text>
<View style={[styles.alignItemsCenter, styles.flexRow, styles.justifyContentCenter, styles.flexWrap, styles.textAlignCenter]}>
<TextBlock
color={theme.textSupporting}
textStyles={[styles.textAlignCenter, styles.textNormal]}
text={translate('common.emptyLHN.subtitleText1')}
/>
<Icon
src={Expensicons.MagnifyingGlass}
width={variables.emptyLHNIconWidth}
height={variables.emptyLHNIconHeight}
fill={theme.icon}
small
additionalStyles={styles.mh1}
/>
<TextBlock
color={theme.textSupporting}
textStyles={[styles.textAlignCenter, styles.textNormal]}
text={translate('common.emptyLHN.subtitleText2')}
/>
<Icon
src={Expensicons.Plus}
width={variables.emptyLHNIconWidth}
height={variables.emptyLHNIconHeight}
fill={theme.icon}
small
additionalStyles={styles.mh1}
/>
<TextBlock
color={theme.textSupporting}
textStyles={[styles.textAlignCenter, styles.textNormal]}
text={translate('common.emptyLHN.subtitleText3')}
/>
</View>
),
[theme, styles.alignItemsCenter, styles.textAlignCenter, translate],
[
styles.alignItemsCenter,
styles.flexRow,
styles.justifyContentCenter,
styles.flexWrap,
styles.textAlignCenter,
styles.mh1,
theme.icon,
theme.textSupporting,
styles.textNormal,
translate,
],
);

/**
Expand Down
39 changes: 39 additions & 0 deletions src/components/TextBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/**
* 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';

Copy link
Copy Markdown
Contributor

@iwiznia iwiznia Jun 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add a description per:

The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory

type TextBlockProps = {
/** The color of the text */
color?: string;

/** Styles to apply to each text word */
textStyles?: StyleProp<TextStyle>;

/** The full text to be split into words */
text: string;
};

function TextBlock({color, textStyles, text}: TextBlockProps) {
const words = useMemo(() => text.match(/(\S+\s*)/g) ?? [], [text]);

return (
<>
{words.map((word) => (
<Text
color={color}
style={textStyles}
>
{word}
</Text>
))}
</>
);
}

TextBlock.displayName = 'TextBlock';

export default memo(TextBlock);