Add optional close callback to Dialog (#2947)

* Add optional close callback

* No emitter

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<DialogContextProps>({
   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<DialogControlProps>({
     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),
   }
 }

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<DialogControlProps['close']>(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)
       }

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<DialogControlProps>
-    open: (index?: number) => void
+  } & DialogControlProps
-    close: () => void
-  }
   onClose?: () => void
   nativeOptions?: {
     sheet?: Omit<BottomSheetProps, 'children'>

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
               </Button>