Dialog contents

src/view/com/Dialog/index.tsx

@@ -2,6 +2,18 @@ import React from 'react'
 
 import {DialogProps} from '#/view/com/Dialog/types'
 
-export function Dialog(props: React.PropsWithChildren<DialogProps>) {
+export function Outer(props: React.PropsWithChildren<DialogProps>) {
+  return null
+}
+
+export function Inner(props: React.PropsWithChildren<{}>) {
+  return null
+}
+
+export function Header(props: React.PropsWithChildren<{ title: string }>) {
+  return null
+}
+
+export function Close() {
   return null
 }

src/view/com/Dialog/index.web.tsx

@@ -4,8 +4,11 @@ import {FocusScope} from '@tamagui/focus-scope'
 import Animated, {FadeInDown, FadeIn, FadeOut} from 'react-native-reanimated'
 
 import {useTheme, atoms as a, useBreakpoints} from '#/alf'
+import {EventStopper} from '#/view/com/util/EventStopper'
+import {H3, Text} from '#/view/com/Typography'
 import {Portal} from '#/view/com/Portal'
 import {DialogProps} from '#/view/com/Dialog/types'
+import {Button} from '#/view/com/Button'
 
 const Context = React.createContext<{
   dismiss: () => void
@@ -17,7 +20,7 @@ export function useDialog() {
   return React.useContext(Context)
 }
 
-export function Dialog({
+export function Outer({
   isOpen,
   onDismiss,
   children,
@@ -63,7 +66,7 @@ export function Dialog({
                   style={[
                     a.absolute,
                     a.inset_0,
-                    t.atoms.bg_contrast_100,
+                    t.atoms.bg_contrast_200,
                     {opacity: 0.8},
                   ]}
                 />
@@ -81,8 +84,11 @@ export function Dialog({
                     <Animated.View
                       entering={FadeInDown.duration(200)}
                       exiting={FadeOut.duration(200)}
-                      aria-role="dialog">
-                      {children}
+                      aria-role="dialog"
+                    >
+                      <EventStopper>
+                        {children}
+                      </EventStopper>
                     </Animated.View>
                   </FocusScope>
                 </View>
@@ -94,3 +100,60 @@ export function Dialog({
     </>
   )
 }
+
+export function Inner(props: React.PropsWithChildren<{}>) {
+  const t = useTheme()
+  return (
+    <View style={[
+      a.relative,
+      a.rounded_md,
+      a.p_xl,
+      t.atoms.bg,
+    ]}>
+      {props.children}
+    </View>
+  )
+}
+
+export function Header({ children, title }: React.PropsWithChildren<{ title: string }>) {
+  const t = useTheme()
+  return (
+    <View style={[a.flex_row, a.justify_between, a.mb_lg]}>
+      <H3 style={[t.atoms.text_contrast_500, a.pr_lg]}>{title}</H3>
+      {children}
+    </View>
+  )
+}
+
+export function Close() {
+  const t = useTheme()
+  const {dismiss} = useDialog()
+  return (
+    <View style={[
+      a.absolute,
+      a.z_10,
+      {
+        top: a.pt_lg.paddingTop,
+        right: a.pr_lg.paddingRight,
+      }
+    ]}>
+      <Button onPress={dismiss} accessibilityLabel='Close dialog' accessibilityHint='Clicking this button will close the current dialog.'>
+        {({ state}) => (
+          <View style={[
+            a.justify_center,
+            a.align_center,
+            a.rounded_full,
+            t.atoms.bg_contrast_200,
+            {
+              pointerEvents: 'none',
+              height: 32,
+              width: 32,
+            }
+          ]}>
+            <Text>X</Text>
+          </View>
+        )}
+      </Button>
+    </View>
+  )
+}

src/view/screens/DebugNew.tsx

@@ -12,7 +12,7 @@ import {Text, H1, H2, H3, H4, H5, H6} from '#/view/com/Typography'
 import {InputText} from '#/view/com/forms/InputText'
 import {InputDate, utils} from '#/view/com/forms/InputDate'
 import {Logo} from '#/view/icons/Logo'
-import {Dialog} from '#/view/com/Dialog'
+import * as Dialog from '#/view/com/Dialog'
 
 function ThemeSelector() {
   const setColorMode = useSetColorMode()
@@ -320,21 +320,24 @@ function Forms() {
 function Dialogs() {
   const [isOpen, setIsOpen] = React.useState(false)
 
-  console.log({isOpen})
-
   return (
     <>
       <Button type='secondary' size='small' onPress={() => setIsOpen(true)} accessibilityLabel='Open basic dialog' accessibilityHint='Open basic dialog'>
         Open basic dialog
       </Button>
-      <Dialog isOpen={isOpen} onDismiss={() => setIsOpen(false)}>
-        <Button type='primary' size='small' onPress={() => setIsOpen(false)} accessibilityLabel='Open basic dialog' accessibilityHint='Open basic dialog'>
-          Close basic dialog
-        </Button>
-        <Button type='secondary' size='small' onPress={() => setIsOpen(false)} accessibilityLabel='Open basic dialog' accessibilityHint='Open basic dialog'>
-          Close basic dialog
-        </Button>
-      </Dialog>
+      <Dialog.Outer isOpen={isOpen} onDismiss={() => setIsOpen(false)}>
+        <Dialog.Inner>
+          <Dialog.Close />
+          <Dialog.Header title='Basic dialog' />
+
+          <Button type='primary' size='small' onPress={() => setIsOpen(false)} accessibilityLabel='Open basic dialog' accessibilityHint='Open basic dialog'>
+            Close basic dialog
+          </Button>
+          <Button type='secondary' size='small' onPress={() => setIsOpen(false)} accessibilityLabel='Open basic dialog' accessibilityHint='Open basic dialog'>
+            Close basic dialog
+          </Button>
+        </Dialog.Inner>
+      </Dialog.Outer>
     </>
   )
 }