chore(package): merge develop

Author: HaixingOoO

package.json

@@ -168,7 +168,6 @@
     "dayjs": "^1.11.13",
     "hoist-non-react-statics": "^3.3.2",
     "lodash-es": "^4.17.21",
-    "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

@@ -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, motion } from 'motion/react';
 import useDefaultProps from 'tdesign-mobile-react/hooks/useDefaultProps';
 import useConfig from '../hooks/useConfig';
 import nearest from '../_util/nearest';
@@ -52,35 +51,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 y = useSpring(0, {
-    stiffness: 5,
-  });
-
-  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;
       }
-      const offsetY = offsetYList[nextIndex];
-      if (immediate) {
-        y.jump(-offsetY);
-      } else {
-        y.set(-offsetY);
-      }
+      setY(offsetYList[nextIndex]);
     },
-    [getOffsetYList, y],
+    [getOffsetYList],
   );
 
   const handleChange = (value: number | string) => {
@@ -94,13 +78,13 @@ const PickerItem: FC<PickerItemProps> = memo((props) => {
     () => {
       if (currentIndex === lastIndexRef.current) return;
       if (currentIndex >= 0) {
-        srollTo(currentIndex, isUndefined(lastIndexRef.current));
+        scrollTo(currentIndex);
       } else {
-        y.set(0);
+        setY(0);
       }
       lastIndexRef.current = currentIndex;
     },
-    [y, currentIndex, srollTo],
+    [currentIndex, scrollTo],
     { wait: 100 },
   );
 
@@ -118,25 +102,25 @@ const PickerItem: FC<PickerItemProps> = memo((props) => {
         const nextIndex = offsetYList.findIndex((item) => item === nextOffsetY);
         if (isUndefined(value)) {
           lastIndexRef.current = nextIndex;
-          y.set(-nextOffsetY);
+          setY(nextOffsetY);
           handleChange(options[nextIndex].value);
         } else {
           // 受控模式,onChange回调后等待value更新，如果不更新回退到原处
           handleChange(options[nextIndex].value);
           setTimeout(() => {
             if (lastIndex === lastIndexRef.current) {
-              y.set(-offsetYList[lastIndex] || 0);
+              setY(offsetYList[lastIndex] || 0);
             }
           }, 100);
         }
       } else {
-        y.set(-offsetY);
+        setY(offsetY);
       }
     },
     {
       target: rootRef,
       axis: 'y',
-      from: () => [0, y.get()],
+      from: () => [0, y],
       transform: ([x, y]) => [x, -y],
       filterTaps: true,
       pointer: { touch: true },
@@ -159,13 +143,20 @@ const PickerItem: FC<PickerItemProps> = memo((props) => {
   return withNativeProps(
     props,
     <div className={name} ref={rootRef}>
-      <motion.div ref={controlRef} className={`${name}__wrapper`} style={{ 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>
         ))}
-      </motion.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, motion } from 'motion/react';
 import parseTNode from 'tdesign-mobile-react/_util/parseTNode';
 import nearest from '../_util/nearest';
 import withNativeProps from '../_util/withNativeProps';
@@ -82,17 +81,10 @@ const SwipeCell = forwardRef<SwipeCellRef, SwipeCellProps>((originProps, ref) =>
     return 0;
   };
 
-  const x = useSpring(0, {
-    stiffness: 200,
-    damping: 30,
-  });
+  const [x, setX] = useState(0);
 
-  const close = (immediate = false) => {
-    if (immediate) {
-      x.jump(0);
-    } else {
-      x.set(0);
-    }
+  const close = () => {
+    setX(0);
     onChange();
     if (curSure.content) {
       setTimeout(() => {
@@ -105,14 +97,9 @@ const SwipeCell = forwardRef<SwipeCellRef, SwipeCellProps>((originProps, ref) =>
     }
   };
 
-  const expand = (side: SideType = 'right', immediate = false) => {
-    const offsetX = getSideOffsetX(side);
-    if (immediate) {
-      x.jump(offsetX);
-    } else {
-      x.set(offsetX);
-    }
-
+  const expand = (side: SideType = 'right') => {
+    const x = getSideOffsetX(side);
+    setX(x);
     onChange(side);
   };
 
@@ -148,11 +135,11 @@ const SwipeCell = forwardRef<SwipeCellRef, SwipeCellProps>((originProps, ref) =>
           ctx.dragging = false;
         });
       } else {
-        x.jump(offsetX);
+        setX(offsetX);
       }
     },
     {
-      from: () => [x.get(), 0],
+      from: () => [x, 0],
       bounds: () => ({
         left: getSideOffsetX('right'),
         right: getSideOffsetX('left'),
@@ -177,19 +164,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();
       }
     },
@@ -272,7 +258,7 @@ const SwipeCell = forwardRef<SwipeCellRef, SwipeCellProps>((originProps, ref) =>
         }
       }}
     >
-      <motion.div className={`${swipeCellClass}__wrapper`} style={{ x }}>
+      <div className={`${swipeCellClass}__wrapper`} style={{ transform: `translateX(${x}px)` }}>
         {left && (
           <div className={`${swipeCellClass}__left`} ref={leftRef}>
             {renderSureContent()}
@@ -286,7 +272,7 @@ const SwipeCell = forwardRef<SwipeCellRef, SwipeCellProps>((originProps, ref) =>
             {renderActions(right as any, 'right')}
           </div>
         )}
-      </motion.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;
+  }
+}