@arco-design/mobile-react 2.36.0 → 2.36.2

package/esnext/form/linked-container.d.ts

@@ -3,6 +3,6 @@ export declare function DefaultPickerLinkedContainer({ value }: {
     value: (string | number)[];
 }): JSX.Element;
 export declare function DefaultDatePickerLinkedContainer({ ts, types, }: {
-    ts: number | [number, number];
+    ts?: number | [number, number];
     types: string[];
 }): JSX.Element;

package/esnext/form/linked-container.js

@@ -11,6 +11,9 @@ export function DefaultDatePickerLinkedContainer({ ts, types, }) {
     const { prefixCls, locale } = useContext(GlobalContext);
     const className = `${prefixCls}-form-picker-link-container`;
     const dateTimeStr = useMemo(() => {
+        if (ts === undefined) {
+            return '';
+        }
         if (typeof ts === 'number') {
             return formatDateTimeStr(ts, types);
         }

package/esnext/form/style/css/index.css

@@ -567,6 +567,9 @@
 .arco-form-item-control .arco-input {
   padding: 0;
 }
+.arco-form-item-control .arco-input-wrap.textarea {
+  padding: 0;
+}
 .arco-form-item-control-wrapper {
   width: 100%;
   -webkit-box-flex: 1;
@@ -574,7 +577,7 @@
           flex: 1;
   position: relative;
 }
-.arco-form-item-control-wrapper .arco-input-wrap {
+.arco-form-item-control-wrapper .arco-input-wrap.single-line {
   height:  0.44rem ;
 }
 .arco-form-item-message {

package/esnext/form/style/index.less

@@ -42,11 +42,16 @@
         .@{prefix}-input-wrap, .@{prefix}-input {
             padding: 0;
         }
+
+        .@{prefix}-input-wrap.textarea {
+            padding: 0;
+        }
+
         &-wrapper {
             width: 100%;
             flex: 1;
             position: relative;
-            .@{prefix}-input-wrap {
+            .@{prefix}-input-wrap.single-line {
                 .use-var(height, input-text-line-height);
             }
         }

package/esnext/form/type.d.ts

@@ -2,7 +2,7 @@ import { IRules } from '@arco-design/mobile-utils';
 import { ReactNode } from 'react';
 import { Promise } from 'es6-promise';
 export declare type FieldValue = any;
-export declare type FieldItem = Record<string, any>;
+export declare type FieldItem = Record<string, FieldValue>;
 export declare type ILayout = 'horizontal' | 'vertical' | 'inline';
 export declare enum FormInternalComponentType {
     Input = "Input",
@@ -52,6 +52,11 @@ export interface FormProps {
      * @en Callback when the form item value changes
      */
     onValuesChange?: Callbacks['onValuesChange'];
+    /**
+     * 表单项数据变化时的回调（仅用户操作表单时触发）
+     * @en Callback when the form item value changes (Only trigger when user operate form)
+     */
+    onChange?: Callbacks['onChange'];
     /**
      * 表单项数据变化时的回调
      * @en Callback when the form is submitted
@@ -115,6 +120,11 @@ export interface Callbacks {
      * @en Callback when the form item value changes
      */
     onValuesChange?: (changedValues: FieldValue, values: FieldValue) => void;
+    /**
+     * 表单项数据变化时的回调（仅用户操作表单时触发）
+     * @en Callback when the form item value changes (Only trigger when user operate form)
+     */
+    onChange?: (changedValues: FieldValue, values: FieldValue) => void;
     /**
      * 表单项数据变化时的回调
      * @en Callback when the form is submitted
@@ -134,6 +144,10 @@ export interface InternalHooks {
     registerField: (name: string, self: any) => () => void;
     setInitialValues: (values: FieldItem) => void;
     setCallbacks: (callbacks: Callbacks) => void;
+    getInitialValue: (fieldName: string) => FieldValue;
+    setInitialValue: (fieldName: string, values: FieldItem) => void;
+    innerSetFieldsValue: (values: FieldItem) => boolean;
+    innerSetFieldValue: (name: string, value: FieldValue) => boolean;
 }
 export interface IFormInstance {
     /**
@@ -183,6 +197,11 @@ export declare type InternalFormInstance = IFormInstance & {
      * @en Get internal methods
      */
     getInternalHooks: () => InternalHooks;
+    /**
+     * 注册表单组件
+     * @en Register Form Item component
+     */
+    registerField: (name: string, self: any) => () => void;
 };
 export interface FormRef {
     /**
@@ -371,3 +390,7 @@ export interface IFormItemInnerProps {
      */
     displayType?: FormInternalComponentType;
 }
+export declare enum ValueChangeType {
+    Update = 0,
+    Reset = 1
+}

package/esnext/form/type.js

@@ -24,3 +24,10 @@ export var ValidateStatus;
     ValidateStatus["Validating"] = "validating";
     ValidateStatus["Success"] = "success";
 })(ValidateStatus || (ValidateStatus = {}));
+export var ValueChangeType;
+(function (ValueChangeType) {
+    /* form update */
+    ValueChangeType[ValueChangeType["Update"] = 0] = "Update";
+    /* form clear */
+    ValueChangeType[ValueChangeType["Reset"] = 1] = "Reset";
+})(ValueChangeType || (ValueChangeType = {}));

package/esnext/form/useForm.d.ts

@@ -1,18 +1,3 @@
-import { IFormInstance } from './type';
-export declare const defaultFormDataMethods: {
-    getFieldValue: (name: any) => any;
-    getFieldsValue: (_names: any) => {};
-    getFieldError: (_name: any) => never[];
-    setFieldValue: (_name: any, _value: any) => boolean;
-    setFieldsValue: (_values: any) => boolean;
-    registerField: (_name: any, _self: any) => () => void;
-    resetFields: any;
-    validateFields: any;
-    submit: any;
-    getInternalHooks: () => {
-        registerField: any;
-        setInitialValues: any;
-        setCallbacks: any;
-    };
-};
+import { IFormInstance, InternalFormInstance } from './type';
+export declare const defaultFormDataMethods: InternalFormInstance;
 export default function useForm(form?: IFormInstance): IFormInstance[];

package/esnext/form/useForm.js

@@ -1,6 +1,8 @@
 /* eslint-disable no-console */
 import { useRef } from 'react';
 import { Promise } from 'es6-promise';
+import { ValueChangeType, } from './type';
+import { deepClone } from './utils';
 const defaultFunc = () => { };
 export const defaultFormDataMethods = {
     getFieldValue: name => name,
@@ -25,6 +27,10 @@ export const defaultFormDataMethods = {
             registerField: defaultFunc,
             setInitialValues: defaultFunc,
             setCallbacks: defaultFunc,
+            getInitialValue: defaultFunc,
+            setInitialValue: defaultFunc,
+            innerSetFieldsValue: defaultFunc,
+            innerSetFieldValue: defaultFunc,
         };
     },
 };
@@ -35,33 +41,61 @@ class FormData {
         this._fieldsList = {}; // 字段列表
         this._initialValues = {}; // 初始值
         this._callbacks = {};
-        this.setFieldsValue = (values) => {
+        this.commonSetFieldsValue = (values, changeType) => {
             const oldValues = Object.keys(values).reduce((acc, key) => ({
                 ...acc,
                 [key]: this.getFieldValue(key),
             }), {});
             this._formData = { ...this._formData, ...values };
+            this.notifyField(values, oldValues, changeType);
+        };
+        this.setFieldsValue = (values) => {
+            this.commonSetFieldsValue(values);
             const { onValuesChange } = this._callbacks;
-            onValuesChange && onValuesChange(values, this._formData);
-            this.notifyField(values, oldValues);
+            onValuesChange?.(values, this._formData);
             return true;
         };
-        this.setFieldValue = (name, value) => {
+        this.innerSetFieldsValue = (values, changeType) => {
+            this.commonSetFieldsValue(values, changeType);
+            const { onValuesChange, onChange } = this._callbacks;
+            onValuesChange?.(values, this._formData);
+            onChange?.(values, this._formData);
+            return true;
+        };
+        this.commonSetFieldValue = (name, value, changeType) => {
             const oldValues = { [name]: this.getFieldValue(name) };
             this._formData = { ...this._formData, [name]: value };
+            this.notifyField({ [name]: value }, oldValues, changeType);
+        };
+        this.setFieldValue = (name, value) => {
+            this.commonSetFieldValue(name, value);
             const { onValuesChange } = this._callbacks;
             onValuesChange &&
                 onValuesChange({
                     [name]: value,
+                }, this.getFieldsValue());
+            return true;
+        };
+        this.innerSetFieldValue = (name, value, changeType) => {
+            this.commonSetFieldValue(name, value, changeType);
+            const { onValuesChange, onChange } = this._callbacks;
+            onValuesChange &&
+                onValuesChange({
+                    [name]: value,
+                }, this._formData);
+            onChange &&
+                onChange({
+                    [name]: value,
                 }, this._formData);
-            this.notifyField({ [name]: value }, oldValues);
             return true;
         };
-        this.notifyField = (values, oldValues) => {
+        this.notifyField = (values, oldValues, changeType = ValueChangeType.Update) => {
             Object.keys(values).map((fieldName) => {
                 const fieldObj = this._fieldsList?.[fieldName] || null;
                 if (fieldObj) {
-                    fieldObj.onValueChange(values[fieldName], oldValues[fieldName]);
+                    fieldObj.onValueChange(values[fieldName], oldValues[fieldName], {
+                        changeType,
+                    });
                 }
             });
         };
@@ -69,10 +103,10 @@ class FormData {
             if (names) {
                 return names.map(name => this.getFieldValue(name));
             }
-            return this._formData;
+            return deepClone(this._formData);
         };
         this.getFieldValue = (name) => {
-            return this._formData?.[name];
+            return deepClone(this._formData?.[name]);
         };
         this.getFieldError = (name) => {
             const field = this._fieldsList?.[name] || null;
@@ -119,11 +153,32 @@ class FormData {
             };
         };
         this.setInitialValues = (initVal) => {
-            this._initialValues = { ...(initVal || {}) };
+            this._initialValues = deepClone(initVal || {});
             this.setFieldsValue(initVal);
         };
+        this.setInitialValue = (fieldName, value) => {
+            if (!fieldName) {
+                return;
+            }
+            this._initialValues[fieldName] = value;
+            this.setFieldValue(fieldName, value);
+        };
+        this.getInitialValue = (fieldName) => {
+            return this._initialValues[fieldName];
+        };
         this.resetFields = () => {
-            this.setFieldsValue(this._initialValues);
+            const oldValues = { ...this._formData };
+            const initialValues = {};
+            Object.keys(this._formData).forEach((fieldName) => {
+                const fieldObj = this._fieldsList?.[fieldName] || null;
+                if (fieldObj) {
+                    initialValues[fieldName] = fieldObj.getInitialValue();
+                }
+            });
+            const { onValuesChange } = this._callbacks;
+            onValuesChange && onValuesChange(initialValues, this._formData);
+            this._formData = initialValues;
+            this.notifyField(initialValues, oldValues, ValueChangeType.Reset);
         };
         this.validateFields = () => {
             const promiseList = [];
@@ -148,14 +203,14 @@ class FormData {
             this.validateFields()
                 .then(result => {
                 const { onSubmit } = this._callbacks;
-                onSubmit?.(this._formData, result);
+                onSubmit?.(this.getFieldsValue(), result);
             })
                 .catch(e => {
                 const { onSubmitFailed } = this._callbacks;
                 if (!onSubmitFailed) {
                     return;
                 }
-                onSubmitFailed(this._formData, e);
+                onSubmitFailed(this.getFieldsValue(), e);
             });
         };
         this.setCallbacks = (callbacks) => {
@@ -182,6 +237,10 @@ class FormData {
                 registerField: this.registerField,
                 setInitialValues: this.setInitialValues,
                 setCallbacks: this.setCallbacks,
+                getInitialValue: this.getInitialValue,
+                setInitialValue: this.setInitialValue,
+                innerSetFieldsValue: this.innerSetFieldsValue,
+                innerSetFieldValue: this.innerSetFieldValue,
             };
         };
     }

package/esnext/form/utils.d.ts

@@ -5,3 +5,5 @@ export declare const getErrorAndWarnings: (result: ValidatorError[]) => {
     errors: string[];
     errorTypes: string[];
 };
+export declare const getDefaultValueForInterComponent: (componentType: string) => 0 | never[] | null | undefined;
+export declare function deepClone(value: any): any;

package/esnext/form/utils.js

@@ -1,3 +1,6 @@
+import { isObject, isArray } from '@arco-design/mobile-utils';
+import cloneDeepWith from 'lodash/cloneDeepWith';
+import { FormInternalComponentType } from './type';
 export const isFieldRequired = (rules = []) => {
     return (rules || []).some(rule => rule?.required);
 };
@@ -19,3 +22,26 @@ export const getErrorAndWarnings = (result) => {
     });
     return { warnings, errors, errorTypes };
 };
+export const getDefaultValueForInterComponent = (componentType) => {
+    switch (componentType) {
+        case FormInternalComponentType.Input:
+        case FormInternalComponentType.Textarea:
+            return undefined;
+        case FormInternalComponentType.CheckboxGroup:
+            return [];
+        case FormInternalComponentType.RadioGroup:
+            return null;
+        case FormInternalComponentType.Slider:
+        case FormInternalComponentType.Rate:
+            return 0;
+        default:
+            return undefined;
+    }
+};
+export function deepClone(value) {
+    return cloneDeepWith(value, val => {
+        if (!isObject(val) && !isArray(val)) {
+            return val;
+        }
+    });
+}

package/esnext/input/index.js

@@ -12,7 +12,7 @@ const Input = forwardRef((props, ref) => {
     }));
     function renderInput({ prefixCls }) {
         const prefix = `${prefixCls}-input`;
-        return renderWrapper(prefix, type, React.createElement("input", Object.assign({}, nativeProps, { id: id, name: name, maxLength: maxLength, placeholder: placeholder, readOnly: readOnly, onFocus: handleFocus, onBlur: handleBlur, onKeyUp: onKeyUp, onKeyPress: onKeyPress, ref: inputRef, className: cls(prefix, inputClass), style: inputStyle, value: inputValue, type: type, disabled: disabled, pattern: pattern, onChange: handleChange, onInput: handleInput, onKeyDown: handleKeyDown, onClick: handleClick, "aria-disabled": disabled, "aria-label": ariaLabel })));
+        return renderWrapper(prefix, `${type} single-line`, React.createElement("input", Object.assign({}, nativeProps, { id: id, name: name, maxLength: maxLength, placeholder: placeholder, readOnly: readOnly, onFocus: handleFocus, onBlur: handleBlur, onKeyUp: onKeyUp, onKeyPress: onKeyPress, ref: inputRef, className: cls(prefix, inputClass), style: inputStyle, value: inputValue, type: type, disabled: disabled, pattern: pattern, onChange: handleChange, onInput: handleInput, onKeyDown: handleKeyDown, onClick: handleClick, "aria-disabled": disabled, "aria-label": ariaLabel })));
     }
     return React.createElement(ContextLayout, null, renderInput);
 });

package/esnext/popover/hooks/usePosition.js

@@ -161,24 +161,44 @@ export const usePosition = (props, popoverRef, childRef, wrapperRef) => {
         // 垂直方向安全距离调整
         // @en Vertical safety distance adjustment
         if (verticalAuto) {
-            const popoverTop = childRect.bottom -
-                (newConfig.bottom && newConfig.height ? newConfig.bottom + newConfig.height : 0);
-            const popoverBottom = childRect.top +
-                (newConfig.top && newConfig.height ? newConfig.top + newConfig.height : 0);
-            // 顶部安全距离不够，调整到底部
-            // @en The top safety distance is not enough, adjust to the bottom
-            if (directionState.indexOf('top') !== -1 && popoverTop < topOffset) {
+            const setToBottom = () => {
                 newConfig.top = verticalOffset + childRect.height;
                 newConfig.bottom = null;
                 onAdjustDirection('bottom');
-            }
-            else if (directionState.indexOf('bottom') !== -1 &&
-                popoverBottom + bottomOffset > window.innerHeight) {
-                // 底部安全距离不够，调整到顶部
-                // @en The bottom safety distance is not enough, adjust to the top
+            };
+            const setToTop = () => {
                 newConfig.top = null;
                 newConfig.bottom = verticalOffset + childRect.height;
                 onAdjustDirection('top');
+            };
+            // 判断上下空间是否都不足以展示气泡内容
+            // @en Determine whether there is insufficient space both above and below to display content
+            const isPopoverTooTall = window.innerHeight - topOffset - bottomOffset <
+                2 * (newConfig.height || 0) + 2 * verticalOffset + childRect.height;
+            if (isPopoverTooTall) {
+                const spaceAbove = childRect.top;
+                const spaceBelow = window.innerHeight - childRect.bottom;
+                spaceAbove > spaceBelow ? setToTop() : setToBottom();
+            }
+            else {
+                const popoverTop = childRect.bottom -
+                    (newConfig.bottom && newConfig.height
+                        ? newConfig.bottom + newConfig.height
+                        : 0);
+                const popoverBottom = childRect.top +
+                    (newConfig.top && newConfig.height ? newConfig.top + newConfig.height : 0);
+                // 顶部安全距离不够，调整到底部
+                // @en The top safety distance is not enough, adjust to the bottom
+                if (directionState.indexOf('top') !== -1 && popoverTop < topOffset) {
+                    setToBottom();
+                }
+                else if (
+                // 底部安全距离不够，调整到顶部
+                // @en The bottom safety distance is not enough, adjust to the top
+                directionState.indexOf('bottom') !== -1 &&
+                    popoverBottom + bottomOffset > window.innerHeight) {
+                    setToTop();
+                }
             }
         }
         // 挂载在全局的气泡需要计算相对屏幕的位置

package/esnext/radio/group.js

@@ -39,7 +39,9 @@ export function componentGenerator(Comp) {
                     layout,
                     disabled,
                     icons,
-                    value: groupValue === void 0 ? [] : [groupValue],
+                    value: groupValue === void 0 || groupValue === null
+                        ? []
+                        : [groupValue],
                     onChange: handleChange,
                 } },
                 children,

package/esnext/radio/type.d.ts

@@ -8,10 +8,10 @@ export interface RadioGroupProps<T extends ValueType = ValueType, P extends Radi
      */
     options?: P[];
     /**
-     * 受控模式，选中的选项
+     * 受控模式，选中的选项，传null表示取消选中
      * @en Checked option, controlled mode
      */
-    value?: T;
+    value?: T | null;
     /**
      * 默认选中项
      * @en Default checked value

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.36.0",
+    "version": "2.36.2",
     "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.21.0",
+        "@arco-design/mobile-utils": "2.21.2",
         "@arco-design/transformable": "^1.0.0",
         "@babel/runtime": "^7",
         "lodash.throttle": "^4.1.1",
@@ -47,5 +47,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "e61b011d31905626ef7082a4a29faf2a03db93cf"
+    "gitHead": "55380e688a52344b58e7bdc28bd3999b759386ba"
 }

package/umd/carousel/index.js

@@ -704,12 +704,6 @@
 
       stopPropagation && e.stopPropagation();
 
-      if (bouncingRef.current) {
-        bouncingRef.current = false;
-        jumpTo(index, false);
-        return;
-      }
-
       if (!touchStartedRef.current) {
         return;
       }
@@ -721,7 +715,14 @@
         return;
       }
 
-      touchMovedRef.current = false;
+      touchMovedRef.current = false; // bugfix: 回弹判断逻辑需在touchMovedRef标识重置逻辑之后，否则会在触发回弹后导致标识无法重置引起滑动判断问题
+      // @en bugfix: The logic for the bounce judgment needs to be after the touchMovedRef reset logic, otherwise it will cause the problem of slide judgment after the bounce is triggered.
+
+      if (bouncingRef.current) {
+        bouncingRef.current = false;
+        jumpTo(index, false);
+        return;
+      }
 
       if (posAdjustingRef.current || touchStoppedRef.current) {
         return;

package/umd/ellipsis/components/js-ellipsis.js

@@ -90,9 +90,11 @@
           currentText += temp;
           l = m;
         }
-      } // Remove the exclude char at the end of the content.
+      } // Remove the last character if it is orphaned high-surrogate characters (indicative of incomplete emoji).
 
 
+      currentText = currentText.replace(/[\uD800-\uDBFF]+$/, ''); // Remove the exclude char at the end of the content.
+
       while (endExcludes && endExcludes.includes(currentText[currentText.length - 1])) {
         currentText = currentText.slice(0, -1);
       } // Callback after reflow.

package/umd/form/form-item.d.ts

@@ -1,4 +1,35 @@
-import React from 'react';
-import { FormItemProps, FormItemRef } from './type';
+import React, { PureComponent, ReactNode } from 'react';
+import { Promise } from 'es6-promise';
+import { FormItemContext } from './form-item-context';
+import { IFieldError, FieldValue, IFormItemInnerProps, FormItemProps, ValidateStatus, FormItemRef, ValueChangeType, IFormItemContext } from './type';
+interface IFormItemInnerState {
+    validateStatus: ValidateStatus;
+    errors?: ReactNode[];
+    _touched: boolean;
+}
+declare class FormItemInner extends PureComponent<IFormItemInnerProps, IFormItemInnerState> {
+    context: React.ContextType<typeof FormItemContext>;
+    destroyField: () => void;
+    private _errors;
+    private _touched;
+    constructor(props: IFormItemInnerProps, context: IFormItemContext);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onValueChange: (curValue: FieldValue, preValue: any, info?: {
+        changeType: ValueChangeType;
+    } | undefined) => void;
+    getInitialValue: () => any;
+    getFieldError: () => React.ReactNode[];
+    isFieldTouched: () => boolean;
+    getAllRuleValidateTriggers: () => string[];
+    validateField: (validateTrigger?: string | undefined) => Promise<IFieldError>;
+    setFieldData: (value: FieldValue) => void;
+    innerTriggerFunctionWithValueFirst: (value: any, ...args: any[]) => void;
+    innerOnInputFunction: (_: any, value: any, ...args: any[]) => void;
+    innerClearFunction: (...args: any[]) => void;
+    renderChildren(): React.FunctionComponentElement<any>;
+    render(): React.FunctionComponentElement<any>;
+}
+export { FormItemInner };
 declare const _default: React.ForwardRefExoticComponent<FormItemProps & React.RefAttributes<FormItemRef>>;
 export default _default;