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

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v2.0.20
+`2023-10-13`
+
+* :sparkles: feat: add demo about infiniteloading (#1533) @xiaoyatong
+* :bug: fix(form): 自定义校验 promise 返回错误不能被正确收集 (#1523) @samber
+* :bug: fix(popup): popup zIndex 无效 (#1521) @Clay Zhang
+* :bug: fix: demo format (#1530) @xiaoyatong
+* :bug: fix: taro image and imagepreivew on h5 (#1532) @xiaoyatong
+* :bug: fix: taro image default width and height (#1531) @xiaoyatong
+
+
+# v2.0.19
+`2023-09-27`
+
+* :sparkles: feat(menu):  overlay onclick 事件中调用 hideMenuItem 实现关闭 (#1505) @oasis-cloud
+* :sparkles: feat(menu): onClose 事件增加触发来源参数 (#1502) @oasis-cloud
+* :sparkles: feat(swiper): swiperItem 支持设置 className (#1504) @oasis-cloud
+* :bug: fix(uploader): 受控模式调整，props 类型调整，回调参数修正 (#1500) @oasis-cloud
+* :bug: fix: imagepreview with control (#1480) @xiaoyatong
+* :bug: fix: indicator 超长换行 (#1486) @oasis-cloud
+* :bug: fix: menu 在 lockscroll 的时候不需要加滚动事件 (#1509) @oasis-cloud
+* :bug: fix: ios和android下点击button时出现半透明灰色遮罩 (#1495) @Kurisu
+
+
+
 # v2.0.18
 `2023-09-20`
 

package/dist/esm/Button.js

@@ -1,8 +1,87 @@
-import { B as Button } from "./button2.js";
-import "react";
-import "classnames";
-import "@nutui/icons-react";
-import "./typings.js";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["color", "shape", "fill", "loading", "disabled", "type", "size", "block", "icon", "children", "onClick", "className", "style", "nativeType"];
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+import React__default, { useCallback } from "react";
+import classNames from "classnames";
+import { Loading } from "@nutui/icons-react";
+import { C as ComponentDefaults } from "./typings.js";
+var prefixCls = "nut-button";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  color: "",
+  type: "default",
+  size: "normal",
+  shape: "round",
+  fill: "solid",
+  loading: false,
+  disabled: false,
+  block: false,
+  icon: null,
+  nativeType: "button",
+  onClick: function onClick(e) {
+  }
+});
+var Button = React__default.forwardRef(function(props, ref) {
+  var _classNames;
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), color = _defaultProps$props.color, shape = _defaultProps$props.shape, fill = _defaultProps$props.fill, loading = _defaultProps$props.loading, disabled = _defaultProps$props.disabled, type = _defaultProps$props.type, size = _defaultProps$props.size, block = _defaultProps$props.block, icon = _defaultProps$props.icon, children = _defaultProps$props.children, onClick2 = _defaultProps$props.onClick, className = _defaultProps$props.className, style = _defaultProps$props.style, nativeType = _defaultProps$props.nativeType, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var getStyle = useCallback(function() {
+    var style2 = {};
+    if (props.color) {
+      if (fill && fill === "outline") {
+        style2.color = color;
+        style2.background = "#fff";
+        if (!(color !== null && color !== void 0 && color.includes("gradient"))) {
+          style2.borderColor = color;
+        }
+      } else {
+        style2.color = "#fff";
+        style2.background = color;
+      }
+    }
+    return style2;
+  }, [color]);
+  var handleClick = function handleClick2(e) {
+    if (!loading && !disabled && onClick2) {
+      onClick2(e);
+    }
+  };
+  return React__default.createElement("button", _objectSpread(_objectSpread({}, rest), {}, {
+    ref,
+    type: nativeType,
+    className: classNames(prefixCls, className, props.type ? "".concat(prefixCls, "--").concat(type) : null, props.fill ? "".concat(prefixCls, "--").concat(fill) : null, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "--").concat(size), size), _defineProperty(_classNames, "".concat(prefixCls, "--").concat(shape), shape), _defineProperty(_classNames, "".concat(prefixCls, "--block"), block), _defineProperty(_classNames, "".concat(prefixCls, "--disabled"), disabled), _defineProperty(_classNames, "".concat(prefixCls, "--loading"), loading), _classNames)),
+    style: _objectSpread(_objectSpread({}, getStyle()), style),
+    onClick: function onClick3(e) {
+      return handleClick(e);
+    }
+  }), React__default.createElement("div", {
+    className: "nut-button__warp"
+  }, loading ? React__default.createElement(Loading, {
+    className: "nut-icon-loading"
+  }) : null, !loading && icon ? icon : null, children && React__default.createElement("div", {
+    className: icon || loading ? "nut-button-text" : ""
+  }, children)));
+});
+Button.displayName = "NutButton";
 export {
   Button as default
 };

package/dist/esm/Image.js

@@ -30,7 +30,7 @@ var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   fit: "fill",
   position: "center",
   alt: "",
-  width: "center",
+  width: "",
   height: "",
   error: true,
   loading: true,

package/dist/esm/Uploader.js

@@ -26,14 +26,15 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { useState, useEffect, useImperativeHandle } from "react";
+import React__default, { useState, useImperativeHandle } from "react";
 import classNames from "classnames";
-import { Failure, Loading, Link, Del, Photograph } from "@nutui/icons-react";
-import Progress from "./Progress.js";
+import { Failure, Link, Del, Loading, Photograph } from "@nutui/icons-react";
 import { useConfig } from "./ConfigProvider.js";
 import { a as isPromise } from "./index.js";
 import { C as ComponentDefaults } from "./typings.js";
-import { B as Button } from "./button2.js";
+import Button from "./Button.js";
+import { u as usePropsValue } from "./use-props-value.js";
+import Progress from "./Progress.js";
 var UploadOptions = /* @__PURE__ */ _createClass(function UploadOptions2() {
   _classCallCheck(this, UploadOptions2);
   _defineProperty(this, "url", "");
@@ -53,6 +54,9 @@ var UploadOptions = /* @__PURE__ */ _createClass(function UploadOptions2() {
   _defineProperty(this, "onFailure", void 0);
   _defineProperty(this, "beforeXhrUpload", void 0);
 });
+var UPLOADING = "uploading";
+var SUCCESS = "success";
+var ERROR = "error";
 var Upload = /* @__PURE__ */ function() {
   function Upload2(options) {
     _classCallCheck(this, Upload2);
@@ -123,6 +127,103 @@ var funcInterceptor = function funcInterceptor2(interceptor, _ref) {
     done();
   }
 };
+var Preview = function Preview2(_ref2) {
+  var fileList = _ref2.fileList, previewType = _ref2.previewType, deletable = _ref2.deletable, onDeleteItem = _ref2.onDeleteItem, handleItemClick = _ref2.handleItemClick, previewUrl = _ref2.previewUrl, children = _ref2.children;
+  var renderIcon = function renderIcon2(item) {
+    if (item.status === ERROR) {
+      return item.failIcon || React__default.createElement(Failure, {
+        color: "#fff"
+      });
+    }
+    return item.loadingIcon || React__default.createElement(Loading, {
+      className: "nut-icon-loading",
+      color: "#fff"
+    });
+  };
+  return React__default.createElement(React__default.Fragment, null, fileList.length !== 0 && fileList.map(function(item, index) {
+    var _item$type;
+    return React__default.createElement("div", {
+      className: "nut-uploader__preview ".concat(previewType),
+      key: item.uid
+    }, previewType === "picture" && deletable && React__default.createElement(Failure, {
+      color: "rgba(0,0,0,0.6)",
+      className: "close",
+      onClick: function onClick() {
+        return onDeleteItem(item, index);
+      }
+    }), previewType === "picture" && !children && React__default.createElement("div", {
+      className: "nut-uploader__preview-img"
+    }, item.status === "ready" ? React__default.createElement("div", {
+      className: "nut-uploader__preview__progress"
+    }, React__default.createElement("div", {
+      className: "nut-uploader__preview__progress__msg"
+    }, item.message)) : item.status !== "success" && React__default.createElement("div", {
+      className: "nut-uploader__preview__progress"
+    }, renderIcon(item), React__default.createElement("div", {
+      className: "nut-uploader__preview__progress__msg"
+    }, item.message)), (_item$type = item.type) !== null && _item$type !== void 0 && _item$type.includes("image") ? React__default.createElement(React__default.Fragment, null, item.url && React__default.createElement("img", {
+      className: "nut-uploader__preview-img__c",
+      style: {
+        objectFit: "fill"
+      },
+      src: item.url,
+      alt: "",
+      onClick: function onClick() {
+        return handleItemClick(item);
+      }
+    })) : React__default.createElement(React__default.Fragment, null, previewUrl ? React__default.createElement("img", {
+      className: "nut-uploader__preview-img__c",
+      src: previewUrl,
+      alt: "",
+      onClick: function onClick() {
+        return handleItemClick(item);
+      }
+    }) : React__default.createElement("div", {
+      className: "nut-uploader__preview-img__file"
+    }, React__default.createElement("div", {
+      onClick: function onClick() {
+        return handleItemClick(item);
+      },
+      className: "nut-uploader__preview-img__file__name"
+    }, React__default.createElement(Link, {
+      color: "#808080"
+    }), React__default.createElement("span", null, " ", item.name)))), item.status === "success" ? React__default.createElement("div", {
+      className: "tips"
+    }, item.name) : null), previewType === "list" && React__default.createElement("div", {
+      className: "nut-uploader__preview-list"
+    }, React__default.createElement("div", {
+      className: "nut-uploader__preview-img__file__name ".concat(item.status),
+      onClick: function onClick() {
+        return handleItemClick(item);
+      }
+    }, React__default.createElement(Link, null), React__default.createElement("span", null, " ", item.name)), deletable && React__default.createElement(Del, {
+      color: "#808080",
+      className: "nut-uploader__preview-img__file__del",
+      onClick: function onClick() {
+        return onDeleteItem(item, index);
+      }
+    }), item.status === "uploading" && 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
+    })));
+  }));
+};
+var FileItem = /* @__PURE__ */ _createClass(function FileItem2() {
+  _classCallCheck(this, FileItem2);
+  _defineProperty(this, "status", "ready");
+  _defineProperty(this, "message", "准备中..");
+  _defineProperty(this, "uid", /* @__PURE__ */ (/* @__PURE__ */ new Date()).getTime().toString());
+  _defineProperty(this, "name", void 0);
+  _defineProperty(this, "url", void 0);
+  _defineProperty(this, "type", void 0);
+  _defineProperty(this, "path", void 0);
+  _defineProperty(this, "percentage", 0);
+  _defineProperty(this, "formData", {});
+  _defineProperty(this, "responseText", void 0);
+  _defineProperty(this, "loadingIcon", void 0);
+  _defineProperty(this, "failIcon", void 0);
+});
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   url: "",
   maxCount: 1,
@@ -144,33 +245,27 @@ var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   preview: true,
   deletable: true,
   capture: false,
+  uploadIcon: React__default.createElement(Photograph, {
+    width: "20px",
+    height: "20px",
+    color: "#808080"
+  }),
   beforeDelete: function beforeDelete(file, files) {
     return true;
   }
 });
-var FileItem = /* @__PURE__ */ _createClass(function FileItem2() {
-  _classCallCheck(this, FileItem2);
-  _defineProperty(this, "status", "ready");
-  _defineProperty(this, "message", "准备中..");
-  _defineProperty(this, "uid", /* @__PURE__ */ (/* @__PURE__ */ new Date()).getTime().toString());
-  _defineProperty(this, "name", void 0);
-  _defineProperty(this, "url", void 0);
-  _defineProperty(this, "type", void 0);
-  _defineProperty(this, "path", void 0);
-  _defineProperty(this, "percentage", 0);
-  _defineProperty(this, "formData", new FormData());
-  _defineProperty(this, "responseText", void 0);
-});
 var InternalUploader = function InternalUploader2(props, ref) {
   var _useConfig = useConfig(), locale = _useConfig.locale;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, uploadIcon = _defaultProps$props.uploadIcon, uploadLabel = _defaultProps$props.uploadLabel, name = _defaultProps$props.name, accept = _defaultProps$props.accept, defaultValue = _defaultProps$props.defaultValue, value = _defaultProps$props.value, previewType = _defaultProps$props.previewType, fit = _defaultProps$props.fit, disabled = _defaultProps$props.disabled, multiple = _defaultProps$props.multiple, url = _defaultProps$props.url, previewUrl = _defaultProps$props.previewUrl, headers = _defaultProps$props.headers, timeout = _defaultProps$props.timeout, method = _defaultProps$props.method, xhrState = _defaultProps$props.xhrState, withCredentials = _defaultProps$props.withCredentials, data = _defaultProps$props.data, preview = _defaultProps$props.preview, deletable = _defaultProps$props.deletable, maxCount = _defaultProps$props.maxCount, capture = _defaultProps$props.capture, maxFileSize = _defaultProps$props.maxFileSize, className = _defaultProps$props.className, autoUpload = _defaultProps$props.autoUpload, clearInput = _defaultProps$props.clearInput, onStart = _defaultProps$props.onStart, onDelete = _defaultProps$props.onDelete, onChange = _defaultProps$props.onChange, onFileItemClick = _defaultProps$props.onFileItemClick, onProgress = _defaultProps$props.onProgress, onSuccess = _defaultProps$props.onSuccess, onUpdate = _defaultProps$props.onUpdate, onFailure = _defaultProps$props.onFailure, onOversize = _defaultProps$props.onOversize, beforeUpload = _defaultProps$props.beforeUpload, beforeXhrUpload = _defaultProps$props.beforeXhrUpload, beforeDelete2 = _defaultProps$props.beforeDelete, restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var _useState = useState(defaultValue || []), _useState2 = _slicedToArray(_useState, 2), fileList = _useState2[0], setFileList = _useState2[1];
-  var _useState3 = useState([]), _useState4 = _slicedToArray(_useState3, 2), uploadQueue = _useState4[0], setUploadQueue = _useState4[1];
-  useEffect(function() {
-    if (value) {
-      setFileList(value);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, uploadIcon = _defaultProps$props.uploadIcon, uploadLabel = _defaultProps$props.uploadLabel, name = _defaultProps$props.name, accept = _defaultProps$props.accept, defaultValue = _defaultProps$props.defaultValue, value = _defaultProps$props.value, previewType = _defaultProps$props.previewType, fit = _defaultProps$props.fit, disabled = _defaultProps$props.disabled, multiple = _defaultProps$props.multiple, url = _defaultProps$props.url, previewUrl = _defaultProps$props.previewUrl, headers = _defaultProps$props.headers, timeout = _defaultProps$props.timeout, method = _defaultProps$props.method, xhrState = _defaultProps$props.xhrState, withCredentials = _defaultProps$props.withCredentials, data = _defaultProps$props.data, preview = _defaultProps$props.preview, deletable = _defaultProps$props.deletable, maxCount = _defaultProps$props.maxCount, capture = _defaultProps$props.capture, maxFileSize = _defaultProps$props.maxFileSize, className = _defaultProps$props.className, autoUpload = _defaultProps$props.autoUpload, clearInput = _defaultProps$props.clearInput, onStart = _defaultProps$props.onStart, onDelete = _defaultProps$props.onDelete, _onChange = _defaultProps$props.onChange, onFileItemClick = _defaultProps$props.onFileItemClick, onProgress = _defaultProps$props.onProgress, onSuccess = _defaultProps$props.onSuccess, onUpdate = _defaultProps$props.onUpdate, onFailure = _defaultProps$props.onFailure, onOversize = _defaultProps$props.onOversize, beforeUpload = _defaultProps$props.beforeUpload, beforeXhrUpload = _defaultProps$props.beforeXhrUpload, beforeDelete2 = _defaultProps$props.beforeDelete, restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _usePropsValue = usePropsValue({
+    value,
+    defaultValue,
+    finalValue: [],
+    onChange: function onChange(v) {
+      _onChange === null || _onChange === void 0 ? void 0 : _onChange(v);
     }
-  }, [value]);
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), fileList = _usePropsValue2[0], setFileList = _usePropsValue2[1];
+  var _useState = useState([]), _useState2 = _slicedToArray(_useState, 2), uploadQueue = _useState2[0], setUploadQueue = _useState2[1];
   var classes = classNames(className, "nut-uploader");
   useImperativeHandle(ref, function() {
     return {
@@ -204,8 +299,9 @@ var InternalUploader = function InternalUploader2(props, ref) {
     var uploadOption = new UploadOptions();
     uploadOption.url = url;
     for (var _i2 = 0, _Object$entries2 = Object.entries(data); _i2 < _Object$entries2.length; _i2++) {
+      var _fileItem$formData;
       var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2), key = _Object$entries2$_i[0], value2 = _Object$entries2$_i[1];
-      fileItem.formData.append(key, value2);
+      (_fileItem$formData = fileItem.formData) === null || _fileItem$formData === void 0 ? void 0 : _fileItem$formData.append(key, value2);
     }
     uploadOption.formData = fileItem.formData;
     uploadOption.timeout = timeout * 1;
@@ -215,77 +311,68 @@ var InternalUploader = function InternalUploader2(props, ref) {
     uploadOption.withCredentials = withCredentials;
     uploadOption.beforeXhrUpload = beforeXhrUpload;
     try {
-      uploadOption.sourceFile = fileItem.formData.get(name);
+      var _fileItem$formData2;
+      uploadOption.sourceFile = (_fileItem$formData2 = fileItem.formData) === null || _fileItem$formData2 === void 0 ? void 0 : _fileItem$formData2.get(name);
     } catch (error) {
       console.warn(error);
     }
     uploadOption.onStart = function(option) {
       clearUploadQueue(index);
-      setFileList(function(fileList2) {
-        fileList2.map(function(item) {
-          if (item.uid === fileItem.uid) {
-            item.status = "ready";
-            item.message = locale.uploader.readyUpload;
-          }
-          return item;
-        });
-        return _toConsumableArray(fileList2);
-      });
+      setFileList(fileList.map(function(item) {
+        if (item.uid === fileItem.uid) {
+          item.status = "ready";
+          item.message = locale.uploader.readyUpload;
+        }
+        return item;
+      }));
       onStart && onStart(option);
     };
     uploadOption.onProgress = function(e, option) {
-      setFileList(function(fileList2) {
-        fileList2.map(function(item) {
-          if (item.uid === fileItem.uid) {
-            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 _toConsumableArray(fileList2);
-      });
+      setFileList(fileList.map(function(item) {
+        if (item.uid === fileItem.uid) {
+          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;
+      }));
     };
     uploadOption.onSuccess = function(responseText, option) {
-      setFileList(function(fileList2) {
-        onUpdate && onUpdate(fileList2);
-        fileList2.map(function(item) {
-          if (item.uid === fileItem.uid) {
-            item.status = "success";
-            item.message = locale.uploader.success;
-            item.responseText = responseText;
-          }
-          return item;
-        });
-        return _toConsumableArray(fileList2);
+      var list = fileList.map(function(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 || onUpdate === void 0 ? void 0 : onUpdate(list);
+      onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess({
         responseText,
         option,
-        fileList
+        fileList: list
       });
     };
     uploadOption.onFailure = function(responseText, option) {
-      setFileList(function(fileList2) {
-        fileList2.map(function(item) {
-          if (item.uid === fileItem.uid) {
-            item.status = "error";
-            item.message = locale.uploader.error;
-            item.responseText = responseText;
-          }
-          return item;
-        });
-        return _toConsumableArray(fileList2);
+      var list = fileList.map(function(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 || onFailure === void 0 ? void 0 : onFailure({
         responseText,
         option,
-        fileList
+        fileList: list
       });
     };
     var task = new Upload(uploadOption);
@@ -308,11 +395,7 @@ var InternalUploader = function InternalUploader2(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")) {
         var reader = new FileReader();
@@ -323,8 +406,7 @@ var InternalUploader = function InternalUploader2(props, ref) {
         };
         reader.readAsDataURL(file);
       } else {
-        fileList.push(fileItem);
-        setFileList(_toConsumableArray(fileList));
+        setFileList([].concat(_toConsumableArray(fileList), [fileItem]));
       }
     });
   };
@@ -351,9 +433,11 @@ var InternalUploader = function InternalUploader2(props, ref) {
     return filterFile;
   };
   var deleted = function deleted2(file, index) {
-    fileList.splice(index, 1);
-    onDelete && onDelete(file, fileList);
-    setFileList(_toConsumableArray(fileList));
+    var deletedFileList = fileList.filter(function(file2, idx) {
+      return idx !== index;
+    });
+    onDelete === null || onDelete === void 0 ? void 0 : onDelete(file, deletedFileList);
+    setFileList(deletedFileList);
   };
   var onDeleteItem = function onDeleteItem2(file, index) {
     clearUploadQueue(index);
@@ -379,134 +463,50 @@ var InternalUploader = function InternalUploader2(props, ref) {
       var _files = filterFiles(new Array().slice.call(files));
       readFile(_files);
     }
-    onChange && onChange({
-      fileList,
-      event
-    });
+    setFileList(fileList);
     if (clearInput) {
       clearInputValue($el);
     }
   };
   var handleItemClick = function handleItemClick2(file) {
-    onFileItemClick && onFileItemClick(file);
+    onFileItemClick === null || onFileItemClick === void 0 ? void 0 : onFileItemClick(file);
   };
   return React__default.createElement("div", _objectSpread({
     className: classes
   }, restProps), (children || previewType === "list") && React__default.createElement("div", {
     className: "nut-uploader__slot"
-  }, React__default.createElement(React__default.Fragment, null, children || React__default.createElement(Button, {
+  }, children || React__default.createElement(Button, {
     size: "small",
     type: "primary"
-  }, "上传文件"), maxCount > fileList.length && React__default.createElement(React__default.Fragment, null, capture ? React__default.createElement("input", {
-    className: "nut-uploader__input",
-    type: "file",
-    capture: "user",
-    name,
-    accept,
-    disabled,
-    multiple,
-    onChange: fileChange
-  }) : React__default.createElement("input", {
+  }, "上传文件"), maxCount > fileList.length && React__default.createElement("input", {
     className: "nut-uploader__input",
     type: "file",
+    capture,
     name,
     accept,
     disabled,
     multiple,
     onChange: fileChange
-  })))), fileList.length !== 0 && Array.isArray(fileList) && fileList.map(function(item, index) {
-    return React__default.createElement("div", {
-      className: "nut-uploader__preview ".concat(previewType),
-      key: item.uid
-    }, previewType === "picture" && deletable && React__default.createElement(Failure, {
-      color: "rgba(0,0,0,0.6)",
-      className: "close",
-      onClick: function onClick() {
-        return onDeleteItem(item, index);
-      }
-    }), previewType === "picture" && !children && React__default.createElement("div", {
-      className: "nut-uploader__preview-img"
-    }, item.status === "ready" ? React__default.createElement("div", {
-      className: "nut-uploader__preview__progress"
-    }, React__default.createElement("div", {
-      className: "nut-uploader__preview__progress__msg"
-    }, item.message)) : item.status !== "success" && React__default.createElement("div", {
-      className: "nut-uploader__preview__progress"
-    }, item.failIcon !== " " && item.loadingIcon !== " " && (item.status === "error" ? item.failIcon || React__default.createElement(Failure, {
-      color: "#fff"
-    }) : item.loadingIcon || React__default.createElement(Loading, {
-      className: "nut-icon-loading",
-      color: "#fff"
-    })), React__default.createElement("div", {
-      className: "nut-uploader__preview__progress__msg"
-    }, item.message)), item.type.includes("image") ? React__default.createElement(React__default.Fragment, null, item.url && React__default.createElement("img", {
-      className: "nut-uploader__preview-img__c",
-      style: {
-        objectFit: fit
-      },
-      src: item.url,
-      alt: "",
-      onClick: function onClick() {
-        return handleItemClick(item);
-      }
-    })) : React__default.createElement(React__default.Fragment, null, previewUrl ? React__default.createElement("img", {
-      className: "nut-uploader__preview-img__c",
-      src: previewUrl,
-      alt: "",
-      onClick: function onClick() {
-        return handleItemClick(item);
-      }
-    }) : React__default.createElement("div", {
-      className: "nut-uploader__preview-img__file"
-    }, React__default.createElement("div", {
-      onClick: function onClick() {
-        return handleItemClick(item);
-      },
-      className: "nut-uploader__preview-img__file__name"
-    }, React__default.createElement(Link, {
-      color: "#808080"
-    }), React__default.createElement("span", null, " ", item.name)))), item.status === "success" ? React__default.createElement("div", {
-      className: "tips"
-    }, item.name) : null), previewType === "list" && React__default.createElement("div", {
-      className: "nut-uploader__preview-list"
-    }, React__default.createElement("div", {
-      className: "nut-uploader__preview-img__file__name ".concat(item.status),
-      onClick: function onClick() {
-        return handleItemClick(item);
-      }
-    }, React__default.createElement(Link, null), React__default.createElement("span", null, " ", item.name)), deletable && React__default.createElement(Del, {
-      color: "#808080",
-      className: "nut-uploader__preview-img__file__del",
-      onClick: function onClick() {
-        return onDeleteItem(item, index);
-      }
-    }), item.status === "uploading" && 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 && React__default.createElement("div", {
-    className: "nut-uploader__upload ".concat(previewType, " ").concat(disabled ? "nut-uploader__upload-disabled" : "")
+  })), React__default.createElement(Preview, _objectSpread({}, {
+    fileList,
+    previewType,
+    deletable,
+    onDeleteItem,
+    handleItemClick,
+    previewUrl,
+    children
+  })), maxCount > fileList.length && previewType === "picture" && !children && React__default.createElement("div", {
+    className: classNames("nut-uploader__upload", previewType, {
+      "nut-uploader__upload-disabled": disabled
+    })
   }, React__default.createElement("div", {
     className: "nut-uploader__icon"
-  }, uploadIcon || React__default.createElement(Photograph, {
-    width: "20px",
-    height: "20px",
-    color: "#808080"
-  }), React__default.createElement("span", {
+  }, uploadIcon, React__default.createElement("span", {
     className: "nut-uploader__icon-tip"
-  }, uploadLabel)), capture ? React__default.createElement("input", {
-    className: "nut-uploader__input",
-    type: "file",
-    capture: "user",
-    name,
-    accept,
-    disabled,
-    multiple,
-    onChange: fileChange
-  }) : React__default.createElement("input", {
+  }, uploadLabel)), React__default.createElement("input", {
     className: "nut-uploader__input",
     type: "file",
+    capture,
     name,
     accept,
     disabled,