Dialog solution

src/components/Dialog/context.ts

@@ -1,27 +1,19 @@
 import React from 'react'
 
 import {useDialogStateContext} from '#/state/dialogs'
-import {
+import {DialogContextProps, DialogControlProps} from '#/components/Dialog/types'
-  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<Params extends DialogParams>() {
+export function useDialogContext() {
-  return React.useContext(Context) as DialogContextProps<Params>
+  return React.useContext(Context)
 }
 
-export function useDialogControl<
+export function useDialogControl() {
-  Params extends DialogParams,
->(): DialogControlWithRefProps<Params> {
   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']>(
+  const open = React.useCallback<DialogControlProps['open']>(({index} = {}) => {
-    (params, {snapIndex} = {}) => {
+    sheet.current?.snapToIndex(index || 0)
-      if (params) {
+  }, [])
-        setParams(params)
-      }
-      sheet.current?.snapToIndex(snapIndex || 0)
-    },
-    [setParams],
-  )
 
   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 {
+import {DialogOuterProps, DialogInnerProps} from '#/components/Dialog/types'
-  DialogOuterProps,
-  DialogInnerProps,
-  DialogControlProps,
-  DialogParams,
-} 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,
+  defaultOpen,
-}: React.PropsWithChildren<DialogOuterProps<Params>>) {
+}: 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']>(
+  const open = React.useCallback(() => {
-    params => {
-      if (params) {
-        setParams(params)
-      }
     setIsOpen(true)
-    },
+  }, [setIsOpen])
-    [setIsOpen, setParams],
-  )
 
   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 = {
-
-export type DialogContextProps<Params extends DialogParams> = {
-  params: Params
   close: () => void
 }
 
-export type DialogControlProps<Params extends DialogParams> = {
+export type DialogControlOpenOptions = {index?: number}
-  open: (params?: Params, options?: {snapIndex?: number}) => void
+
+export type DialogControlProps = {
+  open: (options?: DialogControlOpenOptions) => void
   close: () => void
 }
 
-export type DialogControlWithRefProps<Params extends DialogParams> = {
+export type DialogOuterProps = {
-  ref: React.RefObject<DialogControlProps<Params>>
+  defaultOpen?: boolean
-} & DialogControlProps<Params>
+  control: {
-
+    ref: React.RefObject<DialogControlProps>
-export type DialogOuterProps<Params extends DialogParams> = {
+    open: (index?: number) => void
-  control: DialogControlWithRefProps<Params>
+    close: () => void
+  }
   onClose?: () => void
   nativeOptions?: {
     sheet?: Omit<BottomSheetProps, 'children'>

src/components/dialogs/ReportDialog/index.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
+import {View} from 'react-native'
 
-import * as Dialog from '#/components/Dialog'
 import {Text} from '#/components/Typography'
-import {Context} from '#/components/dialogs'
+import * as Dialog from '#/components/Dialog'
+import {GlobalDialogProps} from '#/components/dialogs'
 
-export type DialogParams =
+export type ReportDialogProps =
   | {
       type: 'post'
       uri: string
@@ -15,25 +16,20 @@ export type DialogParams =
       did: string
     }
 
-export function useReportDialogControl() {
+export function ReportDialog(props: GlobalDialogProps<ReportDialogProps>) {
-  return React.useContext(Context).report
+  const control = Dialog.useDialogControl()
-}
 
-export function ReportDialog() {
+  const onClose = React.useCallback(() => {
-  const control = useReportDialogControl()
+    props.cleanup()
+  }, [props])
 
   return (
-    <Dialog.Outer control={control}>
+    <Dialog.Outer defaultOpen control={control} onClose={onClose}>
-      <Dialog.Handle />
+      <Dialog.Inner label="Report Dialog">
-
+        <View style={{height: 500}}>
-      <Dialog.ScrollableInner label="Report dialog">
+          <Text>hello {JSON.stringify(props)}</Text>
-        <Inner />
+        </View>
-      </Dialog.ScrollableInner>
+      </Dialog.Inner>
     </Dialog.Outer>
   )
 }
-
-function Inner() {
-  const ctx = Dialog.useDialogContext<DialogParams>()
-  return <Text>hello {JSON.stringify(ctx.params)}</Text>
-}

src/components/dialogs/index.tsx

@@ -2,31 +2,94 @@ import React from 'react'
 
 import * as Dialog from '#/components/Dialog'
 
-import {DialogParams as ReportDialogParams} from '#/components/dialogs/ReportDialog'
+/**
+ * Type util for global dialog components. Wrap individual dialog component
+ * types with this to get types for the additional properties applied by the
+ * the global dialon controller.
+ */
+export type GlobalDialogProps<T = any> = {
+  params: T
+  cleanup(): void
+  options?: Dialog.DialogControlOpenOptions
+}
+
+type ActiveDialog<T extends React.ComponentType<GlobalDialogProps>> = {
+  component: T
+  props: React.ComponentProps<T>
+  options?: Dialog.DialogControlOpenOptions
+}
+
+type ContextProps = {
+  activeDialogs: ActiveDialog<any>[]
+  open<T extends React.ComponentType<GlobalDialogProps>>(
+    component: T,
+    props: React.ComponentProps<T>['params'],
+    options?: Dialog.DialogControlOpenOptions,
+  ): void
+  popTopDialog(): void
+}
+
+export const Context = React.createContext<ContextProps>({
+  activeDialogs: [],
+  open() {},
+  popTopDialog() {},
+})
 
 /**
- * Global dialog context. Name each dialog and specify its parameters.
+ * Hook to open a "global" dialog.
+ *
+ * @example
+ * ```tsx
+ * const openGlobalDialog = useOpenGlobalDialog()
+ * openGlobalDialog(
+ *   MyDialog,
+ *   // component props
+ *   {foo: 'bar'},
+ *   // base Dialog options
+ *   { index: 1 }
+ * )
+ * ```
  */
-type Context = {
+export function useOpenGlobalDialog() {
-  report: Dialog.DialogControlWithRefProps<ReportDialogParams>
+  return React.useContext(Context).open
 }
 
 /**
- * Global dialog context.
+ * Provider for "global" dialogs _only_. ALL dialogs are still registered by
- */
+ * `#/state/dialogs` as well.
-export const Context = React.createContext<Context>({} as Context)
-
-/**
- * Global dialog context provider.
  */
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const report = Dialog.useDialogControl<ReportDialogParams>()
+  const [activeDialogs, setActiveDialogs] = React.useState<ActiveDialog<any>[]>(
-  const ctx = React.useMemo<Context>(
+    [],
+  )
+  const ctx = React.useMemo<ContextProps>(
     () => ({
-      report,
+      activeDialogs,
+      open(component, props, options) {
+        setActiveDialogs(s => [...s, {component, props, options}])
+      },
+      popTopDialog() {
+        setActiveDialogs(s => s.slice(0, -1))
+      },
     }),
-    [report],
+    [activeDialogs, setActiveDialogs],
   )
 
   return <Context.Provider value={ctx}>{children}</Context.Provider>
 }
+
+/**
+ * Outlet for any active "global" dialogs. Since these are rendered into a
+ * portal in the root, this is technically not their final resting place.
+ */
+export function GlobalDialog() {
+  const {activeDialogs, popTopDialog} = React.useContext(Context)
+
+  const cleanup = React.useCallback(() => {
+    popTopDialog()
+  }, [popTopDialog])
+
+  return activeDialogs.map(({component: Comp, props, options}, i) => {
+    return <Comp key={i} {...props} cleanup={cleanup} options={options} />
+  })
+}

src/view/com/util/forms/PostDropdownBtn.tsx

@@ -31,7 +31,8 @@ import {useLingui} from '@lingui/react'
 import {useSession} from '#/state/session'
 import {isWeb} from '#/platform/detection'
 import {richTextToString} from '#/lib/strings/rich-text-helpers'
-import {useReportDialogControl} from '#/components/dialogs/ReportDialog'
+import {useOpenGlobalDialog} from '#/components/dialogs'
+import {ReportDialog} from '#/components/dialogs/ReportDialog'
 
 let PostDropdownBtn = ({
   testID,
@@ -64,7 +65,7 @@ let PostDropdownBtn = ({
   const hiddenPosts = useHiddenPosts()
   const {hidePost} = useHiddenPostsApi()
   const openLink = useOpenLink()
-  const reportDialogControl = useReportDialogControl()
+  const openDialog = useOpenGlobalDialog()
 
   const rootUri = record.reply?.root?.uri || postUri
   const isThreadMuted = mutedThreads.includes(rootUri)
@@ -211,7 +212,7 @@ let PostDropdownBtn = ({
       hasSession && {
         label: _(msg`Report post`),
         onPress() {
-          reportDialogControl.open({type: 'post', uri: postUri, cid: postCid})
+          openDialog(ReportDialog, {type: 'post', uri: postUri, cid: postCid})
           // openModal({
           //   name: 'report',
           //   uri: postUri,

src/view/screens/Storybook/Dialogs.tsx

@@ -7,11 +7,14 @@ import {H3, P} from '#/components/Typography'
 import * as Dialog from '#/components/Dialog'
 import * as Prompt from '#/components/Prompt'
 import {useDialogStateControlContext} from '#/state/dialogs'
+import {useOpenGlobalDialog} from '#/components/dialogs'
+import {ReportDialog} from '#/components/dialogs/ReportDialog'
 
 export function Dialogs() {
   const control = Dialog.useDialogControl()
   const prompt = Prompt.usePromptControl()
   const {closeAllDialogs} = useDialogStateControlContext()
+  const openDialog = useOpenGlobalDialog()
 
   return (
     <View style={[a.gap_md]}>
@@ -36,6 +39,19 @@ export function Dialogs() {
         Open prompt
       </Button>
 
+      <View style={[a.flex_row, a.gap_md]}>
+        <Button
+          variant="solid"
+          color="primary"
+          size="small"
+          onPress={() => {
+            openDialog(ReportDialog, {type: 'user', did: ''})
+          }}
+          label="Open prompt">
+          Open dialogs
+        </Button>
+      </View>
+
       <Prompt.Outer control={prompt}>
         <Prompt.Title>This is a prompt</Prompt.Title>
         <Prompt.Description>

src/view/screens/Storybook/index.tsx

@@ -66,6 +66,7 @@ export function Storybook() {
             </Button>
           </View>
 
+          <Dialogs />
           <ThemeProvider theme="light">
             <Theming />
           </ThemeProvider>
@@ -83,7 +84,6 @@ export function Storybook() {
           <Icons />
           <Links />
           <Forms />
-          <Dialogs />
           <Breakpoints />
         </View>
       </CenteredView>

src/view/shell/index.tsx

@@ -29,7 +29,7 @@ import {useSession} from '#/state/session'
 import {useCloseAnyActiveElement} from '#/state/util'
 import * as notifications from 'lib/notifications/notifications'
 import {Outlet as PortalOutlet} from '#/components/Portal'
-import {ReportDialog} from '#/components/dialogs/ReportDialog'
+import {GlobalDialog} from '#/components/dialogs'
 
 function ShellInner() {
   const isDrawerOpen = useIsDrawerOpen()
@@ -97,7 +97,7 @@ function ShellInner() {
       <ModalsContainer />
       <Lightbox />
 
-      <ReportDialog />
+      <GlobalDialog />
       <PortalOutlet />
     </>
   )

src/view/shell/index.web.tsx

@@ -16,7 +16,7 @@ import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell'
 import {useCloseAllActiveElements} from '#/state/util'
 import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
 import {Outlet as PortalOutlet} from '#/components/Portal'
-import {ReportDialog} from '#/components/dialogs/ReportDialog'
+import {GlobalDialog} from '#/components/dialogs'
 
 function ShellInner() {
   const isDrawerOpen = useIsDrawerOpen()
@@ -43,7 +43,7 @@ function ShellInner() {
       <ModalsContainer />
       <Lightbox />
 
-      <ReportDialog />
+      <GlobalDialog />
       <PortalOutlet />
 
       {!isDesktop && isDrawerOpen && (