From 7d2a8567420ad12a839ea90d0067cc04a2c7591d Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Tue, 21 Feb 2023 19:20:04 +0500 Subject: [PATCH 1/4] feat: added conditional styles --- src/components/LHNOptionsList/OptionRowLHN.js | 5 +++-- src/components/LHNOptionsList/styles.js | 10 ++++++++++ src/components/LHNOptionsList/styles.native.js | 10 ++++++++++ 3 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 src/components/LHNOptionsList/styles.js create mode 100644 src/components/LHNOptionsList/styles.native.js diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index c57d51d29eb2..d47dc41326f8 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -6,6 +6,7 @@ import { View, StyleSheet, } from 'react-native'; +import * as localStyles from './styles'; import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; import Icon from '../Icon'; @@ -72,10 +73,10 @@ const OptionRowLHN = (props) => { ? [styles.ml1, StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.icon, 0.5)] : [styles.ml1]; const alternateTextStyle = StyleUtils.combineStyles(props.viewMode === CONST.OPTION_MODE.COMPACT - ? [textStyle, styles.optionAlternateText, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2] + ? [textStyle, localStyles.compactAlternateTextStyle, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2] : [textStyle, styles.optionAlternateText, styles.textLabelSupporting], props.style); const contentContainerStyles = props.viewMode === CONST.OPTION_MODE.COMPACT - ? [styles.flex1, styles.flexRow, styles.overflowHidden, styles.alignItemsCenter] + ? [styles.flex1, styles.flexRow, styles.overflowHidden, localStyles.compactContentContainerStyles] : [styles.flex1]; const sidebarInnerRowStyle = StyleSheet.flatten(props.viewMode === CONST.OPTION_MODE.COMPACT ? [ styles.chatLinkRowPressable, diff --git a/src/components/LHNOptionsList/styles.js b/src/components/LHNOptionsList/styles.js new file mode 100644 index 000000000000..e1447090b061 --- /dev/null +++ b/src/components/LHNOptionsList/styles.js @@ -0,0 +1,10 @@ +import styles from '../../styles/styles'; + +const compactAlternateTextStyle = styles.alternateTextStyle; + +const compactContentContainerStyles = styles.alignItemsBaseline; + +export { + compactAlternateTextStyle, + compactContentContainerStyles, +}; diff --git a/src/components/LHNOptionsList/styles.native.js b/src/components/LHNOptionsList/styles.native.js new file mode 100644 index 000000000000..edb205165a26 --- /dev/null +++ b/src/components/LHNOptionsList/styles.native.js @@ -0,0 +1,10 @@ +import styles from '../../styles/styles'; + +const compactAlternateTextStyle = {}; + +const compactContentContainerStyles = styles.alignItemsCenter; + +export { + compactAlternateTextStyle, + compactContentContainerStyles, +}; From 97b68483cfd75020869c1ce77609f1cba657549e Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Wed, 22 Feb 2023 18:59:29 +0500 Subject: [PATCH 2/4] fix(14148): refactored style location --- src/components/LHNOptionsList/OptionRowLHN.js | 2 +- src/components/LHNOptionsList/styles.native.js | 10 ---------- .../getOptionRowStyles/index.js} | 2 +- src/styles/getOptionRowStyles/index.native.js | 18 ++++++++++++++++++ 4 files changed, 20 insertions(+), 12 deletions(-) delete mode 100644 src/components/LHNOptionsList/styles.native.js rename src/{components/LHNOptionsList/styles.js => styles/getOptionRowStyles/index.js} (83%) create mode 100644 src/styles/getOptionRowStyles/index.native.js diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index d47dc41326f8..03764084e04d 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -6,7 +6,7 @@ import { View, StyleSheet, } from 'react-native'; -import * as localStyles from './styles'; +import * as localStyles from '../../styles/getOptionRowStyles'; import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; import Icon from '../Icon'; diff --git a/src/components/LHNOptionsList/styles.native.js b/src/components/LHNOptionsList/styles.native.js deleted file mode 100644 index edb205165a26..000000000000 --- a/src/components/LHNOptionsList/styles.native.js +++ /dev/null @@ -1,10 +0,0 @@ -import styles from '../../styles/styles'; - -const compactAlternateTextStyle = {}; - -const compactContentContainerStyles = styles.alignItemsCenter; - -export { - compactAlternateTextStyle, - compactContentContainerStyles, -}; diff --git a/src/components/LHNOptionsList/styles.js b/src/styles/getOptionRowStyles/index.js similarity index 83% rename from src/components/LHNOptionsList/styles.js rename to src/styles/getOptionRowStyles/index.js index e1447090b061..41f43e2620d6 100644 --- a/src/components/LHNOptionsList/styles.js +++ b/src/styles/getOptionRowStyles/index.js @@ -1,4 +1,4 @@ -import styles from '../../styles/styles'; +import styles from '../styles'; const compactAlternateTextStyle = styles.alternateTextStyle; diff --git a/src/styles/getOptionRowStyles/index.native.js b/src/styles/getOptionRowStyles/index.native.js new file mode 100644 index 000000000000..a3ac065c7152 --- /dev/null +++ b/src/styles/getOptionRowStyles/index.native.js @@ -0,0 +1,18 @@ +import styles from '../styles'; + +/** + * On native platforms, alignItemsBaseline does not work correctly + * in lining the items together. As such, on native platform, we're + * removing the line height of the elements in line. This causes + * the elements to be displayed in line correctly. + * https://github.com/Expensify/App/issues/14148 +*/ + +const compactAlternateTextStyle = {}; + +const compactContentContainerStyles = styles.alignItemsCenter; + +export { + compactAlternateTextStyle, + compactContentContainerStyles, +}; From e109f78266887aa2ee9b77a83a1c129711a204a9 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Wed, 22 Feb 2023 19:39:06 +0500 Subject: [PATCH 3/4] fix: handled more refactors --- src/components/LHNOptionsList/OptionRowLHN.js | 6 +++--- src/styles/{getOptionRowStyles => optionRowStyles}/index.js | 0 .../{getOptionRowStyles => optionRowStyles}/index.native.js | 0 3 files changed, 3 insertions(+), 3 deletions(-) rename src/styles/{getOptionRowStyles => optionRowStyles}/index.js (100%) rename src/styles/{getOptionRowStyles => optionRowStyles}/index.native.js (100%) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 03764084e04d..1533eb3c4aca 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -6,7 +6,7 @@ import { View, StyleSheet, } from 'react-native'; -import * as localStyles from '../../styles/getOptionRowStyles'; +import * as optionRowStyles from '../../styles/optionRowStyles'; import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; import Icon from '../Icon'; @@ -73,10 +73,10 @@ const OptionRowLHN = (props) => { ? [styles.ml1, StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.icon, 0.5)] : [styles.ml1]; const alternateTextStyle = StyleUtils.combineStyles(props.viewMode === CONST.OPTION_MODE.COMPACT - ? [textStyle, localStyles.compactAlternateTextStyle, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2] + ? [textStyle, optionRowStyles.compactAlternateTextStyle, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2] : [textStyle, styles.optionAlternateText, styles.textLabelSupporting], props.style); const contentContainerStyles = props.viewMode === CONST.OPTION_MODE.COMPACT - ? [styles.flex1, styles.flexRow, styles.overflowHidden, localStyles.compactContentContainerStyles] + ? [styles.flex1, styles.flexRow, styles.overflowHidden, optionRowStyles.compactContentContainerStyles] : [styles.flex1]; const sidebarInnerRowStyle = StyleSheet.flatten(props.viewMode === CONST.OPTION_MODE.COMPACT ? [ styles.chatLinkRowPressable, diff --git a/src/styles/getOptionRowStyles/index.js b/src/styles/optionRowStyles/index.js similarity index 100% rename from src/styles/getOptionRowStyles/index.js rename to src/styles/optionRowStyles/index.js diff --git a/src/styles/getOptionRowStyles/index.native.js b/src/styles/optionRowStyles/index.native.js similarity index 100% rename from src/styles/getOptionRowStyles/index.native.js rename to src/styles/optionRowStyles/index.native.js From 9cab69d79c0c6bd84f4d8e0b2b460dbc221cdf5e Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Fri, 3 Mar 2023 13:58:06 +0500 Subject: [PATCH 4/4] fix: removed native styles for compact alternate text --- src/components/LHNOptionsList/OptionRowLHN.js | 2 +- src/styles/optionRowStyles/index.js | 4 +--- src/styles/optionRowStyles/index.native.js | 7 ++----- 3 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 1533eb3c4aca..5352e80db7f8 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -73,7 +73,7 @@ const OptionRowLHN = (props) => { ? [styles.ml1, StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.icon, 0.5)] : [styles.ml1]; const alternateTextStyle = StyleUtils.combineStyles(props.viewMode === CONST.OPTION_MODE.COMPACT - ? [textStyle, optionRowStyles.compactAlternateTextStyle, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2] + ? [textStyle, styles.optionAlternateText, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2] : [textStyle, styles.optionAlternateText, styles.textLabelSupporting], props.style); const contentContainerStyles = props.viewMode === CONST.OPTION_MODE.COMPACT ? [styles.flex1, styles.flexRow, styles.overflowHidden, optionRowStyles.compactContentContainerStyles] diff --git a/src/styles/optionRowStyles/index.js b/src/styles/optionRowStyles/index.js index 41f43e2620d6..2bef2a0cd094 100644 --- a/src/styles/optionRowStyles/index.js +++ b/src/styles/optionRowStyles/index.js @@ -1,10 +1,8 @@ import styles from '../styles'; -const compactAlternateTextStyle = styles.alternateTextStyle; - const compactContentContainerStyles = styles.alignItemsBaseline; export { - compactAlternateTextStyle, + // eslint-disable-next-line import/prefer-default-export compactContentContainerStyles, }; diff --git a/src/styles/optionRowStyles/index.native.js b/src/styles/optionRowStyles/index.native.js index a3ac065c7152..2ffeca3c419d 100644 --- a/src/styles/optionRowStyles/index.native.js +++ b/src/styles/optionRowStyles/index.native.js @@ -3,16 +3,13 @@ import styles from '../styles'; /** * On native platforms, alignItemsBaseline does not work correctly * in lining the items together. As such, on native platform, we're - * removing the line height of the elements in line. This causes - * the elements to be displayed in line correctly. + * keeping compactContentContainerStyles as it is. * https://github.com/Expensify/App/issues/14148 */ -const compactAlternateTextStyle = {}; - const compactContentContainerStyles = styles.alignItemsCenter; export { - compactAlternateTextStyle, + // eslint-disable-next-line import/prefer-default-export compactContentContainerStyles, };