forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
ALF TabBar (#6924)
* alf tabbar
* reduce indicator height
authored by
Samuel Newman
and committed by
GitHub
79f807dc
3607cfb9
+29
-32
+11
-15
src/view/com/pager/TabBar.tsx
+11
-15
src/view/com/pager/TabBar.tsx
···
12
12
useSharedValue,
13
13
} from 'react-native-reanimated'
14
14
15
-
import {usePalette} from '#/lib/hooks/usePalette'
16
-
import {PressableWithHover} from '../util/PressableWithHover'
17
-
import {Text} from '../util/text/Text'
15
+
import {PressableWithHover} from '#/view/com/util/PressableWithHover'
16
+
import {atoms as a, useTheme} from '#/alf'
17
+
import {Text} from '#/components/Typography'
18
18
19
19
export interface TabBarProps {
20
20
testID?: string
···
41
41
dragProgress,
42
42
dragState,
43
43
}: TabBarProps) {
44
-
const pal = usePalette('default')
44
+
const t = useTheme()
45
45
const scrollElRef = useAnimatedRef<ScrollView>()
46
46
const syncScrollState = useSharedValue<'synced' | 'unsynced' | 'needs-sync'>(
47
47
'synced',
···
264
264
return (
265
265
<View
266
266
testID={testID}
267
-
style={[pal.view, styles.outer]}
267
+
style={[t.atoms.bg, a.flex_row]}
268
268
accessibilityRole="tablist">
269
269
<ScrollView
270
270
testID={`${testID}-selector`}
···
309
309
left: 0,
310
310
bottom: 0,
311
311
right: 0,
312
-
borderBottomWidth: 3,
313
-
borderColor: pal.link.color,
312
+
borderBottomWidth: 2,
313
+
borderColor: t.palette.primary_500,
314
314
},
315
315
]}
316
316
/>
317
317
</Animated.View>
318
318
</ScrollView>
319
-
<View style={[pal.border, styles.outerBottomBorder]} />
319
+
<View style={[t.atoms.border_contrast_low, styles.outerBottomBorder]} />
320
320
</View>
321
321
)
322
322
}
···
336
336
onPressItem: (index: number) => void
337
337
onItemLayout: (index: number, layout: {x: number; width: number}) => void
338
338
}) {
339
-
const pal = usePalette('default')
339
+
const t = useTheme()
340
340
const style = useAnimatedStyle(() => {
341
341
if (!_WORKLET) {
342
342
return {opacity: 0.7}
···
363
363
<PressableWithHover
364
364
testID={`${testID}-selector-${index}`}
365
365
style={styles.item}
366
-
hoverStyle={pal.viewLight}
366
+
hoverStyle={t.atoms.bg_contrast_25}
367
367
onPress={() => onPressItem(index)}
368
368
accessibilityRole="tab">
369
369
<Animated.View style={[style, styles.itemInner]}>
370
370
<Text
371
371
emoji
372
-
type="lg-bold"
373
372
testID={testID ? `${testID}-${item}` : undefined}
374
-
style={[pal.text, {lineHeight: 20}]}>
373
+
style={[t.atoms.text, a.text_md, a.font_bold, {lineHeight: 20}]}>
375
374
{item}
376
375
</Text>
377
376
</Animated.View>
···
381
380
}
382
381
383
382
const styles = StyleSheet.create({
384
-
outer: {
385
-
flexDirection: 'row',
386
-
},
387
383
contentContainer: {
388
384
backgroundColor: 'transparent',
389
385
paddingHorizontal: CONTENT_PADDING,
+18
-17
src/view/com/pager/TabBar.web.tsx
+18
-17
src/view/com/pager/TabBar.web.tsx
···
1
-
import {useCallback, useEffect, useMemo, useRef} from 'react'
1
+
import {useCallback, useEffect, useRef} from 'react'
2
2
import {ScrollView, StyleSheet, View} from 'react-native'
3
3
4
-
import {usePalette} from '#/lib/hooks/usePalette'
5
-
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
4
+
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
5
+
import {Text} from '#/components/Typography'
6
6
import {PressableWithHover} from '../util/PressableWithHover'
7
-
import {Text} from '../util/text/Text'
8
7
import {DraggableScrollView} from './DraggableScrollView'
9
8
10
9
export interface TabBarProps {
···
12
11
selectedPage: number
13
12
items: string[]
14
13
indicatorColor?: string
14
+
backgroundColor?: string
15
+
15
16
onSelect?: (index: number) => void
16
17
onPressSelected?: (index: number) => void
17
18
}
···
28
29
onSelect,
29
30
onPressSelected,
30
31
}: TabBarProps) {
31
-
const pal = usePalette('default')
32
+
const t = useTheme()
32
33
const scrollElRef = useRef<ScrollView>(null)
33
34
const itemRefs = useRef<Array<Element>>([])
34
-
const indicatorStyle = useMemo(
35
-
() => ({borderBottomColor: indicatorColor || pal.colors.link}),
36
-
[indicatorColor, pal],
37
-
)
38
-
const {isDesktop, isTablet} = useWebMediaQueries()
39
-
const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
35
+
const indicatorStyle = {
36
+
borderBottomColor: indicatorColor || t.palette.primary_500,
37
+
}
38
+
const {gtMobile} = useBreakpoints()
39
+
const styles = gtMobile ? desktopStyles : mobileStyles
40
40
41
41
useEffect(() => {
42
42
// On the web, the primary interaction is tapping.
···
96
96
return (
97
97
<View
98
98
testID={testID}
99
-
style={[pal.view, styles.outer]}
99
+
style={[t.atoms.bg, styles.outer]}
100
100
accessibilityRole="tablist">
101
101
<DraggableScrollView
102
102
testID={`${testID}-selector`}
···
112
112
key={`${item}-${i}`}
113
113
ref={node => (itemRefs.current[i] = node as any)}
114
114
style={styles.item}
115
-
hoverStyle={pal.viewLight}
115
+
hoverStyle={t.atoms.bg_contrast_25}
116
116
onPress={() => onPressItem(i)}
117
117
accessibilityRole="tab">
118
118
<View style={[styles.itemInner, selected && indicatorStyle]}>
119
119
<Text
120
120
emoji
121
-
type={isDesktop || isTablet ? 'xl-bold' : 'lg-bold'}
122
121
testID={testID ? `${testID}-${item}` : undefined}
123
122
style={[
124
-
selected ? pal.text : pal.textLight,
123
+
selected ? t.atoms.text : t.atoms.text_contrast_medium,
124
+
a.text_md,
125
+
a.font_bold,
125
126
{lineHeight: 20},
126
127
]}>
127
128
{item}
···
131
132
)
132
133
})}
133
134
</DraggableScrollView>
134
-
<View style={[pal.border, styles.outerBottomBorder]} />
135
+
<View style={[t.atoms.border_contrast_low, styles.outerBottomBorder]} />
135
136
</View>
136
137
)
137
138
}
···
179
180
},
180
181
itemInner: {
181
182
paddingBottom: 10,
182
-
borderBottomWidth: 3,
183
+
borderBottomWidth: 2,
183
184
borderBottomColor: 'transparent',
184
185
},
185
186
outerBottomBorder: {