@arco-design/mobile-react 2.30.10 → 2.31.1

package/umd/uploader/style/index.less

@@ -0,0 +1,161 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-uploader {
+    &-container {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    &-add {
+        position: relative;
+        input {
+            position: absolute;
+            opacity: 0;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            display: none;
+        }
+    }
+    &-list {
+        width: 100%;
+        &-item {
+            display: flex;
+            align-items: center;
+            .use-var(height, uploader-item-height);
+            .use-var(margin-top, uploader-item-margin-top);
+            &-container {
+                flex: 1;
+                display: flex;
+                align-items: center;
+                height: 100%;
+                .use-var(border-radius, uploader-item-border-radius);
+                .use-var(background-color, uploader-item-background-color);
+                .use-var(padding, uploader-item-padding);
+            }
+            &-wrapper {
+                display: flex;
+                flex: 1;
+                align-items: center;
+            }
+            &-file {
+                display: flex;
+                .use-var(font-size, uploader-file-icon-font-size);
+                .use-var-with-rtl(margin-right, uploader-file-icon-margin-right);
+                &-icon {
+                    .use-var(color, uploader-file-icon-color);
+                }
+            }
+            &-text {
+                font-weight: 400;
+                .use-var(font-size, uploader-item-text-font-size);
+                .use-var(color, uploader-item-text-color);
+                &-error {
+                    .use-var(color, uploader-item-text-error-color);
+                }
+            }
+            &-loaded {
+                display: flex;
+                .use-var(font-size, uploader-loaded-icon-font-size);
+                .use-var(color, uploader-loaded-icon-color);
+            }
+            &-error {
+                font-weight: 400;
+                .use-var(font-size, uploader-error-text-font-size);
+                .use-var(color, uploader-error-text-color);
+            }
+            &-delete {
+                display: flex;
+                height: 100%;
+                align-items: center;
+                .use-var-with-rtl(padding-left, uploader-delete-icon-padding-left);
+                .use-var(font-size, uploader-delete-icon-font-size);
+                &-icon {
+                    .use-var(color, uploader-delete-icon-color);
+                    &-disabled {
+                        .use-var(color, uploader-disabled-delete-icon-color);
+                    }
+                }
+            }
+        }
+    }
+}
+
+.@{prefix}-uploader-disabled {
+    pointer-events: none;
+}
+
+/***************************************************
+ *                                                 *
+ *               Arco Theme Style                  *
+ *                                                 *
+ ***************************************************/
+& when (@use-dark-mode = 1) {
+    
+  .process-bg-color-with-config,
+  .process-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+    }
+  }
+  .wait-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+    }
+  }
+  .@{prefix}-uploader {
+    &-list {
+      &-item {
+        &-container {
+          @{arco-dark-mode-selector} & {
+            .use-var(background-color, dark-uploader-item-background-color);
+          }
+        }
+        &-file {
+          &-icon {
+            @{arco-dark-mode-selector} & {
+              .use-var(color, dark-uploader-file-icon-color);
+            }
+          }
+        }
+        &-text {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-uploader-item-text-color);
+          }
+          &-error {
+            @{arco-dark-mode-selector} & {
+              .use-var(color, dark-uploader-item-text-error-color);
+            }
+          }
+        }
+        &-loaded {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-uploader-loaded-icon-color);
+          }
+        }
+        &-error {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-uploader-error-text-color);
+          }
+        }
+        &-delete {
+          &-icon {
+            @{arco-dark-mode-selector} & {
+              .use-var(color, dark-uploader-delete-icon-color);
+            }
+            &-disabled {
+              @{arco-dark-mode-selector} & {
+                .use-var(color, dark-uploader-disabled-delete-icon-color);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

package/umd/uploader/type.d.ts

@@ -0,0 +1,108 @@
+import { InputHTMLAttributes } from 'react';
+import { UploadCommonProps, CommonFileItem } from './upload/type';
+export interface FileItem extends CommonFileItem {
+    /**
+     * 文件
+     * @en File
+     */
+    file: File;
+}
+export interface UploaderProps extends UploadCommonProps {
+    /**
+     * 自定义类名
+     * @en Custom className
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 可以选择的文件类型
+     * @en Available file types
+     * @default undefined
+     */
+    accept?: InputHTMLAttributes<unknown>['accept'];
+    /**
+     * 是否支持多选
+     * @en Whether to support multiple selection
+     */
+    multiple?: boolean;
+    /**
+     * 文件选取模式 File selection mode [capture MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
+     * @en Whether To Support Multiple Selection [capture MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
+     */
+    capture?: InputHTMLAttributes<unknown>['capture'];
+    /**
+     * 是否隐藏文件上传状态
+     * @en Whether to hide file upload status
+     * @default false
+     */
+    hideStatus?: boolean;
+    /**
+     * 是否总是展示选择Icon，默认情况下当文件数量超出limit值时会自动隐藏选择Icon
+     * @en Whether to always show Select Icon
+     * @default false
+     */
+    alwaysShowSelect?: boolean;
+    /**
+     * 禁用选择和删除图片
+     * @en Disable select & delete image
+     */
+    disabled?: boolean;
+    /**
+     * 自定义删除区域
+     * @en Defined delete area
+     */
+    renderDeleteArea?: (fileItem: FileItem, index: number) => React.ReactNode;
+    /**
+     * 自定义上传成功区域
+     * @en Defined loaded area
+     */
+    renderLoadedArea?: (fileItem: FileItem, index: number) => React.ReactNode;
+    /**
+     * 自定义上传中区域
+     * @en Defined loading area
+     */
+    renderLoadingArea?: (fileItem: FileItem, index: number) => React.ReactNode;
+    /**
+     * 自定义上传失败区域
+     * @en Defined error area
+     */
+    renderErrorArea?: (fileItem: FileItem, index: number) => React.ReactNode;
+    /**
+     * 自定义文件索引区域
+     * @en Defined file index area
+     */
+    renderFileIndexArea?: (fileItem: FileItem, index: number) => React.ReactNode;
+    /**
+     * 自定义上传按钮区域
+     * @en Defined upload button area
+     */
+    renderUploadArea?: () => React.ReactNode;
+    /**
+     * 自定义上传文件列表展示
+     * @en Defined file list display
+     */
+    renderFileList?: (methods: FileListMethods) => React.ReactNode;
+}
+export interface UploaderRef {
+    /**
+     * 最外层 DOM 元素
+     * @en The outer DOM element of the component
+     */
+    dom: HTMLDivElement | null;
+}
+export interface FileListMethods {
+    /**
+     * 重新上传
+     * @en Retry to upload
+     */
+    retryUpload: (index: number) => void;
+    /**
+     * 删除文件
+     * @en Delete file
+     */
+    deleteFile: (index: number) => void;
+}

package/umd/uploader/type.js

@@ -0,0 +1,17 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.type = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
+  "use strict";
+
+  _exports.__esModule = true;
+});

package/umd/uploader/upload/index.d.ts

@@ -0,0 +1,2 @@
+export * from './type';
+export * from './upload';

package/umd/uploader/upload/index.js

@@ -0,0 +1,27 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "./type", "./upload"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("./type"), require("./upload"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.type, global.upload);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _type, _upload) {
+  "use strict";
+
+  _exports.__esModule = true;
+  Object.keys(_type).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    if (key in _exports && _exports[key] === _type[key]) return;
+    _exports[key] = _type[key];
+  });
+  Object.keys(_upload).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    if (key in _exports && _exports[key] === _upload[key]) return;
+    _exports[key] = _upload[key];
+  });
+});

package/umd/uploader/upload/type.d.ts

@@ -0,0 +1,107 @@
+/// <reference types="react" />
+export interface AdapterFile {
+    /**
+     * 文件 url
+     * @en Url of file
+     */
+    url?: string;
+    /**
+     * 文件大小
+     * @en File size
+     */
+    size: number;
+    /**
+     * 文件名
+     * @en File name
+     */
+    name: string;
+}
+export interface SelectCallback {
+    /**
+     * 文件列表
+     * @en File list
+     */
+    files: AdapterFile[];
+}
+export interface CommonFileItem {
+    /**
+     * 文件地址
+     * @en file Url
+     */
+    url?: string;
+    /**
+     * 文件
+     * @en File
+     */
+    file?: File;
+    /**
+     * 文件状态
+     * @en Image Status
+     * @default 以文件自身加载状态而定
+     * @default_en According to inner status of the image
+     */
+    status?: 'loaded' | 'loading' | 'error';
+}
+export interface UploadCommonProps<FileItem extends CommonFileItem = CommonFileItem> {
+    /**
+     * 上传方法
+     * @en Upload function
+     */
+    upload?: (file: FileItem) => Promise<FileItem | null>;
+    /**
+     * 已选文件列表发生变化
+     * @en The list of selected files changes
+     */
+    onChange?: (fileList: FileItem[]) => void;
+    /**
+     * 文件大小限制，单位为K
+     * @en File size limit, in K
+     */
+    maxSize?: number;
+    /**
+     * 文件超过限制大小
+     * @en Image exceeds size limit
+     */
+    onMaxSizeExceed?: (file: File) => void;
+    /**
+     * 最多选择文件数，超出数量自动隐藏上传按钮，0表示不做限制
+     * @en Max pictures can choose, 0 means no restriction
+     * @default 0
+     */
+    limit?: number;
+    /**
+     * 选择文件数超过限制
+     * @en The number of pictures exceeds the limit
+     */
+    onLimitExceed?: (files: File[]) => void;
+    /**
+     * 已选择文件列表
+     * @en Selected files list
+     */
+    files: FileItem[];
+    /**
+     * 删除点击事件
+     * @en Delete area click event
+     */
+    onDeleteClick?: (index: number) => void;
+    /**
+     * 上传文件点击事件
+     * @en Upload area click event
+     */
+    onUploadClick?: () => void;
+    /**
+     * 文件选择适配器
+     * @en Select adaptor
+     */
+    selectAdapter?: () => Promise<SelectCallback>;
+    /**
+     * 文件点击
+     * @en click event
+     */
+    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>, file: FileItem, index: number) => void;
+    /**
+     * 文件长按事件
+     * @en long press event
+     */
+    onLongPress?: (e: React.TouchEvent<HTMLElement>, file: FileItem, index: number) => void;
+}

package/umd/uploader/upload/type.js

@@ -0,0 +1,17 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.type = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
+  "use strict";
+
+  _exports.__esModule = true;
+});

package/umd/uploader/upload/upload.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="node" />
+import React from 'react';
+import { Promise } from 'es6-promise';
+import { AdapterFile, CommonFileItem, UploadCommonProps } from './type';
+export declare class Upload<FileItem extends CommonFileItem = CommonFileItem> {
+    props: UploadCommonProps<FileItem>;
+    fileRef: React.MutableRefObject<HTMLInputElement | null>;
+    cacheRef: React.MutableRefObject<FileItem[]>;
+    timeOutEvent: NodeJS.Timeout | number;
+    constructor(props: UploadCommonProps<FileItem>, fileRef: React.MutableRefObject<HTMLInputElement | null>, cacheRef: React.MutableRefObject<FileItem[]>);
+    init(): void;
+    handleFile: (newFiles: File[]) => void;
+    handleChange: (event: any, fromAdapter?: boolean | undefined) => void;
+    deleteFile: (index: number) => void;
+    retryUpload: (index: number) => void;
+    handleSelect: (e: React.MouseEvent) => void;
+    handleClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, file: FileItem, index: number) => void;
+    handleTouchStart: (e: React.TouchEvent<HTMLDivElement>, image: FileItem, index: number) => void;
+}
+export declare const parseFile: (file: AdapterFile) => Promise<unknown>;

package/umd/uploader/upload/upload.js

@@ -0,0 +1,200 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "es6-promise"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("es6-promise"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.es6Promise);
+    global.upload = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _es6Promise) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.parseFile = _exports.Upload = void 0;
+  _extends2 = _interopRequireDefault(_extends2);
+
+  var Upload = /*#__PURE__*/function () {
+    // click && longPress
+    function Upload(props, fileRef, cacheRef) {
+      var _this = this;
+
+      this.props = void 0;
+      this.fileRef = void 0;
+      this.cacheRef = void 0;
+      this.timeOutEvent = void 0;
+
+      this.handleFile = function (newFiles) {
+        _es6Promise.Promise.all(newFiles.map(function (file) {
+          return parseFile(file);
+        })).then(function (parseFiles) {
+          var res = parseFiles.map(function (url, index) {
+            return {
+              url: url,
+              status: typeof _this.props.upload === 'function' ? 'loading' : 'loaded',
+              file: newFiles[index]
+            };
+          });
+          _this.cacheRef.current = [].concat(_this.cacheRef.current, res);
+
+          _this.props.onChange([].concat(_this.cacheRef.current)); // 执行upload
+
+
+          if (typeof _this.props.upload === 'function') {
+            newFiles.forEach(function (_file) {
+              _this.props.upload(_this.cacheRef.current.find(function (_ref) {
+                var file = _ref.file;
+                return file === _file;
+              })).then(function (data) {
+                var index = _this.cacheRef.current.findIndex(function (_ref2) {
+                  var file = _ref2.file;
+                  return file === _file;
+                });
+
+                if (index !== -1) {
+                  _this.cacheRef.current[index] = (0, _extends2.default)({}, _this.cacheRef.current[index], data, {
+                    status: 'loaded'
+                  });
+                }
+              }).catch(function () {
+                var index = _this.cacheRef.current.findIndex(function (_ref3) {
+                  var file = _ref3.file;
+                  return file === _file;
+                });
+
+                if (index !== -1) {
+                  _this.cacheRef.current[index].status = 'error';
+                }
+              }).finally(function () {
+                _this.props.onChange([].concat(_this.cacheRef.current));
+              });
+            });
+          }
+        });
+      };
+
+      this.handleChange = function (event, fromAdapter) {
+        var newFiles = Array.prototype.filter.call(event.target.files || [], function (file) {
+          // 过滤maxSize
+          if (_this.props.maxSize && file.size > _this.props.maxSize * 1024) {
+            _this.props.onMaxSizeExceed && _this.props.onMaxSizeExceed(file);
+            return false;
+          }
+
+          return true;
+        }) || [];
+
+        if (!fromAdapter) {
+          event.target.value = '';
+        } // 截断limit
+
+
+        if (_this.props.limit !== 0 && newFiles.length + _this.props.files.length > _this.props.limit) {
+          _this.props.onLimitExceed && _this.props.onLimitExceed(newFiles);
+          newFiles.length = _this.props.limit - _this.props.files.length;
+        }
+
+        _this.handleFile(newFiles);
+      };
+
+      this.deleteFile = function (index) {
+        _this.props.onDeleteClick && _this.props.onDeleteClick(index);
+
+        _this.props.onChange(_this.props.files.filter(function (_i, j) {
+          return j !== index;
+        }));
+      };
+
+      this.retryUpload = function (index) {
+        _this.deleteFile(index);
+
+        _this.handleFile([_this.props.files[index].file]);
+      };
+
+      this.handleSelect = function (e) {
+        if (e.target !== _this.fileRef.current) {
+          var _this$fileRef$current;
+
+          _this.props.onUploadClick && _this.props.onUploadClick();
+          _this.props.selectAdapter ? _this.props.selectAdapter().then(function (value) {
+            return _this.handleChange({
+              target: {
+                files: value.files
+              }
+            }, true);
+          }) : (_this$fileRef$current = _this.fileRef.current) == null ? void 0 : _this$fileRef$current.click();
+        }
+      };
+
+      this.handleClick = function (e, file, index) {
+        clearTimeout(_this.timeOutEvent);
+
+        if (_this.timeOutEvent !== 0) {
+          _this.props.onClick == null ? void 0 : _this.props.onClick(e, file, index);
+        }
+      };
+
+      this.handleTouchStart = function (e, image, index) {
+        _this.timeOutEvent = setTimeout(function () {
+          _this.timeOutEvent = 0;
+          _this.props.onLongPress == null ? void 0 : _this.props.onLongPress(e, image, index);
+        }, 750);
+      };
+
+      this.props = (0, _extends2.default)({}, props);
+      this.fileRef = fileRef;
+      this.cacheRef = cacheRef;
+      this.init();
+    }
+
+    var _proto = Upload.prototype;
+
+    _proto.init = function init() {
+      !this.props.files && (this.props.files = []);
+      !this.props.limit && (this.props.limit = 0);
+      !this.props.onChange && (this.props.onChange = function () {
+        return null;
+      });
+    } // 解析文件生成预览
+    ;
+
+    return Upload;
+  }();
+
+  _exports.Upload = Upload;
+
+  var parseFile = function parseFile(file) {
+    return new _es6Promise.Promise(function (resolve, reject) {
+      if (file.url) {
+        resolve(file.url);
+      } else {
+        var reader = new FileReader();
+
+        reader.onload = function (e) {
+          var _e$target;
+
+          var dataURL = (_e$target = e.target) == null ? void 0 : _e$target.result;
+
+          if (!dataURL) {
+            reject(new Error('file parse error'));
+          }
+
+          resolve(dataURL);
+        };
+
+        reader.onerror = function () {
+          reject(new Error('file parse error'));
+        };
+
+        reader.readAsDataURL(file);
+      }
+    });
+  };
+
+  _exports.parseFile = parseFile;
+});