@nutui/nutui-react 2.3.3 → 2.3.5

package/dist/nutui.react.umd.js

@@ -8,7 +8,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.3.3 Fri Dec 22 2023 17:49:13 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.3.5 Fri Jan 05 2024 14:40:52 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -14084,7 +14084,7 @@ Please add \`${key}Action\` when creating your handler.`);
               },
               key: item.value ? item.value : index
             },
-            /* @__PURE__ */ React.createElement(React.Fragment, null, item.text ? item.text : item)
+            /* @__PURE__ */ React.createElement(React.Fragment, null, item.text)
           );
         }),
         !threeDimensional && options2.map((item, index) => {
@@ -14094,7 +14094,7 @@ Please add \`${key}Action\` when creating your handler.`);
               className: "nut-picker-roller-item-title",
               key: item.value ? item.value : index
             },
-            /* @__PURE__ */ React.createElement(React.Fragment, null, item.text ? item.text : item)
+            /* @__PURE__ */ React.createElement(React.Fragment, null, item.text)
           );
         })
       ),
@@ -14659,9 +14659,7 @@ Please add \`${key}Action\` when creating your handler.`);
       return val || [];
     };
     React.useEffect(() => {
-      if (selectedDate) {
-        setPickerOptions(columns());
-      }
+      setPickerOptions(columns());
     }, [selectedDate, startDate, endDate]);
     return /* @__PURE__ */ React.createElement("div", { className: `nut-datepicker ${className}`, style, ...rest }, pickerOptions.length && /* @__PURE__ */ React.createElement(
       Picker$1,
@@ -17433,11 +17431,20 @@ Please add \`${key}Action\` when creating your handler.`);
     const [exactValue, setEaxctValue] = React.useState(
       () => value || defaultValue || 0
     );
+    const marksRef = React.useRef({});
     React.useEffect(() => {
       if (marks) {
-        const marksKeys = Object.keys(marks);
-        const list = marksKeys.map(parseFloat).sort((a2, b) => a2 - b).filter((point) => point >= min && point <= max);
-        setMarksList(list);
+        if (Array.isArray(marks)) {
+          const list = marks.sort((a2, b) => a2.value - b.value).filter((point) => point.value >= min && point.value <= max);
+          setMarksList(list.map((mark) => mark.value));
+          list.forEach((mark) => {
+            marksRef.current[mark.value] = mark.label !== void 0 ? mark.label : mark.value;
+          });
+        } else {
+          const marksKeys = Object.keys(marks);
+          const list = marksKeys.map(parseFloat).sort((a2, b) => a2 - b).filter((point) => point >= min && point <= max);
+          setMarksList(list);
+        }
       }
     }, [marks]);
     const scope = () => {
@@ -17630,20 +17637,20 @@ Please add \`${key}Action\` when creating your handler.`);
     const renderButton = (index) => {
       return /* @__PURE__ */ React.createElement(React.Fragment, null, button || /* @__PURE__ */ React.createElement("div", { className: "nut-range-button" }, currentDescription !== null && /* @__PURE__ */ React.createElement("div", { className: "number" }, currentDescription ? currentDescription(curValue(index)) : curValue(index))));
     };
-    return /* @__PURE__ */ React.createElement("div", { className: containerClasses }, minDescription !== null && /* @__PURE__ */ React.createElement("div", { className: "min" }, minDescription || min), /* @__PURE__ */ React.createElement("div", { ref: root2, className: classes, onClick: (e2) => click(e2) }, marksList.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "nut-range-mark" }, marksList.map((marks2) => {
+    return /* @__PURE__ */ React.createElement("div", { className: containerClasses }, minDescription !== null && /* @__PURE__ */ React.createElement("div", { className: "min" }, minDescription || min), /* @__PURE__ */ React.createElement("div", { ref: root2, className: classes, onClick: (e2) => click(e2) }, marksList.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "nut-range-mark" }, marksList.map((mark) => {
       return /* @__PURE__ */ React.createElement(
         "span",
         {
-          key: marks2,
-          className: markClassName(marks2),
-          style: marksStyle(marks2)
+          key: mark,
+          className: markClassName(mark),
+          style: marksStyle(mark)
         },
-        marks2,
+        Array.isArray(marks) ? marksRef.current[mark] : marks[mark],
         /* @__PURE__ */ React.createElement(
           "span",
           {
             className: classNames("nut-range-tick", {
-              active: tickClass(marks2)
+              active: tickClass(mark)
             })
           }
         )
@@ -19575,7 +19582,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const [isInfiniting, setIsInfiniting] = React.useState(false);
     const scroller = React.useRef(null);
     const refreshTop = React.useRef(null);
-    const scrollEl = React.useRef(window);
+    const scrollEl = React.useRef(null);
     const isTouching = React.useRef(false);
     const beforeScrollTop = React.useRef(0);
     const refreshMaxH = React.useRef(0);
@@ -19583,14 +19590,16 @@ Please add \`${key}Action\` when creating your handler.`);
     const distance = React.useRef(0);
     const classes = classNames(classPrefix$d, className);
     React.useEffect(() => {
+      var _a2;
       if (target && document.getElementById(target)) {
         scrollEl.current = document.getElementById(target);
       } else {
         scrollEl.current = window;
       }
-      scrollEl.current.addEventListener("scroll", handleScroll, capture);
+      (_a2 = scrollEl.current) == null ? void 0 : _a2.addEventListener("scroll", handleScroll, capture);
       return () => {
-        scrollEl.current.removeEventListener("scroll", handleScroll, capture);
+        var _a3;
+        (_a3 = scrollEl.current) == null ? void 0 : _a3.removeEventListener("scroll", handleScroll, capture);
       };
     }, [hasMore, isInfiniting, onLoadMore]);
     React.useEffect(() => {
@@ -19608,15 +19617,13 @@ Please add \`${key}Action\` when creating your handler.`);
         transition: isTouching.current ? `height 0s cubic-bezier(0.25,0.1,0.25,1)` : `height 0.2s cubic-bezier(0.25,0.1,0.25,1)`
       };
     };
-    const handleScroll = () => {
-      requestAniFrame$1(() => {
-        if (!isScrollAtBottom() || !hasMore || isInfiniting) {
-          return false;
-        }
-        setIsInfiniting(true);
-        onLoadMore && onLoadMore(infiniteDone);
-        return true;
-      });
+    const handleScroll = async () => {
+      if (!isScrollAtBottom() || !hasMore || isInfiniting) {
+        return;
+      }
+      setIsInfiniting(true);
+      await (onLoadMore == null ? void 0 : onLoadMore());
+      infiniteDone();
     };
     const infiniteDone = () => {
       setIsInfiniting(false);
@@ -19653,12 +19660,13 @@ Please add \`${key}Action\` when creating your handler.`);
         isTouching.current = false;
       }
     };
-    const touchEnd = () => {
+    const touchEnd = async () => {
       if (distance.current < refreshMaxH.current) {
         distance.current = 0;
         getRefreshTop().style.height = `${distance.current}px`;
       } else {
-        onRefresh && onRefresh(refreshDone);
+        await (onRefresh == null ? void 0 : onRefresh());
+        refreshDone();
       }
     };
     const getWindowScrollTop = () => {
@@ -19700,9 +19708,9 @@ Please add \`${key}Action\` when creating your handler.`);
         onTouchEnd: touchEnd,
         ...restProps
       },
-      /* @__PURE__ */ React.createElement("div", { className: "nut-infinite-top", ref: refreshTop, style: getStyle() }, /* @__PURE__ */ React.createElement("div", { className: "top-box" }, pullingText || locale.infiniteloading.pullRefreshText)),
+      /* @__PURE__ */ React.createElement("div", { className: "nut-infinite-top", ref: refreshTop, style: getStyle() }, /* @__PURE__ */ React.createElement("div", { className: "nut-infinite-top-tips" }, pullingText || locale.infiniteloading.pullRefreshText)),
       /* @__PURE__ */ React.createElement("div", { className: "nut-infinite-container" }, children),
-      /* @__PURE__ */ React.createElement("div", { className: "nut-infinite-bottom" }, isInfiniting ? /* @__PURE__ */ React.createElement("div", { className: "bottom-box" }, loadingText || locale.infiniteloading.loadText) : !hasMore && /* @__PURE__ */ React.createElement("div", { className: "bottom-box" }, loadMoreText || locale.infiniteloading.loadMoreText))
+      /* @__PURE__ */ React.createElement("div", { className: "nut-infinite-bottom" }, isInfiniting ? /* @__PURE__ */ React.createElement("div", { className: "nut-infinite-bottom-tips" }, loadingText || locale.infiniteloading.loadText) : !hasMore && /* @__PURE__ */ React.createElement("div", { className: "nut-infinite-bottom-tips" }, loadMoreText || locale.infiniteloading.loadMoreText))
     );
   };
   InfiniteLoading.defaultProps = defaultProps$B;
@@ -20549,10 +20557,10 @@ Please add \`${key}Action\` when creating your handler.`);
             key: item.key || index,
             onClick: () => handleSelect(item, index)
           },
-          item.icon ? /* @__PURE__ */ React.createElement("i", { className: "nut-popover-menu-item-icon" }, item.icon) : null,
+          item.icon ? /* @__PURE__ */ React.createElement("div", { className: "nut-popover-menu-item-icon" }, item.icon) : null,
           /* @__PURE__ */ React.createElement("div", { className: "nut-popover-menu-item-name" }, item.name),
           item.action && item.action.icon ? /* @__PURE__ */ React.createElement(
-            "i",
+            "div",
             {
               className: "nut-popover-menu-item-action-icon",
               onClick: (e2) => {
@@ -24029,14 +24037,16 @@ Please add \`${key}Action\` when creating your handler.`);
     tempIndex = tempIndex || 0;
     return tempIndex;
   };
-  const updateItemSize = (positions, items, sizeKey) => {
+  const updateItemSize = (positions, items, sizeKey, margin) => {
     const newPos = positions.concat();
     Array.from(items).forEach((item) => {
       const index = Number(item.getAttribute("data-index"));
       const styleVal = item.getAttribute("style");
       if (styleVal && styleVal.includes("none"))
         return;
-      const nowSize = item.getBoundingClientRect()[sizeKey];
+      let nowSize = item.getBoundingClientRect()[sizeKey];
+      if (margin)
+        nowSize += margin;
       const oldSize = positions[index][sizeKey];
       const dValue = oldSize - nowSize;
       if (dValue) {
@@ -24784,7 +24794,8 @@ Please add \`${key}Action\` when creating your handler.`);
       /* @__PURE__ */ React.createElement(Button, { type: "success", key: "confirm" }, "确认")
     ],
     toolbarPosition: "bottom",
-    editText: "编辑"
+    editText: "编辑",
+    shape: "square"
   };
   const classPrefix = `nut-avatar-cropper`;
   const AvatarCropper = (props) => {
@@ -24795,6 +24806,7 @@ Please add \`${key}Action\` when creating your handler.`);
       space,
       toolbarPosition,
       editText,
+      shape,
       className,
       style,
       onConfirm,
@@ -24804,7 +24816,7 @@ Please add \`${key}Action\` when creating your handler.`);
       ...defaultProps,
       ...props
     };
-    const cls = classNames(classPrefix, className);
+    const cls = classNames(classPrefix, className, shape === "round" && "round");
     const toolbarPositionCls = classNames(
       `${classPrefix}-popup-toolbar`,
       toolbarPosition
@@ -24852,7 +24864,8 @@ Please add \`${key}Action\` when creating your handler.`);
       const height = width;
       return {
         width,
-        height
+        height,
+        borderRadius: shape === "round" ? "50%" : ""
       };
     }, [devicePixelRatio, drawImage.swidth]);
     const isAngle = React.useMemo(() => {
@@ -25126,7 +25139,8 @@ Please add \`${key}Action\` when creating your handler.`);
         type: "file",
         accept: "image/*",
         className: `${classPrefix}-input`,
-        onChange: (e2) => inputImageChange(e2)
+        onChange: (e2) => inputImageChange(e2),
+        "aria-label": "选择图片"
       }
     ), /* @__PURE__ */ React.createElement("div", { className: "nut-avatar-cropper-edit-text" }, editText)), CropperPopup());
   };

package/dist/packages/avatarcropper/avatarcropper.scss

@@ -89,4 +89,9 @@
       }
     }
   }
+  &.round {
+    .nut-avatar-cropper-edit-text {
+      border-radius: 50%;
+    }
+  }
 }

package/dist/packages/dialog/dialog.scss

@@ -35,7 +35,7 @@
   &-header {
     display: block;
     text-align: center;
-    font-size: $font-size-large;
+    font-size: $dialog-header-font-size;
     font-weight: $dialog-header-font-weight;
     color: $color-title;
     @include oneline-ellipsis();

package/dist/packages/infiniteloading/infiniteloading.scss

@@ -11,7 +11,7 @@
     font-size: $font-size-small;
     color: $infiniteloading-color;
 
-    .top-box {
+    &-tips {
       width: 100%;
       display: flex;
       flex-direction: column;
@@ -21,8 +21,6 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        width: $pulltorefresh-icon-width;
-        height: $pulltorefresh-icon-height;
         margin-bottom: 4px;
       }
     }
@@ -38,14 +36,12 @@
     color: $infiniteloading-color;
     text-align: center;
 
-    .bottom-box {
+    &-tips {
       display: flex;
       justify-content: center;
       align-items: center;
 
       &-icons {
-        width: $infiniteloading-icon-size;
-        height: $infiniteloading-icon-size;
         margin-right: 8px;
       }
     }

package/dist/packages/picker/picker.scss

@@ -85,6 +85,7 @@
     background-position: top, bottom;
     background-size: 100% 108px;
     background-repeat: no-repeat;
+    transform: translateZ(0);
     z-index: 3;
   }
 

package/dist/packages/popover/popover.scss

@@ -22,21 +22,6 @@
       border-bottom-color: $popover-border-color;
       border-top-width: 0;
       margin-top: -8px;
-
-      &.nut-popover-arrow-bottom {
-        left: 50%;
-        transform: translateX(-50%);
-      }
-
-      &.nut-popover-arrow-bottom-start {
-        left: 16px;
-        transform: translateX(0%);
-      }
-
-      &.nut-popover-arrow-bottom-end {
-        right: 16px;
-        transform: translateX(0%);
-      }
     }
 
     &-left {
@@ -189,10 +174,31 @@
       }
     }
 
+    &-bottom {
+      .nut-popover-arrow-bottom {
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+
     &-bottom-end {
+      .nut-popover-arrow-bottom-end {
+        right: 16px;
+        transform: translateX(0%);
+      }
+
       right: 0;
     }
 
+    &-bottom-start {
+      left: 0;
+
+      .nut-popover-arrow-bottom-start {
+        left: 16px;
+        transform: translateX(0%);
+      }
+    }
+
     &-left-end {
       bottom: 0;
     }

package/dist/packages/range/range.scss

@@ -69,7 +69,7 @@
         text-align: center;
         word-break: keep-all;
         user-select: none;
-        transform: translateY(-50%);
+        transform: translateY(-11px);
       }
 
       &-tick {
@@ -191,7 +191,7 @@
     text-align: center;
     word-break: keep-all;
     user-select: none;
-    transform: translateX(-50%);
+    transform: translateX(-10px);
   }
 
   &-tick {

package/dist/packages/tabbaritem/tabbaritem.scss

@@ -10,10 +10,6 @@
   color: $tabbar-inactive-color;
   height: 100%;
 
-  &-active {
-    color: $tabbar-active-color;
-  }
-
   &-icon-box {
     padding: 0px;
     display: flex;
@@ -40,4 +36,14 @@
       font-weight: $tabbar-text-large-font-weight;
     }
   }
+
+  &-active {
+    color: $tabbar-active-color;
+    .nut-tabbar-item-icon-box {
+      color: inherit;
+      .nut-icon {
+        color: inherit;
+      }
+    }
+  }
 }

package/dist/packages/tabs/tabs.scss

@@ -8,7 +8,7 @@
   display: flex;
   box-sizing: border-box;
   height: $tabs-titles-height;
-  padding: 0 16px;
+  padding: $tabs-titles-padding;
   user-select: none;
   overflow: hidden;
   background: $tabs-titles-background-color;
@@ -49,7 +49,7 @@
     margin: 0 $tabs-titles-gap;
     min-width: $tabs-titles-item-min-width;
     font-size: $tabs-titles-font-size;
-    color: $color-title;
+    color: $tabs-titles-item-color;
     text-overflow: ellipsis;
     white-space: nowrap;