@arco-design/mobile-react 2.30.9 → 2.31.0

package/umd/uploader/index.js

@@ -0,0 +1,178 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "@arco-design/mobile-utils", "../context-provider", "../button", "../_helpers", "../icon", "../loading", "./upload", "./type"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("../button"), require("../_helpers"), require("../icon"), require("../loading"), require("./upload"), require("./type"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.mobileUtils, global.contextProvider, global.button, global._helpers, global.icon, global.loading, global.upload, global.type);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _mobileUtils, _contextProvider, _button, _helpers, _icon, _loading, _upload, _type) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  var _exportNames = {};
+  _exports.default = void 0;
+  _react = _interopRequireWildcard(_react);
+  _button = _interopRequireDefault(_button);
+  _loading = _interopRequireDefault(_loading);
+  Object.keys(_type).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+    if (key in _exports && _exports[key] === _type[key]) return;
+    _exports[key] = _type[key];
+  });
+
+  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+  var Uploader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    var _props$className = props.className,
+        className = _props$className === void 0 ? '' : _props$className,
+        style = props.style,
+        _props$files = props.files,
+        files = _props$files === void 0 ? [] : _props$files,
+        _props$accept = props.accept,
+        accept = _props$accept === void 0 ? undefined : _props$accept,
+        _props$multiple = props.multiple,
+        multiple = _props$multiple === void 0 ? false : _props$multiple,
+        capture = props.capture,
+        _props$limit = props.limit,
+        limit = _props$limit === void 0 ? 0 : _props$limit,
+        _props$hideStatus = props.hideStatus,
+        hideStatus = _props$hideStatus === void 0 ? false : _props$hideStatus,
+        _props$alwaysShowSele = props.alwaysShowSelect,
+        alwaysShowSelect = _props$alwaysShowSele === void 0 ? false : _props$alwaysShowSele,
+        disabled = props.disabled,
+        renderDeleteArea = props.renderDeleteArea,
+        renderLoadedArea = props.renderLoadedArea,
+        renderLoadingArea = props.renderLoadingArea,
+        renderErrorArea = props.renderErrorArea,
+        renderFileIndexArea = props.renderFileIndexArea,
+        renderUploadArea = props.renderUploadArea,
+        renderFileList = props.renderFileList;
+    var domRef = (0, _react.useRef)(null);
+    var fileRef = (0, _react.useRef)(null);
+    var cacheRef = (0, _helpers.useLatestRef)(files);
+    var uploadFunc = new _upload.Upload(props, fileRef, cacheRef);
+    (0, _react.useImperativeHandle)(ref, function () {
+      return {
+        dom: domRef.current
+      };
+    });
+
+    var uploaderSelect = function uploaderSelect(prefixCls, locale) {
+      var showSelect = files.length < (limit || Infinity);
+      return (showSelect || alwaysShowSelect) && /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixCls + "-uploader-add",
+        onClick: uploadFunc.handleSelect
+      }, /*#__PURE__*/_react.default.createElement("input", {
+        type: "file",
+        accept: accept,
+        capture: capture,
+        onChange: function onChange(e) {
+          return uploadFunc.handleChange(e);
+        },
+        multiple: multiple,
+        ref: fileRef
+      }), renderUploadArea && renderUploadArea() || /*#__PURE__*/_react.default.createElement(_button.default, {
+        className: prefixCls + "-uploader-add-button",
+        size: "medium",
+        icon: /*#__PURE__*/_react.default.createElement(_icon.IconUpload, null),
+        disabled: disabled
+      }, locale.Uploader.uploadBtn));
+    };
+
+    var getUploadList = function getUploadList(prefixCls, locale) {
+      var generateItemArea = function generateItemArea(fileItem, index, render, part, defaultArea) {
+        if (render) {
+          var node = render(fileItem, index);
+          return node ? /*#__PURE__*/_react.default.createElement("div", {
+            className: prefixCls + "-uploader-list-item-" + part
+          }, node) : node;
+        }
+
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: prefixCls + "-uploader-list-item-" + part
+        }, defaultArea);
+      };
+
+      return renderFileList && renderFileList({
+        retryUpload: uploadFunc.retryUpload,
+        deleteFile: uploadFunc.deleteFile
+      }) || /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixCls + "-uploader-list"
+      }, (limit && limit < files.length ? files.slice(0, limit) : files).map(function (fileItem, index) {
+        var _cls, _cls2;
+
+        var file = fileItem.file,
+            status = fileItem.status;
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: prefixCls + "-uploader-list-item",
+          key: index,
+          onClick: function onClick(e) {
+            return uploadFunc.handleClick(e, fileItem, index);
+          }
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: prefixCls + "-uploader-list-item-container"
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: prefixCls + "-uploader-list-item-wrapper"
+        }, generateItemArea(fileItem, index, renderFileIndexArea, 'file', /*#__PURE__*/_react.default.createElement(_icon.IconFile, {
+          className: prefixCls + "-uploader-list-item-file-icon"
+        })), /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _mobileUtils.cls)(prefixCls + "-uploader-list-item-text", (_cls = {}, _cls[prefixCls + "-uploader-list-item-text-error"] = status === 'error', _cls))
+        }, file.name)), !hideStatus && /*#__PURE__*/_react.default.createElement("div", {
+          className: prefixCls + "-uploader-list-item-status"
+        }, status === 'loaded' && generateItemArea(fileItem, index, renderLoadedArea, 'loaded', /*#__PURE__*/_react.default.createElement(_icon.IconCheck, null)), status === 'loading' && generateItemArea(fileItem, index, renderLoadingArea, 'loading', /*#__PURE__*/_react.default.createElement(_loading.default, {
+          type: "circle",
+          radius: 7
+        })), status === 'error' && /*#__PURE__*/_react.default.createElement("div", {
+          onClick: function onClick() {
+            return uploadFunc.retryUpload(index);
+          }
+        }, generateItemArea(fileItem, index, renderErrorArea, 'error', /*#__PURE__*/_react.default.createElement("span", null, locale.Uploader.retryUpload))))), /*#__PURE__*/_react.default.createElement("div", {
+          className: prefixCls + "-uploader-list-item-delete",
+          onClick: function onClick() {
+            return uploadFunc.deleteFile(index);
+          }
+        }, renderDeleteArea && renderDeleteArea(fileItem, index) || /*#__PURE__*/_react.default.createElement(_icon.IconDelete, {
+          className: (0, _mobileUtils.cls)(prefixCls + "-uploader-list-item-delete-icon", (_cls2 = {}, _cls2[prefixCls + "-uploader-list-item-delete-icon-disabled"] = disabled, _cls2))
+        })));
+      }));
+    };
+
+    return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
+      var _cls3;
+
+      var prefixCls = _ref.prefixCls,
+          _ref$locale = _ref.locale,
+          locale = _ref$locale === void 0 ? _mobileUtils.defaultLocale : _ref$locale;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefixCls + "-uploader", className, (_cls3 = {}, _cls3[prefixCls + "-uploader-disabled"] = disabled, _cls3)),
+        style: style,
+        ref: domRef
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixCls + "-uploader-container"
+      }, uploaderSelect(prefixCls, locale), getUploadList(prefixCls, locale)));
+    });
+  });
+  /**
+   * 文件上传组件
+   * @en Uploader Component
+   * @type 数据录入
+   * @type_en Data Entry
+   * @name 文件上传
+   * @name_en Uploader
+   * @displayName Uploader
+   */
+
+  var _default = (0, _mobileUtils.componentWrapper)(Uploader, 'Uploader');
+
+  _exports.default = _default;
+});