ensure dialog is closed on unmount (#3650)

Revert "properly check if the ref is null"

This reverts commit 8f563808a5d39389b0bc47a31e73cd147d1e7e8b.

properly check if the ref is null

ensure dialog is closed on unmount
zio/stable
Hailey 2024-04-26 23:42:49 -07:00 committed by GitHub
parent 7eb1444f2c
commit 61d7e6014b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 81 additions and 0 deletions

View File

@ -152,6 +152,12 @@ export function Outer({
[open, close],
)
React.useEffect(() => {
return () => {
setDialogIsOpen(control.id, false)
}
}, [control.id, setDialogIsOpen])
const context = React.useMemo(() => ({close}), [close])
return (

View File

@ -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<number>()
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 (
<View style={[a.gap_md]}>
@ -70,6 +107,33 @@ export function Dialogs() {
<ButtonText>Open Tester</ButtonText>
</Button>
<Button
variant="solid"
color="primary"
size="small"
onPress={onUnmountTestStartPressWithClose}
label="two">
<ButtonText>Start Unmount Test With `.close()` call</ButtonText>
</Button>
<Button
variant="solid"
color="primary"
size="small"
onPress={onUnmountTestStartPressWithoutClose}
label="two">
<ButtonText>Start Unmount Test Without `.close()` call</ButtonText>
</Button>
<Button
variant="solid"
color="primary"
size="small"
onPress={onUnmountTestEndPress}
label="two">
<ButtonText>End Unmount Test</ButtonText>
</Button>
<Prompt.Outer control={prompt}>
<Prompt.TitleText>This is a prompt</Prompt.TitleText>
<Prompt.DescriptionText>
@ -257,6 +321,17 @@ export function Dialogs() {
</View>
</Dialog.ScrollableInner>
</Dialog.Outer>
{shouldRenderUnmountTest && (
<Dialog.Outer control={unmountTestDialog}>
<Dialog.Handle />
<Dialog.Inner label="test">
<H3 nativeID="dialog-title">Unmount Test Dialog</H3>
<P nativeID="dialog-description">Will unmount in about 5 seconds</P>
</Dialog.Inner>
</Dialog.Outer>
)}
</View>
)
}