about summary refs log tree commit diff
path: root/src/components/Dialog
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Dialog')
-rw-r--r--src/components/Dialog/index.tsx8
-rw-r--r--src/components/Dialog/index.web.tsx2
-rw-r--r--src/components/Dialog/types.ts11
3 files changed, 16 insertions, 5 deletions
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index f0e7b7e82..0da2919c5 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -23,6 +23,7 @@ import {
   DialogInnerProps,
 } from '#/components/Dialog/types'
 import {Context} from '#/components/Dialog/context'
+import {isNative} from 'platform/detection'
 
 export {useDialogControl, useDialogContext} from '#/components/Dialog/context'
 export * from '#/components/Dialog/types'
@@ -75,6 +76,7 @@ export function Outer({
   control,
   onClose,
   nativeOptions,
+  testID,
 }: React.PropsWithChildren<DialogOuterProps>) {
   const t = useTheme()
   const sheet = React.useRef<BottomSheet>(null)
@@ -145,7 +147,8 @@ export function Outer({
           accessibilityViewIsModal
           // Android
           importantForAccessibility="yes"
-          style={[a.absolute, a.inset_0]}>
+          style={[a.absolute, a.inset_0]}
+          testID={testID}>
           <BottomSheet
             enableDynamicSizing={!hasSnapPoints}
             enablePanDownToClose
@@ -219,7 +222,8 @@ export function ScrollableInner({children, style}: DialogInnerProps) {
           borderTopRightRadius: 40,
         },
         flatten(style),
-      ]}>
+      ]}
+      contentContainerStyle={isNative ? a.pb_4xl : undefined}>
       {children}
       <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
     </BottomSheetScrollView>
diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx
index 3a7f73342..038f6295a 100644
--- a/src/components/Dialog/index.web.tsx
+++ b/src/components/Dialog/index.web.tsx
@@ -99,7 +99,7 @@ export function Outer({
                     style={[
                       web(a.fixed),
                       a.inset_0,
-                      {opacity: 0.5, backgroundColor: t.palette.black},
+                      {opacity: 0.8, backgroundColor: t.palette.black},
                     ]}
                   />
                 )}
diff --git a/src/components/Dialog/types.ts b/src/components/Dialog/types.ts
index 4fc60ec39..b1a46f853 100644
--- a/src/components/Dialog/types.ts
+++ b/src/components/Dialog/types.ts
@@ -1,5 +1,5 @@
 import React from 'react'
-import type {AccessibilityProps} from 'react-native'
+import type {AccessibilityProps, GestureResponderEvent} from 'react-native'
 import {BottomSheetProps} from '@gorhom/bottom-sheet'
 
 import {ViewStyleProp} from '#/alf'
@@ -10,9 +10,15 @@ type A11yProps = Required<AccessibilityProps>
  * Mutated by useImperativeHandle to provide a public API for controlling the
  * dialog. The methods here will actually become the handlers defined within
  * the `Dialog.Outer` component.
+ *
+ * `Partial<GestureResponderEvent>` here allows us to add this directly to the
+ * `onPress` prop of a button, for example. If this type was not added, we
+ * would need to create a function to wrap `.open()` with.
  */
 export type DialogControlRefProps = {
-  open: (options?: DialogControlOpenOptions) => void
+  open: (
+    options?: DialogControlOpenOptions & Partial<GestureResponderEvent>,
+  ) => void
   close: (callback?: () => void) => void
 }
 
@@ -46,6 +52,7 @@ export type DialogOuterProps = {
     sheet?: Omit<BottomSheetProps, 'children'>
   }
   webOptions?: {}
+  testID?: string
 }
 
 type DialogInnerPropsBase<T> = React.PropsWithChildren<ViewStyleProp> & T