@nutui/nutui-react-taro 2.0.18 → 2.0.19

package/dist/nutui.react.umd.js

@@ -8,7 +8,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react-taro v2.0.18 Wed Sep 20 2023 14:56:58 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.19 Wed Sep 27 2023 18:15:02 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -11810,6 +11810,8 @@ var __publicField = (obj, key, value) => {
     }, [showPopup]);
     const windowHeight = React.useMemo(() => Taro.getSystemInfoSync().windowHeight, []);
     const updateItemOffset = React.useCallback(() => {
+      if (!parent.lockScroll)
+        return;
       const p = parent.menuRef.current;
       p.getBoundingClientRect().then((rect) => {
         if (rect) {
@@ -11823,7 +11825,8 @@ var __publicField = (obj, key, value) => {
     Taro.usePageScroll(updateItemOffset);
     React.useImperativeHandle(ref, () => ({
       toggle: (s) => {
-        s ? parent.toggleMenuItem(index) : parent.hideMenuItem(index);
+        const from = "REF";
+        s ? parent.toggleMenuItem(index, from) : parent.hideMenuItem(index, from);
       }
     }));
     const getIconCName = (optionVal, value2) => {
@@ -11903,7 +11906,7 @@ var __publicField = (obj, key, value) => {
         visible: showPopup,
         closeOnOverlayClick: parent.closeOnOverlayClick,
         onClick: () => {
-          parent.closeOnOverlayClick && parent.toggleMenuItem(index);
+          parent.closeOnOverlayClick && parent.hideMenuItem(index);
         }
       }
     ) : null, /* @__PURE__ */ React.createElement(
@@ -11973,9 +11976,9 @@ var __publicField = (obj, key, value) => {
     lockScroll: true,
     overlay: true,
     icon: null,
-    onOpen: (index) => {
+    onOpen: (index, from) => {
     },
-    onClose: (index) => {
+    onClose: (index, from) => {
     }
   };
   const Menu = (props) => {
@@ -12014,22 +12017,22 @@ var __publicField = (obj, key, value) => {
     }, []);
     const [showMenuItem, setShowMenuItem] = React.useState([]);
     const [menuItemTitle, setMenuItemTitle] = React.useState([]);
-    const toggleMenuItem = (index) => {
+    const toggleMenuItem = (index, from = "NORMAL") => {
       showMenuItem[index] = !showMenuItem[index];
       if (showMenuItem[index]) {
-        onOpen && onOpen(index);
+        onOpen && onOpen(index, from);
       } else {
-        onClose && onClose(index);
+        onClose && onClose(index, from);
       }
       const temp = showMenuItem.map(
         (i, idx) => idx === index ? i : false
       );
       setShowMenuItem([...temp]);
     };
-    const hideMenuItem = (index) => {
+    const hideMenuItem = (index, from = "NORMAL") => {
       showMenuItem[index] = false;
       setShowMenuItem([...showMenuItem]);
-      onClose && onClose(index);
+      onClose && onClose(index, from);
     };
     const updateTitle = (text, index) => {
       menuItemTitle[index] = text;
@@ -13456,80 +13459,6 @@ var __publicField = (obj, key, value) => {
   };
   TextArea.defaultProps = defaultProps$J;
   TextArea.displayName = "NutTextArea";
-  const defaultProps$I = {
-    ...ComponentDefaults,
-    percent: 0,
-    showText: false,
-    animated: false,
-    delay: 0
-  };
-  const Progress = (props) => {
-    const {
-      className,
-      style,
-      percent,
-      background,
-      color,
-      strokeWidth,
-      showText,
-      animated,
-      children,
-      delay,
-      ...rest
-    } = {
-      ...defaultProps$I,
-      ...props
-    };
-    const classPrefix2 = "nut-progress";
-    const classesInner = classNames({
-      [`${classPrefix2}-inner`]: true,
-      [`${classPrefix2}-active`]: animated
-    });
-    const stylesOuter = {
-      height: `${strokeWidth}px`,
-      background
-    };
-    const [displayPercent, setDispalyPercent] = React.useState(0);
-    const stylesInner = {
-      width: `${displayPercent}%`,
-      background: color
-    };
-    React.useEffect(() => {
-      setDispalyPercent(percent);
-    }, [percent]);
-    React.useEffect(() => {
-      let timer = null;
-      if (delay) {
-        setDispalyPercent(0);
-        timer = setTimeout(() => {
-          setDispalyPercent(percent);
-        }, delay);
-      }
-      return () => {
-        timer && clearTimeout(timer);
-      };
-    }, []);
-    return /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix2, className), style, ...rest }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-outer`, style: stylesOuter }, /* @__PURE__ */ React.createElement("div", { className: classesInner, style: stylesInner }, showText && /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: `${classPrefix2}-text`,
-        style: { left: `${displayPercent}%` }
-      },
-      children || /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: `${classPrefix2}-text__inner`,
-          style: {
-            background: color
-          }
-        },
-        percent,
-        "%"
-      )
-    ))));
-  };
-  Progress.defaultProps = defaultProps$I;
-  Progress.displayName = "NutProgress";
   class UploadOptions {
     constructor() {
       __publicField(this, "url", "");
@@ -13550,6 +13479,9 @@ var __publicField = (obj, key, value) => {
       __publicField(this, "beforeXhrUpload");
     }
   }
+  const UPLOADING = "uploading";
+  const SUCCESS = "success";
+  const ERROR = "error";
   class Upload {
     constructor(options) {
       __publicField(this, "options");
@@ -13671,6 +13603,179 @@ var __publicField = (obj, key, value) => {
       done();
     }
   };
+  class FileItem {
+    constructor() {
+      __publicField(this, "status", "ready");
+      __publicField(this, "message", "准备中..");
+      __publicField(this, "uid", (/* @__PURE__ */ new Date()).getTime().toString());
+      __publicField(this, "name");
+      __publicField(this, "url");
+      __publicField(this, "type");
+      __publicField(this, "path");
+      __publicField(this, "percentage", 0);
+      __publicField(this, "formData", {});
+      __publicField(this, "responseText");
+      __publicField(this, "loadingIcon");
+      __publicField(this, "failIcon");
+    }
+  }
+  const defaultProps$I = {
+    ...ComponentDefaults,
+    percent: 0,
+    showText: false,
+    animated: false,
+    delay: 0
+  };
+  const Progress = (props) => {
+    const {
+      className,
+      style,
+      percent,
+      background,
+      color,
+      strokeWidth,
+      showText,
+      animated,
+      children,
+      delay,
+      ...rest
+    } = {
+      ...defaultProps$I,
+      ...props
+    };
+    const classPrefix2 = "nut-progress";
+    const classesInner = classNames({
+      [`${classPrefix2}-inner`]: true,
+      [`${classPrefix2}-active`]: animated
+    });
+    const stylesOuter = {
+      height: `${strokeWidth}px`,
+      background
+    };
+    const [displayPercent, setDispalyPercent] = React.useState(0);
+    const stylesInner = {
+      width: `${displayPercent}%`,
+      background: color
+    };
+    React.useEffect(() => {
+      setDispalyPercent(percent);
+    }, [percent]);
+    React.useEffect(() => {
+      let timer = null;
+      if (delay) {
+        setDispalyPercent(0);
+        timer = setTimeout(() => {
+          setDispalyPercent(percent);
+        }, delay);
+      }
+      return () => {
+        timer && clearTimeout(timer);
+      };
+    }, []);
+    return /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix2, className), style, ...rest }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-outer`, style: stylesOuter }, /* @__PURE__ */ React.createElement("div", { className: classesInner, style: stylesInner }, showText && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `${classPrefix2}-text`,
+        style: { left: `${displayPercent}%` }
+      },
+      children || /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: `${classPrefix2}-text__inner`,
+          style: {
+            background: color
+          }
+        },
+        percent,
+        "%"
+      )
+    ))));
+  };
+  Progress.defaultProps = defaultProps$I;
+  Progress.displayName = "NutProgress";
+  const Preview = ({
+    fileList,
+    previewType,
+    deletable,
+    onDeleteItem,
+    handleItemClick,
+    previewUrl,
+    children
+  }) => {
+    const renderIcon = (item) => {
+      if (item.status === ERROR) {
+        return item.failIcon || /* @__PURE__ */ React.createElement(a$n, { color: "#fff" });
+      }
+      return item.loadingIcon || /* @__PURE__ */ React.createElement(r$h, { className: "nut-icon-loading", color: "#fff" });
+    };
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, fileList.length !== 0 && fileList.map((item, index) => {
+      var _a;
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: `nut-uploader__preview ${previewType}`,
+          key: item.uid
+        },
+        previewType === "picture" && deletable && /* @__PURE__ */ React.createElement(
+          a$n,
+          {
+            color: "rgba(0,0,0,0.6)",
+            className: "close",
+            onClick: () => onDeleteItem(item, index)
+          }
+        ),
+        previewType === "picture" && !children && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-img" }, item.status === "ready" ? /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress" }, /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)) : item.status !== "success" && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress" }, renderIcon(item), /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)), ((_a = item.type) == null ? void 0 : _a.includes("image")) ? /* @__PURE__ */ React.createElement(React.Fragment, null, item.url && /* @__PURE__ */ React.createElement(
+          components.Image,
+          {
+            className: "nut-uploader__preview-img__c",
+            style: { objectFit: "fill" },
+            mode: "aspectFit",
+            src: item.url,
+            onClick: () => handleItemClick(item)
+          }
+        )) : /* @__PURE__ */ React.createElement(React.Fragment, null, previewUrl ? /* @__PURE__ */ React.createElement(
+          components.Image,
+          {
+            className: "nut-uploader__preview-img__c",
+            mode: "aspectFit",
+            src: previewUrl,
+            onClick: () => handleItemClick(item)
+          }
+        ) : /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-img__file" }, /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            onClick: () => handleItemClick(item),
+            className: "nut-uploader__preview-img__file__name"
+          },
+          /* @__PURE__ */ React.createElement(a$i, { color: "#808080" }),
+          /* @__PURE__ */ React.createElement("span", null, " ", item.name)
+        ))), item.status === "success" ? /* @__PURE__ */ React.createElement("div", { className: "tips" }, item.name) : null),
+        previewType === "list" && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-list" }, /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: `nut-uploader__preview-img__file__name ${item.status}`,
+            onClick: () => handleItemClick(item)
+          },
+          /* @__PURE__ */ React.createElement(a$i, null),
+          /* @__PURE__ */ React.createElement("span", null, " ", item.name)
+        ), deletable && /* @__PURE__ */ React.createElement(
+          a$p,
+          {
+            color: "#808080",
+            className: "nut-uploader__preview-img__file__del",
+            onClick: () => onDeleteItem(item, index)
+          }
+        ), item.status === "uploading" && /* @__PURE__ */ React.createElement(
+          Progress,
+          {
+            percent: item.percentage,
+            color: "linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)",
+            showText: false
+          }
+        ))
+      );
+    }));
+  };
   const defaultProps$H = {
     ...ComponentDefaults,
     url: "",
@@ -13679,7 +13784,7 @@ var __publicField = (obj, key, value) => {
     sourceType: ["album", "camera"],
     mediaType: ["image", "video"],
     camera: "back",
-    uploadIcon: null,
+    uploadIcon: /* @__PURE__ */ React.createElement(a$a, { size: "20px", color: "#808080" }),
     uploadLabel: "",
     previewType: "picture",
     fit: "cover",
@@ -13702,19 +13807,6 @@ var __publicField = (obj, key, value) => {
       return true;
     }
   };
-  class FileItem {
-    constructor() {
-      __publicField(this, "status", "ready");
-      __publicField(this, "message", "准备中..");
-      __publicField(this, "uid", Date.now().toString());
-      __publicField(this, "name");
-      __publicField(this, "url");
-      __publicField(this, "type");
-      __publicField(this, "path");
-      __publicField(this, "percentage", 0);
-      __publicField(this, "formData", {});
-    }
-  }
   const InternalUploader = (props, ref) => {
     const { locale } = useConfig$1();
     const {
@@ -13760,13 +13852,15 @@ var __publicField = (obj, key, value) => {
       beforeDelete,
       ...restProps
     } = { ...defaultProps$H, ...props };
-    const [fileList, setFileList] = React.useState(defaultValue || []);
-    const [uploadQueue, setUploadQueue] = React.useState([]);
-    React.useEffect(() => {
-      if (value) {
-        setFileList(value);
+    const [fileList, setFileList] = usePropsValue({
+      value,
+      defaultValue,
+      finalValue: [],
+      onChange: (v) => {
+        onChange == null ? void 0 : onChange(v);
       }
-    }, [value]);
+    });
+    const [uploadQueue, setUploadQueue] = React.useState([]);
     const classes = classNames(className, "nut-uploader");
     React.useImperativeHandle(ref, () => ({
       submit: () => {
@@ -13857,63 +13951,60 @@ var __publicField = (obj, key, value) => {
       uploadOption.beforeXhrUpload = beforeXhrUpload;
       uploadOption.onStart = (option) => {
         clearUploadQueue(index);
-        setFileList((fileList2) => {
-          fileList2.forEach((item) => {
+        setFileList(
+          fileList.map((item) => {
             if (item.uid === fileItem.uid) {
               item.status = "ready";
               item.message = locale.uploader.readyUpload;
             }
-          });
-          return [...fileList2];
-        });
+            return item;
+          })
+        );
         onStart && onStart(option);
       };
       uploadOption.onProgress = (e, option) => {
-        setFileList((fileList2) => {
-          fileList2.forEach((item) => {
+        setFileList(
+          fileList.map((item) => {
             if (item.uid === fileItem.uid) {
-              item.status = "uploading";
+              item.status = UPLOADING;
               item.message = locale.uploader.uploading;
               item.percentage = e.progress;
               onProgress && onProgress({ e, option, percentage: item.percentage });
             }
-          });
-          return [...fileList2];
-        });
+            return item;
+          })
+        );
       };
       uploadOption.onSuccess = (responseText, option) => {
-        setFileList((fileList2) => {
-          onUpdate && onUpdate(fileList2);
-          fileList2.forEach((item) => {
-            if (item.uid === fileItem.uid) {
-              item.status = "success";
-              item.message = locale.uploader.success;
-              item.responseText = responseText;
-            }
-          });
-          return [...fileList2];
+        const list = fileList.map((item) => {
+          if (item.uid === fileItem.uid) {
+            item.status = SUCCESS;
+            item.message = locale.uploader.success;
+            item.responseText = responseText;
+          }
+          return item;
         });
-        onSuccess && onSuccess({
+        setFileList(list);
+        onSuccess == null ? void 0 : onSuccess({
           responseText,
           option,
-          fileList
+          fileList: list
         });
       };
       uploadOption.onFailure = (responseText, option) => {
-        setFileList((fileList2) => {
-          fileList2.forEach((item) => {
-            if (item.uid === fileItem.uid) {
-              item.status = "error";
-              item.message = locale.uploader.error;
-              item.responseText = responseText;
-            }
-          });
-          return [...fileList2];
+        const list = fileList.map((item) => {
+          if (item.uid === fileItem.uid) {
+            item.status = ERROR;
+            item.message = locale.uploader.error;
+            item.responseText = responseText;
+          }
+          return item;
         });
-        onFailure && onFailure({
+        setFileList(list);
+        onFailure == null ? void 0 : onFailure({
           responseText,
           option,
-          fileList
+          fileList: list
         });
       };
       const task = new UploaderTaro(uploadOption);
@@ -13947,11 +14038,7 @@ var __publicField = (obj, key, value) => {
         fileItem.status = "ready";
         fileItem.type = fileType;
         fileItem.uid = `${fileItem.uid}_${index}`;
-        if (autoUpload) {
-          fileItem.message = locale.uploader.readyUpload;
-        } else {
-          fileItem.message = locale.uploader.waitingUpload;
-        }
+        fileItem.message = autoUpload ? locale.uploader.readyUpload : locale.uploader.waitingUpload;
         if (Taro.getEnv() === "WEB") {
           const formData = new FormData();
           for (const [key, value2] of Object.entries(data)) {
@@ -13968,7 +14055,7 @@ var __publicField = (obj, key, value) => {
           fileItem.url = fileType === "video" ? file.thumbTempFilePath : filepath;
         }
         fileList.push(fileItem);
-        setFileList([...fileList]);
+        setFileList(fileList);
         executeUpload(fileItem, index);
       });
     };
@@ -13993,9 +14080,9 @@ var __publicField = (obj, key, value) => {
       return filterFile;
     };
     const deleted = (file, index) => {
-      fileList.splice(index, 1);
-      onDelete && onDelete(file, fileList);
-      setFileList([...fileList]);
+      const deletedFileList = fileList.filter((file2, idx) => idx !== index);
+      onDelete == null ? void 0 : onDelete(file, deletedFileList);
+      setFileList(deletedFileList);
     };
     const onDeleteItem = (file, index) => {
       clearUploadQueue(index);
@@ -14008,88 +14095,34 @@ var __publicField = (obj, key, value) => {
       const { tempFiles } = res;
       const _files = filterFiles(tempFiles);
       readFile(_files);
-      onChange && onChange({ fileList });
     };
     const onChangeImage = (res) => {
       const { tempFiles } = res;
       const _files = filterFiles(tempFiles);
       readFile(_files);
-      onChange && onChange({ fileList });
     };
     const handleItemClick = (file) => {
-      onFileItemClick && onFileItemClick(file);
+      onFileItemClick == null ? void 0 : onFileItemClick(file);
     };
-    return /* @__PURE__ */ React.createElement("div", { className: classes, ...restProps }, (children || previewType === "list") && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__slot" }, /* @__PURE__ */ React.createElement(React.Fragment, null, children || /* @__PURE__ */ React.createElement(Button, { size: "small", type: "primary" }, "上传文件"), maxCount > fileList.length && /* @__PURE__ */ React.createElement(Button, { className: "nut-uploader__input", onClick: _chooseImage }))), fileList.length !== 0 && Array.isArray(fileList) && fileList.map((item, index) => {
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: `nut-uploader__preview ${previewType}`,
-          key: item.uid
-        },
-        previewType === "picture" && deletable && /* @__PURE__ */ React.createElement(
-          a$n,
-          {
-            color: "rgba(0,0,0,0.6)",
-            className: "close",
-            onClick: () => onDeleteItem(item, index)
-          }
-        ),
-        previewType === "picture" && !children && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-img" }, item.status === "ready" ? /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress" }, /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)) : item.status !== "success" && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress" }, item.failIcon !== " " && item.loadingIcon !== " " && (item.status === "error" ? item.failIcon || /* @__PURE__ */ React.createElement(a$n, { color: "#fff" }) : item.loadingIcon || /* @__PURE__ */ React.createElement(r$h, { color: "#fff" })), /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)), item.type.includes("image") ? /* @__PURE__ */ React.createElement(React.Fragment, null, item.url && /* @__PURE__ */ React.createElement(
-          components.Image,
-          {
-            className: "nut-uploader__preview-img__c",
-            style: { objectFit: fit },
-            mode: "aspectFit",
-            src: item.url,
-            onClick: () => handleItemClick(item)
-          }
-        )) : /* @__PURE__ */ React.createElement(React.Fragment, null, previewUrl ? /* @__PURE__ */ React.createElement(
-          components.Image,
-          {
-            className: "nut-uploader__preview-img__c",
-            mode: "aspectFit",
-            src: previewUrl,
-            onClick: () => handleItemClick(item)
-          }
-        ) : /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-img__file" }, /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            onClick: () => handleItemClick(item),
-            className: "nut-uploader__preview-img__file__name"
-          },
-          /* @__PURE__ */ React.createElement(a$i, { color: "#808080" }),
-          /* @__PURE__ */ React.createElement("span", null, " ", item.name)
-        ))), item.status === "success" ? /* @__PURE__ */ React.createElement("div", { className: "tips" }, item.name) : null),
-        previewType === "list" && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-list" }, /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: `nut-uploader__preview-img__file__name ${item.status}`,
-            onClick: () => handleItemClick(item)
-          },
-          /* @__PURE__ */ React.createElement(a$i, null),
-          /* @__PURE__ */ React.createElement("span", null, " ", item.name)
-        ), deletable && /* @__PURE__ */ React.createElement(
-          a$p,
-          {
-            color: "#808080",
-            className: "nut-uploader__preview-img__file__del",
-            onClick: () => onDeleteItem(item, index)
-          }
-        ), item.status === "uploading" && /* @__PURE__ */ React.createElement(
-          Progress,
-          {
-            percent: item.percentage,
-            color: "linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)",
-            showText: false
-          }
-        ))
-      );
-    }), maxCount > fileList.length && previewType === "picture" && !children && /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { className: classes, ...restProps }, (children || previewType === "list") && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__slot" }, /* @__PURE__ */ React.createElement(React.Fragment, null, children || /* @__PURE__ */ React.createElement(Button, { size: "small", type: "primary" }, "上传文件"), maxCount > fileList.length && /* @__PURE__ */ React.createElement(Button, { className: "nut-uploader__input", onClick: _chooseImage }))), /* @__PURE__ */ React.createElement(
+      Preview,
+      {
+        ...{
+          fileList,
+          previewType,
+          deletable,
+          onDeleteItem,
+          handleItemClick,
+          previewUrl,
+          children
+        }
+      }
+    ), maxCount > fileList.length && previewType === "picture" && !children && /* @__PURE__ */ React.createElement(
       "div",
       {
         className: `nut-uploader__upload ${previewType} ${disabled ? "nut-uploader__upload-disabled" : ""}`
       },
-      /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__icon" }, uploadIcon || /* @__PURE__ */ React.createElement(a$a, { size: "20px", color: "#808080" }), /* @__PURE__ */ React.createElement("span", { className: "nut-uploader__icon-tip" }, uploadLabel)),
+      /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__icon" }, uploadIcon, /* @__PURE__ */ React.createElement("span", { className: "nut-uploader__icon-tip" }, uploadLabel)),
       /* @__PURE__ */ React.createElement(Button, { className: "nut-uploader__input", onClick: _chooseImage })
     ));
   };
@@ -17480,7 +17513,7 @@ var __publicField = (obj, key, value) => {
       }
       return childs;
     };
-    return /* @__PURE__ */ React.createElement("div", { className: classNames(classes, className), ...rest }, renderElement());
+    return /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix$4, classes, className), ...rest }, renderElement());
   };
   Indicator.defaultProps = defaultProps$i;
   Indicator.displayName = "NutIndicator";
@@ -17504,6 +17537,7 @@ var __publicField = (obj, key, value) => {
       duration,
       direction,
       defaultValue,
+      onChange,
       ...rest
     } = {
       ...defaultProps$h,
@@ -17588,14 +17622,24 @@ var __publicField = (obj, key, value) => {
             autoplay: autoPlay,
             vertical: direction === "vertical",
             indicatorDots: false,
-            onChange: handleOnChange,
+            onChange: (e) => {
+              var _a;
+              handleOnChange(e);
+              (_a = props.onChange) == null ? void 0 : _a.call(props, e);
+            },
             style: {
               width: !width ? "100%" : `${width}px`,
               height: !height ? "150px" : `${height}px`
             },
             ...rest
           },
-          React.Children.toArray(children).map((child, index) => /* @__PURE__ */ React.createElement(components.SwiperItem, { key: index }, child))
+          React.Children.toArray(children).map((child, index) => {
+            let className2;
+            if (React.isValidElement(child)) {
+              className2 = child.props.className;
+            }
+            return /* @__PURE__ */ React.createElement(components.SwiperItem, { className: className2, key: index }, child);
+          })
         )
       ),
       renderIndicator()
@@ -17657,7 +17701,9 @@ var __publicField = (obj, key, value) => {
     });
     const [showPop, setShowPop] = React.useState(visible);
     const [active, setActive] = React.useState(0);
-    const [maxNo] = React.useState((images == null ? void 0 : images.length) || 0 + ((videos == null ? void 0 : videos.length) || 0));
+    const [maxNo, setMaxNo] = React.useState(
+      (images == null ? void 0 : images.length) || 0 + ((videos == null ? void 0 : videos.length) || 0)
+    );
     const [store, setStore] = React.useState({
       scale: 1,
       moveable: false
@@ -17746,6 +17792,9 @@ var __publicField = (obj, key, value) => {
     React.useEffect(() => {
       setActive(innerNo);
     }, [innerNo]);
+    React.useEffect(() => {
+      setMaxNo((images == null ? void 0 : images.length) || 0 + ((videos == null ? void 0 : videos.length) || 0));
+    }, [images, videos]);
     const scaleNow = () => {
       if (ref.current) {
         ref.current.style.transform = `scale(${store.scale})`;
@@ -17762,7 +17811,7 @@ var __publicField = (obj, key, value) => {
     };
     const onCloseInner = () => {
       setShowPop(false);
-      setActive(1);
+      setActive(innerNo);
       scaleNow();
       onClose && onClose();
       setStore({