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

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.19 Wed Sep 27 2023 18:11:25 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -18986,6 +18986,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 +19199,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 +19320,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 +19369,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 +19403,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 +19417,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 +19502,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 +19513,7 @@ const InternalUploader = (props, ref) => {
         };
         reader.readAsDataURL(file);
       } else {
-        fileList.push(fileItem);
-        setFileList([...fileList]);
+        setFileList([...fileList, fileItem]);
       }
     });
   };
@@ -19459,9 +19540,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 +19568,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,