Add optional close callback to Dialog (#2947)

* Add optional close callback

* No emitter
zio/stable
Eric Bailey 2024-02-20 18:20:59 -06:00 committed by GitHub
parent 6413b8ba8c
commit f88b165254
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 21 additions and 9 deletions

View File

@ -1,7 +1,11 @@
import React from 'react' import React from 'react'
import {useDialogStateContext} from '#/state/dialogs' 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>({ export const Context = React.createContext<DialogContextProps>({
close: () => {}, close: () => {},
@ -11,7 +15,7 @@ export function useDialogContext() {
return React.useContext(Context) return React.useContext(Context)
} }
export function useDialogControl() { export function useDialogControl(): DialogOuterProps['control'] {
const id = React.useId() const id = React.useId()
const control = React.useRef<DialogControlProps>({ const control = React.useRef<DialogControlProps>({
open: () => {}, open: () => {},
@ -30,6 +34,6 @@ export function useDialogControl() {
return { return {
ref: control, ref: control,
open: () => control.current.open(), open: () => control.current.open(),
close: () => control.current.close(), close: cb => control.current.close(cb),
} }
} }

View File

@ -35,6 +35,7 @@ export function Outer({
const sheetOptions = nativeOptions?.sheet || {} const sheetOptions = nativeOptions?.sheet || {}
const hasSnapPoints = !!sheetOptions.snapPoints const hasSnapPoints = !!sheetOptions.snapPoints
const insets = useSafeAreaInsets() const insets = useSafeAreaInsets()
const closeCallback = React.useRef<() => void>()
/* /*
* Used to manage open/closed, but index is otherwise handled internally by `BottomSheet` * Used to manage open/closed, but index is otherwise handled internally by `BottomSheet`
@ -54,7 +55,10 @@ export function Outer({
[setOpenIndex], [setOpenIndex],
) )
const close = React.useCallback(() => { const close = React.useCallback<DialogControlProps['close']>(cb => {
if (cb) {
closeCallback.current = cb
}
sheet.current?.close() sheet.current?.close()
}, []) }, [])
@ -70,6 +74,8 @@ export function Outer({
const onChange = React.useCallback( const onChange = React.useCallback(
(index: number) => { (index: number) => {
if (index === -1) { if (index === -1) {
closeCallback.current?.()
closeCallback.current = undefined
onClose?.() onClose?.()
setOpenIndex(-1) setOpenIndex(-1)
} }

View File

@ -22,15 +22,13 @@ export type DialogControlOpenOptions = {
export type DialogControlProps = { export type DialogControlProps = {
open: (options?: DialogControlOpenOptions) => void open: (options?: DialogControlOpenOptions) => void
close: () => void close: (callback?: () => void) => void
} }
export type DialogOuterProps = { export type DialogOuterProps = {
control: { control: {
ref: React.RefObject<DialogControlProps> ref: React.RefObject<DialogControlProps>
open: (index?: number) => void } & DialogControlProps
close: () => void
}
onClose?: () => void onClose?: () => void
nativeOptions?: { nativeOptions?: {
sheet?: Omit<BottomSheetProps, 'children'> sheet?: Omit<BottomSheetProps, 'children'>

View File

@ -110,7 +110,11 @@ export function Dialogs() {
variant="outline" variant="outline"
color="primary" color="primary"
size="small" size="small"
onPress={() => scrollable.close()} onPress={() =>
scrollable.close(() => {
console.log('CLOSED')
})
}
label="Open basic dialog"> label="Open basic dialog">
Close dialog Close dialog
</Button> </Button>