Dialog solution

src/components/Dialog/context.ts

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

src/components/Dialog/index.tsx

@@ -16,7 +16,6 @@ import {
   DialogOuterProps,
   DialogControlProps,
   DialogInnerProps,
-  DialogParams,
 } from '#/components/Dialog/types'
 import {Context} from '#/components/Dialog/context'
 
@@ -25,27 +24,21 @@ export * from '#/components/Dialog/types'
 // @ts-ignore
 export const Input = createInput(BottomSheetTextInput)
 
-export function Outer<Params extends DialogParams>({
+export function Outer({
   children,
   control,
   onClose,
   nativeOptions,
-}: React.PropsWithChildren<DialogOuterProps<Params>>) {
+  defaultOpen,
+}: React.PropsWithChildren<DialogOuterProps>) {
   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<Params>['open']>(
-    (params, {snapIndex} = {}) => {
-      if (params) {
-        setParams(params)
-      }
-      sheet.current?.snapToIndex(snapIndex || 0)
-    },
-    [setParams],
-  )
+  const open = React.useCallback<DialogControlProps['open']>(({index} = {}) => {
+    sheet.current?.snapToIndex(index || 0)
+  }, [])
 
   const close = React.useCallback(() => {
     sheet.current?.close()
@@ -61,7 +54,7 @@ export function Outer<Params extends DialogParams>({
     [open, close],
   )
 
-  const context = React.useMemo(() => ({close, params}), [close, params])
+  const context = React.useMemo(() => ({close}), [close])
 
   return (
     <Portal>
@@ -73,7 +66,7 @@ export function Outer<Params extends DialogParams>({
         keyboardBlurBehavior="restore"
         {...sheetOptions}
         ref={sheet}
-        index={-1}
+        index={defaultOpen ? 0 : -1}
         backgroundStyle={{backgroundColor: 'transparent'}}
         backdropComponent={props => (
           <BottomSheetBackdrop

src/components/Dialog/index.web.tsx

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

src/components/Dialog/types.ts

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