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 unmountzio/stable
parent
7eb1444f2c
commit
61d7e6014b
|
@ -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 (
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue