forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Make the pager take full width (#7066)
* Wide tabs for web
* Wide tabs on mobile
* Tweak min for profile
* Driveby border fix
* Fix single tab indicator
+69
-12
+1
-1
src/screens/Hashtag.tsx
+1
-1
src/screens/Hashtag.tsx
+48
-10
src/view/com/pager/TabBar.tsx
+48
-10
src/view/com/pager/TabBar.tsx
···
51
51
const containerSize = useSharedValue(0)
52
52
const scrollX = useSharedValue(0)
53
53
const layouts = useSharedValue<{x: number; width: number}[]>([])
54
+
const textLayouts = useSharedValue<{width: number}[]>([])
54
55
const itemsLength = items.length
55
56
56
57
const scrollToOffsetJS = useCallback(
···
211
212
[layouts],
212
213
)
213
214
215
+
const onTextLayout = useCallback(
216
+
(i: number, layout: {width: number}) => {
217
+
'worklet'
218
+
textLayouts.modify(ls => {
219
+
ls[i] = layout
220
+
return ls
221
+
})
222
+
},
223
+
[textLayouts],
224
+
)
225
+
214
226
const indicatorStyle = useAnimatedStyle(() => {
215
227
if (!_WORKLET) {
216
228
return {opacity: 0}
217
229
}
218
230
const layoutsValue = layouts.get()
231
+
const textLayoutsValue = textLayouts.get()
219
232
if (
220
233
layoutsValue.length !== itemsLength ||
221
-
layoutsValue.some(l => l === undefined)
234
+
textLayoutsValue.length !== itemsLength
222
235
) {
223
236
return {
224
237
opacity: 0,
225
238
}
226
239
}
227
-
if (layoutsValue.length === 1) {
228
-
return {opacity: 1}
240
+
if (textLayoutsValue.length === 1) {
241
+
return {
242
+
opacity: 1,
243
+
transform: [
244
+
{
245
+
scaleX: textLayoutsValue[0].width / contentSize.get(),
246
+
},
247
+
],
248
+
}
229
249
}
230
250
return {
231
251
opacity: 1,
···
240
260
{
241
261
scaleX: interpolate(
242
262
dragProgress.get(),
243
-
layoutsValue.map((l, i) => i),
244
-
layoutsValue.map(
245
-
l => (l.width - ITEM_PADDING * 2) / contentSize.get(),
246
-
),
263
+
textLayoutsValue.map((l, i) => i),
264
+
textLayoutsValue.map(l => l.width / contentSize.get()),
247
265
),
248
266
},
249
267
],
···
287
305
onLayout={e => {
288
306
contentSize.set(e.nativeEvent.layout.width)
289
307
}}
290
-
style={{flexDirection: 'row'}}>
308
+
style={{flexDirection: 'row', flexGrow: 1}}>
291
309
{items.map((item, i) => {
292
310
return (
293
311
<TabBarItem
···
298
316
item={item}
299
317
onPressItem={onPressItem}
300
318
onItemLayout={onItemLayout}
319
+
onTextLayout={onTextLayout}
301
320
/>
302
321
)
303
322
})}
···
328
347
item,
329
348
onPressItem,
330
349
onItemLayout,
350
+
onTextLayout,
331
351
}: {
332
352
index: number
333
353
testID: string | undefined
···
335
355
item: string
336
356
onPressItem: (index: number) => void
337
357
onItemLayout: (index: number, layout: {x: number; width: number}) => void
358
+
onTextLayout: (index: number, layout: {width: number}) => void
338
359
}) {
339
360
const t = useTheme()
340
361
const style = useAnimatedStyle(() => {
···
356
377
runOnUI(onItemLayout)(index, e.nativeEvent.layout)
357
378
},
358
379
[index, onItemLayout],
380
+
)
381
+
382
+
const handleTextLayout = useCallback(
383
+
(e: LayoutChangeEvent) => {
384
+
runOnUI(onTextLayout)(index, e.nativeEvent.layout)
385
+
},
386
+
[index, onTextLayout],
359
387
)
360
388
361
389
return (
362
-
<View onLayout={handleLayout}>
390
+
<View onLayout={handleLayout} style={{flexGrow: 1}}>
363
391
<PressableWithHover
364
392
testID={`${testID}-selector-${index}`}
365
393
style={styles.item}
···
370
398
<Text
371
399
emoji
372
400
testID={testID ? `${testID}-${item}` : undefined}
373
-
style={[t.atoms.text, a.text_md, a.font_bold, {lineHeight: 20}]}>
401
+
style={[styles.itemText, t.atoms.text, a.text_md, a.font_bold]}
402
+
onLayout={handleTextLayout}>
374
403
{item}
375
404
</Text>
376
405
</Animated.View>
···
381
410
382
411
const styles = StyleSheet.create({
383
412
contentContainer: {
413
+
flexGrow: 1,
384
414
backgroundColor: 'transparent',
385
415
paddingHorizontal: CONTENT_PADDING,
386
416
},
387
417
item: {
418
+
flexGrow: 1,
388
419
paddingTop: 10,
389
420
paddingHorizontal: ITEM_PADDING,
390
421
justifyContent: 'center',
391
422
},
392
423
itemInner: {
424
+
alignItems: 'center',
425
+
flexGrow: 1,
393
426
paddingBottom: 10,
394
427
borderBottomWidth: 3,
395
428
borderBottomColor: 'transparent',
429
+
},
430
+
itemText: {
431
+
lineHeight: 20,
432
+
minWidth: 45,
433
+
textAlign: 'center',
396
434
},
397
435
outerBottomBorder: {
398
436
position: 'absolute',
+20
-1
src/view/com/pager/TabBar.web.tsx
+20
-1
src/view/com/pager/TabBar.web.tsx
···
115
115
hoverStyle={t.atoms.bg_contrast_25}
116
116
onPress={() => onPressItem(i)}
117
117
accessibilityRole="tab">
118
-
<View style={[styles.itemInner, selected && indicatorStyle]}>
118
+
<View style={styles.itemInner}>
119
119
<Text
120
120
emoji
121
121
testID={testID ? `${testID}-${item}` : undefined}
122
122
style={[
123
+
styles.itemText,
123
124
selected ? t.atoms.text : t.atoms.text_contrast_medium,
125
+
selected && indicatorStyle,
124
126
a.text_md,
125
127
a.font_bold,
126
128
{lineHeight: 20},
···
143
145
width: 598,
144
146
},
145
147
contentContainer: {
148
+
flexGrow: 1,
146
149
paddingHorizontal: 0,
147
150
backgroundColor: 'transparent',
148
151
},
149
152
item: {
153
+
flexGrow: 1,
154
+
alignItems: 'stretch',
150
155
paddingTop: 14,
151
156
paddingHorizontal: 14,
152
157
justifyContent: 'center',
153
158
},
154
159
itemInner: {
160
+
alignItems: 'center',
161
+
},
162
+
itemText: {
163
+
textAlign: 'center',
164
+
minWidth: 45,
155
165
paddingBottom: 12,
156
166
borderBottomWidth: 3,
157
167
borderBottomColor: 'transparent',
···
170
180
flexDirection: 'row',
171
181
},
172
182
contentContainer: {
183
+
flexGrow: 1,
173
184
backgroundColor: 'transparent',
174
185
paddingHorizontal: 6,
175
186
},
176
187
item: {
188
+
flexGrow: 1,
189
+
alignItems: 'stretch',
177
190
paddingTop: 10,
178
191
paddingHorizontal: 10,
179
192
justifyContent: 'center',
180
193
},
181
194
itemInner: {
195
+
flexGrow: 1,
196
+
alignItems: 'center',
197
+
},
198
+
itemText: {
199
+
textAlign: 'center',
200
+
minWidth: 45,
182
201
paddingBottom: 10,
183
202
borderBottomWidth: 2,
184
203
borderBottomColor: 'transparent',