diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index 40bd8f5cf0..92fe253557 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -29,6 +29,26 @@ export function Outer({ onClose, nativeOptions, testID, +}: React.PropsWithChildren) { + return ( + + + {children} + + + ) +} + +export function OuterWithoutPortal({ + children, + control, + onClose, + nativeOptions, + testID, }: React.PropsWithChildren) { const t = useTheme() const ref = React.useRef(null) @@ -93,26 +113,24 @@ export function Outer({ const context = React.useMemo(() => ({close}), [close]) return ( - - - { - if (e.nativeEvent.state === 'closed') { - onCloseAnimationComplete() - } - }} - cornerRadius={20} - {...nativeOptions}> - - {children} - - - - + + { + if (e.nativeEvent.state === 'closed') { + onCloseAnimationComplete() + } + }} + cornerRadius={20} + {...nativeOptions}> + + {children} + + + ) } diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx index 0e1442d7c8..7bd284f2ae 100644 --- a/src/components/Prompt.tsx +++ b/src/components/Prompt.tsx @@ -4,6 +4,7 @@ import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/compon import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {isNative} from '#/platform/detection' import {atoms as a, useBreakpoints, useTheme} from '#/alf' import {BottomSheetButton} from '#/components/BottomSheetButton' import {ButtonColor, ButtonText} from '#/components/Button' @@ -27,9 +28,11 @@ export function Outer({ children, control, testID, + withoutPortal, }: React.PropsWithChildren<{ control: Dialog.DialogControlProps testID?: string + withoutPortal?: boolean }>) { const {gtMobile} = useBreakpoints() const titleId = React.useId() @@ -40,8 +43,11 @@ export function Outer({ [titleId, descriptionId], ) + const Wrapper = + withoutPortal && isNative ? Dialog.OuterWithoutPortal : Dialog.Outer + return ( - + - + ) } @@ -181,6 +187,7 @@ export function Basic({ onConfirm, confirmButtonColor, showCancel = true, + withoutPortal, }: React.PropsWithChildren<{ control: Dialog.DialogOuterProps['control'] title: string @@ -197,9 +204,13 @@ export function Basic({ onConfirm: (e: PressableEvent) => void confirmButtonColor?: ButtonColor showCancel?: boolean + withoutPortal?: boolean }>) { return ( - + {title} {description} diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index f354f0f0dc..eb15a78a4b 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -861,6 +861,7 @@ export const ComposePost = ({ onConfirm={onClose} confirmButtonCta={_(msg`Discard`)} confirmButtonColor="negative" + withoutPortal={true} /> )