chore: replace react-spring from motion

Author: Heising

package.json

@@ -154,22 +154,21 @@
     "tdesign-site-components": "^0.15.6",
     "tdesign-theme-generator": "^1.1.0",
     "typescript": "5.2.2",
-    "vite": "^5.4.7",
+    "vite": "^2.7.0",
     "vite-plugin-pwa": "^0.11.11",
     "vite-plugin-tdoc": "^2.0.0",
     "vitest": "^2.1.9",
     "workbox-precaching": "^6.3.0"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@react-spring/web": "^9.7.5",
     "@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",
+    "motion": "^12.6.3",
     "react-transition-group": "^4.4.2",
     "smoothscroll-polyfill": "^0.4.4",
     "tdesign-icons-react": "^0.4.4",

src/picker/PickerItem.tsx

@@ -2,7 +2,7 @@ import React, { FC, useRef, memo, useCallback, useContext, useMemo } 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 { useSpring, motion } from 'motion/react';
 import useDefaultProps from 'tdesign-mobile-react/hooks/useDefaultProps';
 import useConfig from '../hooks/useConfig';
 import nearest from '../_util/nearest';
@@ -52,13 +52,17 @@ 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 }, api] = useSpring(() => ({
+  //   from: { y: 0 },
+  //   config: {
+  //     tension: 400,
+  //     mass: 0.8,
+  //   },
+  // }));
+
+  const y = useSpring(0, {
+    stiffness: 5,
+  });
 
   const srollTo = useCallback(
     (index: number, immediate = false) => {
@@ -69,9 +73,14 @@ const PickerItem: FC<PickerItemProps> = memo((props) => {
       } else if (index >= offsetYList.length) {
         nextIndex = offsetYList.length - 1;
       }
-      api.start({ y: offsetYList[nextIndex], immediate });
+      const offsetY = offsetYList[nextIndex];
+      if (immediate) {
+        y.jump(-offsetY);
+      } else {
+        y.set(-offsetY);
+      }
     },
-    [api, getOffsetYList],
+    [getOffsetYList, y],
   );
 
   const handleChange = (value: number | string) => {
@@ -87,11 +96,11 @@ const PickerItem: FC<PickerItemProps> = memo((props) => {
       if (currentIndex >= 0) {
         srollTo(currentIndex, isUndefined(lastIndexRef.current));
       } else {
-        api.start({ y: 0 });
+        y.set(0);
       }
       lastIndexRef.current = currentIndex;
     },
-    [api, currentIndex, srollTo],
+    [y, currentIndex, srollTo],
     { wait: 100 },
   );
 
@@ -109,23 +118,19 @@ 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);
-            },
-          });
+          y.set(-nextOffsetY);
+          handleChange(options[nextIndex].value);
         } else {
           // 受控模式,onChange回调后等待value更新，如果不更新回退到原处
           handleChange(options[nextIndex].value);
           setTimeout(() => {
             if (lastIndex === lastIndexRef.current) {
-              api.start({ y: offsetYList[lastIndex] || 0 });
+              y.set(-offsetYList[lastIndex] || 0);
             }
           }, 100);
         }
       } else {
-        api.start({ y: offsetY });
+        y.set(-offsetY);
       }
     },
     {
@@ -150,17 +155,17 @@ const PickerItem: FC<PickerItemProps> = memo((props) => {
       },
     },
   );
-
+  console.log('y', y);
   return withNativeProps(
     props,
     <div className={name} ref={rootRef}>
-      <animated.div ref={controlRef} className={`${name}__wrapper`} style={{ y: y.to((y) => -y) }}>
+      <motion.div ref={controlRef} className={`${name}__wrapper`} style={{ y }}>
         {options.map((item) => (
           <div key={item.value} className={`${name}__item`}>
             {(formatter && formatter(item)) || item.label}
           </div>
         ))}
-      </animated.div>
+      </motion.div>
     </div>,
   );
 });

src/swipe-cell/SwipeCell.tsx

@@ -4,7 +4,7 @@ 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 { useSpring, motion } from 'motion/react';
 import parseTNode from 'tdesign-mobile-react/_util/parseTNode';
 import nearest from '../_util/nearest';
 import withNativeProps from '../_util/withNativeProps';
@@ -82,16 +82,17 @@ const SwipeCell = forwardRef<SwipeCellRef, SwipeCellProps>((originProps, ref) =>
     return 0;
   };
 
-  const [{ x }, api] = useSpring(
-    () => ({
-      x: 0,
-      config: { tension: 200, friction: 30 },
-    }),
-    [],
-  );
+  const x = useSpring(0, {
+    stiffness: 200,
+    damping: 30,
+  });
 
   const close = (immediate = false) => {
-    api.start({ x: 0, immediate });
+    if (immediate) {
+      x.jump(0);
+    } else {
+      x.set(0);
+    }
     onChange();
     if (curSure.content) {
       setTimeout(() => {
@@ -105,11 +106,13 @@ const SwipeCell = forwardRef<SwipeCellRef, SwipeCellProps>((originProps, ref) =>
   };
 
   const expand = (side: SideType = 'right', immediate = false) => {
-    const x = getSideOffsetX(side);
-    api.start({
-      x,
-      immediate,
-    });
+    const offsetX = getSideOffsetX(side);
+    if (immediate) {
+      x.jump(offsetX);
+    } else {
+      x.set(offsetX);
+    }
+
     onChange(side);
   };
 
@@ -145,10 +148,7 @@ const SwipeCell = forwardRef<SwipeCellRef, SwipeCellProps>((originProps, ref) =>
           ctx.dragging = false;
         });
       } else {
-        api.start({
-          x: offsetX,
-          immediate: true,
-        });
+        x.jump(offsetX);
       }
     },
     {
@@ -272,7 +272,7 @@ const SwipeCell = forwardRef<SwipeCellRef, SwipeCellProps>((originProps, ref) =>
         }
       }}
     >
-      <animated.div className={`${swipeCellClass}__wrapper`} style={{ x }}>
+      <motion.div className={`${swipeCellClass}__wrapper`} style={{ x }}>
         {left && (
           <div className={`${swipeCellClass}__left`} ref={leftRef}>
             {renderSureContent()}
@@ -286,7 +286,7 @@ const SwipeCell = forwardRef<SwipeCellRef, SwipeCellProps>((originProps, ref) =>
             {renderActions(right as any, 'right')}
           </div>
         )}
-      </animated.div>
+      </motion.div>
     </div>,
   );
 });