Dialogs side quest

src/components/Dialog/context.ts

@@ -1,19 +1,27 @@
 import React from 'react'
 
 import {useDialogStateContext} from '#/state/dialogs'
-import {DialogContextProps, DialogControlProps} from '#/components/Dialog/types'
+import {
+  DialogContextProps,
+  DialogControlProps,
+  DialogControlWithRefProps,
+  DialogParams,
+} from '#/components/Dialog/types'
 
-export const Context = React.createContext<DialogContextProps>({
+export const Context = React.createContext<DialogContextProps<{}>>({
+  params: {},
   close: () => {},
 })
 
-export function useDialogContext() {
-  return React.useContext(Context)
+export function useDialogContext<Params extends DialogParams>() {
+  return React.useContext(Context) as DialogContextProps<Params>
 }
 
-export function useDialogControl() {
+export function useDialogControl<
+  Params extends DialogParams,
+>(): DialogControlWithRefProps<Params> {
   const id = React.useId()
-  const control = React.useRef<DialogControlProps>({
+  const control = React.useRef<DialogControlProps<Params>>({
     open: () => {},
     close: () => {},
   })
@@ -29,7 +37,7 @@ export function useDialogControl() {
 
   return {
     ref: control,
-    open: () => control.current.open(),
+    open: (params, options) => control.current.open(params, options),
     close: () => control.current.close(),
   }
 }

src/components/Dialog/index.tsx

@@ -16,6 +16,7 @@ import {
   DialogOuterProps,
   DialogControlProps,
   DialogInnerProps,
+  DialogParams,
 } from '#/components/Dialog/types'
 import {Context} from '#/components/Dialog/context'
 
@@ -24,20 +25,28 @@ export * from '#/components/Dialog/types'
 // @ts-ignore
 export const Input = createInput(BottomSheetTextInput)
 
-export function Outer({
+export function Outer<Params extends DialogParams>({
   children,
   control,
   onClose,
   nativeOptions,
-}: React.PropsWithChildren<DialogOuterProps>) {
+}: React.PropsWithChildren<DialogOuterProps<Params>>) {
   const t = useTheme()
   const sheet = React.useRef<BottomSheet>(null)
   const sheetOptions = nativeOptions?.sheet || {}
   const hasSnapPoints = !!sheetOptions.snapPoints
+  const [params, setParams] = React.useState({})
 
-  const open = React.useCallback<DialogControlProps['open']>((i = 0) => {
-    sheet.current?.snapToIndex(i)
-  }, [])
+  const open = React.useCallback<DialogControlProps<Params>['open']>(
+    (params, {snapIndex} = {}) => {
+      if (params) {
+        console.log({params})
+        setParams(params)
+      }
+      sheet.current?.snapToIndex(snapIndex || 0)
+    },
+    [setParams],
+  )
 
   const close = React.useCallback(() => {
     sheet.current?.close()
@@ -53,7 +62,7 @@ export function Outer({
     [open, close],
   )
 
-  const context = React.useMemo(() => ({close}), [close])
+  const context = React.useMemo(() => ({close, params}), [close, params])
 
   return (
     <Portal>

src/components/Dialog/index.web.tsx

@@ -8,7 +8,12 @@ import {useLingui} from '@lingui/react'
 import {useTheme, atoms as a, useBreakpoints, web} from '#/alf'
 import {Portal} from '#/components/Portal'
 
-import {DialogOuterProps, DialogInnerProps} from '#/components/Dialog/types'
+import {
+  DialogOuterProps,
+  DialogInnerProps,
+  DialogControlProps,
+  DialogParams,
+} from '#/components/Dialog/types'
 import {Context} from '#/components/Dialog/context'
 
 export {useDialogControl, useDialogContext} from '#/components/Dialog/context'
@@ -17,20 +22,27 @@ export {Input} from '#/components/forms/TextField'
 
 const stopPropagation = (e: any) => e.stopPropagation()
 
-export function Outer({
+export function Outer<Params extends DialogParams>({
   control,
   onClose,
   children,
-}: React.PropsWithChildren<DialogOuterProps>) {
+}: React.PropsWithChildren<DialogOuterProps<Params>>) {
   const {_} = useLingui()
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
   const [isOpen, setIsOpen] = React.useState(false)
   const [isVisible, setIsVisible] = React.useState(true)
+  const [params, setParams] = React.useState({})
 
-  const open = React.useCallback(() => {
-    setIsOpen(true)
-  }, [setIsOpen])
+  const open = React.useCallback<DialogControlProps<Params>['open']>(
+    params => {
+      if (params) {
+        setParams(params)
+      }
+      setIsOpen(true)
+    },
+    [setIsOpen, setParams],
+  )
 
   const close = React.useCallback(async () => {
     setIsVisible(false)
@@ -63,9 +75,10 @@ export function Outer({
 
   const context = React.useMemo(
     () => ({
+      params,
       close,
     }),
-    [close],
+    [close, params],
   )
 
   return (

src/components/Dialog/types.ts

@@ -4,21 +4,24 @@ import {BottomSheetProps} from '@gorhom/bottom-sheet'
 
 type A11yProps = Required<AccessibilityProps>
 
-export type DialogContextProps = {
+export type DialogParams = Record<string, any>
+
+export type DialogContextProps<Params extends DialogParams> = {
+  params: Params
   close: () => void
 }
 
-export type DialogControlProps = {
-  open: (index?: number) => void
+export type DialogControlProps<Params extends DialogParams> = {
+  open: (params?: Params, options?: {snapIndex?: number}) => void
   close: () => void
 }
 
-export type DialogOuterProps = {
-  control: {
-    ref: React.RefObject<DialogControlProps>
-    open: (index?: number) => void
-    close: () => void
-  }
+export type DialogControlWithRefProps<Params extends DialogParams> = {
+  ref: React.RefObject<DialogControlProps<Params>>
+} & DialogControlProps<Params>
+
+export type DialogOuterProps<Params extends DialogParams> = {
+  control: DialogControlWithRefProps<Params>
   onClose?: () => void
   nativeOptions?: {
     sheet?: Omit<BottomSheetProps, 'children'>