fix dialog back button for android (#3428)

* fix types

* remove unused async

* add try/catch
zio/stable
Hailey 2024-04-05 12:52:53 -07:00 committed by GitHub
parent c80dcc565e
commit cd29dba761
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 39 additions and 23 deletions

View File

@ -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),

View File

@ -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 (

View File

@ -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"