only add extra padding to alt text dialog when keyboard is open

This commit is contained in:
Samuel Newman
2025-05-07 13:37:18 +03:00
parent 27f3495a8d
commit a8808b4df9
@@ -5,6 +5,7 @@ import {msg, Plural, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {MAX_ALT_TEXT} from '#/lib/constants' import {MAX_ALT_TEXT} from '#/lib/constants'
import {useIsKeyboardVisible} from '#/lib/hooks/useIsKeyboardVisible'
import {enforceLen} from '#/lib/strings/helpers' import {enforceLen} from '#/lib/strings/helpers'
import {type ComposerImage} from '#/state/gallery' import {type ComposerImage} from '#/state/gallery'
import {AltTextCounterWrapper} from '#/view/com/composer/AltTextCounterWrapper' import {AltTextCounterWrapper} from '#/view/com/composer/AltTextCounterWrapper'
@@ -28,6 +29,7 @@ export const ImageAltTextDialog = ({
image, image,
onChange, onChange,
}: Props): React.ReactNode => { }: Props): React.ReactNode => {
const {height: minHeight} = useWindowDimensions()
const [altText, setAltText] = React.useState(image.alt) const [altText, setAltText] = React.useState(image.alt)
return ( return (
@@ -38,7 +40,8 @@ export const ImageAltTextDialog = ({
...image, ...image,
alt: enforceLen(altText, MAX_ALT_TEXT, true), alt: enforceLen(altText, MAX_ALT_TEXT, true),
}) })
}}> }}
nativeOptions={{minHeight}}>
<Dialog.Handle /> <Dialog.Handle />
<ImageAltTextInner <ImageAltTextInner
control={control} control={control}
@@ -65,6 +68,8 @@ const ImageAltTextInner = ({
const t = useTheme() const t = useTheme()
const windim = useWindowDimensions() const windim = useWindowDimensions()
const [isKeyboardVisible] = useIsKeyboardVisible()
const imageStyle = React.useMemo<ImageStyle>(() => { const imageStyle = React.useMemo<ImageStyle>(() => {
const maxWidth = IS_WEB ? 450 : windim.width const maxWidth = IS_WEB ? 450 : windim.width
const source = image.transformed ?? image.source const source = image.transformed ?? image.source
@@ -165,7 +170,7 @@ const ImageAltTextInner = ({
</AltTextCounterWrapper> </AltTextCounterWrapper>
</View> </View>
{/* Maybe fix this later -h */} {/* Maybe fix this later -h */}
{IS_ANDROID ? <View style={{height: 300}} /> : null} {IS_ANDROID && isKeyboardVisible ? <View style={{height: 300}} /> : null}
</Dialog.ScrollableInner> </Dialog.ScrollableInner>
) )
} }