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

Fix viewport calc for web

Browse Source
This commit is contained in:
Dan Abramov
2023-10-17 21:13:03 +01:00
parent 3bc9a0120a
commit 247df797c9
1 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/com/pager/TabBar.tsx
+5 -6
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} from 'react-native' import {Dimensions, StyleSheet, View, ScrollView, useWindowDimensions} 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'
@@ -17,8 +17,6 @@ export interface TabBarProps {
onPressSelected?: () => void onPressSelected?: () => void
} }
const SCREEN = Dimensions.get('screen')
export function TabBar({ export function TabBar({
testID, testID,
dragProgress, dragProgress,
@@ -30,6 +28,7 @@ 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 scrollElRef = useAnimatedRef(null) const scrollElRef = useAnimatedRef(null)
const {isDesktop, isTablet} = useWebMediaQueries() const {isDesktop, isTablet} = useWebMediaQueries()
@@ -56,7 +55,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 - SCREEN.width), x: scrollX.value + ((index - selectedPage) / (items.length - 1)) * (contentSize.value - windowWidth),
animated: true animated: true
}) })
} }
@@ -68,7 +67,7 @@ export function TabBar({
}; };
useAnimatedReaction(() => { useAnimatedReaction(() => {
return (dragProgress.value / (items.length - 1)) * (contentSize.value - SCREEN.width) return (dragProgress.value / (items.length - 1)) * (contentSize.value - windowWidth)
}, (nextX, prevX) => { }, (nextX, prevX) => {
if (shouldSync.value && prevX !== nextX) { if (shouldSync.value && prevX !== nextX) {
scrollTo(scrollElRef, nextX, 0, false); scrollTo(scrollElRef, nextX, 0, false);
@@ -79,7 +78,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 - SCREEN.width) const nextX = (dragProgress.value / (items.length - 1)) * (contentSize.value - windowWidth)
scrollTo(scrollElRef, nextX, 0, true); scrollTo(scrollElRef, nextX, 0, true);
shouldSync.value = true shouldSync.value = true
didScroll.value = false didScroll.value = false