parent
6413b8ba8c
commit
f88b165254
|
@ -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),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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'>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue