@arco-design/mobile-react 2.30.10 → 2.31.0

package/cjs/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/cjs/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/cjs/uploader/type.js

@@ -0,0 +1,3 @@
+"use strict";
+
+exports.__esModule = true;

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

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

package/cjs/uploader/upload/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+exports.__esModule = true;
+
+var _type = require("./type");
+
+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];
+});
+
+var _upload = require("./upload");
+
+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/cjs/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/cjs/uploader/upload/type.js

@@ -0,0 +1,3 @@
+"use strict";
+
+exports.__esModule = true;

package/cjs/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/cjs/uploader/upload/upload.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.parseFile = exports.Upload = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _es6Promise = require("es6-promise");
+
+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;