diff options
-rw-r--r-- | src/App.native.tsx | 2 | ||||
-rw-r--r-- | src/components/KeyboardControllerPadding.android.tsx (renamed from src/components/KeyboardPadding.android.tsx) | 2 | ||||
-rw-r--r-- | src/components/KeyboardControllerPadding.tsx | 7 | ||||
-rw-r--r-- | src/components/KeyboardPadding.tsx | 3 | ||||
-rw-r--r-- | src/components/ReportDialog/SubmitView.tsx | 2 | ||||
-rw-r--r-- | src/components/dialogs/MutedWords.tsx | 2 | ||||
-rw-r--r-- | src/components/dms/ReportDialog.tsx | 2 | ||||
-rw-r--r-- | src/components/moderation/LabelsOnMeDialog.tsx | 2 | ||||
-rw-r--r-- | src/screens/Messages/Conversation/index.tsx | 12 | ||||
-rw-r--r-- | src/view/com/composer/Composer.tsx | 347 | ||||
-rw-r--r-- | src/view/com/composer/GifAltText.tsx | 2 | ||||
-rw-r--r-- | src/view/com/modals/AddAppPasswords.tsx | 2 | ||||
-rw-r--r-- | src/view/com/modals/Modal.tsx | 2 |
13 files changed, 186 insertions, 201 deletions
diff --git a/src/App.native.tsx b/src/App.native.tsx index b359ad911..5b2071e10 100644 --- a/src/App.native.tsx +++ b/src/App.native.tsx @@ -143,7 +143,7 @@ function App() { * that is set up in the InnerApp component above. */ return ( - <KeyboardProvider enabled={true} statusBarTranslucent={true}> + <KeyboardProvider enabled={false} statusBarTranslucent={true}> <SessionProvider> <ShellStateProvider> <PrefsStateProvider> diff --git a/src/components/KeyboardPadding.android.tsx b/src/components/KeyboardControllerPadding.android.tsx index 40dec3001..92ef1b0b0 100644 --- a/src/components/KeyboardPadding.android.tsx +++ b/src/components/KeyboardControllerPadding.android.tsx @@ -5,7 +5,7 @@ import Animated, { useSharedValue, } from 'react-native-reanimated' -export function KeyboardPadding({maxHeight}: {maxHeight?: number}) { +export function KeyboardControllerPadding({maxHeight}: {maxHeight?: number}) { const keyboardHeight = useSharedValue(0) useKeyboardHandler( diff --git a/src/components/KeyboardControllerPadding.tsx b/src/components/KeyboardControllerPadding.tsx new file mode 100644 index 000000000..f3163d87c --- /dev/null +++ b/src/components/KeyboardControllerPadding.tsx @@ -0,0 +1,7 @@ +export function KeyboardControllerPadding({ + maxHeight: _, +}: { + maxHeight?: number +}) { + return null +} diff --git a/src/components/KeyboardPadding.tsx b/src/components/KeyboardPadding.tsx deleted file mode 100644 index 797d42ba0..000000000 --- a/src/components/KeyboardPadding.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export function KeyboardPadding({maxHeight: _}: {maxHeight?: number}) { - return null -} diff --git a/src/components/ReportDialog/SubmitView.tsx b/src/components/ReportDialog/SubmitView.tsx index 74ecf92e4..3731617fd 100644 --- a/src/components/ReportDialog/SubmitView.tsx +++ b/src/components/ReportDialog/SubmitView.tsx @@ -15,7 +15,6 @@ 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' @@ -222,7 +221,6 @@ export function SubmitView({ {submitting && <ButtonIcon icon={Loader} />} </Button> </View> - <KeyboardPadding /> </View> ) } diff --git a/src/components/dialogs/MutedWords.tsx b/src/components/dialogs/MutedWords.tsx index dea819412..534263422 100644 --- a/src/components/dialogs/MutedWords.tsx +++ b/src/components/dialogs/MutedWords.tsx @@ -28,7 +28,6 @@ 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' @@ -257,7 +256,6 @@ function MutedWordsInner() { </View> <Dialog.Close /> - <KeyboardPadding maxHeight={100} /> </Dialog.ScrollableInner> ) } diff --git a/src/components/dms/ReportDialog.tsx b/src/components/dms/ReportDialog.tsx index 9c4ed2a0e..5493a1c87 100644 --- a/src/components/dms/ReportDialog.tsx +++ b/src/components/dms/ReportDialog.tsx @@ -16,6 +16,7 @@ import {CharProgress} from '#/view/com/composer/char-progress/CharProgress' import * as Toast from '#/view/com/util/Toast' import {atoms as a, useBreakpoints, useTheme} from '#/alf' import * as Dialog from '#/components/Dialog' +import {KeyboardControllerPadding} from '#/components/KeyboardControllerPadding' import {Button, ButtonIcon, ButtonText} from '../Button' import {Divider} from '../Divider' import {ChevronLeft_Stroke2_Corner0_Rounded as Chevron} from '../icons/Chevron' @@ -47,6 +48,7 @@ let ReportDialog = ({ <Dialog.ScrollableInner label={_(msg`Report this message`)}> <DialogInner params={params} /> <Dialog.Close /> + <KeyboardControllerPadding /> </Dialog.ScrollableInner> </Dialog.Outer> ) diff --git a/src/components/moderation/LabelsOnMeDialog.tsx b/src/components/moderation/LabelsOnMeDialog.tsx index 7c76269ac..d0f0d4ea0 100644 --- a/src/components/moderation/LabelsOnMeDialog.tsx +++ b/src/components/moderation/LabelsOnMeDialog.tsx @@ -14,7 +14,6 @@ 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' @@ -110,7 +109,6 @@ function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) { </> )} <Dialog.Close /> - <KeyboardPadding /> </Dialog.ScrollableInner> ) } diff --git a/src/screens/Messages/Conversation/index.tsx b/src/screens/Messages/Conversation/index.tsx index d21887de3..a99ef8d4d 100644 --- a/src/screens/Messages/Conversation/index.tsx +++ b/src/screens/Messages/Conversation/index.tsx @@ -1,5 +1,6 @@ import React, {useCallback} from 'react' import {View} from 'react-native' +import {useKeyboardController} from 'react-native-keyboard-controller' import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -34,6 +35,17 @@ export function MessagesConversationScreen({route}: Props) { const convoId = route.params.conversation const {setCurrentConvoId} = useCurrentConvoId() + const {setEnabled} = useKeyboardController() + useFocusEffect( + useCallback(() => { + if (isWeb) return + setEnabled(true) + return () => { + setEnabled(false) + } + }, [setEnabled]), + ) + useFocusEffect( useCallback(() => { setCurrentConvoId(convoId) diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index e8ea5189f..9bb704012 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -10,16 +10,12 @@ import { ActivityIndicator, BackHandler, Keyboard, + KeyboardAvoidingView, LayoutChangeEvent, StyleSheet, TouchableOpacity, View, } from 'react-native' -import { - KeyboardAvoidingView, - KeyboardStickyView, - useKeyboardController, -} from 'react-native-keyboard-controller' import Animated, { interpolateColor, useAnimatedStyle, @@ -131,17 +127,6 @@ export const ComposePost = observer(function ComposePost({ const {closeAllModals} = useModalControls() const t = useTheme() - // Disable this in the composer to prevent any extra keyboard height being applied. - // See https://github.com/bluesky-social/social-app/pull/4399 - const {setEnabled} = useKeyboardController() - React.useEffect(() => { - if (!isAndroid) return - setEnabled(false) - return () => { - setEnabled(true) - } - }, [setEnabled]) - const [isKeyboardVisible] = useIsKeyboardVisible({iosUseWillEvents: true}) const [isProcessing, setIsProcessing] = useState(false) const [processingState, setProcessingState] = useState('') @@ -431,181 +416,175 @@ export const ComposePost = observer(function ComposePost({ } = useAnimatedBorders() return ( - <> - <KeyboardAvoidingView - testID="composePostView" - behavior="padding" - style={a.flex_1} - keyboardVerticalOffset={replyTo ? 115 : isAndroid ? 180 : 162}> - <View - style={[a.flex_1, viewStyles]} - aria-modal - accessibilityViewIsModal> - <Animated.View style={topBarAnimatedStyle}> - <View style={styles.topbarInner}> - <TouchableOpacity - testID="composerDiscardButton" - onPress={onPressCancel} - onAccessibilityEscape={onPressCancel} - accessibilityRole="button" - accessibilityLabel={_(msg`Cancel`)} - accessibilityHint={_( - msg`Closes post composer and discards post draft`, - )} - hitSlop={HITSLOP_10}> - <Text style={[pal.link, s.f18]}> - <Trans>Cancel</Trans> - </Text> - </TouchableOpacity> - <View style={a.flex_1} /> - {isProcessing ? ( - <> - <Text style={pal.textLight}>{processingState}</Text> - <View style={styles.postBtn}> - <ActivityIndicator /> - </View> - </> - ) : ( - <> - <LabelsBtn - labels={labels} - onChange={setLabels} - hasMedia={hasMedia} - /> - {canPost ? ( - <TouchableOpacity - testID="composerPublishBtn" - onPress={onPressPublish} - accessibilityRole="button" - accessibilityLabel={ - replyTo ? _(msg`Publish reply`) : _(msg`Publish post`) - } - accessibilityHint=""> - <LinearGradient - colors={[ - gradients.blueLight.start, - gradients.blueLight.end, - ]} - start={{x: 0, y: 0}} - end={{x: 1, y: 1}} - style={styles.postBtn}> - <Text style={[s.white, s.f16, s.bold]}> - {replyTo ? ( - <Trans context="action">Reply</Trans> - ) : ( - <Trans context="action">Post</Trans> - )} - </Text> - </LinearGradient> - </TouchableOpacity> - ) : ( - <View style={[styles.postBtn, pal.btn]}> - <Text style={[pal.textLight, s.f16, s.bold]}> - <Trans context="action">Post</Trans> - </Text> - </View> - )} - </> + <KeyboardAvoidingView + testID="composePostView" + behavior={isIOS ? 'padding' : 'height'} + keyboardVerticalOffset={isIOS ? 70 : 0} + style={[a.flex_1]}> + <View style={[a.flex_1, viewStyles]} aria-modal accessibilityViewIsModal> + <Animated.View style={topBarAnimatedStyle}> + <View style={styles.topbarInner}> + <TouchableOpacity + testID="composerDiscardButton" + onPress={onPressCancel} + onAccessibilityEscape={onPressCancel} + accessibilityRole="button" + accessibilityLabel={_(msg`Cancel`)} + accessibilityHint={_( + msg`Closes post composer and discards post draft`, )} - </View> - - {isAltTextRequiredAndMissing && ( - <View style={[styles.reminderLine, pal.viewLight]}> - <View style={styles.errorIcon}> - <FontAwesomeIcon - icon="exclamation" - style={{color: colors.red4}} - size={10} - /> + hitSlop={HITSLOP_10}> + <Text style={[pal.link, s.f18]}> + <Trans>Cancel</Trans> + </Text> + </TouchableOpacity> + <View style={a.flex_1} /> + {isProcessing ? ( + <> + <Text style={pal.textLight}>{processingState}</Text> + <View style={styles.postBtn}> + <ActivityIndicator /> </View> - <Text style={[pal.text, a.flex_1]}> - <Trans>One or more images is missing alt text.</Trans> - </Text> - </View> + </> + ) : ( + <> + <LabelsBtn + labels={labels} + onChange={setLabels} + hasMedia={hasMedia} + /> + {canPost ? ( + <TouchableOpacity + testID="composerPublishBtn" + onPress={onPressPublish} + accessibilityRole="button" + accessibilityLabel={ + replyTo ? _(msg`Publish reply`) : _(msg`Publish post`) + } + accessibilityHint=""> + <LinearGradient + colors={[ + gradients.blueLight.start, + gradients.blueLight.end, + ]} + start={{x: 0, y: 0}} + end={{x: 1, y: 1}} + style={styles.postBtn}> + <Text style={[s.white, s.f16, s.bold]}> + {replyTo ? ( + <Trans context="action">Reply</Trans> + ) : ( + <Trans context="action">Post</Trans> + )} + </Text> + </LinearGradient> + </TouchableOpacity> + ) : ( + <View style={[styles.postBtn, pal.btn]}> + <Text style={[pal.textLight, s.f16, s.bold]}> + <Trans context="action">Post</Trans> + </Text> + </View> + )} + </> )} - {error !== '' && ( - <View style={styles.errorLine}> - <View style={styles.errorIcon}> - <FontAwesomeIcon - icon="exclamation" - style={{color: colors.red4}} - size={10} - /> - </View> - <Text style={[s.red4, a.flex_1]}>{error}</Text> + </View> + + {isAltTextRequiredAndMissing && ( + <View style={[styles.reminderLine, pal.viewLight]}> + <View style={styles.errorIcon}> + <FontAwesomeIcon + icon="exclamation" + style={{color: colors.red4}} + size={10} + /> </View> - )} - </Animated.View> - <Animated.ScrollView - onScroll={scrollHandler} - style={styles.scrollView} - keyboardShouldPersistTaps="always" - onContentSizeChange={onScrollViewContentSizeChange} - onLayout={onScrollViewLayout}> - {replyTo ? <ComposerReplyTo replyTo={replyTo} /> : undefined} - - <View - style={[ - styles.textInputLayout, - isNative && styles.textInputLayoutMobile, - ]}> - <UserAvatar - avatar={currentProfile?.avatar} - size={50} - type={currentProfile?.associated?.labeler ? 'labeler' : 'user'} + <Text style={[pal.text, a.flex_1]}> + <Trans>One or more images is missing alt text.</Trans> + </Text> + </View> + )} + {error !== '' && ( + <View style={styles.errorLine}> + <View style={styles.errorIcon}> + <FontAwesomeIcon + icon="exclamation" + style={{color: colors.red4}} + size={10} + /> + </View> + <Text style={[s.red4, a.flex_1]}>{error}</Text> + </View> + )} + </Animated.View> + <Animated.ScrollView + onScroll={scrollHandler} + style={styles.scrollView} + keyboardShouldPersistTaps="always" + onContentSizeChange={onScrollViewContentSizeChange} + onLayout={onScrollViewLayout}> + {replyTo ? <ComposerReplyTo replyTo={replyTo} /> : undefined} + + <View + style={[ + styles.textInputLayout, + isNative && styles.textInputLayoutMobile, + ]}> + <UserAvatar + avatar={currentProfile?.avatar} + size={50} + type={currentProfile?.associated?.labeler ? 'labeler' : 'user'} + /> + <TextInput + ref={textInput} + richtext={richtext} + placeholder={selectTextInputPlaceholder} + autoFocus + setRichText={setRichText} + onPhotoPasted={onPhotoPasted} + onPressPublish={onPressPublish} + onNewLink={onNewLink} + onError={setError} + accessible={true} + accessibilityLabel={_(msg`Write post`)} + accessibilityHint={_( + msg`Compose posts up to ${MAX_GRAPHEME_LENGTH} characters in length`, + )} + /> + </View> + + <Gallery gallery={gallery} /> + {gallery.isEmpty && extLink && ( + <View style={a.relative}> + <ExternalEmbed + link={extLink} + gif={extGif} + onRemove={() => { + setExtLink(undefined) + setExtGif(undefined) + }} /> - <TextInput - ref={textInput} - richtext={richtext} - placeholder={selectTextInputPlaceholder} - autoFocus - setRichText={setRichText} - onPhotoPasted={onPhotoPasted} - onPressPublish={onPressPublish} - onNewLink={onNewLink} - onError={setError} - accessible={true} - accessibilityLabel={_(msg`Write post`)} - accessibilityHint={_( - msg`Compose posts up to ${MAX_GRAPHEME_LENGTH} characters in length`, - )} + <GifAltText + link={extLink} + gif={extGif} + onSubmit={handleChangeGifAltText} /> </View> + )} - <Gallery gallery={gallery} /> - {gallery.isEmpty && extLink && ( - <View style={a.relative}> - <ExternalEmbed - link={extLink} - gif={extGif} - onRemove={() => { - setExtLink(undefined) - setExtGif(undefined) - }} - /> - <GifAltText - link={extLink} - gif={extGif} - onSubmit={handleChangeGifAltText} - /> - </View> - )} - {quote ? ( - <View style={[s.mt5, isWeb && s.mb10]}> - <View style={{pointerEvents: 'none'}}> - <QuoteEmbed quote={quote} /> - </View> - {quote.uri !== initQuote?.uri && ( - <QuoteX onRemove={() => setQuote(undefined)} /> - )} + {quote ? ( + <View style={[s.mt5, s.mb2, isWeb && s.mb10]}> + <View style={{pointerEvents: 'none'}}> + <QuoteEmbed quote={quote} /> </View> - ) : undefined} - </Animated.ScrollView> - <SuggestedLanguage text={richtext.text} /> - </View> - </KeyboardAvoidingView> - <KeyboardStickyView - offset={{closed: isIOS ? -insets.bottom : 0, opened: 0}}> + {quote.uri !== initQuote?.uri && ( + <QuoteX onRemove={() => setQuote(undefined)} /> + )} + </View> + ) : undefined} + </Animated.ScrollView> + <SuggestedLanguage text={richtext.text} /> + {replyTo ? null : ( <ThreadgateBtn threadgate={threadgate} @@ -644,7 +623,7 @@ export const ComposePost = observer(function ComposePost({ <SelectLangBtn /> <CharProgress count={graphemeLength} /> </View> - </KeyboardStickyView> + </View> <Prompt.Basic control={discardPromptControl} title={_(msg`Discard draft?`)} @@ -653,7 +632,7 @@ export const ComposePost = observer(function ComposePost({ confirmButtonCta={_(msg`Discard`)} confirmButtonColor="negative" /> - </> + </KeyboardAvoidingView> ) }) diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx index cdef13352..b1f10bf2f 100644 --- a/src/view/com/composer/GifAltText.tsx +++ b/src/view/com/composer/GifAltText.tsx @@ -20,7 +20,6 @@ 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' @@ -181,7 +180,6 @@ function AltTextInner({ </View> </View> <Dialog.Close /> - <KeyboardPadding /> </Dialog.ScrollableInner> ) } diff --git a/src/view/com/modals/AddAppPasswords.tsx b/src/view/com/modals/AddAppPasswords.tsx index d6df12657..92229e7b6 100644 --- a/src/view/com/modals/AddAppPasswords.tsx +++ b/src/view/com/modals/AddAppPasswords.tsx @@ -22,7 +22,6 @@ import {Text} from '#/view/com/util/text/Text' import * as Toast from '#/view/com/util/Toast' import {atoms as a} from '#/alf' import * as Toggle from '#/components/forms/Toggle' -import {KeyboardPadding} from '#/components/KeyboardPadding' export const snapPoints = ['90%'] @@ -246,7 +245,6 @@ export function Component({}: {}) { onPress={!appPassword ? createAppPassword : onDone} /> </View> - <KeyboardPadding /> </View> ) } diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index eb9666405..ecfe5806e 100644 --- a/src/view/com/modals/Modal.tsx +++ b/src/view/com/modals/Modal.tsx @@ -6,7 +6,6 @@ import BottomSheet from '@discord/bottom-sheet/src' import {useModalControls, useModals} from '#/state/modals' import {usePalette} from 'lib/hooks/usePalette' import {FullWindowOverlay} from '#/components/FullWindowOverlay' -import {KeyboardPadding} from '#/components/KeyboardPadding' import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop' import * as AddAppPassword from './AddAppPasswords' import * as AltImageModal from './AltImage' @@ -147,7 +146,6 @@ export function ModalsContainer() { handleStyle={[styles.handle, pal.view]} onChange={onBottomSheetChange}> {element} - <KeyboardPadding /> </BottomSheet> </Container> ) |