@arco-design/mobile-react 2.30.9 → 2.31.0

package/esm/uploader/index.js

@@ -0,0 +1,150 @@
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import { cls, defaultLocale, componentWrapper } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import Button from '../button';
+import { useLatestRef } from '../_helpers';
+import { IconUpload, IconDelete, IconCheck, IconFile } from '../icon';
+import Loading from '../loading';
+import { Upload } from './upload';
+export * from './type';
+var Uploader = /*#__PURE__*/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 = useRef(null);
+  var fileRef = useRef(null);
+  var cacheRef = useLatestRef(files);
+  var uploadFunc = new Upload(props, fileRef, cacheRef);
+  useImperativeHandle(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+
+  var uploaderSelect = function uploaderSelect(prefixCls, locale) {
+    var showSelect = files.length < (limit || Infinity);
+    return (showSelect || alwaysShowSelect) && /*#__PURE__*/React.createElement("div", {
+      className: prefixCls + "-uploader-add",
+      onClick: uploadFunc.handleSelect
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "file",
+      accept: accept,
+      capture: capture,
+      onChange: function onChange(e) {
+        return uploadFunc.handleChange(e);
+      },
+      multiple: multiple,
+      ref: fileRef
+    }), renderUploadArea && renderUploadArea() || /*#__PURE__*/React.createElement(Button, {
+      className: prefixCls + "-uploader-add-button",
+      size: "medium",
+      icon: /*#__PURE__*/React.createElement(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.createElement("div", {
+          className: prefixCls + "-uploader-list-item-" + part
+        }, node) : node;
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: prefixCls + "-uploader-list-item-" + part
+      }, defaultArea);
+    };
+
+    return renderFileList && renderFileList({
+      retryUpload: uploadFunc.retryUpload,
+      deleteFile: uploadFunc.deleteFile
+    }) || /*#__PURE__*/React.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.createElement("div", {
+        className: prefixCls + "-uploader-list-item",
+        key: index,
+        onClick: function onClick(e) {
+          return uploadFunc.handleClick(e, fileItem, index);
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: prefixCls + "-uploader-list-item-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: prefixCls + "-uploader-list-item-wrapper"
+      }, generateItemArea(fileItem, index, renderFileIndexArea, 'file', /*#__PURE__*/React.createElement(IconFile, {
+        className: prefixCls + "-uploader-list-item-file-icon"
+      })), /*#__PURE__*/React.createElement("div", {
+        className: cls(prefixCls + "-uploader-list-item-text", (_cls = {}, _cls[prefixCls + "-uploader-list-item-text-error"] = status === 'error', _cls))
+      }, file.name)), !hideStatus && /*#__PURE__*/React.createElement("div", {
+        className: prefixCls + "-uploader-list-item-status"
+      }, status === 'loaded' && generateItemArea(fileItem, index, renderLoadedArea, 'loaded', /*#__PURE__*/React.createElement(IconCheck, null)), status === 'loading' && generateItemArea(fileItem, index, renderLoadingArea, 'loading', /*#__PURE__*/React.createElement(Loading, {
+        type: "circle",
+        radius: 7
+      })), status === 'error' && /*#__PURE__*/React.createElement("div", {
+        onClick: function onClick() {
+          return uploadFunc.retryUpload(index);
+        }
+      }, generateItemArea(fileItem, index, renderErrorArea, 'error', /*#__PURE__*/React.createElement("span", null, locale.Uploader.retryUpload))))), /*#__PURE__*/React.createElement("div", {
+        className: prefixCls + "-uploader-list-item-delete",
+        onClick: function onClick() {
+          return uploadFunc.deleteFile(index);
+        }
+      }, renderDeleteArea && renderDeleteArea(fileItem, index) || /*#__PURE__*/React.createElement(IconDelete, {
+        className: cls(prefixCls + "-uploader-list-item-delete-icon", (_cls2 = {}, _cls2[prefixCls + "-uploader-list-item-delete-icon-disabled"] = disabled, _cls2))
+      })));
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
+    var _cls3;
+
+    var prefixCls = _ref.prefixCls,
+        _ref$locale = _ref.locale,
+        locale = _ref$locale === void 0 ? defaultLocale : _ref$locale;
+    return /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-uploader", className, (_cls3 = {}, _cls3[prefixCls + "-uploader-disabled"] = disabled, _cls3)),
+      style: style,
+      ref: domRef
+    }, /*#__PURE__*/React.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
+ */
+
+export default componentWrapper(Uploader, 'Uploader');