acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Revert "use KeyboardStickyView from r-n-keyboard-controller"

Browse Source 
This reverts commit 426c812904.
This commit is contained in:
Samuel Newman
2024-05-07 15:08:48 +01:00
parent 486961fe77
commit 9cb3d92469
2 changed files with 204 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.native.tsx
+1 -4
View File
@@ -4,7 +4,6 @@ import 'view/icons'
import React, {useEffect, useState} from 'react' import React, {useEffect, useState} from 'react'
import {GestureHandlerRootView} from 'react-native-gesture-handler' import {GestureHandlerRootView} from 'react-native-gesture-handler'
import {KeyboardProvider} from 'react-native-keyboard-controller'
import {RootSiblingParent} from 'react-native-root-siblings' import {RootSiblingParent} from 'react-native-root-siblings'
import { import {
initialWindowMetrics, initialWindowMetrics,
@@ -157,9 +156,7 @@ function App() {
<LightboxStateProvider> <LightboxStateProvider>
<I18nProvider> <I18nProvider>
<PortalProvider> <PortalProvider>
<KeyboardProvider> <InnerApp />
<InnerApp />
</KeyboardProvider>
</PortalProvider> </PortalProvider>
</I18nProvider> </I18nProvider>
</LightboxStateProvider> </LightboxStateProvider>
src/view/com/composer/Composer.tsx
+203 -196
View File
@@ -43,13 +43,14 @@ import {useComposerControls} from '#/state/shell/composer'
import {useAnalytics} from 'lib/analytics/analytics' import {useAnalytics} from 'lib/analytics/analytics'
import * as apilib from 'lib/api/index' import * as apilib from 'lib/api/index'
import {MAX_GRAPHEME_LENGTH} from 'lib/constants' import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {cleanError} from 'lib/strings/errors' import {cleanError} from 'lib/strings/errors'
import {insertMentionAt} from 'lib/strings/mention-manip' import {insertMentionAt} from 'lib/strings/mention-manip'
import {shortenLinks} from 'lib/strings/rich-text-manip' import {shortenLinks} from 'lib/strings/rich-text-manip'
import {colors, gradients, s} from 'lib/styles' import {colors, gradients, s} from 'lib/styles'
import {isIOS, isNative, isWeb} from 'platform/detection' import {isAndroid, isIOS, isNative, isWeb} from 'platform/detection'
import {useDialogStateControlContext} from 'state/dialogs' import {useDialogStateControlContext} from 'state/dialogs'
import {GalleryModel} from 'state/models/media/gallery' import {GalleryModel} from 'state/models/media/gallery'
import {ComposerOpts} from 'state/shell/composer' import {ComposerOpts} from 'state/shell/composer'
@@ -65,7 +66,6 @@ import {UserAvatar} from '../util/UserAvatar'
import {CharProgress} from './char-progress/CharProgress' import {CharProgress} from './char-progress/CharProgress'
import {ExternalEmbed} from './ExternalEmbed' import {ExternalEmbed} from './ExternalEmbed'
import {GifAltText} from './GifAltText' import {GifAltText} from './GifAltText'
import {KeyboardAccessory} from './KeyboardAccessory'
import {LabelsBtn} from './labels/LabelsBtn' import {LabelsBtn} from './labels/LabelsBtn'
import {Gallery} from './photos/Gallery' import {Gallery} from './photos/Gallery'
import {OpenCameraBtn} from './photos/OpenCameraBtn' import {OpenCameraBtn} from './photos/OpenCameraBtn'
@@ -112,6 +112,7 @@ export const ComposePost = observer(function ComposePost({
const discardPromptControl = Prompt.usePromptControl() const discardPromptControl = Prompt.usePromptControl()
const {closeAllDialogs} = useDialogStateControlContext() const {closeAllDialogs} = useDialogStateControlContext()
const [isKeyboardVisible] = useIsKeyboardVisible({iosUseWillEvents: true})
const [isProcessing, setIsProcessing] = useState(false) const [isProcessing, setIsProcessing] = useState(false)
const [processingState, setProcessingState] = useState('') const [processingState, setProcessingState] = useState('')
const [error, setError] = useState('') const [error, setError] = useState('')
@@ -149,10 +150,11 @@ export const ComposePost = observer(function ComposePost({
const insets = useSafeAreaInsets() const insets = useSafeAreaInsets()
const viewStyles = useMemo( const viewStyles = useMemo(
() => ({ () => ({
paddingBottom: isNative ? insets.bottom + (isIOS ? 80 : 0) : 0, paddingBottom:
paddingTop: isIOS ? insets.top - 12 : isMobile && isWeb ? 15 : 0, isAndroid || (isIOS && !isKeyboardVisible) ? insets.bottom : 0,
paddingTop: isMobile && isWeb ? 15 : 0,
}), }),
[insets, isMobile], [insets, isKeyboardVisible, isMobile],
) )
const onPressCancel = useCallback(() => { const onPressCancel = useCallback(() => {
@@ -353,202 +355,199 @@ export const ComposePost = observer(function ComposePost({
) )
return ( return (
<> <KeyboardAvoidingView
<KeyboardAvoidingView testID="composePostView"
testID="composePostView" behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.outer}>
style={styles.outer}> <View style={[s.flex1, viewStyles]} aria-modal accessibilityViewIsModal>
<View style={[s.flex1, viewStyles]} aria-modal accessibilityViewIsModal> <View style={[styles.topbar, isDesktop && styles.topbarDesktop]}>
<View style={[styles.topbar, isDesktop && styles.topbarDesktop]}> <TouchableOpacity
<TouchableOpacity testID="composerDiscardButton"
testID="composerDiscardButton" onPress={onPressCancel}
onPress={onPressCancel} onAccessibilityEscape={onPressCancel}
onAccessibilityEscape={onPressCancel} accessibilityRole="button"
accessibilityRole="button" accessibilityLabel={_(msg`Cancel`)}
accessibilityLabel={_(msg`Cancel`)} accessibilityHint={_(
accessibilityHint={_( msg`Closes post composer and discards post draft`,
msg`Closes post composer and discards post draft`, )}>
)}> <Text style={[pal.link, s.f18]}>
<Text style={[pal.link, s.f18]}> <Trans>Cancel</Trans>
<Trans>Cancel</Trans> </Text>
</Text> </TouchableOpacity>
</TouchableOpacity> <View style={s.flex1} />
<View style={s.flex1} /> {isProcessing ? (
{isProcessing ? ( <>
<> <Text style={pal.textLight}>{processingState}</Text>
<Text style={pal.textLight}>{processingState}</Text> <View style={styles.postBtn}>
<View style={styles.postBtn}> <ActivityIndicator />
<ActivityIndicator /> </View>
</View> </>
</> ) : (
) : ( <>
<> <LabelsBtn
<LabelsBtn labels={labels}
labels={labels} onChange={setLabels}
onChange={setLabels} hasMedia={hasMedia}
hasMedia={hasMedia} />
{replyTo ? null : (
<ThreadgateBtn
threadgate={threadgate}
onChange={setThreadgate}
/> />
{replyTo ? null : ( )}
<ThreadgateBtn {canPost ? (
threadgate={threadgate} <TouchableOpacity
onChange={setThreadgate} testID="composerPublishBtn"
/> onPress={onPressPublish}
)} accessibilityRole="button"
{canPost ? ( accessibilityLabel={
<TouchableOpacity replyTo ? _(msg`Publish reply`) : _(msg`Publish post`)
testID="composerPublishBtn" }
onPress={onPressPublish} accessibilityHint="">
accessibilityRole="button" <LinearGradient
accessibilityLabel={ colors={[
replyTo ? _(msg`Publish reply`) : _(msg`Publish post`) gradients.blueLight.start,
} gradients.blueLight.end,
accessibilityHint=""> ]}
<LinearGradient start={{x: 0, y: 0}}
colors={[ end={{x: 1, y: 1}}
gradients.blueLight.start, style={styles.postBtn}>
gradients.blueLight.end, <Text style={[s.white, s.f16, s.bold]}>
]} {replyTo ? (
start={{x: 0, y: 0}} <Trans context="action">Reply</Trans>
end={{x: 1, y: 1}} ) : (
style={styles.postBtn}> <Trans context="action">Post</Trans>
<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> </Text>
</View> </LinearGradient>
)} </TouchableOpacity>
</> ) : (
)} <View style={[styles.postBtn, pal.btn]}>
</View> <Text style={[pal.textLight, s.f16, s.bold]}>
{requireAltTextEnabled && gallery.needsAltText && ( <Trans context="action">Post</Trans>
<View style={[styles.reminderLine, pal.viewLight]}> </Text>
<View style={styles.errorIcon}>
<FontAwesomeIcon
icon="exclamation"
style={{color: colors.red4}}
size={10}
/>
</View>
<Text style={[pal.text, s.flex1]}>
<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, s.flex1]}>{error}</Text>
</View>
)}
<ScrollView
style={styles.scrollView}
keyboardShouldPersistTaps="always">
{replyTo ? <ComposerReplyTo replyTo={replyTo} /> : undefined}
<View
style={[
pal.border,
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={true}
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)
}}
/>
<GifAltText
link={extLink}
gif={extGif}
onSubmit={handleChangeGifAltText}
/>
</View>
)}
{quote ? (
<View style={[s.mt5, isWeb && s.mb10]}>
<View style={{pointerEvents: 'none'}}>
<QuoteEmbed quote={quote} />
</View> </View>
{quote.uri !== initQuote?.uri && ( )}
<QuoteX onRemove={() => setQuote(undefined)} /> </>
)} )}
</View>
) : undefined}
</ScrollView>
<SuggestedLanguage text={richtext.text} />
</View> </View>
</KeyboardAvoidingView> {requireAltTextEnabled && gallery.needsAltText && (
<View style={[styles.reminderLine, pal.viewLight]}>
<View style={styles.errorIcon}>
<FontAwesomeIcon
icon="exclamation"
style={{color: colors.red4}}
size={10}
/>
</View>
<Text style={[pal.text, s.flex1]}>
<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, s.flex1]}>{error}</Text>
</View>
)}
<ScrollView
style={styles.scrollView}
keyboardShouldPersistTaps="always">
{replyTo ? <ComposerReplyTo replyTo={replyTo} /> : undefined}
<KeyboardAccessory> <View
<View style={[a.flex_row, a.align_center, a.gap_xs]}> style={[
<SelectPhotoBtn gallery={gallery} disabled={!canSelectImages} /> pal.border,
<OpenCameraBtn gallery={gallery} disabled={!canSelectImages} /> styles.textInputLayout,
<SelectGifBtn isNative && styles.textInputLayoutMobile,
onClose={focusTextInput} ]}>
onSelectGif={onSelectGif} <UserAvatar
disabled={hasMedia} avatar={currentProfile?.avatar}
/> size={50}
{!isMobile ? ( type={currentProfile?.associated?.labeler ? 'labeler' : 'user'}
<Button />
onPress={onEmojiButtonPress} <TextInput
style={a.p_sm} ref={textInput}
label={_(msg`Open emoji picker`)} richtext={richtext}
accessibilityHint={_(msg`Open emoji picker`)} placeholder={selectTextInputPlaceholder}
variant="ghost" autoFocus={true}
shape="round" setRichText={setRichText}
color="primary"> onPhotoPasted={onPhotoPasted}
<EmojiSmile size="lg" /> onPressPublish={onPressPublish}
</Button> onNewLink={onNewLink}
) : null} 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)
}}
/>
<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)} />
)}
</View>
) : undefined}
</ScrollView>
<SuggestedLanguage text={richtext.text} />
<View style={[pal.border, styles.bottomBar]}>
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
<SelectPhotoBtn gallery={gallery} disabled={!canSelectImages} />
<OpenCameraBtn gallery={gallery} disabled={!canSelectImages} />
<SelectGifBtn
onClose={focusTextInput}
onSelectGif={onSelectGif}
disabled={hasMedia}
/>
{!isMobile ? (
<Button
onPress={onEmojiButtonPress}
style={a.p_sm}
label={_(msg`Open emoji picker`)}
accessibilityHint={_(msg`Open emoji picker`)}
variant="ghost"
shape="round"
color="primary">
<EmojiSmile size="lg" />
</Button>
) : null}
</View>
<View style={s.flex1} />
<SelectLangBtn />
<CharProgress count={graphemeLength} />
</View> </View>
<View style={s.flex1} /> </View>
<SelectLangBtn />
<CharProgress count={graphemeLength} />
</KeyboardAccessory>
<Prompt.Basic <Prompt.Basic
control={discardPromptControl} control={discardPromptControl}
@@ -558,7 +557,7 @@ export const ComposePost = observer(function ComposePost({
confirmButtonCta={_(msg`Discard`)} confirmButtonCta={_(msg`Discard`)}
confirmButtonColor="negative" confirmButtonColor="negative"
/> />
</> </KeyboardAvoidingView>
) )
}) })
@@ -640,4 +639,12 @@ const styles = StyleSheet.create({
marginHorizontal: 10, marginHorizontal: 10,
marginBottom: 4, marginBottom: 4,
}, },
bottomBar: {
flexDirection: 'row',
paddingVertical: 4,
paddingLeft: 15,
paddingRight: 20,
alignItems: 'center',
borderTopWidth: 1,
},
}) })