fix dialog back button for android (#3428)
* fix types * remove unused async * add try/catchzio/stable
parent
c80dcc565e
commit
cd29dba761
|
@ -1,20 +1,24 @@
|
||||||
import React, {useImperativeHandle} from 'react'
|
import React, {useImperativeHandle} from 'react'
|
||||||
import {View, TouchableWithoutFeedback} from 'react-native'
|
import {TouchableWithoutFeedback, View} from 'react-native'
|
||||||
import {FocusScope} from '@tamagui/focus-scope'
|
import Animated, {FadeIn, FadeInDown} from 'react-native-reanimated'
|
||||||
import Animated, {FadeInDown, FadeIn} from 'react-native-reanimated'
|
|
||||||
import {msg} from '@lingui/macro'
|
import {msg} from '@lingui/macro'
|
||||||
import {useLingui} from '@lingui/react'
|
import {useLingui} from '@lingui/react'
|
||||||
|
import {FocusScope} from '@tamagui/focus-scope'
|
||||||
|
|
||||||
import {useTheme, atoms as a, useBreakpoints, web, flatten} from '#/alf'
|
import {logger} from '#/logger'
|
||||||
|
import {useDialogStateControlContext} from '#/state/dialogs'
|
||||||
|
import {atoms as a, flatten, useBreakpoints, useTheme, web} from '#/alf'
|
||||||
|
import {Button, ButtonIcon} from '#/components/Button'
|
||||||
|
import {Context} from '#/components/Dialog/context'
|
||||||
|
import {
|
||||||
|
DialogControlProps,
|
||||||
|
DialogInnerProps,
|
||||||
|
DialogOuterProps,
|
||||||
|
} from '#/components/Dialog/types'
|
||||||
|
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
|
||||||
import {Portal} from '#/components/Portal'
|
import {Portal} from '#/components/Portal'
|
||||||
|
|
||||||
import {DialogOuterProps, DialogInnerProps} from '#/components/Dialog/types'
|
export {useDialogContext, useDialogControl} from '#/components/Dialog/context'
|
||||||
import {Context} from '#/components/Dialog/context'
|
|
||||||
import {Button, ButtonIcon} from '#/components/Button'
|
|
||||||
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
|
|
||||||
import {useDialogStateControlContext} from '#/state/dialogs'
|
|
||||||
|
|
||||||
export {useDialogControl, useDialogContext} from '#/components/Dialog/context'
|
|
||||||
export * from '#/components/Dialog/types'
|
export * from '#/components/Dialog/types'
|
||||||
export {Input} from '#/components/forms/TextField'
|
export {Input} from '#/components/forms/TextField'
|
||||||
|
|
||||||
|
@ -37,14 +41,31 @@ export function Outer({
|
||||||
setDialogIsOpen(control.id, true)
|
setDialogIsOpen(control.id, true)
|
||||||
}, [setIsOpen, setDialogIsOpen, control.id])
|
}, [setIsOpen, setDialogIsOpen, control.id])
|
||||||
|
|
||||||
const close = React.useCallback(async () => {
|
const onCloseInner = React.useCallback(async () => {
|
||||||
setIsVisible(false)
|
setIsVisible(false)
|
||||||
await new Promise(resolve => setTimeout(resolve, 150))
|
await new Promise(resolve => setTimeout(resolve, 150))
|
||||||
setIsOpen(false)
|
setIsOpen(false)
|
||||||
setIsVisible(true)
|
setIsVisible(true)
|
||||||
setDialogIsOpen(control.id, false)
|
setDialogIsOpen(control.id, false)
|
||||||
onClose?.()
|
onClose?.()
|
||||||
}, [onClose, setIsOpen, setDialogIsOpen, control.id])
|
}, [control.id, onClose, setDialogIsOpen])
|
||||||
|
|
||||||
|
const close = React.useCallback<DialogControlProps['close']>(
|
||||||
|
cb => {
|
||||||
|
try {
|
||||||
|
if (cb && typeof cb === 'function') {
|
||||||
|
cb()
|
||||||
|
}
|
||||||
|
} catch (e: any) {
|
||||||
|
logger.error(`Dialog closeCallback failed`, {
|
||||||
|
message: e.message,
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
onCloseInner()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[onCloseInner],
|
||||||
|
)
|
||||||
|
|
||||||
useImperativeHandle(
|
useImperativeHandle(
|
||||||
control.ref,
|
control.ref,
|
||||||
|
@ -52,7 +73,7 @@ export function Outer({
|
||||||
open,
|
open,
|
||||||
close,
|
close,
|
||||||
}),
|
}),
|
||||||
[open, close],
|
[close, open],
|
||||||
)
|
)
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
|
@ -65,7 +86,7 @@ export function Outer({
|
||||||
document.addEventListener('keydown', handler)
|
document.addEventListener('keydown', handler)
|
||||||
|
|
||||||
return () => document.removeEventListener('keydown', handler)
|
return () => document.removeEventListener('keydown', handler)
|
||||||
}, [isOpen, close])
|
}, [close, isOpen])
|
||||||
|
|
||||||
const context = React.useMemo(
|
const context = React.useMemo(
|
||||||
() => ({
|
() => ({
|
||||||
|
@ -82,7 +103,7 @@ export function Outer({
|
||||||
<TouchableWithoutFeedback
|
<TouchableWithoutFeedback
|
||||||
accessibilityHint={undefined}
|
accessibilityHint={undefined}
|
||||||
accessibilityLabel={_(msg`Close active dialog`)}
|
accessibilityLabel={_(msg`Close active dialog`)}
|
||||||
onPress={close}>
|
onPress={onCloseInner}>
|
||||||
<View
|
<View
|
||||||
style={[
|
style={[
|
||||||
web(a.fixed),
|
web(a.fixed),
|
||||||
|
|
|
@ -135,8 +135,7 @@ export function Action({
|
||||||
const {gtMobile} = useBreakpoints()
|
const {gtMobile} = useBreakpoints()
|
||||||
const {close} = Dialog.useDialogContext()
|
const {close} = Dialog.useDialogContext()
|
||||||
const handleOnPress = React.useCallback(() => {
|
const handleOnPress = React.useCallback(() => {
|
||||||
close()
|
close(onPress)
|
||||||
onPress()
|
|
||||||
}, [close, onPress])
|
}, [close, onPress])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -508,11 +508,7 @@ export const ComposePost = observer(function ComposePost({
|
||||||
title={_(msg`Discard draft?`)}
|
title={_(msg`Discard draft?`)}
|
||||||
description={_(msg`Are you sure you'd like to discard this draft?`)}
|
description={_(msg`Are you sure you'd like to discard this draft?`)}
|
||||||
onConfirm={() => {
|
onConfirm={() => {
|
||||||
if (isWeb) {
|
discardPromptControl.close(onClose)
|
||||||
onClose()
|
|
||||||
} else {
|
|
||||||
discardPromptControl.close(onClose)
|
|
||||||
}
|
|
||||||
}}
|
}}
|
||||||
confirmButtonCta={_(msg`Discard`)}
|
confirmButtonCta={_(msg`Discard`)}
|
||||||
confirmButtonColor="negative"
|
confirmButtonColor="negative"
|
||||||
|
|
Loading…
Reference in New Issue