diff options
Diffstat (limited to 'src/components/Dialog')
-rw-r--r-- | src/components/Dialog/index.tsx | 8 | ||||
-rw-r--r-- | src/components/Dialog/index.web.tsx | 2 | ||||
-rw-r--r-- | src/components/Dialog/types.ts | 11 |
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 |