From 4a167a5903294341b5321f74c314c5bc9b104b27 Mon Sep 17 00:00:00 2001 From: Danut Gavrus Date: Wed, 30 Aug 2023 14:37:05 +0300 Subject: [PATCH 01/14] [24321] Large amounts are no longer cut off on smaller widths. --- .../ReportActionItem/MoneyRequestPreview.js | 31 ++++++++++++++++++- src/styles/styles.js | 7 +++++ 2 files changed, 37 insertions(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js index 1fb611691fbb..3791518ac531 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview.js +++ b/src/components/ReportActionItem/MoneyRequestPreview.js @@ -34,6 +34,8 @@ import PressableWithFeedback from '../Pressable/PressableWithoutFeedback'; import * as ReceiptUtils from '../../libs/ReceiptUtils'; import ReportActionItemImages from './ReportActionItemImages'; import transactionPropTypes from '../transactionPropTypes'; +import variables from '../../styles/variables'; +import useWindowDimensions from '../../hooks/useWindowDimensions'; const propTypes = { /** The active IOUReport, used for Onyx subscription */ @@ -134,6 +136,9 @@ function MoneyRequestPreview(props) { if (_.isEmpty(props.iouReport) && !props.isBillSplit) { return null; } + + const {isSmallScreenWidth, windowWidth} = useWindowDimensions(); + const sessionAccountID = lodashGet(props.session, 'accountID', null); const managerID = props.iouReport.managerID || ''; const ownerAccountID = props.iouReport.ownerAccountID || ''; @@ -159,6 +164,22 @@ function MoneyRequestPreview(props) { description = props.transaction.merchant; } + // Prevents large amounts from being cropped on small screens + const getFontSizeToSubstract = () => { + let toSubstract = 0; + if (isSmallScreenWidth) { + const widthDifference = variables.mobileResponsiveWidthBreakpoint - windowWidth; + if (widthDifference > 450) toSubstract = 9; + else if (widthDifference > 400) toSubstract = 6; + else if (widthDifference > 350) toSubstract = 2; + } + + // requestAmount also includes digits after ".", so "10000.00" qualifies. + if (requestAmount >= 1000000) toSubstract += 2; + + return toSubstract; + }; + const getSettledMessage = () => { switch (lodashGet(props.action, 'originalMessage.paymentType', '')) { case CONST.IOU.PAYMENT_TYPE.PAYPAL_ME: @@ -253,7 +274,15 @@ function MoneyRequestPreview(props) { - {getDisplayAmountText()} + + {getDisplayAmountText()} + {ReportUtils.isSettled(props.iouReport.reportID) && !props.isBillSplit && ( Date: Wed, 30 Aug 2023 15:01:35 +0300 Subject: [PATCH 02/14] Small adjustments. --- src/components/ReportActionItem/MoneyRequestPreview.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js index 3791518ac531..c83742ce6543 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview.js +++ b/src/components/ReportActionItem/MoneyRequestPreview.js @@ -174,8 +174,8 @@ function MoneyRequestPreview(props) { else if (widthDifference > 350) toSubstract = 2; } - // requestAmount also includes digits after ".", so "10000.00" qualifies. - if (requestAmount >= 1000000) toSubstract += 2; + // requestAmount also includes digits after ".", so "1,000,000.00" qualifies. + if (requestAmount >= 100000000) toSubstract += 2; return toSubstract; }; @@ -279,7 +279,7 @@ function MoneyRequestPreview(props) { styles.moneyRequestPreviewAmount, StyleUtils.getFontSizeStyle(variables.fontSizeXLarge - getFontSizeToSubstract()), ]} - maxNumberOfLines={2} + maxNumberOfLines={3} > {getDisplayAmountText()} From a985412d8f1284ea43ec9abec52a93c5a09f0b02 Mon Sep 17 00:00:00 2001 From: Danut Gavrus Date: Wed, 30 Aug 2023 15:57:36 +0300 Subject: [PATCH 03/14] Also reduced the lineHeight. --- android/settings.gradle | 9 --------- src/components/ReportActionItem/MoneyRequestPreview.js | 9 +++++---- src/styles/styles.js | 1 - 3 files changed, 5 insertions(+), 14 deletions(-) diff --git a/android/settings.gradle b/android/settings.gradle index c2bb3db7845a..680dfbc32521 100644 --- a/android/settings.gradle +++ b/android/settings.gradle @@ -16,12 +16,3 @@ project(':react-native-dev-menu').projectDir = new File(rootProject.projectDir, apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) include ':app' includeBuild('../node_modules/@react-native/gradle-plugin') - -includeBuild('../node_modules/react-native') { - dependencySubstitution { - substitute(module("com.facebook.react:react-android")).using(project(":packages:react-native:ReactAndroid")) - substitute(module("com.facebook.react:react-native")).using(project(":packages:react-native:ReactAndroid")) - substitute(module("com.facebook.react:hermes-android")).using(project(":packages:react-native:ReactAndroid:hermes-engine")) - substitute(module("com.facebook.react:hermes-engine")).using(project(":packages:react-native:ReactAndroid:hermes-engine")) - } -} diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js index c83742ce6543..e9c112004640 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview.js +++ b/src/components/ReportActionItem/MoneyRequestPreview.js @@ -164,8 +164,8 @@ function MoneyRequestPreview(props) { description = props.transaction.merchant; } - // Prevents large amounts from being cropped on small screens - const getFontSizeToSubstract = () => { + // Prevents large amounts from being cut off on small screen widths. + const getFontSizeAndLineHeightToSubtract = () => { let toSubstract = 0; if (isSmallScreenWidth) { const widthDifference = variables.mobileResponsiveWidthBreakpoint - windowWidth; @@ -176,7 +176,7 @@ function MoneyRequestPreview(props) { // requestAmount also includes digits after ".", so "1,000,000.00" qualifies. if (requestAmount >= 100000000) toSubstract += 2; - + return toSubstract; }; @@ -277,7 +277,8 @@ function MoneyRequestPreview(props) { diff --git a/src/styles/styles.js b/src/styles/styles.js index 0415024617ae..1218a06b2587 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2685,7 +2685,6 @@ const styles = { ...headlineFont, ...whiteSpace.preWrap, color: themeColors.heading, - lineHeight: variables.lineHeightXXLarge, }, defaultCheckmarkWrapper: { From f4f17b3d3abb56d1549635ac47d78ac17c49441c Mon Sep 17 00:00:00 2001 From: Danut Gavrus Date: Wed, 30 Aug 2023 15:59:34 +0300 Subject: [PATCH 04/14] Restore settings gradle file changes which should have remaned only on the local device. --- android/settings.gradle | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/android/settings.gradle b/android/settings.gradle index 680dfbc32521..c2bb3db7845a 100644 --- a/android/settings.gradle +++ b/android/settings.gradle @@ -16,3 +16,12 @@ project(':react-native-dev-menu').projectDir = new File(rootProject.projectDir, apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) include ':app' includeBuild('../node_modules/@react-native/gradle-plugin') + +includeBuild('../node_modules/react-native') { + dependencySubstitution { + substitute(module("com.facebook.react:react-android")).using(project(":packages:react-native:ReactAndroid")) + substitute(module("com.facebook.react:react-native")).using(project(":packages:react-native:ReactAndroid")) + substitute(module("com.facebook.react:hermes-android")).using(project(":packages:react-native:ReactAndroid:hermes-engine")) + substitute(module("com.facebook.react:hermes-engine")).using(project(":packages:react-native:ReactAndroid:hermes-engine")) + } +} From 11c73f0d47c0177f596dc4d5b3ea70c8a8ec0dd0 Mon Sep 17 00:00:00 2001 From: Danut Gavrus Date: Wed, 30 Aug 2023 16:04:43 +0300 Subject: [PATCH 05/14] Fix lint: useWindowDimensions is called conditionally. --- src/components/ReportActionItem/MoneyRequestPreview.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js index e9c112004640..05cee7c28d89 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview.js +++ b/src/components/ReportActionItem/MoneyRequestPreview.js @@ -133,12 +133,12 @@ const defaultProps = { }; function MoneyRequestPreview(props) { + const {isSmallScreenWidth, windowWidth} = useWindowDimensions(); + if (_.isEmpty(props.iouReport) && !props.isBillSplit) { return null; } - const {isSmallScreenWidth, windowWidth} = useWindowDimensions(); - const sessionAccountID = lodashGet(props.session, 'accountID', null); const managerID = props.iouReport.managerID || ''; const ownerAccountID = props.iouReport.ownerAccountID || ''; From f3b209dccf0a701ae0ca553cbce6b1dde7fa9488 Mon Sep 17 00:00:00 2001 From: Danut Gavrus Date: Wed, 30 Aug 2023 16:06:25 +0300 Subject: [PATCH 06/14] Fixed spelling mistake. --- .../ReportActionItem/MoneyRequestPreview.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js index 05cee7c28d89..9df3ccb06428 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview.js +++ b/src/components/ReportActionItem/MoneyRequestPreview.js @@ -166,18 +166,18 @@ function MoneyRequestPreview(props) { // Prevents large amounts from being cut off on small screen widths. const getFontSizeAndLineHeightToSubtract = () => { - let toSubstract = 0; + let toSubtract = 0; if (isSmallScreenWidth) { const widthDifference = variables.mobileResponsiveWidthBreakpoint - windowWidth; - if (widthDifference > 450) toSubstract = 9; - else if (widthDifference > 400) toSubstract = 6; - else if (widthDifference > 350) toSubstract = 2; + if (widthDifference > 450) toSubtract = 9; + else if (widthDifference > 400) toSubtract = 6; + else if (widthDifference > 350) toSubtract = 2; } // requestAmount also includes digits after ".", so "1,000,000.00" qualifies. - if (requestAmount >= 100000000) toSubstract += 2; + if (requestAmount >= 100000000) toSubtract += 2; - return toSubstract; + return toSubtract; }; const getSettledMessage = () => { From eba1a8c9aa8e4bb7aa73329592d64becc48fcbc1 Mon Sep 17 00:00:00 2001 From: Danut Gavrus Date: Wed, 30 Aug 2023 17:45:54 +0300 Subject: [PATCH 07/14] Moved method to StyleUtils for future use. --- .../ReportActionItem/MoneyRequestPreview.js | 20 +------------ src/styles/StyleUtils.js | 30 +++++++++++++++++++ 2 files changed, 31 insertions(+), 19 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js index 9df3ccb06428..fa16f0761bc8 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview.js +++ b/src/components/ReportActionItem/MoneyRequestPreview.js @@ -164,22 +164,6 @@ function MoneyRequestPreview(props) { description = props.transaction.merchant; } - // Prevents large amounts from being cut off on small screen widths. - const getFontSizeAndLineHeightToSubtract = () => { - let toSubtract = 0; - if (isSmallScreenWidth) { - const widthDifference = variables.mobileResponsiveWidthBreakpoint - windowWidth; - if (widthDifference > 450) toSubtract = 9; - else if (widthDifference > 400) toSubtract = 6; - else if (widthDifference > 350) toSubtract = 2; - } - - // requestAmount also includes digits after ".", so "1,000,000.00" qualifies. - if (requestAmount >= 100000000) toSubtract += 2; - - return toSubtract; - }; - const getSettledMessage = () => { switch (lodashGet(props.action, 'originalMessage.paymentType', '')) { case CONST.IOU.PAYMENT_TYPE.PAYPAL_ME: @@ -277,10 +261,8 @@ function MoneyRequestPreview(props) { {getDisplayAmountText()} diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 9dcf954e84fd..6b232f54257e 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -1329,6 +1329,35 @@ function getDropDownButtonHeight(buttonSize) { }; } +/** + * Returns fitting fontSize and lineHeight values in order to prevent large amounts from being cut off on small screen widths. + * + * @param {Number} baseFontSize + * @param {Number} baseLineHeight + * @param {Boolean} isSmallScreenWidth + * @param {Number} windowWidth + * @param {Number} requestAmount + * @returns {Object} + */ +function getAmountFontSizeAndLineHeight(baseFontSize, baseLineHeight, isSmallScreenWidth, windowWidth, requestAmount) { + let toSubtract = 0; + + if (isSmallScreenWidth) { + const widthDifference = variables.mobileResponsiveWidthBreakpoint - windowWidth; + if (widthDifference > 350) toSubtract = 2; + if (widthDifference > 400) toSubtract = 6; + if (widthDifference > 450) toSubtract = 9; + } + + // requestAmount also includes digits after ".", so "1,000,000.00" qualifies. + if (requestAmount >= 100000000) toSubtract += 2; + + return { + fontSize: baseFontSize - toSubtract, + lineHeight: baseLineHeight - toSubtract, + }; +}; + export { getAvatarSize, getAvatarWidthStyle, @@ -1404,4 +1433,5 @@ export { getDisabledLinkStyles, getCheckboxContainerStyle, getDropDownButtonHeight, + getAmountFontSizeAndLineHeight }; From ff2551d101a6e824e760ecbd0e102c043a6d6dad Mon Sep 17 00:00:00 2001 From: Danut Gavrus Date: Wed, 30 Aug 2023 17:54:52 +0300 Subject: [PATCH 08/14] Run prettier. --- src/styles/StyleUtils.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 6b232f54257e..15d1128a4a90 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -1356,7 +1356,7 @@ function getAmountFontSizeAndLineHeight(baseFontSize, baseLineHeight, isSmallScr fontSize: baseFontSize - toSubtract, lineHeight: baseLineHeight - toSubtract, }; -}; +} export { getAvatarSize, @@ -1433,5 +1433,5 @@ export { getDisabledLinkStyles, getCheckboxContainerStyle, getDropDownButtonHeight, - getAmountFontSizeAndLineHeight + getAmountFontSizeAndLineHeight, }; From 0a959387b3b0ff3d78c7196dcfc3dae487de24a1 Mon Sep 17 00:00:00 2001 From: Danut Gavrus Date: Wed, 30 Aug 2023 18:17:52 +0300 Subject: [PATCH 09/14] Make sure the amount can not overlap the avatar icons. --- src/components/ReportActionItem/MoneyRequestPreview.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js index fa16f0761bc8..be46d082b799 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview.js +++ b/src/components/ReportActionItem/MoneyRequestPreview.js @@ -263,6 +263,7 @@ function MoneyRequestPreview(props) { styles.moneyRequestPreviewAmount, StyleUtils.getAmountFontSizeAndLineHeight(variables.fontSizeXLarge, variables.lineHeightXXLarge, isSmallScreenWidth, windowWidth, requestAmount), ]} + numberOfLines={1} > {getDisplayAmountText()} From a0134062d25ed1e8797b8ac2035fabcced97d938 Mon Sep 17 00:00:00 2001 From: Danut Gavrus Date: Wed, 30 Aug 2023 19:04:50 +0300 Subject: [PATCH 10/14] Replaced if conditions with a range switch. --- src/styles/StyleUtils.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 15d1128a4a90..88aa72c89843 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -1344,9 +1344,17 @@ function getAmountFontSizeAndLineHeight(baseFontSize, baseLineHeight, isSmallScr if (isSmallScreenWidth) { const widthDifference = variables.mobileResponsiveWidthBreakpoint - windowWidth; - if (widthDifference > 350) toSubtract = 2; - if (widthDifference > 400) toSubtract = 6; - if (widthDifference > 450) toSubtract = 9; + switch (true) { + case widthDifference > 450: + toSubtract = 9; + break; + case widthDifference > 400: + toSubtract = 6; + break; + case widthDifference > 350: + toSubtract = 2; + break; + } } // requestAmount also includes digits after ".", so "1,000,000.00" qualifies. From c87eb0816ad103473301806ed90b284a1bf480f3 Mon Sep 17 00:00:00 2001 From: Danut Gavrus Date: Wed, 30 Aug 2023 19:07:57 +0300 Subject: [PATCH 11/14] Moved condition higer in order to make it more clear. --- src/styles/StyleUtils.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 88aa72c89843..4d724c256419 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -1342,24 +1342,24 @@ function getDropDownButtonHeight(buttonSize) { function getAmountFontSizeAndLineHeight(baseFontSize, baseLineHeight, isSmallScreenWidth, windowWidth, requestAmount) { let toSubtract = 0; + // requestAmount also includes digits after ".", so "1,000,000.00" qualifies. + if (requestAmount >= 100000000) toSubtract = 2; + if (isSmallScreenWidth) { const widthDifference = variables.mobileResponsiveWidthBreakpoint - windowWidth; switch (true) { case widthDifference > 450: - toSubtract = 9; + toSubtract += 9; break; case widthDifference > 400: - toSubtract = 6; + toSubtract += 6; break; case widthDifference > 350: - toSubtract = 2; + toSubtract += 2; break; } } - // requestAmount also includes digits after ".", so "1,000,000.00" qualifies. - if (requestAmount >= 100000000) toSubtract += 2; - return { fontSize: baseFontSize - toSubtract, lineHeight: baseLineHeight - toSubtract, From c56712a85aec5ea60756bc911068174b26efcd9a Mon Sep 17 00:00:00 2001 From: Danut Gavrus Date: Wed, 30 Aug 2023 19:20:54 +0300 Subject: [PATCH 12/14] Fix lint error. --- src/styles/StyleUtils.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 4d724c256419..3cd1af8fef16 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -1357,6 +1357,8 @@ function getAmountFontSizeAndLineHeight(baseFontSize, baseLineHeight, isSmallScr case widthDifference > 350: toSubtract += 2; break; + default: + break; } } From 850a1ca8ba56a371e85707a146e12a9ed4056b8c Mon Sep 17 00:00:00 2001 From: Danut Gavrus Date: Mon, 4 Sep 2023 15:38:54 +0300 Subject: [PATCH 13/14] Updated sizes calculations. --- .../ReportActionItem/MoneyRequestPreview.js | 3 ++- src/styles/StyleUtils.js | 12 ++++-------- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js index f9dcfe55638f..9fd093724937 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview.js +++ b/src/components/ReportActionItem/MoneyRequestPreview.js @@ -32,6 +32,7 @@ import PressableWithFeedback from '../Pressable/PressableWithoutFeedback'; import * as ReceiptUtils from '../../libs/ReceiptUtils'; import ReportActionItemImages from './ReportActionItemImages'; import transactionPropTypes from '../transactionPropTypes'; +import * as StyleUtils from '../../styles/StyleUtils'; import colors from '../../styles/colors'; import variables from '../../styles/variables'; import useWindowDimensions from '../../hooks/useWindowDimensions'; @@ -267,7 +268,7 @@ function MoneyRequestPreview(props) { diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 5a29cce9b622..9fe3fbd973b8 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -1347,26 +1347,22 @@ function getDropDownButtonHeight(buttonSize) { * @param {Number} baseLineHeight * @param {Boolean} isSmallScreenWidth * @param {Number} windowWidth - * @param {Number} requestAmount * @returns {Object} */ -function getAmountFontSizeAndLineHeight(baseFontSize, baseLineHeight, isSmallScreenWidth, windowWidth, requestAmount) { +function getAmountFontSizeAndLineHeight(baseFontSize, baseLineHeight, isSmallScreenWidth, windowWidth) { let toSubtract = 0; - // requestAmount also includes digits after ".", so "1,000,000.00" qualifies. - if (requestAmount >= 100000000) toSubtract = 2; - if (isSmallScreenWidth) { const widthDifference = variables.mobileResponsiveWidthBreakpoint - windowWidth; switch (true) { case widthDifference > 450: - toSubtract += 9; + toSubtract = 11; break; case widthDifference > 400: - toSubtract += 6; + toSubtract = 8; break; case widthDifference > 350: - toSubtract += 2; + toSubtract = 4; break; default: break; From fe584b88a19068e1dc6aacf2299c4c189e0cc4b9 Mon Sep 17 00:00:00 2001 From: Danut Gavrus Date: Tue, 5 Sep 2023 17:40:21 +0300 Subject: [PATCH 14/14] updated to ts --- src/styles/StyleUtils.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts index 88acb3591508..28367299ab29 100644 --- a/src/styles/StyleUtils.ts +++ b/src/styles/StyleUtils.ts @@ -1182,14 +1182,8 @@ function getDropDownButtonHeight(buttonSize: ButtonSizeValue): ViewStyle | CSSPr /** * Returns fitting fontSize and lineHeight values in order to prevent large amounts from being cut off on small screen widths. - * - * @param {Number} baseFontSize - * @param {Number} baseLineHeight - * @param {Boolean} isSmallScreenWidth - * @param {Number} windowWidth - * @returns {Object} */ -function getAmountFontSizeAndLineHeight(baseFontSize, baseLineHeight, isSmallScreenWidth, windowWidth) { +function getAmountFontSizeAndLineHeight(baseFontSize: number, baseLineHeight: number, isSmallScreenWidth: boolean, windowWidth: number): ViewStyle | CSSProperties { let toSubtract = 0; if (isSmallScreenWidth) {