chore: remove react-spring

package.json

@@ -162,14 +162,12 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@react-spring/web": "9.6.1",
     "@use-gesture/react": "^10.2.10",
     "ahooks": "^3.1.9",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.13",
     "hoist-non-react-statics": "^3.3.2",
     "lodash-es": "^4.17.21",
-    "react-spring": "9.6.1",
     "react-transition-group": "^4.4.2",
     "smoothscroll-polyfill": "^0.4.4",
     "tdesign-icons-react": "^0.4.4",

src/picker/PickerItem.tsx

@@ -1,8 +1,7 @@
-import React, { FC, useRef, memo, useCallback, useContext, useMemo } from 'react';
+import React, { FC, useRef, memo, useCallback, useContext, useMemo, useState } from 'react';
 import { useDebounceEffect } from 'ahooks';
 import { isUndefined } from 'lodash-es';
 import { useDrag } from '@use-gesture/react';
-import { useSpring, animated } from '@react-spring/web';
 import useConfig from '../hooks/useConfig';
 import nearest from '../_util/nearest';
 import withNativeProps, { NativeProps } from '../_util/withNativeProps';
@@ -51,26 +50,20 @@ const PickerItem: FC<PickerItemProps> = memo((props) => {
       .map((_, index) => index * itemHeight - yCompensation);
   }, [count, getControlItemHeight, getControlYCompensation]);
 
-  const [{ y }, api] = useSpring(() => ({
-    from: { y: 0 },
-    config: {
-      tension: 400,
-      mass: 0.8,
-    },
-  }));
+  const [y, setY] = useState(0);
 
-  const srollTo = useCallback(
-    (index: number, immediate = false) => {
+  const scrollTo = useCallback(
+    (index: number) => {
       const offsetYList = getOffsetYList();
       let nextIndex = index;
       if (index < 0) {
         nextIndex = 0;
       } else if (index >= offsetYList.length) {
         nextIndex = offsetYList.length - 1;
       }
-      api.start({ y: offsetYList[nextIndex], immediate });
+      setY(offsetYList[nextIndex]);
     },
-    [api, getOffsetYList],
+    [getOffsetYList],
   );
 
   const handleChange = (value: number | string) => {
@@ -84,13 +77,13 @@ const PickerItem: FC<PickerItemProps> = memo((props) => {
     () => {
       if (currentIndex === lastIndexRef.current) return;
       if (currentIndex >= 0) {
-        srollTo(currentIndex, isUndefined(lastIndexRef.current));
+        scrollTo(currentIndex);
       } else {
-        api.start({ y: 0 });
+        setY(0);
       }
       lastIndexRef.current = currentIndex;
     },
-    [api, currentIndex, srollTo],
+    [currentIndex, scrollTo],
     { wait: 100 },
   );
 
@@ -108,29 +101,25 @@ const PickerItem: FC<PickerItemProps> = memo((props) => {
         const nextIndex = offsetYList.findIndex((item) => item === nextOffsetY);
         if (isUndefined(value)) {
           lastIndexRef.current = nextIndex;
-          api.start({
-            to: async (next) => {
-              await next({ y: nextOffsetY });
-              handleChange(options[nextIndex].value);
-            },
-          });
+          setY(nextOffsetY);
+          handleChange(options[nextIndex].value);
         } else {
           // 受控模式,onChange回调后等待value更新，如果不更新回退到原处
           handleChange(options[nextIndex].value);
           setTimeout(() => {
             if (lastIndex === lastIndexRef.current) {
-              api.start({ y: offsetYList[lastIndex] || 0 });
+              setY(offsetYList[lastIndex] || 0);
             }
           }, 100);
         }
       } else {
-        api.start({ y: offsetY });
+        setY(offsetY);
       }
     },
     {
       target: rootRef,
       axis: 'y',
-      from: () => [0, y.get()],
+      from: () => [0, y],
       transform: ([x, y]) => [x, -y],
       filterTaps: true,
       pointer: { touch: true },
@@ -153,13 +142,20 @@ const PickerItem: FC<PickerItemProps> = memo((props) => {
   return withNativeProps(
     props,
     <div className={name} ref={rootRef}>
-      <animated.div ref={controlRef} className={`${name}__wrapper`} style={{ y: y.to((y) => -y) }}>
+      <div
+        ref={controlRef}
+        className={`${name}__wrapper`}
+        style={{
+          transition: 'transform 0.3s ease-in-out',
+          transform: `translateY(${-y}px)`,
+        }}
+      >
         {options.map((item) => (
           <div key={item.value} className={`${name}__item`}>
             {(formatter && formatter(item)) || item.label}
           </div>
         ))}
-      </animated.div>
+      </div>
     </div>,
   );
 });

src/swipe-cell/SwipeCell.tsx

@@ -4,7 +4,6 @@ import { isArray, isBoolean } from 'lodash-es';
 import classNames from 'classnames';
 import { useClickAway } from 'ahooks';
 import { useDrag } from '@use-gesture/react';
-import { useSpring, animated } from '@react-spring/web';
 import nearest from '../_util/nearest';
 import withNativeProps from '../_util/withNativeProps';
 import { TdSwipeCellProps, SwipeActionItem, Sure } from './type';
@@ -81,16 +80,10 @@ const SwipeCell = forwardRef<SwipeCellRef, SwipeCellProps>((originProps, ref) =>
     return 0;
   };
 
-  const [{ x }, api] = useSpring(
-    () => ({
-      x: 0,
-      config: { tension: 200, friction: 30 },
-    }),
-    [],
-  );
+  const [x, setX] = useState(0);
 
-  const close = (immediate = false) => {
-    api.start({ x: 0, immediate });
+  const close = () => {
+    setX(0);
     onChange();
     if (curSure.content) {
       setTimeout(() => {
@@ -103,12 +96,9 @@ const SwipeCell = forwardRef<SwipeCellRef, SwipeCellProps>((originProps, ref) =>
     }
   };
 
-  const expand = (side: SideType = 'right', immediate = false) => {
+  const expand = (side: SideType = 'right') => {
     const x = getSideOffsetX(side);
-    api.start({
-      x,
-      immediate,
-    });
+    setX(x);
     onChange(side);
   };
 
@@ -144,14 +134,11 @@ const SwipeCell = forwardRef<SwipeCellRef, SwipeCellProps>((originProps, ref) =>
           ctx.dragging = false;
         });
       } else {
-        api.start({
-          x: offsetX,
-          immediate: true,
-        });
+        setX(offsetX);
       }
     },
     {
-      from: () => [x.get(), 0],
+      from: () => [x, 0],
       bounds: () => ({
         left: getSideOffsetX('right'),
         right: getSideOffsetX('left'),
@@ -176,19 +163,18 @@ const SwipeCell = forwardRef<SwipeCellRef, SwipeCellProps>((originProps, ref) =>
       // 初始化 expanded，等待 dom 加载完，获取 left/right 宽度后无动画设置展开状态
       // 防止 left/right 为列表时，获取真实宽度有误
       setTimeout(() => {
-        expand(side as SideType, !!ctx.initialExpanded);
+        expand(side as SideType);
       }, 100);
     } else {
       close();
     }
-    delete ctx.initialExpanded;
     // 可以保证expand，close正常执行
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [opened, rootRef.current]);
 
   useClickAway(
     () => {
-      if (x.get() !== 0) {
+      if (x !== 0) {
         close();
       }
     },
@@ -271,7 +257,7 @@ const SwipeCell = forwardRef<SwipeCellRef, SwipeCellProps>((originProps, ref) =>
         }
       }}
     >
-      <animated.div className={`${swipeCellClass}__wrapper`} style={{ x }}>
+      <div className={`${swipeCellClass}__wrapper`} style={{ transform: `translateX(${x}px)` }}>
         {left && (
           <div className={`${swipeCellClass}__left`} ref={leftRef}>
             {renderSureContent()}
@@ -285,7 +271,7 @@ const SwipeCell = forwardRef<SwipeCellRef, SwipeCellProps>((originProps, ref) =>
             {renderActions(right, 'right')}
           </div>
         )}
-      </animated.div>
+      </div>
     </div>,
   );
 });

src/swipe-cell/style/index.js

@@ -1 +1,3 @@
 import '../../_common/style/mobile/components/swipe-cell/v2/_index.less';
+
+import './index.less';

src/swipe-cell/style/index.less

@@ -0,0 +1,7 @@
+@import '../../_common/style/mobile/base.less';
+
+.@{prefix}-swipe-cell {
+  &__wrapper {
+    transition: transform 0.3s ease-in-out;
+  }
+}