Compare commits

...

2 Commits

Author SHA1 Message Date
Eric Bailey 67fbb92c71 No emitter 2024-02-20 18:16:12 -06:00
Eric Bailey 0c9fd4a6c6 Add optional close callback 2024-02-20 18:08:36 -06:00
4 changed files with 21 additions and 9 deletions
+7 -3
View File
@@ -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),
}
}
+7 -1
View File
@@ -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)
}
+2 -4
View File
@@ -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
close: () => void
}
} & DialogControlProps
onClose?: () => void
nativeOptions?: {
sheet?: Omit<BottomSheetProps, 'children'>
+5 -1
View File
@@ -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>