@arco-design/mobile-react 2.30.9 → 2.31.0

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

@@ -0,0 +1 @@
+export {};

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

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

package/esm/uploader/upload/index.js

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,175 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { Promise } from 'es6-promise';
+export 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) {
+      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] = _extends({}, _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 = _extends({}, 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;
+}();
+export var parseFile = function parseFile(file) {
+  return new 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);
+    }
+  });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.30.9",
+    "version": "2.31.0",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "2.17.9",
+        "@arco-design/mobile-utils": "2.18.0",
         "@arco-design/transformable": "^1.0.0",
         "lodash.throttle": "^4.1.1",
         "resize-observer-polyfill": "^1.5.1"
@@ -49,5 +49,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "6831c908713b02b4f7738c793ea4118e17f03458"
+    "gitHead": "d531e333e595adbbfc5f78552d07f983a4978d0a"
 }

package/tokens/app/arcodesign/default/css-variables.less

@@ -1064,4 +1064,31 @@
     --skeleton-grid-text-height: ~`pxtorem(16)`;
     --skeleton-medium-gutter: ~`pxtorem(8)`;
     --skeleton-large-gutter: ~`pxtorem(20)`;
+    --uploader-item-height: ~`pxtorem(36)`;
+    --uploader-item-margin-top: ~`pxtorem(16)`;
+    --uploader-item-padding: 0 ~`pxtorem(12)`;
+    --dark-uploader-item-background-color: var(--dark-card-background-color);
+    --uploader-item-background-color: var(--card-background-color);
+    --uploader-file-icon-font-size: ~`pxtorem(16)`;
+    --uploader-file-icon-margin-right: ~`pxtorem(12)`;
+    --dark-uploader-file-icon-color: var(--dark-sub-font-color);
+    --uploader-file-icon-color: var(--sub-font-color);
+    --uploader-item-text-font-size: ~`pxtorem(14)`;
+    --uploader-item-border-radius: ~`pxtorem(2)`;
+    --dark-uploader-item-text-color: var(--dark-font-color);
+    --uploader-item-text-color: var(--font-color);
+    --uploader-loaded-icon-font-size: ~`pxtorem(16)`;
+    --dark-uploader-loaded-icon-color: var(--dark-success-color);
+    --uploader-loaded-icon-color: var(--success-color);
+    --uploader-error-text-font-size: ~`pxtorem(12)`;
+    --dark-uploader-error-text-color: var(--dark-primary-color);
+    --uploader-error-text-color: var(--primary-color);
+    --uploader-delete-icon-font-size: ~`pxtorem(12)`;
+    --uploader-delete-icon-padding-left: ~`pxtorem(12)`;
+    --dark-uploader-delete-icon-color: var(--dark-sub-font-color);
+    --uploader-delete-icon-color: var(--sub-font-color);
+    --dark-uploader-disabled-delete-icon-color: var(--dark-disabled-color);
+    --uploader-disabled-delete-icon-color: var(--disabled-color);
+    --dark-uploader-item-text-error-color: var(--dark-danger-color);
+    --uploader-item-text-error-color: var(--danger-color);
 }

package/tokens/app/arcodesign/default/index.d.ts

@@ -1063,6 +1063,33 @@ export interface ArcodesignToken extends Record<string, string> {
     'skeleton-grid-text-height': string;
     'skeleton-medium-gutter': string;
     'skeleton-large-gutter': string;
+    'uploader-item-height': string;
+    'uploader-item-margin-top': string;
+    'uploader-item-padding': string;
+    'dark-uploader-item-background-color': string;
+    'uploader-item-background-color': string;
+    'uploader-file-icon-font-size': string;
+    'uploader-file-icon-margin-right': string;
+    'dark-uploader-file-icon-color': string;
+    'uploader-file-icon-color': string;
+    'uploader-item-text-font-size': string;
+    'uploader-item-border-radius': string;
+    'dark-uploader-item-text-color': string;
+    'uploader-item-text-color': string;
+    'uploader-loaded-icon-font-size': string;
+    'dark-uploader-loaded-icon-color': string;
+    'uploader-loaded-icon-color': string;
+    'uploader-error-text-font-size': string;
+    'dark-uploader-error-text-color': string;
+    'uploader-error-text-color': string;
+    'uploader-delete-icon-font-size': string;
+    'uploader-delete-icon-padding-left': string;
+    'dark-uploader-delete-icon-color': string;
+    'uploader-delete-icon-color': string;
+    'dark-uploader-disabled-delete-icon-color': string;
+    'uploader-disabled-delete-icon-color': string;
+    'dark-uploader-item-text-error-color': string;
+    'uploader-item-text-error-color': string;
 }
 declare const tokens: ArcodesignToken;
 export default tokens;