only add extra padding to alt text dialog when keyboard is open
This commit is contained in:
@@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user