@arco-design/mobile-react 2.30.10 → 2.31.1

package/cjs/transition/style/css/index.css

@@ -95,6 +95,56 @@
  * }
  * ```
  */
+/**
+ * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
+ * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @value css属性值
+ * @param @value {en} css property value
+ * @param @rules 自定义的复写规则，默认重置为initial
+ * @param @rules {en} customized rewrite rules, default to initial
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   .set-prop-with-rtl(right, auto);
+ * }
+ * ```
+ */
+/**
+ * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
+ * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @value css属性值
+ * @param @value {en} css property value
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   .set-value-with-rtl(text-align, left);
+ * }
+ * ```
+ */
+/**
+ * 在 rtl 模式下，自定义样式规则
+ * @desc {en} custom style in RTL mode
+ * @param @rules 对应的rtl模式下的规则
+ * @param @rules {en} property with rtl
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .style-with-rtl({
+ *         transform: scale(-1);
+ *     });
+ * }
+ * ```
+ */
 /**
  * 0.5px 的边框线
  * @desc {en} a border line of 0.5 pixels
@@ -396,40 +446,6 @@
  * }
  * ```
  */
-/**
- * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
- * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
- * @param @property css属性名
- * @param @property {en} css property
- * @param @value css属性值
- * @param @value {en} css property value
- * @param @rules 自定义的复写规则，默认重置为initial
- * @param @rules {en} customized rewrite rules, default to initial
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *   .set-prop-with-rtl(right, auto);
- * }
- * ```
- */
-/**
- * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
- * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
- * @param @property css属性名
- * @param @property {en} css property
- * @param @value css属性值
- * @param @value {en} css property value
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *   .set-value-with-rtl(text-align, left);
- * }
- * ```
- */
 /**
  * 设置Loading组件颜色
  * @desc {en} set Loading component color

package/cjs/uploader/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { UploaderRef, UploaderProps } from './type';
+export * from './type';
+declare const _default: React.ForwardRefExoticComponent<UploaderProps & React.RefAttributes<UploaderRef>> & {
+    displayName?: string | undefined;
+};
+/**
+ * 文件上传组件
+ * @en Uploader Component
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 文件上传
+ * @name_en Uploader
+ * @displayName Uploader
+ */
+export default _default;

package/cjs/uploader/index.js

@@ -0,0 +1,180 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+var _exportNames = {};
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _contextProvider = require("../context-provider");
+
+var _button = _interopRequireDefault(require("../button"));
+
+var _helpers = require("../_helpers");
+
+var _icon = require("../icon");
+
+var _loading = _interopRequireDefault(require("../loading"));
+
+var _upload = require("./upload");
+
+var _type = require("./type");
+
+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;