From 5217876f241a991e55d789cd5faa8d8ab1890d1b Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 23 May 2024 10:01:31 -0700 Subject: [PATCH] Add padding to dialogs when keyboard is open on Android (#4182) * add keyboard padding to android dialogs * missing `keyboardDismissMode` for `ScrollableInner` * add to `MutedWords` * add to `LabelsOnMe` --- src/components/Dialog/index.tsx | 12 +++++-- src/components/KeyboardPadding.android.tsx | 31 +++++++++++++++++++ src/components/KeyboardPadding.tsx | 3 ++ src/components/ReportDialog/SubmitView.tsx | 2 ++ src/components/dialogs/MutedWords.tsx | 2 ++ .../moderation/LabelsOnMeDialog.tsx | 3 +- src/view/com/composer/GifAltText.tsx | 2 ++ src/view/com/modals/Modal.tsx | 2 ++ 8 files changed, 54 insertions(+), 3 deletions(-) create mode 100644 src/components/KeyboardPadding.android.tsx create mode 100644 src/components/KeyboardPadding.tsx diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index 315f863b..f32e0e79 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -1,5 +1,12 @@ import React, {useImperativeHandle} from 'react' -import {Dimensions, Pressable, StyleProp, View, ViewStyle} from 'react-native' +import { + Dimensions, + Keyboard, + Pressable, + StyleProp, + View, + ViewStyle, +} from 'react-native' import Animated, {useAnimatedStyle} from 'react-native-reanimated' import {useSafeAreaInsets} from 'react-native-safe-area-context' import BottomSheet, { @@ -169,7 +176,8 @@ export function Outer({ // Android importantForAccessibility="yes" style={[a.absolute, a.inset_0]} - testID={testID}> + testID={testID} + onTouchMove={() => Keyboard.dismiss()}> { + 'worklet' + + if (maxHeight && e.height > maxHeight) { + keyboardHeight.value = maxHeight + } else { + keyboardHeight.value = e.height + } + }, + }, + [maxHeight], + ) + + const animatedStyle = useAnimatedStyle(() => ({ + height: keyboardHeight.value, + })) + + return +} diff --git a/src/components/KeyboardPadding.tsx b/src/components/KeyboardPadding.tsx new file mode 100644 index 00000000..797d42ba --- /dev/null +++ b/src/components/KeyboardPadding.tsx @@ -0,0 +1,3 @@ +export function KeyboardPadding({maxHeight: _}: {maxHeight?: number}) { + return null +} diff --git a/src/components/ReportDialog/SubmitView.tsx b/src/components/ReportDialog/SubmitView.tsx index 40d655aa..e921d102 100644 --- a/src/components/ReportDialog/SubmitView.tsx +++ b/src/components/ReportDialog/SubmitView.tsx @@ -15,6 +15,7 @@ import * as Dialog from '#/components/Dialog' import * as Toggle from '#/components/forms/Toggle' import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron' +import {KeyboardPadding} from '#/components/KeyboardPadding' import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' import {ReportDialogProps} from './types' @@ -221,6 +222,7 @@ export function SubmitView({ {submitting && } + ) } diff --git a/src/components/dialogs/MutedWords.tsx b/src/components/dialogs/MutedWords.tsx index 53426342..dea81941 100644 --- a/src/components/dialogs/MutedWords.tsx +++ b/src/components/dialogs/MutedWords.tsx @@ -28,6 +28,7 @@ import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Has import {PageText_Stroke2_Corner0_Rounded as PageText} from '#/components/icons/PageText' import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' +import {KeyboardPadding} from '#/components/KeyboardPadding' import {Loader} from '#/components/Loader' import * as Prompt from '#/components/Prompt' import {Text} from '#/components/Typography' @@ -256,6 +257,7 @@ function MutedWordsInner() { + ) } diff --git a/src/components/moderation/LabelsOnMeDialog.tsx b/src/components/moderation/LabelsOnMeDialog.tsx index 8583a226..2923981f 100644 --- a/src/components/moderation/LabelsOnMeDialog.tsx +++ b/src/components/moderation/LabelsOnMeDialog.tsx @@ -14,6 +14,7 @@ import * as Toast from '#/view/com/util/Toast' import {atoms as a, useBreakpoints, useTheme} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' +import {KeyboardPadding} from '#/components/KeyboardPadding' import {InlineLinkText} from '#/components/Link' import {Text} from '#/components/Typography' import {Divider} from '../Divider' @@ -108,8 +109,8 @@ function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) { )} - + ) } diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx index b1f10bf2..cdef1335 100644 --- a/src/view/com/composer/GifAltText.tsx +++ b/src/view/com/composer/GifAltText.tsx @@ -20,6 +20,7 @@ import * as Dialog from '#/components/Dialog' import * as TextField from '#/components/forms/TextField' import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' import {PlusSmall_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' +import {KeyboardPadding} from '#/components/KeyboardPadding' import {Text} from '#/components/Typography' import {GifEmbed} from '../util/post-embeds/GifEmbed' import {AltTextReminder} from './photos/Gallery' @@ -180,6 +181,7 @@ function AltTextInner({ + ) } diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index 65248130..d82975b5 100644 --- a/src/view/com/modals/Modal.tsx +++ b/src/view/com/modals/Modal.tsx @@ -5,6 +5,7 @@ import BottomSheet from '@discord/bottom-sheet/src' import {useModalControls, useModals} from '#/state/modals' import {usePalette} from 'lib/hooks/usePalette' +import {KeyboardPadding} from '#/components/KeyboardPadding' import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop' import * as AddAppPassword from './AddAppPasswords' import * as AltImageModal from './AltImage' @@ -146,6 +147,7 @@ export function ModalsContainer() { handleStyle={[styles.handle, pal.view]} onChange={onBottomSheetChange}> {element} + ) }