From 2b29ea6859e96e3d07237add75d59c1f6d68dbbb Mon Sep 17 00:00:00 2001 From: marcoskolodny Date: Thu, 22 Aug 2024 12:01:04 +0200 Subject: [PATCH 1/3] update snackbar duration prop --- .../components-in-portals-story.tsx | 8 +++++--- src/__stories__/snackbar-story.tsx | 8 ++++---- src/__tests__/snackbar-test.tsx | 14 +++++++------- src/snackbar.tsx | 10 +++++----- 4 files changed, 21 insertions(+), 19 deletions(-) diff --git a/src/__private_stories__/components-in-portals-story.tsx b/src/__private_stories__/components-in-portals-story.tsx index b2d02724b6..278669788a 100644 --- a/src/__private_stories__/components-in-portals-story.tsx +++ b/src/__private_stories__/components-in-portals-story.tsx @@ -76,7 +76,9 @@ export const Default: StoryComponent = () => { button={ openSnackbar({message: 'Snackbar', withDismiss: true, duration: Infinity})} + onPress={() => + openSnackbar({message: 'Snackbar', withDismiss: true, duration: 'PERSISTENT'}) + } aria-label="snackbar-button" > Open snackbar @@ -165,7 +167,7 @@ export const Default: StoryComponent = () => { openSnackbar({ message: 'Snackbar', withDismiss: true, - duration: Infinity, + duration: 'PERSISTENT', }) } aria-label="sheet-snackbar-button" @@ -202,7 +204,7 @@ export const Default: StoryComponent = () => { openSnackbar({ message: 'Snackbar', withDismiss: true, - duration: Infinity, + duration: 'PERSISTENT', }) } aria-label="sheet-snackbar-button" diff --git a/src/__stories__/snackbar-story.tsx b/src/__stories__/snackbar-story.tsx index 32ac196fc1..9f529dbff3 100644 --- a/src/__stories__/snackbar-story.tsx +++ b/src/__stories__/snackbar-story.tsx @@ -9,13 +9,13 @@ export default { type Args = { buttonText: string; message: string; - duration: string; + duration: 'PERSISTENT' | 'undefined'; type: React.ComponentProps['type']; withDismiss: boolean; }; export const Default: StoryComponent = ({buttonText, message, duration, type, withDismiss}) => { - const snackbarDuration = duration !== 'Default' ? +duration : undefined; + const snackbarDuration = duration === 'undefined' ? undefined : duration; const {openSnackbar} = useSnackbar(); return ( { render( - + ); expect(screen.getByText('Some message')).toBeInTheDocument(); @@ -61,7 +61,7 @@ test('Snackbar with dismiss button', async () => { message="Some message" onClose={onCloseSpy} buttonText="Action" - duration={Infinity} + duration="PERSISTENT" withDismiss /> @@ -87,7 +87,7 @@ test('Snackbar with dismiss button and custom label', async () => { onClose={onCloseSpy} buttonText="Action" closeButtonLabel="custom close label" - duration={Infinity} + duration="PERSISTENT" withDismiss /> @@ -106,7 +106,7 @@ test('Snackbar with dismiss button and custom label', async () => { test('Snackbar does not have dismiss button by default', async () => { render( - + ); const actionButton = await screen.findByRole('button', {name: 'Action'}); @@ -119,7 +119,7 @@ test('Snackbar always has dismiss button if it does not have action button and d @@ -165,7 +165,7 @@ test('nativeMessage is called with duration PERSISTENT when duration is Infinity message="any-message" onClose={onCloseSpy} buttonText="any-button-text" - duration={Infinity} + duration="PERSISTENT" /> ); @@ -312,7 +312,7 @@ test('Snackbar with button aria-label', async () => { onClose={onCloseSpy} buttonText="Action" buttonAccessibilityLabel="some a11y label" - duration={Infinity} + duration="PERSISTENT" /> ); diff --git a/src/snackbar.tsx b/src/snackbar.tsx index c379a1adea..9fe9a133ec 100644 --- a/src/snackbar.tsx +++ b/src/snackbar.tsx @@ -27,7 +27,7 @@ export type Props = { buttonText?: string; buttonAccessibilityLabel?: string; closeButtonLabel?: string; - duration?: number; + duration?: 'PERSISTENT'; message: string; onClose?: SnackbarCloseHandler; type?: SnackbarType; @@ -40,7 +40,7 @@ export type ImperativeHandle = { close: SnackbarCloseHandler; }; -const SnackbarComponent = React.forwardRef( +const SnackbarComponent = React.forwardRef & {duration: number}>( ( { message, @@ -204,7 +204,7 @@ const Snackbar = React.forwardRef( ref ) => { const defaultDuration = buttonText ? DEFAULT_DURATION_WITH_BUTTON : DEFAULT_DURATION_WITHOUT_BUTTON; - duration = Math.max(duration ?? defaultDuration, defaultDuration); + const durationInMs = duration === 'PERSISTENT' ? Infinity : defaultDuration; const renderNative = isWebViewBridgeAvailable(); const onCloseRef = React.useRef(onCloseProp); const isOpenRef = React.useRef(false); @@ -220,7 +220,7 @@ const Snackbar = React.forwardRef( nativeMessage({ message, // @ts-expect-error duration can be 'PERSISTENT' in new webview-bridge lib versions, and old apps will ignore it - duration: duration === Infinity ? 'PERSISTENT' : undefined, + duration, buttonText, buttonAccessibilityLabel, closeButtonLabel, @@ -258,7 +258,7 @@ const Snackbar = React.forwardRef( Date: Thu, 22 Aug 2024 15:44:33 +0200 Subject: [PATCH 2/3] Update src/__stories__/snackbar-story.tsx Co-authored-by: Pedro Ladaria --- src/__stories__/snackbar-story.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/__stories__/snackbar-story.tsx b/src/__stories__/snackbar-story.tsx index 9f529dbff3..2615abdaa4 100644 --- a/src/__stories__/snackbar-story.tsx +++ b/src/__stories__/snackbar-story.tsx @@ -15,7 +15,7 @@ type Args = { }; export const Default: StoryComponent = ({buttonText, message, duration, type, withDismiss}) => { - const snackbarDuration = duration === 'undefined' ? undefined : duration; + const snackbarDuration = duration === 'PERSISTENT' ? duration : undefined; const {openSnackbar} = useSnackbar(); return ( Date: Fri, 23 Aug 2024 11:06:15 +0200 Subject: [PATCH 3/3] resolve comments --- src/__stories__/snackbar-story.tsx | 12 ++++-------- src/snackbar.tsx | 15 ++++++++------- 2 files changed, 12 insertions(+), 15 deletions(-) diff --git a/src/__stories__/snackbar-story.tsx b/src/__stories__/snackbar-story.tsx index 9f529dbff3..72aca4b8db 100644 --- a/src/__stories__/snackbar-story.tsx +++ b/src/__stories__/snackbar-story.tsx @@ -9,13 +9,13 @@ export default { type Args = { buttonText: string; message: string; - duration: 'PERSISTENT' | 'undefined'; + persistent: boolean; type: React.ComponentProps['type']; withDismiss: boolean; }; -export const Default: StoryComponent = ({buttonText, message, duration, type, withDismiss}) => { - const snackbarDuration = duration === 'undefined' ? undefined : duration; +export const Default: StoryComponent = ({buttonText, message, persistent, type, withDismiss}) => { + const snackbarDuration = persistent ? 'PERSISTENT' : undefined; const {openSnackbar} = useSnackbar(); return ( & {duration: number}>( +const SnackbarComponent = React.forwardRef( ( { message, @@ -62,7 +62,8 @@ const SnackbarComponent = React.forwardRef longButtonWidth; const elementRef = React.useRef(null); - const shouldShowDismissButton = (duration === Infinity && !buttonText) || withDismiss; + const shouldShowDismissButton = (duration === 'PERSISTENT' && !buttonText) || withDismiss; + const defaultDuration = buttonText ? DEFAULT_DURATION_WITH_BUTTON : DEFAULT_DURATION_WITHOUT_BUTTON; const onCloseRef = React.useRef(onClose); React.useEffect(() => { @@ -89,13 +90,15 @@ const SnackbarComponent = React.forwardRef close({action: 'TIMEOUT'}), duration) : undefined; + duration !== 'PERSISTENT' + ? setTimeout(() => close({action: 'TIMEOUT'}), defaultDuration) + : undefined; return () => { clearTimeout(openTimeout); clearTimeout(closeTimeout); }; - }, [close, duration]); + }, [close, duration, defaultDuration]); return ( @@ -203,8 +206,6 @@ const Snackbar = React.forwardRef( }, ref ) => { - const defaultDuration = buttonText ? DEFAULT_DURATION_WITH_BUTTON : DEFAULT_DURATION_WITHOUT_BUTTON; - const durationInMs = duration === 'PERSISTENT' ? Infinity : defaultDuration; const renderNative = isWebViewBridgeAvailable(); const onCloseRef = React.useRef(onCloseProp); const isOpenRef = React.useRef(false); @@ -258,7 +259,7 @@ const Snackbar = React.forwardRef(