@nutui/nutui-react 2.3.0 → 2.3.2

package/dist/nutui.react.umd.js

@@ -8,7 +8,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.3.0 Fri Dec 08 2023 18:49:55 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.
 */
@@ -4360,12 +4360,15 @@ Check the top-level render call using <` + t2 + ">.");
     const startY = React.useRef(0);
     const deltaX = React.useRef(0);
     const deltaY = React.useRef(0);
+    const delta = React.useRef(0);
     const offsetX = React.useRef(0);
     const offsetY = React.useRef(0);
     const direction = React.useRef("");
+    const touchTime = React.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;
@@ -4374,6 +4377,7 @@ Check the top-level render call using <` + t2 + ">.");
     };
     const start2 = (event) => {
       reset();
+      touchTime.current = Date.now();
       startX.current = event.touches[0].clientX;
       startY.current = event.touches[0].clientY;
     };
@@ -4383,6 +4387,7 @@ Check the top-level render call using <` + t2 + ">.");
       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);
       }
@@ -4391,10 +4396,12 @@ Check the top-level render call using <` + t2 + ">.");
       move,
       start: start2,
       reset,
+      touchTime,
       startX,
       startY,
       deltaX,
       deltaY,
+      delta,
       offsetX,
       offsetY,
       direction,
@@ -10613,7 +10620,7 @@ Please add \`${key}Action\` when creating your handler.`);
             onClick: (event) => handleClick2(item, event),
             key: item.id || index
           },
-          /* @__PURE__ */ React.createElement("img", { src: item.icon, alt: "" }),
+          React.isValidElement(item.icon) ? item.icon : /* @__PURE__ */ React.createElement("img", { src: item.icon, alt: "" }),
           /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-list-text` }, item.text),
           item.num && /* @__PURE__ */ React.createElement("div", { className: "b" }, item.num)
         );
@@ -17879,7 +17886,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const renderLeft = () => {
       if (!backable && !left)
         return null;
-      return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-left` }, backable ? /* @__PURE__ */ React.createElement(e$5, { width: "20", height: "20" }) : left);
+      return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-left` }, backable ? /* @__PURE__ */ React.createElement(e$5, { width: "16", height: "16" }) : left);
     };
     const renderRightIn = () => {
       if (!rightIn)
@@ -22580,9 +22587,8 @@ Please add \`${key}Action\` when creating your handler.`);
     center: false,
     className: ""
   };
-  const DISTANCE = 5;
   const Swiper = React.forwardRef((props, ref) => {
-    const propSwiper = { ...defaultProps$h, ...props };
+    const mergedProps = { ...defaultProps$h, ...props };
     const {
       children,
       direction,
@@ -22596,7 +22602,7 @@ Please add \`${key}Action\` when creating your handler.`);
       autoPlay,
       center,
       ...rest
-    } = propSwiper;
+    } = mergedProps;
     const container = React.useRef(null);
     const innerRef = React.useRef(null);
     const swiperRef = React.useRef({
@@ -22607,6 +22613,7 @@ Please add \`${key}Action\` when creating your handler.`);
       offset: 0,
       size: 0
     });
+    const touch = useTouch();
     const isVertical = direction === "vertical";
     const [rect, setRect] = React.useState(null);
     let [active, setActive] = React.useState(0);
@@ -22616,39 +22623,28 @@ Please add \`${key}Action\` when creating your handler.`);
     const [childOffset, setChildOffset] = React.useState([]);
     const [ready, setReady] = React.useState(false);
     let size = isVertical ? height : width;
-    const [touch] = React.useState({
-      startX: 0,
-      startY: 0,
-      deltaX: 0,
-      deltaY: 0,
-      offsetX: 0,
-      offsetY: 0,
-      stateDirection: "",
-      delta: 0,
-      touchTime: 0
-    });
-    const { childs, childCount } = React.useMemo(() => {
-      let childCount2 = 0;
-      const childs2 = React.Children.map(props.children, (child) => {
+    const { swiperItems, swiperItemCount } = React.useMemo(() => {
+      let count = 0;
+      const swiperItems2 = React.Children.map(props.children, (child) => {
         if (!React.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;
     })();
@@ -22657,65 +22653,59 @@ Please add \`${key}Action\` when creating your handler.`);
       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
         });
       });
     };
@@ -22728,7 +22718,8 @@ Please add \`${key}Action\` when creating your handler.`);
       isEmit = false,
       movingStatus = false
     }) => {
-      if (childCount <= 1)
+      var _a2;
+      if (swiperItemCount <= 1)
         return;
       const targetActive = getActive(pace);
       const targetOffset = getOffset(targetActive, offset2);
@@ -22737,27 +22728,33 @@ Please add \`${key}Action\` when creating your handler.`);
           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.useImperativeHandle(ref, () => ({
+      to: to2,
+      next,
+      prev,
+      resize
+    }));
     const getActive = (pace) => {
       if (pace) {
         const _active = active + pace;
         if (props.loop) {
-          return range2(_active, -1, childCount);
+          return range2(_active, -1, swiperItemCount);
         }
-        return range2(_active, 0, childCount - 1);
+        return range2(_active, 0, swiperItemCount - 1);
       }
       return active;
     };
@@ -22772,45 +22769,9 @@ Please add \`${key}Action\` when creating your handler.`);
       }
       return targetOffset;
     };
-    const requestFrame = (fn) => {
-      window.requestAnimationFrame.call(window, fn);
-    };
     const range2 = (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,
@@ -22824,18 +22785,17 @@ Please add \`${key}Action\` when creating your handler.`);
       } 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();
     };
@@ -22845,10 +22805,10 @@ Please add \`${key}Action\` when creating your handler.`);
       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
           });
         }
       }
@@ -22856,42 +22816,53 @@ Please add \`${key}Action\` when creating your handler.`);
     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();
     };
-    React.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) {
@@ -22920,61 +22891,49 @@ Please add \`${key}Action\` when creating your handler.`);
       stopAutoPlay();
       startPlay();
     }, [children]);
-    React.useEffect(() => init(), [propSwiper.defaultValue]);
     React.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);
+        });
       };
     });
+    React.useEffect(() => init(), [props.defaultValue]);
     React.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.useImperativeHandle(ref, () => ({
-      to: to2,
-      next,
-      prev,
-      resize
-    }));
     const renderIndicator = () => {
       if (React.isValidElement(indicator))
         return indicator;
-      if (indicator === true) {
-        return /* @__PURE__ */ React.createElement(
-          "div",
+      if (!indicator)
+        return null;
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames({
+            [`${classPrefix2}-indicator`]: true,
+            [`${classPrefix2}-indicator-vertical`]: isVertical
+          })
+        },
+        /* @__PURE__ */ React.createElement(
+          Indicator,
           {
-            className: classNames({
-              [`${classPrefix2}-indicator`]: true,
-              [`${classPrefix2}-indicator-vertical`]: isVertical
-            })
-          },
-          /* @__PURE__ */ React.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.createElement(DataContext$1.Provider, { value: parent }, /* @__PURE__ */ React.createElement(
       "div",
@@ -22983,7 +22942,7 @@ Please add \`${key}Action\` when creating your handler.`);
         ref: container,
         ...rest
       },
-      /* @__PURE__ */ React.createElement("div", { className: contentClass, ref: innerRef }, React.Children.map(childs, (child, index) => /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement("div", { className: contentClass, ref: innerRef }, React.Children.map(swiperItems, (child, index) => /* @__PURE__ */ React.createElement(
         "div",
         {
           className: `${classPrefix2}-item-wrapper`,

package/dist/packages/cascader/cascader.scss

@@ -34,7 +34,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: $cascader-item-height;
+    // height: $cascader-item-height;
     padding: $cascader-item-padding;
     margin: $cascader-item-margin;
     border-bottom: $cascader-item-border-bottom;

package/dist/packages/popup/popup.scss

@@ -1,7 +1,7 @@
 
 .nut-popup {
   position: fixed;
-  min-height: 32%;
+  min-height: 26%;
   max-height: 100%;
   overflow-y: auto;
   background-color: $overlay-content-bg-color;
@@ -13,7 +13,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: $popup-title-height;
+    // height: $popup-title-height;
     border-bottom: $popup-title-border-bottom;
     padding: $popup-title-padding;
     position: relative;

package/dist/packages/searchbar/searchbar.scss

@@ -44,7 +44,9 @@
 
   &-left {
     margin-right: $searchbar-gap;
-    & > * {
+    & > div,
+    & > span,
+    & > svg {
       margin-right: $searchbar-gap;
       &:last-child {
         margin-right: 0;
@@ -55,7 +57,9 @@
   &-right {
     margin-left: $searchbar-gap;
 
-    & > * {
+    & > div,
+    & > span,
+    & > svg {
       margin-left: $searchbar-gap;
 
       &:first-child {

package/dist/packages/tabs/tabs.scss

@@ -87,7 +87,7 @@
 
       .nut-icon {
         position: absolute;
-        font-size: 12px;
+        font-size: 20px;
         width: 100%;
         height: 100%;
         color: $color-primary;
@@ -248,8 +248,8 @@
       }
 
       .nut-tabs-titles-item-smile {
-        right: -5px;
-        bottom: 2%;
+        right: -6px;
+        bottom: -2%;
         left: auto;
         width: 40px;
         height: 20px;