140 lines
3.8 KiB
TypeScript
140 lines
3.8 KiB
TypeScript
import React, {useRef, useMemo, useEffect, useState, useCallback} from 'react'
|
|
import {StyleSheet, View, ScrollView, LayoutChangeEvent} from 'react-native'
|
|
import {Text} from '../util/text/Text'
|
|
import {PressableWithHover} from '../util/PressableWithHover'
|
|
import {usePalette} from 'lib/hooks/usePalette'
|
|
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
|
import {DraggableScrollView} from './DraggableScrollView'
|
|
|
|
export interface TabBarProps {
|
|
testID?: string
|
|
selectedPage: number
|
|
items: string[]
|
|
indicatorColor?: string
|
|
onSelect?: (index: number) => void
|
|
onPressSelected?: (index: number) => void
|
|
}
|
|
|
|
export function TabBar({
|
|
testID,
|
|
selectedPage,
|
|
items,
|
|
indicatorColor,
|
|
onSelect,
|
|
onPressSelected,
|
|
}: TabBarProps) {
|
|
const pal = usePalette('default')
|
|
const scrollElRef = useRef<ScrollView>(null)
|
|
const [itemXs, setItemXs] = useState<number[]>([])
|
|
const indicatorStyle = useMemo(
|
|
() => ({borderBottomColor: indicatorColor || pal.colors.link}),
|
|
[indicatorColor, pal],
|
|
)
|
|
const {isDesktop, isTablet} = useWebMediaQueries()
|
|
const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
|
|
|
|
// scrolls to the selected item when the page changes
|
|
useEffect(() => {
|
|
scrollElRef.current?.scrollTo({
|
|
x:
|
|
(itemXs[selectedPage] || 0) - styles.contentContainer.paddingHorizontal,
|
|
})
|
|
}, [scrollElRef, itemXs, selectedPage, styles])
|
|
|
|
const onPressItem = useCallback(
|
|
(index: number) => {
|
|
onSelect?.(index)
|
|
if (index === selectedPage) {
|
|
onPressSelected?.(index)
|
|
}
|
|
},
|
|
[onSelect, selectedPage, onPressSelected],
|
|
)
|
|
|
|
// calculates the x position of each item on mount and on layout change
|
|
const onItemLayout = React.useCallback(
|
|
(e: LayoutChangeEvent, index: number) => {
|
|
const x = e.nativeEvent.layout.x
|
|
setItemXs(prev => {
|
|
const Xs = [...prev]
|
|
Xs[index] = x
|
|
return Xs
|
|
})
|
|
},
|
|
[],
|
|
)
|
|
|
|
return (
|
|
<View testID={testID} style={[pal.view, styles.outer]}>
|
|
<DraggableScrollView
|
|
testID={`${testID}-selector`}
|
|
horizontal={true}
|
|
showsHorizontalScrollIndicator={false}
|
|
ref={scrollElRef}
|
|
contentContainerStyle={styles.contentContainer}>
|
|
{items.map((item, i) => {
|
|
const selected = i === selectedPage
|
|
return (
|
|
<PressableWithHover
|
|
testID={`${testID}-selector-${i}`}
|
|
key={`${item}-${i}`}
|
|
onLayout={e => onItemLayout(e, i)}
|
|
style={styles.item}
|
|
hoverStyle={pal.viewLight}
|
|
onPress={() => onPressItem(i)}>
|
|
<View style={[styles.itemInner, selected && indicatorStyle]}>
|
|
<Text
|
|
type={isDesktop || isTablet ? 'xl-bold' : 'lg-bold'}
|
|
testID={testID ? `${testID}-${item}` : undefined}
|
|
style={selected ? pal.text : pal.textLight}>
|
|
{item}
|
|
</Text>
|
|
</View>
|
|
</PressableWithHover>
|
|
)
|
|
})}
|
|
</DraggableScrollView>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const desktopStyles = StyleSheet.create({
|
|
outer: {
|
|
flexDirection: 'row',
|
|
width: 598,
|
|
},
|
|
contentContainer: {
|
|
paddingHorizontal: 0,
|
|
backgroundColor: 'transparent',
|
|
},
|
|
item: {
|
|
paddingTop: 14,
|
|
paddingHorizontal: 14,
|
|
justifyContent: 'center',
|
|
},
|
|
itemInner: {
|
|
paddingBottom: 12,
|
|
borderBottomWidth: 3,
|
|
borderBottomColor: 'transparent',
|
|
},
|
|
})
|
|
|
|
const mobileStyles = StyleSheet.create({
|
|
outer: {
|
|
flexDirection: 'row',
|
|
},
|
|
contentContainer: {
|
|
backgroundColor: 'transparent',
|
|
paddingHorizontal: 8,
|
|
},
|
|
item: {
|
|
paddingTop: 10,
|
|
paddingHorizontal: 10,
|
|
justifyContent: 'center',
|
|
},
|
|
itemInner: {
|
|
paddingBottom: 10,
|
|
borderBottomWidth: 3,
|
|
borderBottomColor: 'transparent',
|
|
},
|
|
})
|