@nutui/nutui-react 2.3.1 → 2.3.2

package/dist/nutui.react.es.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.3.1 Wed Dec 13 2023 16:30:49 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.3.2 Fri Dec 15 2023 18:53:20 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -4342,12 +4342,15 @@ function useTouch() {
   const startY = useRef(0);
   const deltaX = useRef(0);
   const deltaY = useRef(0);
+  const delta = useRef(0);
   const offsetX = useRef(0);
   const offsetY = useRef(0);
   const direction = useRef("");
+  const touchTime = useRef(null);
   const isVertical = () => direction.current === "vertical";
   const isHorizontal = () => direction.current === "horizontal";
   const reset = () => {
+    touchTime.current = null;
     deltaX.current = 0;
     deltaY.current = 0;
     offsetX.current = 0;
@@ -4356,6 +4359,7 @@ function useTouch() {
   };
   const start2 = (event) => {
     reset();
+    touchTime.current = Date.now();
     startX.current = event.touches[0].clientX;
     startY.current = event.touches[0].clientY;
   };
@@ -4365,6 +4369,7 @@ function useTouch() {
     deltaY.current = touch.clientY - startY.current;
     offsetX.current = Math.abs(deltaX.current);
     offsetY.current = Math.abs(deltaY.current);
+    delta.current = isVertical() ? deltaY.current : deltaX.current;
     if (!direction.current) {
       direction.current = getDirection(offsetX.current, offsetY.current);
     }
@@ -4373,10 +4378,12 @@ function useTouch() {
     move,
     start: start2,
     reset,
+    touchTime,
     startX,
     startY,
     deltaX,
     deltaY,
+    delta,
     offsetX,
     offsetY,
     direction,
@@ -10595,7 +10602,7 @@ const FixedNav = (props) => {
           onClick: (event) => handleClick2(item, event),
           key: item.id || index
         },
-        /* @__PURE__ */ React__default.createElement("img", { src: item.icon, alt: "" }),
+        React__default.isValidElement(item.icon) ? item.icon : /* @__PURE__ */ React__default.createElement("img", { src: item.icon, alt: "" }),
         /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-list-text` }, item.text),
         item.num && /* @__PURE__ */ React__default.createElement("div", { className: "b" }, item.num)
       );
@@ -22562,9 +22569,8 @@ const defaultProps$h = {
   center: false,
   className: ""
 };
-const DISTANCE = 5;
 const Swiper = React__default.forwardRef((props, ref) => {
-  const propSwiper = { ...defaultProps$h, ...props };
+  const mergedProps = { ...defaultProps$h, ...props };
   const {
     children,
     direction,
@@ -22578,7 +22584,7 @@ const Swiper = React__default.forwardRef((props, ref) => {
     autoPlay,
     center,
     ...rest
-  } = propSwiper;
+  } = mergedProps;
   const container = useRef(null);
   const innerRef = useRef(null);
   const swiperRef = useRef({
@@ -22589,6 +22595,7 @@ const Swiper = React__default.forwardRef((props, ref) => {
     offset: 0,
     size: 0
   });
+  const touch = useTouch();
   const isVertical = direction === "vertical";
   const [rect, setRect] = useState(null);
   let [active, setActive] = useState(0);
@@ -22598,39 +22605,28 @@ const Swiper = React__default.forwardRef((props, ref) => {
   const [childOffset, setChildOffset] = useState([]);
   const [ready, setReady] = useState(false);
   let size = isVertical ? height : width;
-  const [touch] = useState({
-    startX: 0,
-    startY: 0,
-    deltaX: 0,
-    deltaY: 0,
-    offsetX: 0,
-    offsetY: 0,
-    stateDirection: "",
-    delta: 0,
-    touchTime: 0
-  });
-  const { childs, childCount } = useMemo$1(() => {
-    let childCount2 = 0;
-    const childs2 = React__default.Children.map(props.children, (child) => {
+  const { swiperItems, swiperItemCount } = useMemo$1(() => {
+    let count = 0;
+    const swiperItems2 = React__default.Children.map(props.children, (child) => {
       if (!React__default.isValidElement(child))
         return null;
-      childCount2++;
+      count++;
       return child;
     });
     return {
-      childs: childs2,
-      childCount: childCount2
+      swiperItems: swiperItems2,
+      swiperItemCount: count
     };
   }, [props.children]);
-  let trackSize = childCount * Number(size);
+  let trackSize = swiperItemCount * Number(size);
   const parent = {
-    propSwiper,
+    propSwiper: mergedProps,
     size
   };
   const minOffset = (() => {
     if (rect) {
       const base = isVertical ? rect.height : rect.width;
-      return base - Number(size) * childCount;
+      return base - Number(size) * swiperItemCount;
     }
     return 0;
   })();
@@ -22639,65 +22635,59 @@ const Swiper = React__default.forwardRef((props, ref) => {
     swiperRef.current.autoplayTimer = null;
   };
   const startPlay = () => {
-    if (propSwiper.autoPlay <= 0 || childCount <= 1)
+    if (mergedProps.autoPlay <= 0 || swiperItemCount <= 1)
       return;
     stopAutoPlay();
     swiperRef.current.autoplayTimer = setTimeout(() => {
       next();
       startPlay();
-    }, Number(propSwiper.autoPlay));
+    }, Number(mergedProps.autoPlay));
   };
   const resetPosition = () => {
     swiperRef.current.moving = true;
     if (active <= -1) {
-      move({ pace: childCount });
+      move({ pace: swiperItemCount });
     }
-    if (active >= childCount) {
-      move({ pace: -childCount });
+    if (active >= swiperItemCount) {
+      move({ pace: -swiperItemCount });
     }
   };
   const prev = () => {
     resetPosition();
-    resetTouchDetails();
-    requestFrame(() => {
-      requestFrame(() => {
-        swiperRef.current.moving = false;
-        move({
-          pace: -1,
-          isEmit: true
-        });
+    touch.reset();
+    requestAniFrame$1(() => {
+      swiperRef.current.moving = false;
+      move({
+        pace: -1,
+        isEmit: true
       });
     });
   };
   const next = () => {
     resetPosition();
-    resetTouchDetails();
-    requestFrame(() => {
-      requestFrame(() => {
-        swiperRef.current.moving = false;
-        move({
-          pace: 1,
-          isEmit: true
-        });
+    touch.reset();
+    requestAniFrame$1(() => {
+      swiperRef.current.moving = false;
+      move({
+        pace: 1,
+        isEmit: true
       });
     });
   };
   const to2 = (index) => {
     resetPosition();
-    resetTouchDetails();
-    requestFrame(() => {
-      requestFrame(() => {
-        swiperRef.current.moving = false;
-        let targetIndex;
-        if (props.loop && childCount === index) {
-          targetIndex = active === 0 ? 0 : index;
-        } else {
-          targetIndex = index % childCount;
-        }
-        move({
-          pace: targetIndex - active,
-          isEmit: true
-        });
+    touch.reset();
+    requestAniFrame$1(() => {
+      swiperRef.current.moving = false;
+      let targetIndex;
+      if (props.loop && swiperItemCount === index) {
+        targetIndex = active === 0 ? 0 : index;
+      } else {
+        targetIndex = index % swiperItemCount;
+      }
+      move({
+        pace: targetIndex - active,
+        isEmit: true
       });
     });
   };
@@ -22710,7 +22700,8 @@ const Swiper = React__default.forwardRef((props, ref) => {
     isEmit = false,
     movingStatus = false
   }) => {
-    if (childCount <= 1)
+    var _a2;
+    if (swiperItemCount <= 1)
       return;
     const targetActive = getActive(pace);
     const targetOffset = getOffset(targetActive, offset2);
@@ -22719,27 +22710,33 @@ const Swiper = React__default.forwardRef((props, ref) => {
         const rightBound = targetOffset < minOffset;
         childOffset[0] = rightBound ? trackSize : 0;
       }
-      if (Array.isArray(children) && children[childCount - 1] && targetOffset !== 0) {
+      if (Array.isArray(children) && children[swiperItemCount - 1] && targetOffset !== 0) {
         const leftBound = targetOffset > 0;
-        childOffset[childCount - 1] = leftBound ? -trackSize : 0;
+        childOffset[swiperItemCount - 1] = leftBound ? -trackSize : 0;
       }
       setChildOffset(childOffset);
     }
     if (isEmit && active !== targetActive) {
-      props.onChange && props.onChange((targetActive + childCount) % childCount);
+      (_a2 = props.onChange) == null ? void 0 : _a2.call(props, (targetActive + swiperItemCount) % swiperItemCount);
     }
     active = targetActive;
     setActive(targetActive);
     setOffset(targetOffset);
     getStyle(targetOffset);
   };
+  React__default.useImperativeHandle(ref, () => ({
+    to: to2,
+    next,
+    prev,
+    resize
+  }));
   const getActive = (pace) => {
     if (pace) {
       const _active = active + pace;
       if (props.loop) {
-        return range3(_active, -1, childCount);
+        return range3(_active, -1, swiperItemCount);
       }
-      return range3(_active, 0, childCount - 1);
+      return range3(_active, 0, swiperItemCount - 1);
     }
     return active;
   };
@@ -22754,45 +22751,9 @@ const Swiper = React__default.forwardRef((props, ref) => {
     }
     return targetOffset;
   };
-  const requestFrame = (fn) => {
-    window.requestAnimationFrame.call(window, fn);
-  };
   const range3 = (num, min, max) => {
     return Math.min(Math.max(num, min), max);
   };
-  const getDirection2 = (x, y) => {
-    if (x > y && x > DISTANCE)
-      return "horizontal";
-    if (y > x && y > DISTANCE)
-      return "vertical";
-    return "";
-  };
-  const resetTouchDetails = () => {
-    touch.startX = 0;
-    touch.startY = 0;
-    touch.deltaX = 0;
-    touch.deltaY = 0;
-    touch.offsetX = 0;
-    touch.offsetY = 0;
-    touch.delta = 0;
-    touch.stateDirection = "";
-    touch.touchTime = 0;
-  };
-  const touchStart = (e2) => {
-    resetTouchDetails();
-    touch.startX = e2.touches[0].clientX;
-    touch.startY = e2.touches[0].clientY;
-  };
-  const handleTouchMove = (e2) => {
-    touch.deltaX = e2.touches[0].clientX - touch.startX;
-    touch.deltaY = e2.touches[0].clientY - touch.startY;
-    touch.offsetX = Math.abs(touch.deltaX);
-    touch.offsetY = Math.abs(touch.deltaY);
-    touch.delta = isVertical ? touch.deltaY : touch.deltaX;
-    if (!touch.stateDirection) {
-      touch.stateDirection = getDirection2(touch.offsetX, touch.offsetY);
-    }
-  };
   const classPrefix2 = "nut-swiper";
   const contentClass = classNames({
     [`${classPrefix2}-inner`]: true,
@@ -22806,18 +22767,17 @@ const Swiper = React__default.forwardRef((props, ref) => {
     } else {
       const _size = isVertical ? height : width;
       const val = isVertical ? rect.height - _size : rect.width - _size;
-      _offset = moveOffset + (active === childCount - 1 && !props.loop ? -val / 2 : val / 2);
+      _offset = moveOffset + (active === swiperItemCount - 1 && !props.loop ? -val / 2 : val / 2);
     }
     target.style.transitionDuration = `${swiperRef.current.moving ? 0 : props.duration}ms`;
-    target.style[isVertical ? "height" : "width"] = `${Number(size) * childCount}px`;
+    target.style[isVertical ? "height" : "width"] = `${Number(size) * swiperItemCount}px`;
     target.style[isVertical ? "width" : "height"] = `${isVertical ? width : height}px`;
     target.style.transform = `translate3D${!isVertical ? `(${_offset}px,0,0)` : `(0,${_offset}px,0)`}`;
   };
   const onTouchStart = (e2) => {
     if (!props.touchable)
       return;
-    touchStart(e2);
-    touch.touchTime = Date.now();
+    touch.start(e2);
     stopAutoPlay();
     resetPosition();
   };
@@ -22827,10 +22787,10 @@ const Swiper = React__default.forwardRef((props, ref) => {
     if (props.stopPropagation)
       e2.stopPropagation();
     if (props.touchable && swiperRef.current.moving) {
-      handleTouchMove(e2);
-      if (touch.stateDirection === props.direction) {
+      touch.move(e2);
+      if (touch.direction.current === props.direction) {
         move({
-          offset: touch.delta
+          offset: touch.delta.current
         });
       }
     }
@@ -22838,42 +22798,53 @@ const Swiper = React__default.forwardRef((props, ref) => {
   const onTouchEnd = (e2) => {
     if (!props.touchable || !swiperRef.current.moving)
       return;
-    const speed = touch.delta / (Date.now() - touch.touchTime);
-    const isShouldMove = Math.abs(speed) > 0.3 || Math.abs(touch.delta) > Number((size / 2).toFixed(2));
-    let pace = 0;
+    const speed = touch.delta.current / (Date.now() - touch.touchTime.current);
+    const isShouldMove = Math.abs(speed) > 0.3 || Math.abs(touch.delta.current) > Number((size / 2).toFixed(2));
     swiperRef.current.moving = false;
-    if (isShouldMove && touch.stateDirection === props.direction) {
-      const offset2 = isVertical ? touch.offsetY : touch.offsetX;
+    if (isShouldMove && touch.direction.current === props.direction) {
+      let pace = 0;
+      const offset2 = touch.isVertical() ? touch.offsetY : touch.offsetX;
       if (props.loop) {
-        if (offset2 > 0) {
-          pace = touch.delta > 0 ? -1 : 1;
-        } else {
-          pace = 0;
+        if (offset2.current > 0) {
+          pace = touch.delta.current > 0 ? -1 : 1;
         }
       } else {
-        pace = -Math[touch.delta > 0 ? "ceil" : "floor"](touch.delta / size);
+        pace = -Math[touch.delta.current > 0 ? "ceil" : "floor"](
+          touch.delta.current / size
+        );
       }
       move({
         pace,
         isEmit: true
       });
-    } else if (touch.delta) {
+    } else if (touch.delta.current) {
       move({ pace: 0 });
     } else {
       getStyle();
     }
     startPlay();
   };
-  useEffect(() => {
-    swiperRef.current.activeIndicator = (active + childCount) % childCount;
-  }, [active]);
-  const init = (active2 = +propSwiper.defaultValue) => {
+  const getItemStyle = (index) => {
+    const style = {};
+    if (size) {
+      style[direction === "horizontal" ? "width" : "height"] = `${size}px`;
+    }
+    const offset2 = childOffset[index];
+    if (offset2) {
+      style.transform = `translate3D${direction === "horizontal" ? `(${offset2}px,0,0)` : `(0,${offset2}px,0)`}`;
+    }
+    return style;
+  };
+  const init = (index) => {
     const rect2 = getRect(container == null ? void 0 : container.current);
-    const currentIndex = Math.max(Math.min(childCount - 1, active2), 0);
-    const width2 = +propSwiper.width || rect2.width;
-    const height2 = +propSwiper.height || rect2.height;
+    const currentIndex = Math.max(
+      Math.min(swiperItemCount - 1, index || Number(mergedProps.defaultValue)),
+      0
+    );
+    const width2 = Number(mergedProps.width) || rect2.width;
+    const height2 = Number(mergedProps.height) || rect2.height;
     size = isVertical ? height2 : width2;
-    trackSize = childCount * Number(size);
+    trackSize = swiperItemCount * Number(size);
     const targetOffset = getOffset(currentIndex);
     swiperRef.current.moving = true;
     if (ready) {
@@ -22902,61 +22873,49 @@ const Swiper = React__default.forwardRef((props, ref) => {
     stopAutoPlay();
     startPlay();
   }, [children]);
-  useEffect(() => init(), [propSwiper.defaultValue]);
   useEffect(() => {
-    const target = container.current;
-    target.addEventListener("touchstart", onTouchStart, false);
-    target.addEventListener("touchmove", onTouchMove, false);
-    target.addEventListener("touchend", onTouchEnd, false);
+    const events = [
+      { name: "touchstart", e: onTouchStart },
+      { name: "touchmove", e: onTouchMove },
+      { name: "touchend", e: onTouchEnd }
+    ];
+    events.forEach((item) => {
+      var _a2;
+      (_a2 = container.current) == null ? void 0 : _a2.addEventListener(item.name, item.e, false);
+    });
     return () => {
-      target.removeEventListener("touchstart", onTouchStart, false);
-      target.removeEventListener("touchmove", onTouchMove, false);
-      target.removeEventListener("touchend", onTouchEnd, false);
+      events.forEach((item) => {
+        var _a2;
+        (_a2 = container.current) == null ? void 0 : _a2.removeEventListener(item.name, item.e, false);
+      });
     };
   });
+  useEffect(() => init(), [props.defaultValue]);
   useEffect(() => {
     return () => stopAutoPlay();
   }, []);
-  const getItemStyle = (index) => {
-    const style = {};
-    if (size) {
-      style[direction === "horizontal" ? "width" : "height"] = `${size}px`;
-    }
-    const offset2 = childOffset[index];
-    if (offset2) {
-      style.transform = `translate3D${direction === "horizontal" ? `(${offset2}px,0,0)` : `(0,${offset2}px,0)`}`;
-    }
-    return style;
-  };
-  React__default.useImperativeHandle(ref, () => ({
-    to: to2,
-    next,
-    prev,
-    resize
-  }));
   const renderIndicator = () => {
     if (React__default.isValidElement(indicator))
       return indicator;
-    if (indicator === true) {
-      return /* @__PURE__ */ React__default.createElement(
-        "div",
+    if (!indicator)
+      return null;
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: classNames({
+          [`${classPrefix2}-indicator`]: true,
+          [`${classPrefix2}-indicator-vertical`]: isVertical
+        })
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Indicator,
         {
-          className: classNames({
-            [`${classPrefix2}-indicator`]: true,
-            [`${classPrefix2}-indicator-vertical`]: isVertical
-          })
-        },
-        /* @__PURE__ */ React__default.createElement(
-          Indicator,
-          {
-            current: (active + childCount) % childCount,
-            total: childs == null ? void 0 : childs.length,
-            direction
-          }
-        )
-      );
-    }
-    return null;
+          current: (active + swiperItemCount) % swiperItemCount,
+          total: swiperItems == null ? void 0 : swiperItems.length,
+          direction
+        }
+      )
+    );
   };
   return /* @__PURE__ */ React__default.createElement(DataContext$1.Provider, { value: parent }, /* @__PURE__ */ React__default.createElement(
     "div",
@@ -22965,7 +22924,7 @@ const Swiper = React__default.forwardRef((props, ref) => {
       ref: container,
       ...rest
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: contentClass, ref: innerRef }, React__default.Children.map(childs, (child, index) => /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", { className: contentClass, ref: innerRef }, React__default.Children.map(swiperItems, (child, index) => /* @__PURE__ */ React__default.createElement(
       "div",
       {
         className: `${classPrefix2}-item-wrapper`,