fix: remove useless parameters

mahaaoo · Sep 21, 2024 · a70b743 · a70b743
1 parent 81cfb0d
commit a70b743
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 21 deletions.
diff --git a/src/components/PageView/PageView.tsx b/src/components/PageView/PageView.tsx
@@ -31,7 +31,7 @@ const PageView = forwardRef<PageViewRef, PageViewProps>((props, ref) => {
 
   const pageMove = useSharedValue(-initialPage * contentSize);
   const offset = useSharedValue(0);
-  const currentPage = useSharedValue(initialPage);
+  const currentIndex = useSharedValue(initialPage);
   const pageState = useSharedValue<PageStateType>('idle');
 
   const pageSelected = (nextPage: number) => {
@@ -47,18 +47,28 @@ const PageView = forwardRef<PageViewRef, PageViewProps>((props, ref) => {
   };
 
   const setPage = (index: number) => {
+    if (index < 0 || index >= pageSize) {
+      throw new Error('setPage can only handle index [0, pageSize]');
+    }
+
     moveTo(index);
   };
 
   const setPageWithoutAnimation = (index: number) => {
+    if (index < 0 || index >= pageSize) {
+      throw new Error(
+        'setPageWithoutAnimation can only handle index [0, pageSize]'
+      );
+    }
+
     pageMove.value = -index * contentSize;
-    currentPage.value = index;
+    currentIndex.value = index;
     pageState.value = 'idle';
     runOnJS(pageSelected)(index);
   };
 
   const getCurrentPage = () => {
-    return currentPage.value;
+    return currentIndex.value;
   };
 
   useImperativeHandle(
@@ -92,7 +102,7 @@ const PageView = forwardRef<PageViewRef, PageViewProps>((props, ref) => {
       { duration: DURATION },
       () => {
         const nextPage = Math.abs(Math.round(pageMove.value / contentSize));
-        currentPage.value = nextPage;
+        currentIndex.value = nextPage;
         pageState.value = 'idle';
         runOnJS(pageSelected)(nextPage);
       }
@@ -102,7 +112,7 @@ const PageView = forwardRef<PageViewRef, PageViewProps>((props, ref) => {
   const panGesture = Gesture.Pan()
     .activeOffsetX([-10, 10])
     .onTouchesDown((event, stateManager) => {
-      if (currentPage.value === 0 && gestureBack) {
+      if (currentIndex.value === 0 && gestureBack) {
         const allTouches = event.allTouches[0];
         if (allTouches.x <= 35) {
           stateManager.fail();
@@ -134,8 +144,8 @@ const PageView = forwardRef<PageViewRef, PageViewProps>((props, ref) => {
       const willToPage = Math.abs(Math.round(dest / contentSize));
       const toValue = clamp(
         willToPage,
-        currentPage.value - 1,
-        currentPage.value + 1
+        currentIndex.value - 1,
+        currentIndex.value + 1
       );
 
       moveTo(toValue);

diff --git a/src/components/TabBar/TabBar.tsx b/src/components/TabBar/TabBar.tsx
@@ -1,7 +1,15 @@
-import React, { useMemo, useRef, useState } from 'react';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { View, ScrollView, LayoutChangeEvent, StyleSheet } from 'react-native';
 import TabBarItem from './TabBarItem';
 import Animated, {
+  runOnUI,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
@@ -11,7 +19,11 @@ import Separator from './Separator';
 import { TabBarProps, TabBarItemLayout } from './type';
 import { useVerifyProps } from './hook';
 
-const TabBar: React.FC<TabBarProps> = (props) => {
+interface TabBarRef {
+  setTab: (index: number) => void;
+}
+
+const TabBar = forwardRef<TabBarRef, TabBarProps>((props, ref) => {
   const {
     tabs,
     style,
@@ -32,24 +44,32 @@ const TabBar: React.FC<TabBarProps> = (props) => {
     contentSize,
   } = useVerifyProps(props);
 
-  const [currentIndex, setCurrentIndex] = useState(initialTab);
   const sliderOffset = useSharedValue(0);
   const scrollSize = useRef(0);
   const scrollRef = useRef<ScrollView>(null);
   const layouts = useRef<TabBarItemLayout[]>([]).current;
   const sliderWidth = useRef(defalutSliderWidth);
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      setTab: handleOnPress,
+    }),
+    []
+  );
+
   const handleOnPress = (index: number) => {
-    setCurrentIndex(index);
+    // setCurrentIndex(index);
     calculateSliderOffset(index);
     onPress && onPress(index);
   };
 
   const onTabBarItemLayout = (index: number, layout: TabBarItemLayout) => {
     layouts[index] = layout;
     const length = layouts.filter((layout) => layout.width > 0).length;
+
     if (length === tabs.length) {
-      calculateSliderOffset(currentIndex);
+      calculateSliderOffset(initialTab);
     }
   };
 
@@ -64,7 +84,14 @@ const TabBar: React.FC<TabBarProps> = (props) => {
 
   const calculateSliderOffset = (index: number) => {
     'worklet';
+    if (index < 0 || index >= tabs.length) {
+      throw new Error(
+        'calculateSliderOffset can only handle index [0, tabs.length - 1]'
+      );
+    }
+
     const { x, y, width, height } = layouts[index];
+
     const toValue = x + (width - sliderWidth.current) / 2;
     if (toValue > contentSize / 2) {
       scrollRef.current &&
@@ -104,12 +131,13 @@ const TabBar: React.FC<TabBarProps> = (props) => {
         scrollEnabled={scrollEnabled}
         onContentSizeChange={onContentSizeChange}
         contentContainerStyle={styles.contentContainerStyle}
+        scrollEventThrottle={16}
         showsHorizontalScrollIndicator={false}
       >
         {tabs?.length > 0 &&
           tabs.map((tab, index) => {
             return (
-              <>
+              <React.Fragment key={index}>
                 {index === 0 ? <Separator spacing={spacing} /> : null}
                 <TabBarItem
                   width={tabBarItemWidth}
@@ -126,7 +154,7 @@ const TabBar: React.FC<TabBarProps> = (props) => {
                     separatorComponent &&
                     separatorComponent(index)}
                 </Separator>
-              </>
+              </React.Fragment>
             );
           })}
         {!hideSlider ? (
@@ -141,7 +169,7 @@ const TabBar: React.FC<TabBarProps> = (props) => {
       </ScrollView>
     </View>
   );
-};
+});
 
 const styles = StyleSheet.create({
   sliderContainer: {

diff --git a/src/components/TabBar/type.ts b/src/components/TabBar/type.ts
@@ -1,4 +1,5 @@
 import { DimensionValue, TextStyle, ViewStyle } from 'react-native';
+import { SharedValue } from 'react-native-reanimated';
 
 export interface TabBarProps {
   tabs: Array<string>;

diff --git a/src/components/TabView/TabView.tsx b/src/components/TabView/TabView.tsx
@@ -1,19 +1,27 @@
-import React from 'react';
-import { View, Text } from 'react-native';
+import React, { useRef } from 'react';
+import { View, Text, Dimensions } from 'react-native';
 import { TabBar } from '../TabBar';
-import { PageView } from '../PageView';
+import { PageView, PageViewRef } from '../PageView';
+import Animated, { useSharedValue } from 'react-native-reanimated';
+
+const { width } = Dimensions.get('window');
 
 interface TabViewProps {}
 
 const tabs = ['tab1', 'tab2', 'this is tab3', 'tab5', '11', 'tab8', 'ta11'];
 
 const TabView: React.FC<TabViewProps> = (props) => {
   const {} = props;
+  // const contentSize = width;
+  const currentIndex = useSharedValue(2);
+  const pageRef = useRef<PageViewRef>(null);
+  const tabRef = useRef(null);
 
   return (
-    <View style={{ flex: 1 }}>
+    <Animated.View style={{ flex: 1 }}>
       <TabBar
         tabs={tabs}
+        ref={tabRef}
         spacing={20}
         showSeparator
         separatorComponent={() => (
@@ -26,18 +34,30 @@ const TabView: React.FC<TabViewProps> = (props) => {
           paddingVertical: 10,
           backgroundColor: 'orange',
         }}
+        onPress={(index) => {
+          // pageRef.current && pageRef.current?.setPage(index);
+          console.log('onPress index', index);
+          // currentIndex.value = index;
+        }}
+        initialTab={currentIndex.value}
       />
       <PageView
         style={{ flex: 1 }}
-        initialPage={1}
+        ref={pageRef}
+        initialPage={currentIndex.value}
         onPageSelected={(currentPage) => {
           // console.log('currentPage:', currentPage);
+          // tabRef.current && tabRef.current?.setTab(currentPage);
         }}
         onPageScrollStateChanged={(state) => {
           // console.log('state:', state);
         }}
         onPageScroll={(translate) => {
           // console.log('translate', translate);
+          // currentIndex.value = translate;
+          // const page = pageRef.current && pageRef.current?.getCurrentPage();
+          // console.log('translate', page);
+
         }}
         scrollEnabled={true}
         bounces={true}
@@ -58,7 +78,7 @@ const TabView: React.FC<TabViewProps> = (props) => {
           );
         })}
       </PageView>
-    </View>
+    </Animated.View>
   );
 };