From 09874504afa9c17c4d9a1fcd62545dfb971c6892 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 11 Jan 2024 14:56:10 -0600
Subject: [PATCH] Clean up dialog types

---
 src/view/com/Dialog/context.ts    | 19 ++++++++++++++++
 src/view/com/Dialog/index.tsx     | 36 +++++++++++--------------------
 src/view/com/Dialog/index.web.tsx | 35 +++++++-----------------------
 src/view/com/Dialog/types.ts      | 13 ++++++++---
 src/view/screens/DebugNew.tsx     |  2 +-
 5 files changed, 51 insertions(+), 54 deletions(-)
 create mode 100644 src/view/com/Dialog/context.ts

diff --git a/src/view/com/Dialog/context.ts b/src/view/com/Dialog/context.ts
new file mode 100644
index 0000000000..bd150f8cbc
--- /dev/null
+++ b/src/view/com/Dialog/context.ts
@@ -0,0 +1,19 @@
+import React from 'react'
+import {DialogContextProps, DialogControlProps} from '#/view/com/Dialog/types'
+
+export const Context = React.createContext<DialogContextProps>({
+  close: () => {},
+})
+
+export function useDialogContext() {
+  return React.useContext(Context)
+}
+
+export function useDialogControl() {
+  const control = React.useRef<DialogControlProps>({
+    open: () => {},
+    close: () => {},
+  })
+
+  return control
+}
diff --git a/src/view/com/Dialog/index.tsx b/src/view/com/Dialog/index.tsx
index 229cd7b867..6d6946ec44 100644
--- a/src/view/com/Dialog/index.tsx
+++ b/src/view/com/Dialog/index.tsx
@@ -5,36 +5,24 @@ import BottomSheet, {BottomSheetBackdrop} from '@gorhom/bottom-sheet'
 import {useTheme, atoms as a} from '#/alf'
 import {Portal} from '#/view/com/Portal'
 
-import {DialogProps, DialogControl} from '#/view/com/Dialog/types'
+import {
+  DialogOuterProps,
+  DialogControlProps,
+  DialogInnerProps,
+} from '#/view/com/Dialog/types'
+import {Context} from '#/view/com/Dialog/context'
 
-const Context = React.createContext<{
-  close: () => void
-}>({
-  close: () => {},
-})
-
-export function useDialogControl() {
-  const control = React.useRef<DialogControl>({
-    open: () => {},
-    close: () => {},
-  })
-
-  return control
-}
-
-export function useDialog() {
-  return React.useContext(Context)
-}
+export {useDialogControl} from '#/view/com/Dialog/context'
 
 export function Outer({
   control,
   onClose,
   children,
-}: React.PropsWithChildren<DialogProps>) {
+}: React.PropsWithChildren<DialogOuterProps>) {
   const t = useTheme()
   const sheet = React.useRef<BottomSheet>(null)
 
-  const open = React.useCallback<DialogControl['open']>((i = 0) => {
+  const open = React.useCallback<DialogControlProps['open']>((i = 0) => {
     sheet.current?.snapToIndex(i)
   }, [])
 
@@ -52,6 +40,8 @@ export function Outer({
     [open, close],
   )
 
+  const context = React.useMemo(() => ({close}), [close])
+
   return (
     <Portal>
       <BottomSheet
@@ -73,13 +63,13 @@ export function Outer({
         handleStyle={{display: 'none'}}
         onChange={() => {}}
         onClose={onClose}>
-        {children}
+        <Context.Provider value={context}>{children}</Context.Provider>
       </BottomSheet>
     </Portal>
   )
 }
 
-export function Inner(props: React.PropsWithChildren<{}>) {
+export function Inner(props: DialogInnerProps) {
   const t = useTheme()
   return (
     <View
diff --git a/src/view/com/Dialog/index.web.tsx b/src/view/com/Dialog/index.web.tsx
index ea5e309da0..ee390daba1 100644
--- a/src/view/com/Dialog/index.web.tsx
+++ b/src/view/com/Dialog/index.web.tsx
@@ -1,5 +1,5 @@
 import React, {useImperativeHandle} from 'react'
-import {View, TouchableWithoutFeedback, ViewStyle} from 'react-native'
+import {View, TouchableWithoutFeedback} from 'react-native'
 import {FocusScope} from '@tamagui/focus-scope'
 import Animated, {FadeInDown, FadeIn} from 'react-native-reanimated'
 
@@ -8,34 +8,18 @@ import {Text} from '#/view/com/Typography'
 import {Portal} from '#/view/com/Portal'
 import {Button} from '#/view/com/Button'
 
-import {DialogProps, DialogControl} from '#/view/com/Dialog/types'
+import {DialogOuterProps, DialogInnerProps} from '#/view/com/Dialog/types'
+import {Context, useDialogContext} from '#/view/com/Dialog/context'
+
+export {useDialogControl} from '#/view/com/Dialog/context'
 
 const stopPropagation = (e: any) => e.stopPropagation()
 
-const Context = React.createContext<{
-  close: () => void
-}>({
-  close: () => {},
-})
-
-export function useDialogControl() {
-  const control = React.useRef<DialogControl>({
-    open: () => {},
-    close: () => {},
-  })
-
-  return control
-}
-
-export function useDialog() {
-  return React.useContext(Context)
-}
-
 export function Outer({
   control,
   onClose,
   children,
-}: React.PropsWithChildren<DialogProps>) {
+}: React.PropsWithChildren<DialogOuterProps>) {
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
   const [isOpen, setIsOpen] = React.useState(false)
@@ -127,10 +111,7 @@ export function Outer({
   )
 }
 
-export function Inner({
-  children,
-  style,
-}: React.PropsWithChildren<{style?: ViewStyle}>) {
+export function Inner({children, style}: DialogInnerProps) {
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
   return (
@@ -164,7 +145,7 @@ export function Handle() {
 
 export function Close() {
   const t = useTheme()
-  const {close} = useDialog()
+  const {close} = useDialogContext()
   return (
     <View
       style={[
diff --git a/src/view/com/Dialog/types.ts b/src/view/com/Dialog/types.ts
index ba7c55ca94..4c41849aa3 100644
--- a/src/view/com/Dialog/types.ts
+++ b/src/view/com/Dialog/types.ts
@@ -1,11 +1,18 @@
 import React from 'react'
+import type {ViewStyle} from 'react-native'
 
-export type DialogControl = {
+export type DialogContextProps = {
+  close: () => void
+}
+
+export type DialogControlProps = {
   open: (index?: number) => void
   close: () => void
 }
 
-export type DialogProps = {
-  control: React.RefObject<DialogControl>
+export type DialogOuterProps = {
+  control: React.RefObject<DialogControlProps>
   onClose?: () => void
 }
+
+export type DialogInnerProps = React.PropsWithChildren<{style?: ViewStyle}>
diff --git a/src/view/screens/DebugNew.tsx b/src/view/screens/DebugNew.tsx
index b6bd1f2c89..6abcc438b7 100644
--- a/src/view/screens/DebugNew.tsx
+++ b/src/view/screens/DebugNew.tsx
@@ -332,7 +332,7 @@ function Dialogs() {
       </Button>
 
       <Dialog.Outer control={control}>
-        <Dialog.Inner>
+        <Dialog.Inner style={{width: 'auto'}}>
           <Dialog.Handle />
           <View style={[a.gap_md]}>
             <Button