diff --git a/src/components/Dialog/context.ts b/src/components/Dialog/context.ts index b28b9f5a..f0c7c983 100644 --- a/src/components/Dialog/context.ts +++ b/src/components/Dialog/context.ts @@ -1,7 +1,11 @@ import React from 'react' import {useDialogStateContext} from '#/state/dialogs' -import {DialogContextProps, DialogControlProps} from '#/components/Dialog/types' +import { + DialogContextProps, + DialogControlProps, + DialogOuterProps, +} from '#/components/Dialog/types' export const Context = React.createContext({ close: () => {}, @@ -11,7 +15,7 @@ export function useDialogContext() { return React.useContext(Context) } -export function useDialogControl() { +export function useDialogControl(): DialogOuterProps['control'] { const id = React.useId() const control = React.useRef({ open: () => {}, @@ -30,6 +34,6 @@ export function useDialogControl() { return { ref: control, open: () => control.current.open(), - close: () => control.current.close(), + close: cb => control.current.close(cb), } } diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index 52953505..27f43afd 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -35,6 +35,7 @@ export function Outer({ const sheetOptions = nativeOptions?.sheet || {} const hasSnapPoints = !!sheetOptions.snapPoints const insets = useSafeAreaInsets() + const closeCallback = React.useRef<() => void>() /* * Used to manage open/closed, but index is otherwise handled internally by `BottomSheet` @@ -54,7 +55,10 @@ export function Outer({ [setOpenIndex], ) - const close = React.useCallback(() => { + const close = React.useCallback(cb => { + if (cb) { + closeCallback.current = cb + } sheet.current?.close() }, []) @@ -70,6 +74,8 @@ export function Outer({ const onChange = React.useCallback( (index: number) => { if (index === -1) { + closeCallback.current?.() + closeCallback.current = undefined onClose?.() setOpenIndex(-1) } diff --git a/src/components/Dialog/types.ts b/src/components/Dialog/types.ts index 00178926..75ba825a 100644 --- a/src/components/Dialog/types.ts +++ b/src/components/Dialog/types.ts @@ -22,15 +22,13 @@ export type DialogControlOpenOptions = { export type DialogControlProps = { open: (options?: DialogControlOpenOptions) => void - close: () => void + close: (callback?: () => void) => void } export type DialogOuterProps = { control: { ref: React.RefObject - open: (index?: number) => void - close: () => void - } + } & DialogControlProps onClose?: () => void nativeOptions?: { sheet?: Omit diff --git a/src/view/screens/Storybook/Dialogs.tsx b/src/view/screens/Storybook/Dialogs.tsx index 821ac3c8..09be124d 100644 --- a/src/view/screens/Storybook/Dialogs.tsx +++ b/src/view/screens/Storybook/Dialogs.tsx @@ -110,7 +110,11 @@ export function Dialogs() { variant="outline" color="primary" size="small" - onPress={() => scrollable.close()} + onPress={() => + scrollable.close(() => { + console.log('CLOSED') + }) + } label="Open basic dialog"> Close dialog