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.tsx16
-rw-r--r--src/components/Dialog/index.web.tsx2
-rw-r--r--src/components/Dialog/types.ts17
3 files changed, 28 insertions, 7 deletions
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index f0e7b7e82..a85a1c4fd 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
@@ -203,12 +206,16 @@ export function Inner({children, style}: DialogInnerProps) {
   )
 }
 
-export function ScrollableInner({children, style}: DialogInnerProps) {
+export function ScrollableInner({
+  children,
+  keyboardDismissMode,
+  style,
+}: DialogInnerProps) {
   const insets = useSafeAreaInsets()
   return (
     <BottomSheetScrollView
       keyboardShouldPersistTaps="handled"
-      keyboardDismissMode="on-drag"
+      keyboardDismissMode={keyboardDismissMode || 'on-drag'}
       style={[
         a.flex_1, // main diff is this
         a.p_xl,
@@ -219,7 +226,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..91d86cb53 100644
--- a/src/components/Dialog/types.ts
+++ b/src/components/Dialog/types.ts
@@ -1,5 +1,9 @@
 import React from 'react'
-import type {AccessibilityProps} from 'react-native'
+import type {
+  AccessibilityProps,
+  GestureResponderEvent,
+  ScrollViewProps,
+} from 'react-native'
 import {BottomSheetProps} from '@gorhom/bottom-sheet'
 
 import {ViewStyleProp} from '#/alf'
@@ -10,9 +14,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 +56,7 @@ export type DialogOuterProps = {
     sheet?: Omit<BottomSheetProps, 'children'>
   }
   webOptions?: {}
+  testID?: string
 }
 
 type DialogInnerPropsBase<T> = React.PropsWithChildren<ViewStyleProp> & T
@@ -54,9 +65,11 @@ export type DialogInnerProps =
       label?: undefined
       accessibilityLabelledBy: A11yProps['aria-labelledby']
       accessibilityDescribedBy: string
+      keyboardDismissMode?: ScrollViewProps['keyboardDismissMode']
     }>
   | DialogInnerPropsBase<{
       label: string
       accessibilityLabelledBy?: undefined
       accessibilityDescribedBy?: undefined
+      keyboardDismissMode?: ScrollViewProps['keyboardDismissMode']
     }>