Remove existing tab scroll sync logic

This commit is contained in:
Dan Abramov
2023-10-13 20:24:59 +01:00
parent 8e9cf182c2
commit bf7e127cfb
+2 -24
View File
@@ -1,5 +1,5 @@
import React, {useRef, useMemo, useEffect, useState, useCallback} from 'react' import React, {useRef, useMemo, useCallback} from 'react'
import {StyleSheet, View, ScrollView, LayoutChangeEvent} from 'react-native' import {StyleSheet, View, ScrollView} from 'react-native'
import {Text} from '../util/text/Text' import {Text} from '../util/text/Text'
import {PressableWithHover} from '../util/PressableWithHover' import {PressableWithHover} from '../util/PressableWithHover'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
@@ -26,20 +26,12 @@ export function TabBar({
}: TabBarProps) { }: TabBarProps) {
const pal = usePalette('default') const pal = usePalette('default')
const scrollElRef = useRef<ScrollView>(null) const scrollElRef = useRef<ScrollView>(null)
const [itemXs, setItemXs] = useState<number[]>([])
const indicatorStyle = useMemo( const indicatorStyle = useMemo(
() => ({borderBottomColor: indicatorColor || pal.colors.link}), () => ({borderBottomColor: indicatorColor || pal.colors.link}),
[indicatorColor, pal], [indicatorColor, pal],
) )
const {isDesktop, isTablet} = useWebMediaQueries() const {isDesktop, isTablet} = useWebMediaQueries()
// scrolls to the selected item when the page changes
useEffect(() => {
scrollElRef.current?.scrollTo({
x: itemXs[selectedPage] || 0,
})
}, [scrollElRef, itemXs, selectedPage])
const onPressItem = useCallback( const onPressItem = useCallback(
(index: number) => { (index: number) => {
onSelect?.(index) onSelect?.(index)
@@ -50,19 +42,6 @@ export function TabBar({
[onSelect, selectedPage, onPressSelected], [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
})
},
[],
)
const styles = isDesktop || isTablet ? desktopStyles : mobileStyles const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
return ( return (
@@ -77,7 +56,6 @@ export function TabBar({
return ( return (
<PressableWithHover <PressableWithHover
key={item} key={item}
onLayout={e => onItemLayout(e, i)}
style={[styles.item, selected && indicatorStyle]} style={[styles.item, selected && indicatorStyle]}
hoverStyle={pal.viewLight} hoverStyle={pal.viewLight}
onPress={() => onPressItem(i)}> onPress={() => onPressItem(i)}>