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

package/dist/nutui.react.es.js

@@ -6,7 +6,7 @@ var __publicField = (obj, key, value) => {
 };
 var _a;
 /*!
-* @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.
 */
@@ -3750,7 +3750,7 @@ const defaultProps$1p = {
   fit: "fill",
   position: "center",
   alt: "",
-  width: "center",
+  width: "",
   height: "",
   error: true,
   loading: true,
@@ -16461,11 +16461,11 @@ class FormStore {
         ...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");
           }
         });
       });
@@ -16476,44 +16476,19 @@ class FormStore {
         ...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) {
@@ -16527,19 +16502,22 @@ class FormStore {
           }
         }
         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) {
@@ -18986,6 +18964,99 @@ const TextArea = (props) => {
 };
 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,
@@ -19106,96 +19177,105 @@ const Progress = (props) => {
 };
 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__default.createElement(x$9, { color: "#fff" });
+    }
+    return item.loadingIcon || /* @__PURE__ */ React__default.createElement(k$3, { className: "nut-icon-loading", color: "#fff" });
+  };
+  return /* @__PURE__ */ React__default.createElement(React__default.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__default.createElement(
+      "div",
+      {
+        className: `nut-uploader__preview ${previewType}`,
+        key: item.uid
+      },
+      previewType === "picture" && deletable && /* @__PURE__ */ React__default.createElement(
+        x$9,
+        {
+          color: "rgba(0,0,0,0.6)",
+          className: "close",
+          onClick: () => onDeleteItem(item, index)
+        }
+      ),
+      previewType === "picture" && !children && /* @__PURE__ */ React__default.createElement("div", { className: "nut-uploader__preview-img" }, item.status === "ready" ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-uploader__preview__progress" }, /* @__PURE__ */ React__default.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)) : item.status !== "success" && /* @__PURE__ */ React__default.createElement("div", { className: "nut-uploader__preview__progress" }, renderIcon(item), /* @__PURE__ */ React__default.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)), ((_a2 = item.type) == null ? void 0 : _a2.includes("image")) ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, item.url && /* @__PURE__ */ React__default.createElement(
+        "img",
+        {
+          className: "nut-uploader__preview-img__c",
+          style: { objectFit: "fill" },
+          src: item.url,
+          alt: "",
+          onClick: () => handleItemClick(item)
+        }
+      )) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, previewUrl ? /* @__PURE__ */ React__default.createElement(
+        "img",
+        {
+          className: "nut-uploader__preview-img__c",
+          src: previewUrl,
+          alt: "",
+          onClick: () => handleItemClick(item)
+        }
+      ) : /* @__PURE__ */ React__default.createElement("div", { className: "nut-uploader__preview-img__file" }, /* @__PURE__ */ React__default.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__default.createElement(x$6, { color: "#808080" }),
+        /* @__PURE__ */ React__default.createElement("span", null, " ", item.name)
+      ))), item.status === "success" ? /* @__PURE__ */ React__default.createElement("div", { className: "tips" }, item.name) : null),
+      previewType === "list" && /* @__PURE__ */ React__default.createElement("div", { className: "nut-uploader__preview-list" }, /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: `nut-uploader__preview-img__file__name ${item.status}`,
+          onClick: () => handleItemClick(item)
+        },
+        /* @__PURE__ */ React__default.createElement(x$6, null),
+        /* @__PURE__ */ React__default.createElement("span", null, " ", item.name)
+      ), deletable && /* @__PURE__ */ React__default.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__default.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: "",
@@ -19218,24 +19298,11 @@ const defaultProps$F = {
   preview: true,
   deletable: true,
   capture: false,
+  uploadIcon: /* @__PURE__ */ React__default.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 {
@@ -19280,13 +19347,15 @@ const InternalUploader = (props, ref) => {
     beforeDelete,
     ...restProps
   } = { ...defaultProps$F, ...props };
-  const [fileList, setFileList] = useState(defaultValue || []);
-  const [uploadQueue, setUploadQueue] = useState([]);
-  useEffect(() => {
-    if (value) {
-      setFileList(value);
+  const [fileList, setFileList] = usePropsValue({
+    value,
+    defaultValue,
+    finalValue: [],
+    onChange: (v) => {
+      onChange == null ? void 0 : onChange(v);
     }
-  }, [value]);
+  });
+  const [uploadQueue, setUploadQueue] = useState([]);
   const classes = classNames(className, "nut-uploader");
   useImperativeHandle(ref, () => ({
     submit: () => {
@@ -19312,10 +19381,11 @@ const InternalUploader = (props, ref) => {
     el.value = "";
   };
   const executeUpload = (fileItem, index) => {
+    var _a2, _b;
     const uploadOption = new UploadOptions();
     uploadOption.url = url2;
     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 = timeout2 * 1;
@@ -19325,73 +19395,67 @@ const InternalUploader = (props, ref) => {
     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);
@@ -19416,11 +19480,7 @@ const InternalUploader = (props, ref) => {
       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();
@@ -19431,8 +19491,7 @@ const InternalUploader = (props, ref) => {
         };
         reader.readAsDataURL(file);
       } else {
-        fileList.push(fileItem);
-        setFileList([...fileList]);
+        setFileList([...fileList, fileItem]);
       }
     });
   };
@@ -19459,9 +19518,9 @@ const InternalUploader = (props, ref) => {
     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);
@@ -19487,131 +19546,53 @@ const InternalUploader = (props, ref) => {
       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__default.createElement("div", { className: classes, ...restProps }, (children || previewType === "list") && /* @__PURE__ */ React__default.createElement("div", { className: "nut-uploader__slot" }, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children || /* @__PURE__ */ React__default.createElement(Button, { size: "small", type: "primary" }, "上传文件"), maxCount > fileList.length && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, capture ? /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { className: classes, ...restProps }, (children || previewType === "list") && /* @__PURE__ */ React__default.createElement("div", { className: "nut-uploader__slot" }, children || /* @__PURE__ */ React__default.createElement(Button, { size: "small", type: "primary" }, "上传文件"), maxCount > fileList.length && /* @__PURE__ */ React__default.createElement(
     "input",
     {
       className: "nut-uploader__input",
       type: "file",
-      capture: "user",
+      capture,
       name,
       accept,
       disabled,
       multiple,
       onChange: fileChange
     }
-  ) : /* @__PURE__ */ React__default.createElement(
-    "input",
+  )), /* @__PURE__ */ React__default.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__default.createElement(
-      "div",
-      {
-        className: `nut-uploader__preview ${previewType}`,
-        key: item.uid
-      },
-      previewType === "picture" && deletable && /* @__PURE__ */ React__default.createElement(
-        x$9,
-        {
-          color: "rgba(0,0,0,0.6)",
-          className: "close",
-          onClick: () => onDeleteItem(item, index)
-        }
-      ),
-      previewType === "picture" && !children && /* @__PURE__ */ React__default.createElement("div", { className: "nut-uploader__preview-img" }, item.status === "ready" ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-uploader__preview__progress" }, /* @__PURE__ */ React__default.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)) : item.status !== "success" && /* @__PURE__ */ React__default.createElement("div", { className: "nut-uploader__preview__progress" }, item.failIcon !== " " && item.loadingIcon !== " " && (item.status === "error" ? item.failIcon || /* @__PURE__ */ React__default.createElement(x$9, { color: "#fff" }) : item.loadingIcon || /* @__PURE__ */ React__default.createElement(
-        k$3,
-        {
-          className: "nut-icon-loading",
-          color: "#fff"
-        }
-      )), /* @__PURE__ */ React__default.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)), item.type.includes("image") ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, item.url && /* @__PURE__ */ React__default.createElement(
-        "img",
-        {
-          className: "nut-uploader__preview-img__c",
-          style: { objectFit: fit },
-          src: item.url,
-          alt: "",
-          onClick: () => handleItemClick(item)
-        }
-      )) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, previewUrl ? /* @__PURE__ */ React__default.createElement(
-        "img",
-        {
-          className: "nut-uploader__preview-img__c",
-          src: previewUrl,
-          alt: "",
-          onClick: () => handleItemClick(item)
-        }
-      ) : /* @__PURE__ */ React__default.createElement("div", { className: "nut-uploader__preview-img__file" }, /* @__PURE__ */ React__default.createElement(
-        "div",
-        {
-          onClick: () => handleItemClick(item),
-          className: "nut-uploader__preview-img__file__name"
-        },
-        /* @__PURE__ */ React__default.createElement(x$6, { color: "#808080" }),
-        /* @__PURE__ */ React__default.createElement("span", null, " ", item.name)
-      ))), item.status === "success" ? /* @__PURE__ */ React__default.createElement("div", { className: "tips" }, item.name) : null),
-      previewType === "list" && /* @__PURE__ */ React__default.createElement("div", { className: "nut-uploader__preview-list" }, /* @__PURE__ */ React__default.createElement(
-        "div",
-        {
-          className: `nut-uploader__preview-img__file__name ${item.status}`,
-          onClick: () => handleItemClick(item)
-        },
-        /* @__PURE__ */ React__default.createElement(x$6, null),
-        /* @__PURE__ */ React__default.createElement("span", null, " ", item.name)
-      ), deletable && /* @__PURE__ */ React__default.createElement(
-        y$8,
-        {
-          color: "#808080",
-          className: "nut-uploader__preview-img__file__del",
-          onClick: () => onDeleteItem(item, index)
-        }
-      ), item.status === "uploading" && /* @__PURE__ */ React__default.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__default.createElement(
+  ), maxCount > fileList.length && previewType === "picture" && !children && /* @__PURE__ */ React__default.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__default.createElement("div", { className: "nut-uploader__icon" }, uploadIcon || /* @__PURE__ */ React__default.createElement(x$3, { width: "20px", height: "20px", color: "#808080" }), /* @__PURE__ */ React__default.createElement("span", { className: "nut-uploader__icon-tip" }, uploadLabel)),
-    capture ? /* @__PURE__ */ React__default.createElement(
-      "input",
-      {
-        className: "nut-uploader__input",
-        type: "file",
-        capture: "user",
-        name,
-        accept,
-        disabled,
-        multiple,
-        onChange: fileChange
-      }
-    ) : /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", { className: "nut-uploader__icon" }, uploadIcon, /* @__PURE__ */ React__default.createElement("span", { className: "nut-uploader__icon-tip" }, uploadLabel)),
+    /* @__PURE__ */ React__default.createElement(
       "input",
       {
         className: "nut-uploader__input",
         type: "file",
+        capture,
         name,
         accept,
         disabled,