acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Fix container calculation for web resize

Browse Source
This commit is contained in:
Dan Abramov
2023-10-17 21:28:54 +01:00
parent a1f6ed8519
commit 14b0bed36d
1 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/com/pager/TabBar.tsx
+8 -5
View File
@@ -1,6 +1,6 @@
import React, {useMemo, useCallback, useEffect, useState} from 'react' import React, {useMemo, useCallback, useEffect, useState} from 'react'
import Animated, {useAnimatedReaction, useAnimatedRef, useAnimatedStyle, useDerivedValue, useSharedValue, measure, interpolate, interpolateColor, scrollTo, withSpring} from 'react-native-reanimated' import Animated, {useAnimatedReaction, useAnimatedRef, useAnimatedStyle, useDerivedValue, useSharedValue, measure, interpolate, interpolateColor, scrollTo, withSpring} from 'react-native-reanimated'
import {Dimensions, StyleSheet, View, ScrollView, useWindowDimensions} from 'react-native' import {Dimensions, StyleSheet, View, ScrollView} from 'react-native'
import {PressableWithHover} from '../util/PressableWithHover' import {PressableWithHover} from '../util/PressableWithHover'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useTheme} from 'lib/ThemeContext' import {useTheme} from 'lib/ThemeContext'
@@ -28,8 +28,8 @@ export function TabBar({
onPressSelected, onPressSelected,
}: TabBarProps) { }: TabBarProps) {
const pal = usePalette('default') const pal = usePalette('default')
const {width: windowWidth} = useWindowDimensions()
const contentSize = useSharedValue(0) const contentSize = useSharedValue(0)
const containerSize = useSharedValue(0)
const scrollElRef = useAnimatedRef(null) const scrollElRef = useAnimatedRef(null)
const {isDesktop, isTablet} = useWebMediaQueries() const {isDesktop, isTablet} = useWebMediaQueries()
const [layouts, setLayouts] = useState([]) const [layouts, setLayouts] = useState([])
@@ -54,7 +54,7 @@ export function TabBar({
const onPressItem = (index: number) => { const onPressItem = (index: number) => {
if (!didScroll.value) { if (!didScroll.value) {
scrollElRef.current.scrollTo({ scrollElRef.current.scrollTo({
x: scrollX.value + ((index - selectedPage) / (items.length - 1)) * (contentSize.value - windowWidth), x: scrollX.value + ((index - selectedPage) / (items.length - 1)) * (contentSize.value - containerSize.value),
animated: true animated: true
}) })
} }
@@ -66,7 +66,7 @@ export function TabBar({
}; };
useAnimatedReaction(() => { useAnimatedReaction(() => {
return (dragProgress.value / (items.length - 1)) * (contentSize.value - windowWidth) return (dragProgress.value / (items.length - 1)) * (contentSize.value - containerSize.value)
}, (nextX, prevX) => { }, (nextX, prevX) => {
if (prevX !== nextX && dragState.value !== 'idle' && !didScroll.value) { if (prevX !== nextX && dragState.value !== 'idle' && !didScroll.value) {
scrollTo(scrollElRef, nextX, 0, false); scrollTo(scrollElRef, nextX, 0, false);
@@ -77,7 +77,7 @@ export function TabBar({
return dragState.value return dragState.value
}, (nextDragState, prevDragState) => { }, (nextDragState, prevDragState) => {
if (nextDragState === 'idle' && nextDragState !== prevDragState) { if (nextDragState === 'idle' && nextDragState !== prevDragState) {
const nextX = (dragProgress.value / (items.length - 1)) * (contentSize.value - windowWidth) const nextX = (dragProgress.value / (items.length - 1)) * (contentSize.value - containerSize.value)
scrollTo(scrollElRef, nextX, 0, true); scrollTo(scrollElRef, nextX, 0, true);
didScroll.value = false didScroll.value = false
} }
@@ -109,6 +109,9 @@ export function TabBar({
onScrollBeginDrag={e => { onScrollBeginDrag={e => {
didScroll.value = true didScroll.value = true
}} }}
onLayout={e => {
containerSize.value = e.nativeEvent.layout.width
}}
onScroll={e => { onScroll={e => {
scrollX.value = Math.round(e.nativeEvent.contentOffset.x) scrollX.value = Math.round(e.nativeEvent.contentOffset.x)
}} }}