feat: add swiper ref

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taoyage/react-mobile-ui",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A react mobile components lib",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/hooks/useUpdateEffect.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const useUpdateEffect = (callback: React.EffectCallback, deep?: React.DependencyList) => {
+  const isMounted = React.useRef<boolean>(false);
+
+  React.useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (!isMounted.current) {
+      isMounted.current = true;
+    } else {
+      callback();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deep);
+};
+
+export default useUpdateEffect;

packages/index.tsx

@@ -35,7 +35,7 @@ export { default as Tabs } from '@/tabs';
 export type { TabsProps, TabProps } from '@/tabs';
 
 export { default as Swiper } from '@/swiper';
-export type { SwiperProps, SwiperItemProps } from '@/swiper';
+export type { SwiperProps, SwiperItemProps, SwiperRef } from '@/swiper';
 
 export { default as Grid } from '@/grid';
 export type { GridProps, GridItemProps } from '@/grid';

packages/swiper/index.tsx

@@ -1,7 +1,7 @@
 import InternalSwiper from './swiper';
 import SwiperItem from './swiper-item';
 
-export type { SwiperProps } from './swiper';
+export type { SwiperProps, SwiperRef } from './swiper';
 export type { SwiperItemProps } from './swiper-item';
 
 type InternalSwiperType = typeof InternalSwiper;

packages/swiper/swiper.tsx

@@ -12,9 +12,16 @@ export interface SwiperProps {
   children: React.ReactElement | React.ReactElement[];
   showIndicator?: boolean;
   indicatorClassName?: string;
+  onIndexChange?: (index: number) => void;
 }
 
-const Swiper: React.FC<SwiperProps> = React.memo((props) => {
+export interface SwiperRef {
+  swipeTo: (index: number) => void;
+  swipeNext: () => void;
+  swipePrev: () => void;
+}
+
+const Swiper = React.forwardRef<SwiperRef, SwiperProps>((props, ref) => {
   const [currentIndex, setCurrentIndex] = React.useState<number>(props.defaultIndex || 0);
   const [dragging, setDragging] = React.useState<boolean>(false);
 
@@ -80,10 +87,15 @@ const Swiper: React.FC<SwiperProps> = React.memo((props) => {
     (index: number) => {
       const targetIndex = modulus(index, count);
       setCurrentIndex(targetIndex);
+      props.onIndexChange?.(targetIndex);
     },
-    [count]
+    [count, props]
   );
 
+  const swipePrev = React.useCallback(() => {
+    swipeTo(currentIndex - 1);
+  }, [currentIndex, swipeTo]);
+
   const swipeNext = React.useCallback(() => {
     swipeTo(currentIndex + 1);
   }, [swipeTo, currentIndex]);
@@ -131,6 +143,12 @@ const Swiper: React.FC<SwiperProps> = React.memo((props) => {
     [onTouchEnd, onTouchMove]
   );
 
+  React.useImperativeHandle(ref, () => ({
+    swipeTo,
+    swipeNext,
+    swipePrev,
+  }));
+
   React.useEffect(() => {
     if (!props.autoplay || dragging) return;
     intervalRef.current = window.setInterval(() => {

packages/tabs/tabs.tsx

@@ -114,7 +114,11 @@ const Tabs: React.FC<TabsProps> = React.memo((props) => {
       {panes.map(
         (child) =>
           activeKey === child.key && (
-            <div key={child.key} className={cx(`${classPrefix}-content`, props.tabContentClassName)}>
+            <div
+              key={child.key}
+              className={cx(`${classPrefix}-content`, props.tabContentClassName)}
+              style={{ display: activeKey === child.key ? 'block' : 'none' }}
+            >
               {child}
             </div>
           )