diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index 55798db7f5..4ef2d2ecaa 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -150,6 +150,12 @@ export function Outer({ [open, close], ) + React.useEffect(() => { + return () => { + setDialogIsOpen(control.id, false) + } + }, [control.id, setDialogIsOpen]) + const context = React.useMemo(() => ({close}), [close]) return ( diff --git a/src/view/screens/Storybook/Dialogs.tsx b/src/view/screens/Storybook/Dialogs.tsx index f68f9f4ddf..6d166d4b64 100644 --- a/src/view/screens/Storybook/Dialogs.tsx +++ b/src/view/screens/Storybook/Dialogs.tsx @@ -14,6 +14,43 @@ export function Dialogs() { const prompt = Prompt.usePromptControl() const testDialog = Dialog.useDialogControl() const {closeAllDialogs} = useDialogStateControlContext() + const unmountTestDialog = Dialog.useDialogControl() + const [shouldRenderUnmountTest, setShouldRenderUnmountTest] = + React.useState(false) + const unmountTestInterval = React.useRef() + + const onUnmountTestStartPressWithClose = () => { + setShouldRenderUnmountTest(true) + + setTimeout(() => { + unmountTestDialog.open() + }, 1000) + + setTimeout(() => { + unmountTestDialog.close() + }, 4950) + + setInterval(() => { + setShouldRenderUnmountTest(prev => !prev) + }, 5000) + } + + const onUnmountTestStartPressWithoutClose = () => { + setShouldRenderUnmountTest(true) + + setTimeout(() => { + unmountTestDialog.open() + }, 1000) + + setInterval(() => { + setShouldRenderUnmountTest(prev => !prev) + }, 5000) + } + + const onUnmountTestEndPress = () => { + setShouldRenderUnmountTest(false) + clearInterval(unmountTestInterval.current) + } return ( @@ -70,6 +107,33 @@ export function Dialogs() { Open Tester + + + + + + This is a prompt @@ -257,6 +321,17 @@ export function Dialogs() { + + {shouldRenderUnmountTest && ( + + + + +

Unmount Test Dialog

+

Will unmount in about 5 seconds

+
+
+ )} ) }