zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

remove tab bar underline animation

Browse source
This commit is contained in:
Ansh Nanda 2023-05-15 12:31:27 -07:00
parent d7e39bde12
commit 6249bb16ca
4 changed files with 111 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

132
src/view/com/pager/TabBar.tsx
View file

@ -35,59 +35,59 @@ export function TabBar({
onPressSelected,
}: TabBarProps) {
const pal = usePalette('default')
const [itemLayouts, setItemLayouts] = useState<Layout[]>(
items.map(() => ({x: 0, width: 0})),
)
// const [itemLayouts, setItemLayouts] = useState<Layout[]>(
// items.map(() => ({x: 0, width: 0})),
// )
const itemRefs = useMemo(
() => Array.from({length: items.length}).map(() => createRef<View>()),
[items.length],
)
const panX = Animated.add(position, offset)
// const panX = Animated.add(position, offset)
const containerRef = useRef<View>(null)
const indicatorStyle = {
backgroundColor: indicatorColor || pal.colors.link,
bottom:
indicatorPosition === 'bottom' ? (isDesktopWeb ? 0 : -1) : undefined,
top: indicatorPosition === 'top' ? (isDesktopWeb ? 0 : -1) : undefined,
transform: [
{
translateX: panX.interpolate({
inputRange: items.map((_item, i) => i),
outputRange: itemLayouts.map(l => l.x + l.width / 2),
}),
},
{
scaleX: panX.interpolate({
inputRange: items.map((_item, i) => i),
outputRange: itemLayouts.map(l => l.width),
}),
},
],
}
// const indicatorStyle = {
// backgroundColor: indicatorColor || pal.colors.link,
// bottom:
// indicatorPosition === 'bottom' ? (isDesktopWeb ? 0 : -1) : undefined,
// top: indicatorPosition === 'top' ? (isDesktopWeb ? 0 : -1) : undefined,
// transform: [
// {
// translateX: panX.interpolate({
// inputRange: items.map((_item, i) => i),
// outputRange: itemLayouts.map(l => l.x + l.width / 2),
// }),
// },
// {
// scaleX: panX.interpolate({
// inputRange: items.map((_item, i) => i),
// outputRange: itemLayouts.map(l => l.width),
// }),
// },
// ],
// }
const onLayout = () => {
const promises = []
for (let i = 0; i < items.length; i++) {
promises.push(
new Promise<Layout>(resolve => {
if (!containerRef.current || !itemRefs[i].current) {
return resolve({x: 0, width: 0})
}
// const onLayout = () => {
// const promises = []
// for (let i = 0; i < items.length; i++) {
// promises.push(
// new Promise<Layout>(resolve => {
// if (!containerRef.current || !itemRefs[i].current) {
// return resolve({x: 0, width: 0})
// }
itemRefs[i].current?.measureLayout(
containerRef.current,
(x: number, _y: number, width: number) => {
resolve({x, width})
},
)
}),
)
}
Promise.all(promises).then((layouts: Layout[]) => {
setItemLayouts(layouts)
})
}
// itemRefs[i].current?.measureLayout(
// containerRef.current,
// (x: number, _y: number, width: number) => {
// resolve({x, width})
// },
// )
// }),
// )
// }
// Promise.all(promises).then((layouts: Layout[]) => {
// setItemLayouts(layouts)
// })
// }
const onPressItem = (index: number) => {
onSelect?.(index)
@ -100,28 +100,31 @@ export function TabBar({
<View
testID={testID}
style={[pal.view, styles.outer]}
onLayout={onLayout}
// onLayout={onLayout}
ref={containerRef}>
<Animated.View style={[styles.indicator, indicatorStyle]} />
<Animated.View style={[styles.indicator]} />
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
{items.map((item, i) => {
const selected = i === selectedPage
return (
<PressableWithHover
ref={itemRefs[i]}
key={item}
style={
indicatorPosition === 'top' ? styles.itemTop : styles.itemBottom
}
hoverStyle={pal.viewLight}
onPress={() => onPressItem(i)}>
<Text
type="xl-bold"
testID={testID ? `${testID}-${item}` : undefined}
style={selected ? pal.text : pal.textLight}>
{item}
</Text>
</PressableWithHover>
<Animated.View key={item} style={selected ? styles.active : []}>
<PressableWithHover
ref={itemRefs[i]}
style={[
indicatorPosition === 'top'
? styles.itemTop
: styles.itemBottom,
]}
hoverStyle={pal.viewLight}
onPress={() => onPressItem(i)}>
<Text
type="xl-bold"
testID={testID ? `${testID}-${item}` : undefined}
style={selected ? pal.text : pal.textLight}>
{item}
</Text>
</PressableWithHover>
</Animated.View>
)
})}
</ScrollView>
@ -152,6 +155,7 @@ const styles = isDesktopWeb
height: 3,
zIndex: 1,
},
active: {},
})
: StyleSheet.create({
outer: {
@ -174,4 +178,8 @@ const styles = isDesktopWeb
width: 1,
height: 3,
},
active: {
borderBottomColor: 'blue',
borderBottomWidth: 3,
},
})