@nutui/nutui-react 2.0.19-beta.1 → 2.0.20-beta.0

package/dist/nutui.react.umd.js

@@ -9,7 +9,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.0.19-beta.1 Tue Sep 26 2023 19:08:13 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.20 Fri Oct 13 2023 14:00:36 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -3768,7 +3768,7 @@ Check the top-level render call using <` + t + ">.");
     fit: "fill",
     position: "center",
     alt: "",
-    width: "center",
+    width: "",
     height: "",
     error: true,
     loading: true,
@@ -16479,11 +16479,11 @@ Please add \`${key}Action\` when creating your handler.`);
           ...this.store,
           ...newStore
         };
-        this.fieldEntities.forEach((enetity) => {
-          const { name } = enetity.props;
+        this.fieldEntities.forEach((entity) => {
+          const { name } = entity.props;
           Object.keys(newStore).forEach((key) => {
             if (key === name) {
-              enetity.onStoreChange("update");
+              entity.onStoreChange("update");
             }
           });
         });
@@ -16494,44 +16494,19 @@ Please add \`${key}Action\` when creating your handler.`);
           ...callback
         };
       });
-      __publicField(this, "validate", () => {
-        const err = [];
+      __publicField(this, "validateFields", async (nameList) => {
+        var _a2;
+        let filterEntitys = [];
+        const errs = [];
         this.errors.length = 0;
-        this.fieldEntities.forEach((entity) => {
-          var _a2;
-          const { name, rules: rules2 = [] } = entity.props;
-          const descriptor = {};
-          if (rules2.length) {
-            if (rules2.length > 1) {
-              descriptor[name] = [];
-              rules2.forEach((v) => {
-                descriptor[name].push(v);
-              });
-            } else {
-              descriptor[name] = rules2[0];
-            }
-          }
-          const validator = new Schema(descriptor);
-          validator.messages();
-          validator.validate({ [name]: (_a2 = this.store) == null ? void 0 : _a2[name] }, (errors) => {
-            if (errors) {
-              err.push(...errors);
-              this.errors[name] = errors;
-            }
-            entity.onStoreChange("validate");
-          });
-        });
-        return err;
-      });
-      __publicField(this, "validateFields", (nameList) => {
         if (!nameList || nameList.length === 0) {
-          this.validate();
-          return;
+          filterEntitys = this.fieldEntities;
+        } else {
+          filterEntitys = this.fieldEntities.filter(
+            ({ props: { name } }) => nameList.includes(name)
+          );
         }
-        this.fieldEntities.filter(({ props: { name } }) => {
-          return nameList.includes(name);
-        }).forEach((entity) => {
-          var _a2;
+        for (const entity of filterEntitys) {
           const { name, rules: rules2 = [] } = entity.props;
           const descriptor = {};
           if (rules2.length) {
@@ -16545,19 +16520,22 @@ Please add \`${key}Action\` when creating your handler.`);
             }
           }
           const validator = new Schema(descriptor);
-          validator.messages();
-          validator.validate({ [name]: (_a2 = this.store) == null ? void 0 : _a2[name] }, (errors) => {
+          try {
             this.errors[name] = [];
+            await validator.validate({ [name]: (_a2 = this.store) == null ? void 0 : _a2[name] });
+          } catch ({ errors }) {
             if (errors) {
+              errs.push(...errors);
               this.errors[name] = errors;
             }
-            entity.onStoreChange("validate");
-          });
-        });
+          }
+          entity.onStoreChange("validate");
+        }
+        return errs;
       });
-      __publicField(this, "submit", () => {
+      __publicField(this, "submit", async () => {
         var _a2, _b, _c, _d;
-        const errors = this.validate();
+        const errors = await this.validateFields();
         if (errors.length === 0) {
           (_b = (_a2 = this.callbacks).onFinish) == null ? void 0 : _b.call(_a2, this.store);
         } else if (errors.length > 0) {
@@ -19004,6 +18982,99 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   TextArea.defaultProps = defaultProps$H;
   TextArea.displayName = "NutTextArea";
+  class UploadOptions {
+    constructor() {
+      __publicField(this, "url", "");
+      __publicField(this, "name", "file");
+      __publicField(this, "fileType", "image");
+      __publicField(this, "formData");
+      __publicField(this, "sourceFile");
+      __publicField(this, "method", "post");
+      __publicField(this, "xhrState", 200);
+      __publicField(this, "timeout", 30 * 1e3);
+      __publicField(this, "headers", {});
+      __publicField(this, "withCredentials", false);
+      __publicField(this, "onStart");
+      __publicField(this, "taroFilePath");
+      __publicField(this, "onProgress");
+      __publicField(this, "onSuccess");
+      __publicField(this, "onFailure");
+      __publicField(this, "beforeXhrUpload");
+    }
+  }
+  const UPLOADING = "uploading";
+  const SUCCESS = "success";
+  const ERROR = "error";
+  class Upload {
+    constructor(options2) {
+      __publicField(this, "options");
+      this.options = options2;
+    }
+    upload() {
+      var _a2;
+      const { options: options2 } = this;
+      const xhr = new XMLHttpRequest();
+      xhr.timeout = options2.timeout;
+      if (xhr.upload) {
+        xhr.upload.addEventListener(
+          "progress",
+          (e) => {
+            var _a3;
+            (_a3 = options2.onProgress) == null ? void 0 : _a3.call(options2, e, options2);
+          },
+          false
+        );
+        xhr.onreadystatechange = () => {
+          var _a3, _b;
+          if (xhr.readyState === 4) {
+            if (xhr.status === options2.xhrState) {
+              (_a3 = options2.onSuccess) == null ? void 0 : _a3.call(options2, xhr.responseText, options2);
+            } else {
+              (_b = options2.onFailure) == null ? void 0 : _b.call(options2, xhr.responseText, options2);
+            }
+          }
+        };
+        xhr.withCredentials = options2.withCredentials;
+        xhr.open(options2.method, options2.url, true);
+        for (const [key, value] of Object.entries(options2.headers)) {
+          xhr.setRequestHeader(key, value);
+        }
+        (_a2 = options2.onStart) == null ? void 0 : _a2.call(options2, options2);
+        if (options2.beforeXhrUpload) {
+          options2.beforeXhrUpload(xhr, options2);
+        } else {
+          xhr.send(options2.formData);
+        }
+      } else {
+        console.warn("浏览器不支持 XMLHttpRequest");
+      }
+    }
+  }
+  const funcInterceptor = (interceptor, {
+    args = [],
+    done,
+    canceled
+  }) => {
+    if (interceptor) {
+      const returnVal = interceptor.apply(null, args);
+      if (isPromise(returnVal)) {
+        returnVal.then((value) => {
+          if (value) {
+            done(value);
+          } else if (canceled) {
+            canceled();
+          }
+        }).catch(() => {
+        });
+      } else if (returnVal) {
+        done();
+      } else if (canceled) {
+        canceled();
+      }
+    } else {
+      done();
+    }
+  };
   const defaultProps$G = {
     ...ComponentDefaults,
     percent: 0,
@@ -19124,96 +19195,105 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   Progress.defaultProps = defaultProps$G;
   Progress.displayName = "NutProgress";
-  class UploadOptions {
-    constructor() {
-      __publicField(this, "url", "");
-      __publicField(this, "name", "file");
-      __publicField(this, "fileType", "image");
-      __publicField(this, "formData");
-      __publicField(this, "sourceFile");
-      __publicField(this, "method", "post");
-      __publicField(this, "xhrState", 200);
-      __publicField(this, "timeout", 30 * 1e3);
-      __publicField(this, "headers", {});
-      __publicField(this, "withCredentials", false);
-      __publicField(this, "onStart");
-      __publicField(this, "taroFilePath");
-      __publicField(this, "onProgress");
-      __publicField(this, "onSuccess");
-      __publicField(this, "onFailure");
-      __publicField(this, "beforeXhrUpload");
-    }
-  }
-  class Upload {
-    constructor(options2) {
-      __publicField(this, "options");
-      this.options = options2;
-    }
-    upload() {
+  const Preview = ({
+    fileList,
+    previewType,
+    deletable,
+    onDeleteItem,
+    handleItemClick,
+    previewUrl,
+    children
+  }) => {
+    const renderIcon = (item) => {
+      if (item.status === ERROR) {
+        return item.failIcon || /* @__PURE__ */ React.createElement(x$9, { color: "#fff" });
+      }
+      return item.loadingIcon || /* @__PURE__ */ React.createElement(k$3, { className: "nut-icon-loading", color: "#fff" });
+    };
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, fileList.length !== 0 && fileList.map((item, index) => {
       var _a2;
-      const { options: options2 } = this;
-      const xhr = new XMLHttpRequest();
-      xhr.timeout = options2.timeout;
-      if (xhr.upload) {
-        xhr.upload.addEventListener(
-          "progress",
-          (e) => {
-            var _a3;
-            (_a3 = options2.onProgress) == null ? void 0 : _a3.call(options2, e, options2);
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: `nut-uploader__preview ${previewType}`,
+          key: item.uid
+        },
+        previewType === "picture" && deletable && /* @__PURE__ */ React.createElement(
+          x$9,
+          {
+            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)), ((_a2 = item.type) == null ? void 0 : _a2.includes("image")) ? /* @__PURE__ */ React.createElement(React.Fragment, null, item.url && /* @__PURE__ */ React.createElement(
+          "img",
+          {
+            className: "nut-uploader__preview-img__c",
+            style: { objectFit: "fill" },
+            src: item.url,
+            alt: "",
+            onClick: () => handleItemClick(item)
+          }
+        )) : /* @__PURE__ */ React.createElement(React.Fragment, null, previewUrl ? /* @__PURE__ */ React.createElement(
+          "img",
+          {
+            className: "nut-uploader__preview-img__c",
+            src: previewUrl,
+            alt: "",
+            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"
           },
-          false
-        );
-        xhr.onreadystatechange = () => {
-          var _a3, _b;
-          if (xhr.readyState === 4) {
-            if (xhr.status === options2.xhrState) {
-              (_a3 = options2.onSuccess) == null ? void 0 : _a3.call(options2, xhr.responseText, options2);
-            } else {
-              (_b = options2.onFailure) == null ? void 0 : _b.call(options2, xhr.responseText, options2);
-            }
+          /* @__PURE__ */ React.createElement(x$6, { 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(x$6, null),
+          /* @__PURE__ */ React.createElement("span", null, " ", item.name)
+        ), deletable && /* @__PURE__ */ React.createElement(
+          y$8,
+          {
+            color: "#808080",
+            className: "nut-uploader__preview-img__file__del",
+            onClick: () => onDeleteItem(item, index)
           }
-        };
-        xhr.withCredentials = options2.withCredentials;
-        xhr.open(options2.method, options2.url, true);
-        for (const [key, value] of Object.entries(options2.headers)) {
-          xhr.setRequestHeader(key, value);
-        }
-        (_a2 = options2.onStart) == null ? void 0 : _a2.call(options2, options2);
-        if (options2.beforeXhrUpload) {
-          options2.beforeXhrUpload(xhr, options2);
-        } else {
-          xhr.send(options2.formData);
-        }
-      } else {
-        console.warn("浏览器不支持 XMLHttpRequest");
-      }
-    }
-  }
-  const funcInterceptor = (interceptor, {
-    args = [],
-    done,
-    canceled
-  }) => {
-    if (interceptor) {
-      const returnVal = interceptor.apply(null, args);
-      if (isPromise(returnVal)) {
-        returnVal.then((value) => {
-          if (value) {
-            done(value);
-          } else if (canceled) {
-            canceled();
+        ), 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
           }
-        }).catch(() => {
-        });
-      } else if (returnVal) {
-        done();
-      } else if (canceled) {
-        canceled();
-      }
-    } else {
-      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$F = {
     ...ComponentDefaults,
     url: "",
@@ -19236,24 +19316,11 @@ Please add \`${key}Action\` when creating your handler.`);
     preview: true,
     deletable: true,
     capture: false,
+    uploadIcon: /* @__PURE__ */ React.createElement(x$3, { width: "20px", height: "20px", color: "#808080" }),
     beforeDelete: (file, files) => {
       return true;
     }
   };
-  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", new FormData());
-      __publicField(this, "responseText");
-    }
-  }
   const InternalUploader = (props, ref) => {
     const { locale } = useConfig();
     const {
@@ -19298,13 +19365,15 @@ Please add \`${key}Action\` when creating your handler.`);
       beforeDelete,
       ...restProps
     } = { ...defaultProps$F, ...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: () => {
@@ -19330,10 +19399,11 @@ Please add \`${key}Action\` when creating your handler.`);
       el.value = "";
     };
     const executeUpload = (fileItem, index) => {
+      var _a2, _b;
       const uploadOption = new UploadOptions();
       uploadOption.url = url;
       for (const [key, value2] of Object.entries(data)) {
-        fileItem.formData.append(key, value2);
+        (_a2 = fileItem.formData) == null ? void 0 : _a2.append(key, value2);
       }
       uploadOption.formData = fileItem.formData;
       uploadOption.timeout = timeout * 1;
@@ -19343,73 +19413,67 @@ Please add \`${key}Action\` when creating your handler.`);
       uploadOption.withCredentials = withCredentials;
       uploadOption.beforeXhrUpload = beforeXhrUpload;
       try {
-        uploadOption.sourceFile = fileItem.formData.get(name);
+        uploadOption.sourceFile = (_b = fileItem.formData) == null ? void 0 : _b.get(name);
       } catch (error) {
         console.warn(error);
       }
       uploadOption.onStart = (option) => {
         clearUploadQueue(index);
-        setFileList((fileList2) => {
-          fileList2.map((item) => {
+        setFileList(
+          fileList.map((item) => {
             if (item.uid === fileItem.uid) {
               item.status = "ready";
               item.message = locale.uploader.readyUpload;
             }
             return item;
-          });
-          return [...fileList2];
-        });
+          })
+        );
         onStart && onStart(option);
       };
       uploadOption.onProgress = (e, option) => {
-        setFileList((fileList2) => {
-          fileList2.map((item) => {
+        setFileList(
+          fileList.map((item) => {
             if (item.uid === fileItem.uid) {
-              item.status = "uploading";
+              item.status = UPLOADING;
               item.message = locale.uploader.uploading;
               item.percentage = (e.loaded / e.total * 100).toFixed(0);
               onProgress && onProgress({ e, option, percentage: item.percentage });
             }
             return item;
-          });
-          return [...fileList2];
-        });
+          })
+        );
       };
       uploadOption.onSuccess = (responseText, option) => {
-        setFileList((fileList2) => {
-          onUpdate && onUpdate(fileList2);
-          fileList2.map((item) => {
-            if (item.uid === fileItem.uid) {
-              item.status = "success";
-              item.message = locale.uploader.success;
-              item.responseText = responseText;
-            }
-            return item;
-          });
-          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);
+        onUpdate == null ? void 0 : onUpdate(list);
+        onSuccess == null ? void 0 : onSuccess({
           responseText,
           option,
-          fileList
+          fileList: list
         });
       };
       uploadOption.onFailure = (responseText, option) => {
-        setFileList((fileList2) => {
-          fileList2.map((item) => {
-            if (item.uid === fileItem.uid) {
-              item.status = "error";
-              item.message = locale.uploader.error;
-              item.responseText = responseText;
-            }
-            return item;
-          });
-          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 Upload(uploadOption);
@@ -19434,11 +19498,7 @@ Please add \`${key}Action\` when creating your handler.`);
         fileItem.type = file.type;
         fileItem.formData = formData;
         fileItem.uid = file.lastModified + fileItem.uid;
-        if (autoUpload) {
-          fileItem.message = locale.uploader.readyUpload;
-        } else {
-          fileItem.message = locale.uploader.waitingUpload;
-        }
+        fileItem.message = autoUpload ? locale.uploader.readyUpload : locale.uploader.waitingUpload;
         executeUpload(fileItem, index);
         if (preview && file.type.includes("image")) {
           const reader = new FileReader();
@@ -19449,8 +19509,7 @@ Please add \`${key}Action\` when creating your handler.`);
           };
           reader.readAsDataURL(file);
         } else {
-          fileList.push(fileItem);
-          setFileList([...fileList]);
+          setFileList([...fileList, fileItem]);
         }
       });
     };
@@ -19477,9 +19536,9 @@ Please add \`${key}Action\` when creating your handler.`);
       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);
@@ -19505,131 +19564,53 @@ Please add \`${key}Action\` when creating your handler.`);
         const _files = filterFiles(new Array().slice.call(files));
         readFile(_files);
       }
-      onChange && onChange({ fileList, event });
+      setFileList(fileList);
       if (clearInput) {
         clearInputValue($el);
       }
     };
     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(React.Fragment, null, capture ? /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { className: classes, ...restProps }, (children || previewType === "list") && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__slot" }, children || /* @__PURE__ */ React.createElement(Button, { size: "small", type: "primary" }, "上传文件"), maxCount > fileList.length && /* @__PURE__ */ React.createElement(
       "input",
       {
         className: "nut-uploader__input",
         type: "file",
-        capture: "user",
+        capture,
         name,
         accept,
         disabled,
         multiple,
         onChange: fileChange
       }
-    ) : /* @__PURE__ */ React.createElement(
-      "input",
+    )), /* @__PURE__ */ React.createElement(
+      Preview,
       {
-        className: "nut-uploader__input",
-        type: "file",
-        name,
-        accept,
-        disabled,
-        multiple,
-        onChange: fileChange
+        ...{
+          fileList,
+          previewType,
+          deletable,
+          onDeleteItem,
+          handleItemClick,
+          previewUrl,
+          children
+        }
       }
-    )))), 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(
-          x$9,
-          {
-            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(x$9, { color: "#fff" }) : item.loadingIcon || /* @__PURE__ */ React.createElement(
-          k$3,
-          {
-            className: "nut-icon-loading",
-            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(
-          "img",
-          {
-            className: "nut-uploader__preview-img__c",
-            style: { objectFit: fit },
-            src: item.url,
-            alt: "",
-            onClick: () => handleItemClick(item)
-          }
-        )) : /* @__PURE__ */ React.createElement(React.Fragment, null, previewUrl ? /* @__PURE__ */ React.createElement(
-          "img",
-          {
-            className: "nut-uploader__preview-img__c",
-            src: previewUrl,
-            alt: "",
-            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(x$6, { 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(x$6, null),
-          /* @__PURE__ */ React.createElement("span", null, " ", item.name)
-        ), deletable && /* @__PURE__ */ React.createElement(
-          y$8,
-          {
-            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(
+    ), maxCount > fileList.length && previewType === "picture" && !children && /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: `nut-uploader__upload ${previewType} ${disabled ? "nut-uploader__upload-disabled" : ""}`
+        className: classNames("nut-uploader__upload", previewType, {
+          "nut-uploader__upload-disabled": disabled
+        })
       },
-      /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__icon" }, uploadIcon || /* @__PURE__ */ React.createElement(x$3, { width: "20px", height: "20px", color: "#808080" }), /* @__PURE__ */ React.createElement("span", { className: "nut-uploader__icon-tip" }, uploadLabel)),
-      capture ? /* @__PURE__ */ React.createElement(
-        "input",
-        {
-          className: "nut-uploader__input",
-          type: "file",
-          capture: "user",
-          name,
-          accept,
-          disabled,
-          multiple,
-          onChange: fileChange
-        }
-      ) : /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__icon" }, uploadIcon, /* @__PURE__ */ React.createElement("span", { className: "nut-uploader__icon-tip" }, uploadLabel)),
+      /* @__PURE__ */ React.createElement(
         "input",
         {
           className: "nut-uploader__input",
           type: "file",
+          capture,
           name,
           accept,
           disabled,