From b17b286567e2d11634a3433889b0596bcb064d9c Mon Sep 17 00:00:00 2001 From: Mateusz Rajski Date: Wed, 24 Jan 2024 18:23:42 +0100 Subject: [PATCH 1/7] Implement progress bar --- .../headerWithBackButtonPropTypes.js | 6 ++++++ src/components/HeaderWithBackButton/index.tsx | 15 ++++++++++++++- src/components/HeaderWithBackButton/types.ts | 6 ++++++ src/styles/index.ts | 15 +++++++++++++++ src/styles/theme/themes/dark.ts | 2 ++ src/styles/theme/themes/light.ts | 2 ++ src/styles/theme/types.ts | 2 ++ 7 files changed, 47 insertions(+), 1 deletion(-) diff --git a/src/components/HeaderWithBackButton/headerWithBackButtonPropTypes.js b/src/components/HeaderWithBackButton/headerWithBackButtonPropTypes.js index 2f7ac48b558b..b9f176fb43b3 100644 --- a/src/components/HeaderWithBackButton/headerWithBackButtonPropTypes.js +++ b/src/components/HeaderWithBackButton/headerWithBackButtonPropTypes.js @@ -99,6 +99,12 @@ const propTypes = { /** Whether we should overlay the 3 dots menu */ shouldOverlayDots: PropTypes.bool, + + /** Whether we should show progress bar */ + shouldShowProgressBar: PropTypes.bool, + + /** 0 - 100 number indicating current progress of the progress bar */ + progressBarPercentage: PropTypes.number, }; export default propTypes; diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index a0f24b06db7f..d917692df8e2 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -56,6 +56,8 @@ function HeaderWithBackButton({ shouldOverlay = false, singleExecution = (func) => func, shouldNavigateToTopMostReport = false, + shouldShowProgressBar = false, + progressBarPercentage = 50, }: HeaderWithBackButtonProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -65,6 +67,8 @@ function HeaderWithBackButton({ const {isKeyboardShown} = useKeyboardState(); const waitForNavigate = useWaitForNavigation(); + const progressBarStyle = [{ width: `${progressBarPercentage}%` }, styles.progressBar] + return ( + {shouldShowProgressBar && + ( + + + + ) + } {shouldShowBackButton && ( @@ -98,7 +111,7 @@ function HeaderWithBackButton({ /> - )} + )} {shouldShowAvatarWithDisplay ? ( & { /** Whether we should overlay the 3 dots menu */ shouldOverlayDots?: boolean; + + /** Whether we should show progress bar */ + shouldShowProgressBar: boolean; + + /** 0 - 100 number indicating current progress of the progress bar */ + progressBarPercentage: number; }; export type {ThreeDotsMenuItem}; diff --git a/src/styles/index.ts b/src/styles/index.ts index 9bfe407593df..371399ac5446 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4168,6 +4168,21 @@ const styles = (theme: ThemeColors) => borderColor: theme.icon, }, + progressBarWrapper: { + position: 'absolute', + width: variables.componentSizeMedium, + height: 4, + borderRadius: variables.componentBorderRadiusRounded, + backgroundColor: theme.progressBarBackground, + alignSelf: 'center', + }, + + progressBar: { + borderRadius: variables.componentBorderRadiusRounded, + height: '100%', + backgroundColor: theme.progressBarFill, + }, + colorSchemeStyle: (colorScheme: ColorScheme) => ({colorScheme}), } satisfies Styles); diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts index 98389330a6e6..80e580fa32fe 100644 --- a/src/styles/theme/themes/dark.ts +++ b/src/styles/theme/themes/dark.ts @@ -84,6 +84,8 @@ const darkTheme = { loungeAccessOverlay: colors.blue800, mapAttributionText: colors.black, white: colors.white, + progressBarBackground: colors.green800, + progressBarFill: colors.green400, // Adding a color here will animate the status bar to the right color when the screen is opened. // Note that it needs to be a screen name, not a route url. diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts index e07b74df6e7c..316d51e0e5ff 100644 --- a/src/styles/theme/themes/light.ts +++ b/src/styles/theme/themes/light.ts @@ -84,6 +84,8 @@ const lightTheme = { loungeAccessOverlay: colors.blue800, mapAttributionText: colors.black, white: colors.white, + progressBarBackground: colors.green800, + progressBarFill: colors.green400, // Adding a color here will animate the status bar to the right color when the screen is opened. // Note that it needs to be a screen name, not a route url. diff --git a/src/styles/theme/types.ts b/src/styles/theme/types.ts index 2a1bb79e2efb..712f69f10298 100644 --- a/src/styles/theme/types.ts +++ b/src/styles/theme/types.ts @@ -87,6 +87,8 @@ type ThemeColors = { loungeAccessOverlay: Color; mapAttributionText: Color; white: Color; + progressBarBackground: Color, + progressBarFill: Color, PAGE_THEMES: Record; From 26db3649608e4b2f816f4f68170fc0dbfcf2918c Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Wed, 7 Feb 2024 15:10:10 +0100 Subject: [PATCH 2/7] Render progressBar with precedence of header --- src/components/HeaderWithBackButton/index.tsx | 45 +++++++++---------- 1 file changed, 22 insertions(+), 23 deletions(-) diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index aebc05ca9717..971013a40eef 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -67,7 +67,27 @@ function HeaderWithBackButton({ const {isKeyboardShown} = useKeyboardState(); const waitForNavigate = useWaitForNavigation(); - const progressBarStyle = [{ width: `${progressBarPercentage}%` }, styles.progressBar] + let middleContent = null; + if (shouldShowProgressBar) { + middleContent = + + + + + } else if (shouldShowAvatarWithDisplay) { + middleContent = + } else { + middleContent =
; + } + return ( - {shouldShowProgressBar && - ( - - - - ) - } {shouldShowBackButton && ( @@ -111,20 +122,8 @@ function HeaderWithBackButton({ /> - )} - {shouldShowAvatarWithDisplay ? ( - - ) : ( -
)} + {middleContent} {children} {shouldShowDownloadButton && ( From b24ccd33cd545e32f2aa2bc6cf187d3c93386c30 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Wed, 7 Feb 2024 15:10:23 +0100 Subject: [PATCH 3/7] Story for progressBar --- src/stories/HeaderWithBackButton.stories.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/stories/HeaderWithBackButton.stories.js b/src/stories/HeaderWithBackButton.stories.js index eb31413de1d5..3ec2acc793e6 100644 --- a/src/stories/HeaderWithBackButton.stories.js +++ b/src/stories/HeaderWithBackButton.stories.js @@ -24,6 +24,8 @@ function Template(args) { const Default = Template.bind({}); const Attachment = Template.bind({}); const Profile = Template.bind({}); +const ProgressBar = Template.bind({}); + Default.args = { title: 'Settings', }; @@ -35,6 +37,12 @@ Profile.args = { title: 'Profile', shouldShowBackButton: true, }; +ProgressBar.args = { + title: 'ProgressBar', + shouldShowBackButton: true, + shouldShowProgressBar: true, + progressBarPercentage: 33 +}; export default story; -export {Default, Attachment, Profile}; +export {Default, Attachment, Profile, ProgressBar}; From bd959122cb3c2ad502a3790f4a1332dfdb345061 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 19 Feb 2024 10:47:57 +0100 Subject: [PATCH 4/7] Missing semicolons --- src/styles/theme/types.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/theme/types.ts b/src/styles/theme/types.ts index da388ba667c3..cdbac1ccf44a 100644 --- a/src/styles/theme/types.ts +++ b/src/styles/theme/types.ts @@ -89,8 +89,8 @@ type ThemeColors = { loungeAccessOverlay: Color; mapAttributionText: Color; white: Color; - progressBarBackground: Color, - progressBarFill: Color, + progressBarBackground: Color; + progressBarFill: Color; PAGE_THEMES: Record; From 870e9746c25f5bc55197f90a01a9a01013ed485d Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 19 Feb 2024 10:48:15 +0100 Subject: [PATCH 5/7] Drop shouldShowProgressBar --- src/components/HeaderWithBackButton/index.tsx | 40 ++++++++++--------- src/components/HeaderWithBackButton/types.ts | 5 +-- src/stories/HeaderWithBackButton.stories.js | 3 +- 3 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index 971013a40eef..a9cf43a342b3 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -56,8 +56,7 @@ function HeaderWithBackButton({ shouldOverlay = false, singleExecution = (func) => func, shouldNavigateToTopMostReport = false, - shouldShowProgressBar = false, - progressBarPercentage = 50, + progressBarPercentage, }: HeaderWithBackButtonProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -68,27 +67,32 @@ function HeaderWithBackButton({ const waitForNavigate = useWaitForNavigation(); let middleContent = null; - if (shouldShowProgressBar) { - middleContent = - - + if (progressBarPercentage) { + middleContent = ( + + + + - + ); } else if (shouldShowAvatarWithDisplay) { - middleContent = + middleContent = ( + + ); } else { - middleContent =
; + middleContent = ( +
+ ); } - return ( & { /** Whether we should overlay the 3 dots menu */ shouldOverlayDots?: boolean; - /** Whether we should show progress bar */ - shouldShowProgressBar: boolean; - /** 0 - 100 number indicating current progress of the progress bar */ - progressBarPercentage: number; + progressBarPercentage?: number; }; export type {ThreeDotsMenuItem}; diff --git a/src/stories/HeaderWithBackButton.stories.js b/src/stories/HeaderWithBackButton.stories.js index 3ec2acc793e6..c0efd292a3e5 100644 --- a/src/stories/HeaderWithBackButton.stories.js +++ b/src/stories/HeaderWithBackButton.stories.js @@ -40,8 +40,7 @@ Profile.args = { ProgressBar.args = { title: 'ProgressBar', shouldShowBackButton: true, - shouldShowProgressBar: true, - progressBarPercentage: 33 + progressBarPercentage: 33, }; export default story; From 996032430dd972315ced94aa7691a136502db49e Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 19 Feb 2024 12:57:45 +0100 Subject: [PATCH 6/7] Fix double header rendered --- src/components/HeaderWithBackButton/index.tsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index f6e2f2b4cd34..3a5d0ba8f46a 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -138,7 +138,6 @@ function HeaderWithBackButton({ )} - {middleContent} {icon && ( )} - {shouldShowAvatarWithDisplay ? ( - - ) : ( -
- )} + {middleContent} {children} {shouldShowDownloadButton && ( From 2c10017fbae440e2e377a634486c3e91ca003f9a Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 19 Feb 2024 15:42:02 +0100 Subject: [PATCH 7/7] Wrap around useMemo --- src/components/HeaderWithBackButton/index.tsx | 43 ++++++++++--------- 1 file changed, 23 insertions(+), 20 deletions(-) diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index 3a5d0ba8f46a..fe214ae5b293 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import {Keyboard, StyleSheet, View} from 'react-native'; import AvatarWithDisplayName from '@components/AvatarWithDisplayName'; import Header from '@components/Header'; @@ -71,32 +71,35 @@ function HeaderWithBackButton({ // If the icon is present, the header bar should be taller and use different font. const isCentralPaneSettings = !!icon; - let middleContent = null; - if (progressBarPercentage) { - middleContent = ( - - - + const middleContent = useMemo(() => { + if (progressBarPercentage) { + return ( + + + + - - ); - } else if (shouldShowAvatarWithDisplay) { - middleContent = ( - - ); - } else { - middleContent = ( + ); + } + + if (shouldShowAvatarWithDisplay) { + return ( + + ); + } + + return (
); - } + }, [StyleUtils, policy, progressBarPercentage, report, shouldEnableDetailPageNavigation, shouldShowAvatarWithDisplay, stepCounter, styles.progressBar, styles.progressBarWrapper, subtitle, title, titleColor, translate]); return (