@arco-design/mobile-react 2.31.6 → 2.33.0

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

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

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

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

package/esnext/uploader/upload/index.js

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

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

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

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

@@ -0,0 +1,123 @@
+import { Promise } from 'es6-promise';
+export class Upload {
+    constructor(props, fileRef, cacheRef) {
+        // 解析文件生成预览
+        this.handleFile = (newFiles) => {
+            Promise.all(newFiles.map(file => parseFile(file))).then(parseFiles => {
+                const res = parseFiles.map((url, index) => ({
+                    url,
+                    status: typeof this.props.upload === 'function' ? 'loading' : 'loaded',
+                    file: newFiles[index],
+                }));
+                this.cacheRef.current = [...this.cacheRef.current, ...res];
+                this.props.onChange([...this.cacheRef.current]);
+                // 执行upload
+                if (typeof this.props.upload === 'function') {
+                    newFiles.forEach(_file => {
+                        this.props.upload(this.cacheRef.current.find(({ file }) => file === _file))
+                            .then(data => {
+                            const index = this.cacheRef.current.findIndex(({ file }) => file === _file);
+                            if (index !== -1) {
+                                this.cacheRef.current[index] = {
+                                    ...this.cacheRef.current[index],
+                                    ...data,
+                                    status: 'loaded',
+                                };
+                            }
+                        })
+                            .catch(() => {
+                            const index = this.cacheRef.current.findIndex(({ file }) => file === _file);
+                            if (index !== -1) {
+                                this.cacheRef.current[index].status = 'error';
+                            }
+                        })
+                            .finally(() => {
+                            this.props.onChange([...this.cacheRef.current]);
+                        });
+                    });
+                }
+            });
+        };
+        this.handleChange = (event, fromAdapter) => {
+            const newFiles = Array.prototype.filter.call(event.target.files || [], 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 = (index) => {
+            this.props.onDeleteClick && this.props.onDeleteClick(index);
+            this.props.onChange(this.props.files.filter((_i, j) => j !== index));
+        };
+        // 重新上传
+        this.retryUpload = (index) => {
+            this.deleteFile(index);
+            this.handleFile([this.props.files[index].file]);
+        };
+        this.handleSelect = (e) => {
+            if (e.target !== this.fileRef.current) {
+                this.props.onUploadClick && this.props.onUploadClick();
+                this.props.selectAdapter
+                    ? this.props
+                        .selectAdapter()
+                        .then(value => this.handleChange({ target: { files: value.files } }, true))
+                    : this.fileRef.current?.click();
+            }
+        };
+        this.handleClick = (e, file, index) => {
+            clearTimeout(this.timeOutEvent);
+            if (this.timeOutEvent !== 0) {
+                this.props.onClick?.(e, file, index);
+            }
+        };
+        this.handleTouchStart = (e, image, index) => {
+            this.timeOutEvent = setTimeout(() => {
+                this.timeOutEvent = 0;
+                this.props.onLongPress?.(e, image, index);
+            }, 750);
+        };
+        this.props = { ...props };
+        this.fileRef = fileRef;
+        this.cacheRef = cacheRef;
+        this.init();
+    }
+    init() {
+        !this.props.files && (this.props.files = []);
+        !this.props.limit && (this.props.limit = 0);
+        !this.props.onChange && (this.props.onChange = () => null);
+    }
+}
+export const parseFile = (file) => {
+    return new Promise((resolve, reject) => {
+        if (file.url) {
+            resolve(file.url);
+        }
+        else {
+            const reader = new FileReader();
+            reader.onload = e => {
+                const dataURL = e.target?.result;
+                if (!dataURL) {
+                    reject(new Error('file parse error'));
+                }
+                resolve(dataURL);
+            };
+            reader.onerror = () => {
+                reject(new Error('file parse error'));
+            };
+            reader.readAsDataURL(file);
+        }
+    });
+};

package/esnext-tsconfig.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "strictNullChecks": true,
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "experimentalDecorators": true,
+        "allowSyntheticDefaultImports": true,
+        "jsx": "react",
+        "noUnusedParameters": true,
+        "noUnusedLocals": true,
+        "module": "ESNext",
+        "target": "ESNext",
+        "declaration": true,
+        "lib": ["esnext", "dom"]
+    },
+    "include": [
+        "packages/arcodesign/components/**/*.ts",
+        "packages/arcodesign/components/**/*.tsx",
+        "packages/common-widgets/**/*.ts",
+        "sites/**/*.d.ts"
+    ],
+    "exclude": ["node_modules"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.31.6",
+    "version": "2.33.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.18.6",
+        "@arco-design/mobile-utils": "2.20.0",
         "@arco-design/transformable": "^1.0.0",
         "@babel/runtime": "^7",
         "lodash.throttle": "^4.1.1",
@@ -47,5 +47,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "8b2b5c2694e65be7a57a4f8d8d1af5db4601fda2"
+    "gitHead": "7b0a8e3446dd2429a7a14a4a4d86688aa726887f"
 }

package/umd/_helpers/index.d.ts

@@ -5,6 +5,7 @@
 import { CSSProperties } from 'react';
 export * from './hooks';
 export * from './react-dom';
+export * from './render';
 export * from './type';
 /**
  * 获取带浏览器前缀的样式

package/umd/_helpers/index.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "@babel/runtime/helpers/extends", "./hooks", "./react-dom", "./type"], factory);
+    define(["exports", "@babel/runtime/helpers/extends", "./hooks", "./react-dom", "./render", "./type"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("@babel/runtime/helpers/extends"), require("./hooks"), require("./react-dom"), require("./type"));
+    factory(exports, require("@babel/runtime/helpers/extends"), require("./hooks"), require("./react-dom"), require("./render"), require("./type"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global._extends, global.hooks, global.reactDom, global.type);
+    factory(mod.exports, global._extends, global.hooks, global.reactDom, global.render, global.type);
     global.index = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends3, _hooks, _reactDom, _type) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends3, _hooks, _reactDom, _render, _type) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -37,6 +37,12 @@
     if (key in _exports && _exports[key] === _reactDom[key]) return;
     _exports[key] = _reactDom[key];
   });
+  Object.keys(_render).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+    if (key in _exports && _exports[key] === _render[key]) return;
+    _exports[key] = _render[key];
+  });
   Object.keys(_type).forEach(function (key) {
     if (key === "default" || key === "__esModule") return;
     if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;