@arco-design/mobile-react 2.38.3 → 2.39.0

package/esnext/form/form-item.js

@@ -1,10 +1,9 @@
-/* eslint-disable react/no-unused-class-component-methods */
 import React, { forwardRef, PureComponent, useContext, useImperativeHandle, useRef, useState, } from 'react';
 import { cls, Validator, ValidatorType } from '@arco-design/mobile-utils';
-import { Promise } from 'es6-promise';
+import { Promise as ES6Promise } from 'es6-promise';
 import { FormItemContext } from './form-item-context';
 import { GlobalContext } from '../context-provider';
-import { FormInternalComponentType, ValueChangeType, } from './type';
+import { ValueChangeType, FormInternalComponentType } from './type';
 import { getDefaultValueForInterComponent, getErrorAndWarnings, isFieldRequired } from './utils';
 import { DefaultDatePickerLinkedContainer, DefaultPickerLinkedContainer } from './linked-container';
 class FormItemInner extends PureComponent {
@@ -51,7 +50,7 @@ class FormItemInner extends PureComponent {
         this.validateField = (validateTrigger) => {
             const { validateMessages } = this.context;
             const { getFieldValue } = this.context.form;
-            const { field, rules, onValidateStatusChange } = this.props;
+            const { field, rules, onValidateStatusChange, labelName } = this.props;
             const value = getFieldValue(field);
             // rules: if validateTrigger is not defined, all rules will be validated
             // if validateTrigger is defined, only rules  with validateTrigger  or  without rule.validateTrigger  will be validated
@@ -63,17 +62,18 @@ class FormItemInner extends PureComponent {
                 : rules;
             if (curRules?.length && field) {
                 const fieldDom = this.props.getFormItemRef();
-                const fieldValidator = new Validator({ [field]: curRules }, { validateMessages });
-                return new Promise(resolve => {
-                    fieldValidator.validate({ [field]: value }, (errorsMap) => {
-                        const { errors, warnings, errorTypes } = getErrorAndWarnings(errorsMap?.[field] || []);
+                const validateFieldName = labelName || field;
+                const fieldValidator = new Validator({ [validateFieldName]: curRules }, { validateMessages });
+                return new ES6Promise(resolve => {
+                    fieldValidator.validate({ [validateFieldName]: value }, (errorsMap) => {
+                        const { errors, warnings, errorTypes } = getErrorAndWarnings(errorsMap?.[validateFieldName] || []);
                         this._errors = errors;
                         onValidateStatusChange({
                             errors: this._errors,
                             warnings,
                             errorTypes,
                         });
-                        return resolve({
+                        resolve({
                             errors: this._errors,
                             warnings,
                             value,
@@ -83,7 +83,13 @@ class FormItemInner extends PureComponent {
                     });
                 });
             }
-            return Promise.resolve({ errors: [], warnings: [], value, field, dom: null });
+            return ES6Promise.resolve({
+                errors: [],
+                warnings: [],
+                value,
+                field,
+                dom: null,
+            });
         };
         this.setFieldData = (value) => {
             const { field, trigger = 'onChange' } = this.props;
@@ -188,13 +194,17 @@ class FormItemInner extends PureComponent {
 FormItemInner.contextType = FormItemContext;
 export { FormItemInner };
 export default forwardRef((props, ref) => {
-    const { label, field, disabled = false, layout: itemLayout, style, extra, requiredIcon, rules, className = '', ...rest } = props;
+    const { label, field, disabled = false, layout: itemLayout, style, extra, requiredIcon, rules, className = '', labelName, ...rest } = props;
     const { prefixCls } = useContext(GlobalContext);
     const { layout, disabled: propsDisabled } = useContext(FormItemContext);
     const [errors, setErrors] = useState(null);
     const [errorTypes, setErrorTypes] = useState(null);
     const [warnings, setWarnings] = useState([]);
     const formItemRef = useRef(null);
+    // Prioritize user provided label (if exists and valid string).
+    // Only use labelName as substitute when label is invalid (not a string) or not provided.
+    const labelStr = labelName || (typeof label === 'string' ? label : undefined);
+    const renderedLabel = label !== undefined ? label : labelName;
     const onValidateStatusChange = (validateResult) => {
         const { errors: _errors, warnings: _warnings, errorTypes: _errorTypes } = validateResult;
         setErrors(_errors.length ? _errors[0] : null);
@@ -222,10 +232,10 @@ export default forwardRef((props, ref) => {
             isRequired
                 ? requiredIcon || (React.createElement("span", { className: cls(`${prefixCls}-form-label-item-required-asterisk`) }, "*"))
                 : null,
-            label),
+            renderedLabel),
         React.createElement("div", { className: cls(`${prefixCls}-form-item-control-wrapper`) },
             React.createElement("div", { className: cls(`${prefixCls}-form-item-control`) },
-                React.createElement(FormItemInner, Object.assign({}, rest, { rules: fieldRules, disabled: fieldDisabled, field: field, onValidateStatusChange: onValidateStatusChange, getFormItemRef: getFormItemRef }))),
+                React.createElement(FormItemInner, Object.assign({}, rest, { rules: fieldRules, disabled: fieldDisabled, field: field, labelName: labelStr, onValidateStatusChange: onValidateStatusChange, getFormItemRef: getFormItemRef }))),
             errors && (React.createElement("div", { className: cls(`${prefixCls}-form-item-message ${prefixCls}-form-item-error-message`) }, errors)),
             (warnings || []).map((node, key) => typeof node === 'string' ? (React.createElement("div", { className: cls(`${prefixCls}-form-item-message ${prefixCls}-form-item-warning-message`), key: key }, node)) : (node))),
         extra));

package/esnext/form/type.d.ts

@@ -1,6 +1,5 @@
-import { IRules } from '@arco-design/mobile-utils';
-import { ReactElement, ReactNode } from 'react';
-import { Promise } from 'es6-promise';
+import type { IRules } from '@arco-design/mobile-utils';
+import type { ReactElement, ReactNode } from 'react';
 export declare type FieldValue = any;
 export declare type FieldItem = Record<string, FieldValue>;
 export declare type ILayout = 'horizontal' | 'vertical' | 'inline';
@@ -246,7 +245,12 @@ export interface FormItemProps {
      * 表单项名
      * @en The form item name
      */
-    label: ReactNode;
+    label?: ReactNode;
+    /**
+     * 校验提示中的字段名（当 label 为复杂节点时推荐设置）
+     * @en The field name in the validation message (recommended when label is a complex node)
+     */
+    labelName?: string;
     /**
      * 表单项Stylesheet
      * @en The form item stylesheet
@@ -333,6 +337,11 @@ export interface IFormItemInnerProps {
      * @en Form item field
      */
     field: string;
+    /**
+     * 校验提示中的字段名
+     * @en The field name in the validation message
+     */
+    labelName?: string;
     /**
      * 表单项子节点
      * @en Form item children

package/esnext/form/useForm.d.ts

@@ -1,3 +1,3 @@
-import { IFormInstance, InternalFormInstance } from './type';
+import type { IFormInstance, InternalFormInstance } from './type';
 export declare const defaultFormDataMethods: InternalFormInstance;
 export default function useForm(form?: IFormInstance): IFormInstance[];

package/esnext/form/useForm.js

@@ -1,7 +1,6 @@
-/* eslint-disable no-console */
 import { useRef } from 'react';
-import { Promise } from 'es6-promise';
-import { ValueChangeType, } from './type';
+import { Promise as ES6Promise } from 'es6-promise';
+import { ValueChangeType } from './type';
 import { deepClone } from './utils';
 const defaultFunc = () => { };
 export const defaultFormDataMethods = {
@@ -186,8 +185,8 @@ class FormData {
                 const promise = entity.validateField();
                 promiseList.push(promise.then(errors => errors));
             });
-            const summaryPromise = new Promise((resolve, reject) => {
-                Promise.all(promiseList).then(res => {
+            const summaryPromise = new ES6Promise((resolve, reject) => {
+                ES6Promise.all(promiseList).then((res) => {
                     const errorResults = res.filter(item => item?.errors?.length);
                     if (errorResults.length) {
                         reject(errorResults);

package/esnext/pull-refresh/android-pull-refresh.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { PullRefreshRef, PullRefreshBasicProps } from './model';
+import type { PullRefreshRef, PullRefreshBasicProps } from './model';
 export declare const PullRefresh: React.ForwardRefExoticComponent<PullRefreshBasicProps & React.RefAttributes<PullRefreshRef>>;

package/esnext/pull-refresh/android-pull-refresh.js

@@ -1,6 +1,6 @@
 import React, { useRef, forwardRef, useCallback, useMemo, useContext, useEffect, useImperativeHandle, } from 'react';
 import { cls, nextTick, defaultLocale } from '@arco-design/mobile-utils';
-import { Promise } from 'es6-promise';
+import { Promise as ES6Promise } from 'es6-promise';
 import Loading from '../loading';
 import { GlobalContext } from '../context-provider';
 import { PullRefreshStatus } from './model';
@@ -78,7 +78,7 @@ export const PullRefresh = forwardRef((props, ref) => {
         }
         setStatus(PullRefreshStatus.Pulling);
     }, [disabled, ifShouldHandle]);
-    const refresh = () => new Promise(resolve => {
+    const refresh = () => new ES6Promise(resolve => {
         setStatus(PullRefreshStatus.Loading);
         nextTick(() => {
             scroll(tipsHeight, 300);

package/esnext/pull-refresh/hooks.d.ts

@@ -1,5 +1,5 @@
 import type { RefObject } from 'react';
-import { Promise } from 'es6-promise';
+import { Promise as ES6Promise } from 'es6-promise';
 import { PullRefreshStatus } from './model';
 export declare const useCommonState: ({ onRefresh, loosingMinHeight, }: {
     onRefresh?: (() => Promise<void>) | undefined;
@@ -13,7 +13,7 @@ export declare const useCommonState: ({ onRefresh, loosingMinHeight, }: {
     labelRef: RefObject<HTMLDivElement>;
     domRef: RefObject<HTMLDivElement>;
     loosingHeight: number;
-    handleRefresh: () => Promise<[void | undefined, unknown]>;
+    handleRefresh: () => ES6Promise<[void | undefined, unknown]>;
     tipsHeight: number;
 };
 export declare const useAddScrollEvents: ({ domRef, handleTouchStart, handleTouchMove, handleTouchEnd, }: {

package/esnext/pull-refresh/hooks.js

@@ -1,5 +1,5 @@
 import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
-import { Promise } from 'es6-promise';
+import { Promise as ES6Promise } from 'es6-promise';
 import { PullRefreshStatus } from './model';
 export const useCommonState = ({ onRefresh, loosingMinHeight, }) => {
     const [status, setStatus] = useState(PullRefreshStatus.Static);
@@ -15,9 +15,9 @@ export const useCommonState = ({ onRefresh, loosingMinHeight, }) => {
         loadingRef.current = true;
         // 避免动画过快，最短加载时间
         // @en Minimum load time, avoid animation too fast
-        return Promise.all([
+        return ES6Promise.all([
             onRefresh?.(),
-            new Promise(resolve => {
+            new ES6Promise(resolve => {
                 // 最少加载一秒
                 // @en Load at least one second
                 setTimeout(() => {

package/esnext/pull-refresh/ios-pull-refresh.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { PullRefreshRef, PullRefreshBasicProps } from './model';
+import type { PullRefreshRef, PullRefreshBasicProps } from './model';
 export declare const PullRefresh: React.ForwardRefExoticComponent<PullRefreshBasicProps & React.RefAttributes<PullRefreshRef>>;

package/esnext/pull-refresh/ios-pull-refresh.js

@@ -1,5 +1,6 @@
 import React, { useState, useRef, forwardRef, useCallback, useContext, useEffect, useMemo, useImperativeHandle, } from 'react';
 import { cls, defaultLocale } from '@arco-design/mobile-utils';
+import { Promise as ES6Promise } from 'es6-promise';
 import Loading from '../loading';
 import { GlobalContext } from '../context-provider';
 import { PullRefreshStatus } from './model';
@@ -68,7 +69,7 @@ export const PullRefresh = forwardRef((props, ref) => {
             domRef.current.scrollTop = 1;
         }
     }, [disabled, ifShouldHandle]);
-    const refresh = () => new Promise(resolve => {
+    const refresh = () => new ES6Promise(resolve => {
         if (domRef.current) {
             domRef.current.style.overflow = 'hidden';
             const animationKey = new Date().getTime();

package/esnext/pull-refresh/model.d.ts

@@ -1,5 +1,4 @@
 import type { CSSProperties, ReactNode } from 'react';
-import { Promise } from 'es6-promise';
 export interface PullRefreshRef {
     /**
      * 最外层元素 DOM

package/esnext/stepper/hooks/useValue.d.ts

@@ -1,4 +1,4 @@
-import { StepperProps } from '..';
+import type { StepperProps } from '..';
 export default function useValue(params: Required<Pick<StepperProps, 'defaultValue' | 'min' | 'max' | 'digits'>> & Pick<StepperProps, 'formatter' | 'value'>): {
     updateValue: (updater: number | ((oldValue: number) => number)) => void;
     actualInputValue: number;

package/esnext/stepper/hooks/useValue.js

@@ -1,12 +1,12 @@
 import { useState } from 'react';
-import { Promise } from 'es6-promise';
+import { Promise as ES6Promise } from 'es6-promise';
 export default function useValue(params) {
     const { defaultValue, formatter, max, min, value, digits } = params;
     const [innerValue, setInnerValue] = useState(defaultValue);
     const updateValue = (updater) => {
         const tempValue = typeof updater === 'function' ? updater(innerValue) : updater;
         if (formatter) {
-            new Promise(resolve => {
+            new ES6Promise(resolve => {
                 resolve(formatter(Number(tempValue)));
             }).then((result) => {
                 const res = Math.max(min, Math.min(max, result));

package/esnext/stepper/type.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export interface StepperProps {
     /**
      * 自定义类名

package/esnext/swipe-action/type.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 export interface SwipeActionProps {
     /**
      * 自定义类名

package/esnext/uploader/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { UploaderRef, UploaderProps } from './type';
+import type { UploaderRef, UploaderProps } from './type';
 export * from './type';
 declare const _default: React.ForwardRefExoticComponent<UploaderProps & React.RefAttributes<UploaderRef>> & {
     displayName?: string | undefined;

package/esnext/uploader/index.js

@@ -37,7 +37,7 @@ const Uploader = forwardRef((props, ref) => {
             })) || (React.createElement("div", { className: `${prefixCls}-uploader-list` }, (limit && limit < files.length
             ? files.slice(0, limit)
             : files).map((fileItem, index) => {
-            const { file, status } = fileItem;
+            const { file, status = 'loaded' } = fileItem;
             return (React.createElement("div", { className: `${prefixCls}-uploader-list-item`, key: index, onClick: e => uploadFunc.handleClick(e, fileItem, index) },
                 React.createElement("div", { className: `${prefixCls}-uploader-list-item-container` },
                     React.createElement("div", { className: `${prefixCls}-uploader-list-item-wrapper` },

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

@@ -1,7 +1,7 @@
 /// <reference types="node" />
-import React from 'react';
-import { Promise } from 'es6-promise';
-import { AdapterFile, CommonFileItem, UploadCommonProps } from './type';
+import type React from 'react';
+import { Promise as ES6Promise } from 'es6-promise';
+import type { AdapterFile, CommonFileItem, UploadCommonProps } from './type';
 export declare class Upload<FileItem extends CommonFileItem = CommonFileItem> {
     props: UploadCommonProps<FileItem>;
     fileRef: React.MutableRefObject<HTMLInputElement | null>;
@@ -17,4 +17,4 @@ export declare class Upload<FileItem extends CommonFileItem = CommonFileItem> {
     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>;
+export declare const parseFile: (file: AdapterFile) => ES6Promise<unknown>;

package/esnext/uploader/upload/upload.js

@@ -1,9 +1,9 @@
-import { Promise } from 'es6-promise';
+import { Promise as ES6Promise } from 'es6-promise';
 export class Upload {
     constructor(props, fileRef, cacheRef) {
         // 解析文件生成预览
         this.handleFile = (newFiles) => {
-            Promise.all(newFiles.map(file => parseFile(file))).then(parseFiles => {
+            ES6Promise.all(newFiles.map(file => parseFile(file))).then(parseFiles => {
                 const res = parseFiles.map((url, index) => ({
                     url,
                     status: typeof this.props.upload === 'function' ? 'loading' : 'loaded',
@@ -21,7 +21,7 @@ export class Upload {
                                 this.cacheRef.current[index] = {
                                     ...this.cacheRef.current[index],
                                     ...data,
-                                    status: 'loaded',
+                                    status: undefined,
                                 };
                             }
                         })
@@ -101,7 +101,7 @@ export class Upload {
     }
 }
 export const parseFile = (file) => {
-    return new Promise((resolve, reject) => {
+    return new ES6Promise((resolve, reject) => {
         if (file.url) {
             resolve(file.url);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.38.3",
+    "version": "2.39.0",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,13 +15,15 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "2.23.3",
+        "@arco-design/mobile-utils": "2.23.5",
         "@arco-design/transformable": "^1.0.0",
         "@babel/runtime": "^7",
         "lodash.throttle": "^4.1.1",
         "resize-observer-polyfill": "^1.5.1"
     },
     "devDependencies": {
+        "@types/babel__traverse": "7.14.0",
+        "@types/node": "17.0.41",
         "babel-jest": "^25.3.0",
         "jest": "^25.3.0"
     },
@@ -47,5 +49,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "57304aa9559040c8af15004e61cc7c331cf33646"
+    "gitHead": "4cf3e7eb276a79303af95b4b9c8a676af2cacba3"
 }

package/tokens/app/arcodesign/default/index.js

@@ -5,12 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 exports.getRem = getRem;
-
 function getRem(px, baseFontSize) {
   var num = Math.round(px / Number(baseFontSize) * 1000000) / 1000000;
   return num ? "".concat(num, "rem") : num;
 }
-
 var tokens = {
   "prefix": "var(--prefix-mobile)",
   "prefix-mobile": "arco",