forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
only show divider when scrolled (#4275)
authored by
Samuel Newman
and committed by
GitHub
cd497a39
d92036f2
+54
-19
+47
-14
src/view/com/composer/Composer.tsx
+47
-14
src/view/com/composer/Composer.tsx
···
9
9
import {
10
10
ActivityIndicator,
11
11
Keyboard,
12
-
ScrollView,
13
12
StyleSheet,
14
13
TouchableOpacity,
15
14
View,
···
18
17
KeyboardAvoidingView,
19
18
KeyboardStickyView,
20
19
} from 'react-native-keyboard-controller'
20
+
import Animated, {
21
+
interpolateColor,
22
+
useAnimatedStyle,
23
+
useSharedValue,
24
+
withTiming,
25
+
} from 'react-native-reanimated'
21
26
import {useSafeAreaInsets} from 'react-native-safe-area-context'
22
27
import {LinearGradient} from 'expo-linear-gradient'
23
28
import {RichText} from '@atproto/api'
···
30
35
createGIFDescription,
31
36
parseAltFromGIFDescription,
32
37
} from '#/lib/gif-alt-text'
38
+
import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
33
39
import {LikelyType} from '#/lib/link-meta/link-meta'
34
40
import {logEvent} from '#/lib/statsig/statsig'
35
41
import {logger} from '#/logger'
···
61
67
import {GalleryModel} from 'state/models/media/gallery'
62
68
import {ComposerOpts} from 'state/shell/composer'
63
69
import {ComposerReplyTo} from 'view/com/composer/ComposerReplyTo'
64
-
import {atoms as a} from '#/alf'
70
+
import {atoms as a, useTheme} from '#/alf'
65
71
import {Button} from '#/components/Button'
66
72
import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji'
67
73
import * as Prompt from '#/components/Prompt'
···
109
115
const {closeComposer} = useComposerControls()
110
116
const {track} = useAnalytics()
111
117
const pal = usePalette('default')
112
-
const {isDesktop, isMobile} = useWebMediaQueries()
118
+
const {isTabletOrDesktop, isMobile} = useWebMediaQueries()
113
119
const {_} = useLingui()
114
120
const requireAltTextEnabled = useRequireAltTextEnabled()
115
121
const langPrefs = useLanguagePrefs()
···
117
123
const textInput = useRef<TextInputRef>(null)
118
124
const discardPromptControl = Prompt.usePromptControl()
119
125
const {closeAllDialogs} = useDialogStateControlContext()
126
+
const t = useTheme()
120
127
121
128
const [isKeyboardVisible] = useIsKeyboardVisible({iosUseWillEvents: true})
122
129
const [isProcessing, setIsProcessing] = useState(false)
···
163
170
[insets, isKeyboardVisible, isMobile],
164
171
)
165
172
173
+
const hasScrolled = useSharedValue(0)
174
+
const scrollHandler = useAnimatedScrollHandler({
175
+
onScroll: event => {
176
+
hasScrolled.value = withTiming(event.contentOffset.y > 0 ? 1 : 0)
177
+
},
178
+
})
179
+
const topBarAnimatedStyle = useAnimatedStyle(() => {
180
+
return {
181
+
borderColor: interpolateColor(
182
+
hasScrolled.value,
183
+
[0, 1],
184
+
[
185
+
'transparent',
186
+
isWeb ? t.palette.contrast_100 : t.palette.contrast_400,
187
+
],
188
+
),
189
+
}
190
+
})
191
+
166
192
const onPressCancel = useCallback(() => {
167
193
if (graphemeLength > 0 || !gallery.isEmpty) {
168
194
closeAllDialogs()
···
380
406
style={s.flex1}
381
407
keyboardVerticalOffset={replyTo ? 60 : isAndroid ? 120 : 100}>
382
408
<View style={[s.flex1, viewStyles]} aria-modal accessibilityViewIsModal>
383
-
<View style={[styles.topbar, isDesktop && styles.topbarDesktop]}>
409
+
<Animated.View
410
+
style={[
411
+
styles.topbar,
412
+
topBarAnimatedStyle,
413
+
isWeb && isTabletOrDesktop && styles.topbarDesktop,
414
+
]}>
384
415
<TouchableOpacity
385
416
testID="composerDiscardButton"
386
417
onPress={onPressCancel}
···
444
475
)}
445
476
</>
446
477
)}
447
-
</View>
478
+
</Animated.View>
448
479
{isAltTextRequiredAndMissing && (
449
480
<View style={[styles.reminderLine, pal.viewLight]}>
450
481
<View style={styles.errorIcon}>
···
471
502
<Text style={[s.red4, s.flex1]}>{error}</Text>
472
503
</View>
473
504
)}
474
-
<ScrollView
505
+
<Animated.ScrollView
506
+
onScroll={scrollHandler}
475
507
style={styles.scrollView}
476
508
keyboardShouldPersistTaps="always">
477
509
{replyTo ? <ComposerReplyTo replyTo={replyTo} /> : undefined}
478
510
479
511
<View
480
512
style={[
481
-
pal.border,
482
513
styles.textInputLayout,
483
514
isNative && styles.textInputLayoutMobile,
484
515
]}>
···
533
564
)}
534
565
</View>
535
566
) : undefined}
536
-
</ScrollView>
567
+
</Animated.ScrollView>
537
568
<SuggestedLanguage text={richtext.text} />
538
569
</View>
539
570
</KeyboardAvoidingView>
···
589
620
topbar: {
590
621
flexDirection: 'row',
591
622
alignItems: 'center',
592
-
marginTop: -14,
593
-
paddingBottom: 4,
594
-
paddingHorizontal: 20,
595
-
height: 50,
623
+
marginTop: -10,
624
+
paddingHorizontal: 4,
625
+
marginHorizontal: 16,
626
+
height: 44,
596
627
gap: 4,
628
+
borderBottomWidth: StyleSheet.hairlineWidth,
597
629
},
598
630
topbarDesktop: {
599
631
paddingTop: 10,
600
632
paddingBottom: 10,
633
+
height: 50,
634
+
marginTop: 0,
601
635
},
602
636
postBtn: {
603
637
borderRadius: 20,
···
636
670
},
637
671
scrollView: {
638
672
flex: 1,
639
-
paddingHorizontal: 15,
673
+
paddingHorizontal: 16,
640
674
},
641
675
textInputLayout: {
642
676
flexDirection: 'row',
643
-
borderTopWidth: 1,
644
677
paddingTop: 16,
645
678
},
646
679
textInputLayoutMobile: {
+7
-5
src/view/com/composer/labels/LabelsBtn.tsx
+7
-5
src/view/com/composer/labels/LabelsBtn.tsx
···
1
1
import React from 'react'
2
2
import {Keyboard, StyleSheet} from 'react-native'
3
-
import {Button} from 'view/com/util/forms/Button'
4
-
import {usePalette} from 'lib/hooks/usePalette'
5
-
import {ShieldExclamation} from 'lib/icons'
6
3
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
7
4
import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
8
-
import {isNative} from 'platform/detection'
5
+
import {msg} from '@lingui/macro'
9
6
import {useLingui} from '@lingui/react'
10
-
import {msg} from '@lingui/macro'
7
+
11
8
import {useModalControls} from '#/state/modals'
9
+
import {usePalette} from 'lib/hooks/usePalette'
10
+
import {ShieldExclamation} from 'lib/icons'
11
+
import {isNative} from 'platform/detection'
12
+
import {Button} from 'view/com/util/forms/Button'
12
13
13
14
export function LabelsBtn({
14
15
labels,
···
54
55
button: {
55
56
flexDirection: 'row',
56
57
alignItems: 'center',
58
+
paddingVertical: 2,
57
59
paddingHorizontal: 6,
58
60
},
59
61
dimmed: {