Set a min height on native Menus (#10956)
(cherry picked from commit 5b66015631)
This commit is contained in:
@@ -6,9 +6,7 @@ import {
|
|||||||
View,
|
View,
|
||||||
type ViewStyle,
|
type ViewStyle,
|
||||||
} from 'react-native'
|
} from 'react-native'
|
||||||
import {msg} from '@lingui/core/macro'
|
import {Trans, useLingui} from '@lingui/react/macro'
|
||||||
import {useLingui} from '@lingui/react'
|
|
||||||
import {Trans} from '@lingui/react/macro'
|
|
||||||
import flattenReactChildren from 'react-keyed-flatten-children'
|
import flattenReactChildren from 'react-keyed-flatten-children'
|
||||||
|
|
||||||
import {atoms as a, useTheme} from '#/alf'
|
import {atoms as a, useTheme} from '#/alf'
|
||||||
@@ -32,6 +30,11 @@ import {
|
|||||||
import {Text} from '#/components/Typography'
|
import {Text} from '#/components/Typography'
|
||||||
import {IS_ANDROID, IS_IOS, IS_NATIVE} from '#/env'
|
import {IS_ANDROID, IS_IOS, IS_NATIVE} from '#/env'
|
||||||
|
|
||||||
|
// iOS 26's floaty sheet presentation subtracts the bottom safe-area inset from
|
||||||
|
// the requested detent, which eats the visible bottom padding of short (e.g.
|
||||||
|
// single-item) menus. Flooring the native sheet height restores that padding.
|
||||||
|
const IOS_MENU_MIN_HEIGHT = 128
|
||||||
|
|
||||||
export {
|
export {
|
||||||
type DialogControlProps as MenuControlProps,
|
type DialogControlProps as MenuControlProps,
|
||||||
useDialogControl as useMenuControl,
|
useDialogControl as useMenuControl,
|
||||||
@@ -101,16 +104,19 @@ export function Outer({
|
|||||||
onCloseAutoFocus?: (event: Event) => void
|
onCloseAutoFocus?: (event: Event) => void
|
||||||
}>) {
|
}>) {
|
||||||
const context = useMenuContext()
|
const context = useMenuContext()
|
||||||
const {_} = useLingui()
|
const {t: l} = useLingui()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog.Outer
|
<Dialog.Outer
|
||||||
control={context.control}
|
control={context.control}
|
||||||
nativeOptions={{preventExpansion: true}}>
|
nativeOptions={{
|
||||||
|
preventExpansion: true,
|
||||||
|
minHeight: IS_IOS ? IOS_MENU_MIN_HEIGHT : undefined,
|
||||||
|
}}>
|
||||||
<Dialog.Handle />
|
<Dialog.Handle />
|
||||||
{/* Re-wrap with context since Dialogs are portal-ed to root */}
|
{/* Re-wrap with context since Dialogs are portal-ed to root */}
|
||||||
<Context.Provider value={context}>
|
<Context.Provider value={context}>
|
||||||
<Dialog.ScrollableInner label={_(msg`Menu`)}>
|
<Dialog.ScrollableInner label={l`Menu`}>
|
||||||
<View style={[a.gap_lg]}>
|
<View style={[a.gap_lg]}>
|
||||||
{children}
|
{children}
|
||||||
{IS_NATIVE && showCancel && <Cancel />}
|
{IS_NATIVE && showCancel && <Cancel />}
|
||||||
@@ -353,12 +359,12 @@ export function Group({children, style}: GroupProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function Cancel() {
|
function Cancel() {
|
||||||
const {_} = useLingui()
|
const {t: l} = useLingui()
|
||||||
const context = useMenuContext()
|
const context = useMenuContext()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
label={_(msg`Close this dialog`)}
|
label={l`Close this dialog`}
|
||||||
size="small"
|
size="small"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
color="secondary"
|
color="secondary"
|
||||||
|
|||||||
Reference in New Issue
Block a user