@arco-design/mobile-react 2.36.0 → 2.36.2

package/esm/form/useForm.js

@@ -3,6 +3,8 @@ import _extends from "@babel/runtime/helpers/extends";
 /* eslint-disable no-console */
 import { useRef } from 'react';
 import { Promise } from 'es6-promise';
+import { ValueChangeType } from './type';
+import { deepClone } from './utils';
 
 var defaultFunc = function defaultFunc() {};
 
@@ -32,7 +34,11 @@ export var defaultFormDataMethods = {
     return {
       registerField: defaultFunc,
       setInitialValues: defaultFunc,
-      setCallbacks: defaultFunc
+      setCallbacks: defaultFunc,
+      getInitialValue: defaultFunc,
+      setInitialValue: defaultFunc,
+      innerSetFieldsValue: defaultFunc,
+      innerSetFieldValue: defaultFunc
     };
   }
 }; // 在field的静态的状态下设置
@@ -45,42 +51,82 @@ var FormData = function FormData() {
   this._initialValues = {};
   this._callbacks = {};
 
-  this.setFieldsValue = function (values) {
+  this.commonSetFieldsValue = function (values, changeType) {
     var oldValues = Object.keys(values).reduce(function (acc, key) {
       var _extends2;
 
       return _extends({}, acc, (_extends2 = {}, _extends2[key] = _this.getFieldValue(key), _extends2));
     }, {});
     _this._formData = _extends({}, _this._formData, values);
+
+    _this.notifyField(values, oldValues, changeType);
+  };
+
+  this.setFieldsValue = function (values) {
+    _this.commonSetFieldsValue(values);
+
     var onValuesChange = _this._callbacks.onValuesChange;
-    onValuesChange && onValuesChange(values, _this._formData);
+    onValuesChange == null ? void 0 : onValuesChange(values, _this._formData);
+    return true;
+  };
 
-    _this.notifyField(values, oldValues);
+  this.innerSetFieldsValue = function (values, changeType) {
+    _this.commonSetFieldsValue(values, changeType);
 
+    var _this$_callbacks = _this._callbacks,
+        onValuesChange = _this$_callbacks.onValuesChange,
+        onChange = _this$_callbacks.onChange;
+    onValuesChange == null ? void 0 : onValuesChange(values, _this._formData);
+    onChange == null ? void 0 : onChange(values, _this._formData);
     return true;
   };
 
-  this.setFieldValue = function (name, value) {
-    var _oldValues, _extends3, _onValuesChange, _this$notifyField;
+  this.commonSetFieldValue = function (name, value, changeType) {
+    var _oldValues, _extends3, _this$notifyField;
 
     var oldValues = (_oldValues = {}, _oldValues[name] = _this.getFieldValue(name), _oldValues);
     _this._formData = _extends({}, _this._formData, (_extends3 = {}, _extends3[name] = value, _extends3));
+
+    _this.notifyField((_this$notifyField = {}, _this$notifyField[name] = value, _this$notifyField), oldValues, changeType);
+  };
+
+  this.setFieldValue = function (name, value) {
+    var _onValuesChange;
+
+    _this.commonSetFieldValue(name, value);
+
     var onValuesChange = _this._callbacks.onValuesChange;
-    onValuesChange && onValuesChange((_onValuesChange = {}, _onValuesChange[name] = value, _onValuesChange), _this._formData);
+    onValuesChange && onValuesChange((_onValuesChange = {}, _onValuesChange[name] = value, _onValuesChange), _this.getFieldsValue());
+    return true;
+  };
+
+  this.innerSetFieldValue = function (name, value, changeType) {
+    var _onValuesChange2, _onChange;
 
-    _this.notifyField((_this$notifyField = {}, _this$notifyField[name] = value, _this$notifyField), oldValues);
+    _this.commonSetFieldValue(name, value, changeType);
 
+    var _this$_callbacks2 = _this._callbacks,
+        onValuesChange = _this$_callbacks2.onValuesChange,
+        onChange = _this$_callbacks2.onChange;
+    onValuesChange && onValuesChange((_onValuesChange2 = {}, _onValuesChange2[name] = value, _onValuesChange2), _this._formData);
+    onChange && onChange((_onChange = {}, _onChange[name] = value, _onChange), _this._formData);
     return true;
   };
 
-  this.notifyField = function (values, oldValues) {
+  this.notifyField = function (values, oldValues, changeType) {
+    if (changeType === void 0) {
+      changeType = ValueChangeType.Update;
+    }
+
     Object.keys(values).map(function (fieldName) {
       var _this$_fieldsList;
 
       var fieldObj = ((_this$_fieldsList = _this._fieldsList) == null ? void 0 : _this$_fieldsList[fieldName]) || null;
 
       if (fieldObj) {
-        fieldObj.onValueChange(values[fieldName], oldValues[fieldName]);
+        fieldObj.onValueChange(values[fieldName], oldValues[fieldName], {
+          changeType: changeType
+        });
       }
     });
   };
@@ -92,13 +138,13 @@ var FormData = function FormData() {
       });
     }
 
-    return _this._formData;
+    return deepClone(_this._formData);
   };
 
   this.getFieldValue = function (name) {
     var _this$_formData;
 
-    return (_this$_formData = _this._formData) == null ? void 0 : _this$_formData[name];
+    return deepClone((_this$_formData = _this._formData) == null ? void 0 : _this$_formData[name]);
   };
 
   this.getFieldError = function (name) {
@@ -161,13 +207,43 @@ var FormData = function FormData() {
   };
 
   this.setInitialValues = function (initVal) {
-    _this._initialValues = _extends({}, initVal || {});
+    _this._initialValues = deepClone(initVal || {});
 
     _this.setFieldsValue(initVal);
   };
 
+  this.setInitialValue = function (fieldName, value) {
+    if (!fieldName) {
+      return;
+    }
+
+    _this._initialValues[fieldName] = value;
+
+    _this.setFieldValue(fieldName, value);
+  };
+
+  this.getInitialValue = function (fieldName) {
+    return _this._initialValues[fieldName];
+  };
+
   this.resetFields = function () {
-    _this.setFieldsValue(_this._initialValues);
+    var oldValues = _extends({}, _this._formData);
+
+    var initialValues = {};
+    Object.keys(_this._formData).forEach(function (fieldName) {
+      var _this$_fieldsList5;
+
+      var fieldObj = ((_this$_fieldsList5 = _this._fieldsList) == null ? void 0 : _this$_fieldsList5[fieldName]) || null;
+
+      if (fieldObj) {
+        initialValues[fieldName] = fieldObj.getInitialValue();
+      }
+    });
+    var onValuesChange = _this._callbacks.onValuesChange;
+    onValuesChange && onValuesChange(initialValues, _this._formData);
+    _this._formData = initialValues;
+
+    _this.notifyField(initialValues, oldValues, ValueChangeType.Reset);
   };
 
   this.validateFields = function () {
@@ -199,7 +275,7 @@ var FormData = function FormData() {
   this.submit = function () {
     _this.validateFields().then(function (result) {
       var onSubmit = _this._callbacks.onSubmit;
-      onSubmit == null ? void 0 : onSubmit(_this._formData, result);
+      onSubmit == null ? void 0 : onSubmit(_this.getFieldsValue(), result);
     }).catch(function (e) {
       var onSubmitFailed = _this._callbacks.onSubmitFailed;
 
@@ -207,7 +283,7 @@ var FormData = function FormData() {
         return;
       }
 
-      onSubmitFailed(_this._formData, e);
+      onSubmitFailed(_this.getFieldsValue(), e);
     });
   };
 
@@ -236,7 +312,11 @@ var FormData = function FormData() {
     return {
       registerField: _this.registerField,
       setInitialValues: _this.setInitialValues,
-      setCallbacks: _this.setCallbacks
+      setCallbacks: _this.setCallbacks,
+      getInitialValue: _this.getInitialValue,
+      setInitialValue: _this.setInitialValue,
+      innerSetFieldsValue: _this.innerSetFieldsValue,
+      innerSetFieldValue: _this.innerSetFieldValue
     };
   };
 };

package/esm/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/esm/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 var isFieldRequired = function isFieldRequired(rules) {
   if (rules === void 0) {
     rules = [];
@@ -34,4 +37,31 @@ export var getErrorAndWarnings = function getErrorAndWarnings(result) {
     errors: errors,
     errorTypes: errorTypes
   };
-};
+};
+export var getDefaultValueForInterComponent = function 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, function (val) {
+    if (!isObject(val) && !isArray(val)) {
+      return val;
+    }
+  });
+}

package/esm/input/index.js

@@ -44,7 +44,7 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
   function renderInput(_ref) {
     var prefixCls = _ref.prefixCls;
     var prefix = prefixCls + "-input";
-    return renderWrapper(prefix, type, /*#__PURE__*/React.createElement("input", _extends({}, nativeProps, {
+    return renderWrapper(prefix, type + " single-line", /*#__PURE__*/React.createElement("input", _extends({}, nativeProps, {
       id: id,
       name: name,
       maxLength: maxLength,

package/esm/popover/hooks/usePosition.js

@@ -223,20 +223,38 @@ export var usePosition = function usePosition(props, popoverRef, childRef, wrapp
 
 
     if (verticalAuto) {
-      var popoverTop = childRect.bottom - (newConfig.bottom && newConfig.height ? newConfig.bottom + newConfig.height : 0);
-      var 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) {
+      var setToBottom = function 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
+      };
+
+      var setToTop = function 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
+
+
+      var isPopoverTooTall = window.innerHeight - topOffset - bottomOffset < 2 * (newConfig.height || 0) + 2 * verticalOffset + childRect.height;
+
+      if (isPopoverTooTall) {
+        var spaceAbove = childRect.top;
+        var spaceBelow = window.innerHeight - childRect.bottom;
+        spaceAbove > spaceBelow ? setToTop() : setToBottom();
+      } else {
+        var popoverTop = childRect.bottom - (newConfig.bottom && newConfig.height ? newConfig.bottom + newConfig.height : 0);
+        var 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();
+        }
       }
     } // 挂载在全局的气泡需要计算相对屏幕的位置
     // @en Bubble mounted in the global needs to calculate the position relative to the screen

package/esm/radio/group.js

@@ -71,7 +71,7 @@ export function componentGenerator(Comp) {
           layout: layout,
           disabled: disabled,
           icons: icons,
-          value: groupValue === void 0 ? [] : [groupValue],
+          value: groupValue === void 0 || groupValue === null ? [] : [groupValue],
           onChange: handleChange
         }
       }, children, !children && options && options.map(function (option) {

package/esm/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/esnext/carousel/index.js

@@ -507,11 +507,6 @@ const Carousel = forwardRef((props, ref) => {
             return;
         }
         stopPropagation && e.stopPropagation();
-        if (bouncingRef.current) {
-            bouncingRef.current = false;
-            jumpTo(index, false);
-            return;
-        }
         if (!touchStartedRef.current) {
             return;
         }
@@ -521,6 +516,13 @@ const Carousel = forwardRef((props, ref) => {
             return;
         }
         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/esnext/ellipsis/components/js-ellipsis.js

@@ -49,6 +49,8 @@ const JsEllipsis = forwardRef((props, ref) => {
                 l = m;
             }
         }
+        // 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);

package/esnext/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;

package/esnext/form/form-item.js

@@ -4,37 +4,66 @@ import { cls, Validator, ValidatorType } from '@arco-design/mobile-utils';
 import { Promise } from 'es6-promise';
 import { FormItemContext } from './form-item-context';
 import { GlobalContext } from '../context-provider';
-import { FormInternalComponentType, } from './type';
-import { getErrorAndWarnings, isFieldRequired } from './utils';
+import { FormInternalComponentType, ValueChangeType, } from './type';
+import { getDefaultValueForInterComponent, getErrorAndWarnings, isFieldRequired } from './utils';
 import { DefaultDatePickerLinkedContainer, DefaultPickerLinkedContainer } from './linked-container';
 class FormItemInner extends PureComponent {
     constructor(props, context) {
         super(props);
         this._errors = [];
         this._touched = false;
-        this.onValueChange = (curValue, preValue) => {
+        this.onValueChange = (curValue, preValue, info) => {
             this._touched = true;
             const { shouldUpdate } = this.props;
             if (typeof shouldUpdate === 'function') {
                 shouldUpdate({ preValue, curValue }) && this.forceUpdate();
                 return;
             }
+            if (info?.changeType === ValueChangeType.Reset) {
+                this.props.onValidateStatusChange({
+                    errors: [],
+                    warnings: [],
+                    errorTypes: [],
+                });
+                this._errors = [];
+            }
             this.forceUpdate();
         };
+        this.getInitialValue = () => {
+            const { children, displayType } = this.props;
+            const { getInitialValue } = this.context.form.getInternalHooks();
+            const childrenType = displayType || children.type?.displayName;
+            // get user-defined initialValue or if not defined
+            return getInitialValue(this.props.field) ?? getDefaultValueForInterComponent(childrenType);
+        };
         this.getFieldError = () => {
             return this._errors;
         };
         this.isFieldTouched = () => {
             return this._touched;
         };
-        this.validateField = () => {
+        this.getAllRuleValidateTriggers = () => {
+            return (this.props.rules
+                ?.map(rule => rule.validateTrigger)
+                .flat()
+                .filter(v => !!v) || []);
+        };
+        this.validateField = (validateTrigger) => {
             const { validateMessages } = this.context;
             const { getFieldValue } = this.context.form;
             const { field, rules, onValidateStatusChange } = this.props;
             const value = getFieldValue(field);
-            if (rules?.length && 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
+            const curRules = validateTrigger
+                ? rules?.filter(rule => {
+                    const triggerList = [].concat(rule.validateTrigger || validateTrigger);
+                    return triggerList.includes(validateTrigger);
+                })
+                : rules;
+            if (curRules?.length && field) {
                 const fieldDom = this.props.getFormItemRef();
-                const fieldValidator = new Validator({ [field]: rules }, { validateMessages });
+                const fieldValidator = new Validator({ [field]: curRules }, { validateMessages });
                 return new Promise(resolve => {
                     fieldValidator.validate({ [field]: value }, (errorsMap) => {
                         const { errors, warnings, errorTypes } = getErrorAndWarnings(errorsMap?.[field] || []);
@@ -57,17 +86,10 @@ class FormItemInner extends PureComponent {
             return Promise.resolve({ errors: [], warnings: [], value, field, dom: null });
         };
         this.setFieldData = (value) => {
-            const { field } = this.props;
-            const { setFieldValue } = this.context.form;
-            setFieldValue(field, value);
-            this.validateField();
-        };
-        this.innerTriggerFunction = (_, value, ...args) => {
-            this.setFieldData(value);
-            const { children, trigger = 'onChange' } = this.props;
-            if (trigger && children.props?.[trigger]) {
-                children.props?.[trigger](_, value, ...args);
-            }
+            const { field, trigger = 'onChange' } = this.props;
+            const { innerSetFieldValue } = this.context.form.getInternalHooks();
+            innerSetFieldValue(field, value);
+            this.validateField(trigger);
         };
         this.innerTriggerFunctionWithValueFirst = (value, ...args) => {
             this.setFieldData(value);
@@ -76,6 +98,11 @@ class FormItemInner extends PureComponent {
                 children.props?.[trigger](value, ...args);
             }
         };
+        this.innerOnInputFunction = (_, value, ...args) => {
+            this.setFieldData(value);
+            const { children } = this.props;
+            children.props?.onInput?.(_, value, ...args);
+        };
         this.innerClearFunction = (...args) => {
             const { children } = this.props;
             this.setFieldData('');
@@ -85,8 +112,8 @@ class FormItemInner extends PureComponent {
         };
         this.destroyField = () => { };
         if (props?.initialValue && props.field) {
-            const { setInitialValues } = context.form.getInternalHooks();
-            setInitialValues({ [props.field]: props.initialValue });
+            const { setInitialValue } = context.form.getInternalHooks();
+            setInitialValue(props.field, props.initialValue);
         }
     }
     componentDidMount() {
@@ -97,82 +124,69 @@ class FormItemInner extends PureComponent {
         this.destroyField();
     }
     renderChildren() {
-        const { children, field, trigger = 'onChange', triggerPropsField = 'value', displayType, } = this.props;
+        const { children, field, trigger = 'onChange', triggerPropsField = 'value', displayType, disabled, } = this.props;
         const { getFieldValue } = this.context.form;
-        let props = {
-            [triggerPropsField]: getFieldValue(field),
-            disabled: this.props.disabled,
+        const childrenProps = {
+            disabled,
         };
+        // inject validateTriggers of rules
+        this.getAllRuleValidateTriggers().forEach(triggerName => {
+            childrenProps[triggerName] = e => {
+                this.validateField(triggerName);
+                children?.props?.[triggerName]?.(e);
+            };
+        });
         const childrenType = displayType || children.type?.displayName;
         switch (childrenType) {
             case FormInternalComponentType.Input:
             case FormInternalComponentType.Textarea:
-                props = {
-                    value: getFieldValue(field) || '',
-                    onInput: this.innerTriggerFunction,
-                    onClear: this.innerClearFunction,
-                    disabled: this.props.disabled,
-                };
-                break;
-            case FormInternalComponentType.Checkbox:
-            case FormInternalComponentType.Radio:
-            case FormInternalComponentType.Slider:
-            case FormInternalComponentType.RadioGroup:
-            case FormInternalComponentType.CheckboxGroup:
-                props = {
-                    value: getFieldValue(field),
-                    onChange: this.innerTriggerFunctionWithValueFirst,
-                    disabled: this.props.disabled,
-                };
+                childrenProps.value =
+                    getFieldValue(field) || '';
+                childrenProps.onInput =
+                    this.innerOnInputFunction;
+                childrenProps.onClear =
+                    this.innerClearFunction;
                 break;
             case FormInternalComponentType.DatePicker:
-                props = {
-                    currentTs: getFieldValue(field),
-                    onChange: this.innerTriggerFunctionWithValueFirst,
-                    disabled: this.props.disabled,
-                    renderLinkedContainer: children.props?.renderLinkedContainer ||
-                        ((ts, types) => React.createElement(DefaultDatePickerLinkedContainer, { ts: ts, types: types })),
-                };
+                childrenProps.currentTs = getFieldValue(field);
+                childrenProps.onChange =
+                    this.innerTriggerFunctionWithValueFirst;
+                childrenProps.renderLinkedContainer =
+                    children.props?.renderLinkedContainer ||
+                        ((ts, types) => React.createElement(DefaultDatePickerLinkedContainer, { ts: ts, types: types }));
                 break;
             case FormInternalComponentType.Picker:
-                props = {
-                    value: getFieldValue(field),
-                    onChange: this.innerTriggerFunctionWithValueFirst,
-                    disabled: this.props.disabled,
-                    renderLinkedContainer: children.props?.renderLinkedContainer ||
-                        (val => React.createElement(DefaultPickerLinkedContainer, { value: val })),
-                };
+                childrenProps.value = getFieldValue(field) || '';
+                childrenProps.onChange = this.innerTriggerFunctionWithValueFirst;
+                childrenProps.renderLinkedContainer =
+                    children.props?.renderLinkedContainer ||
+                        (val => React.createElement(DefaultPickerLinkedContainer, { value: val }));
                 break;
             case FormInternalComponentType.Switch:
-                props = {
-                    checked: Boolean(getFieldValue(field)),
-                    onChange: this.innerTriggerFunctionWithValueFirst,
-                    disabled: this.props.disabled,
-                };
+                childrenProps.checked = Boolean(getFieldValue(field));
+                childrenProps.onChange = this.innerTriggerFunctionWithValueFirst;
                 break;
             case FormInternalComponentType.ImagePicker:
-                props = {
-                    images: getFieldValue(field),
-                    onChange: this.innerTriggerFunctionWithValueFirst,
-                    disabled: this.props.disabled,
-                };
+                childrenProps.images = getFieldValue(field);
+                childrenProps.onChange =
+                    this.innerTriggerFunctionWithValueFirst;
                 break;
             default:
-                const originTrigger = children.props[trigger];
+                if (triggerPropsField) {
+                    childrenProps[triggerPropsField] = getFieldValue(field);
+                }
                 // inject the validated result
-                props.error = this._errors;
-                props[trigger] = (newValue, ...args) => {
-                    this.setFieldData(newValue);
-                    originTrigger && originTrigger(newValue, ...args);
-                };
+                childrenProps.error = this._errors;
+                childrenProps[trigger] = this.innerTriggerFunctionWithValueFirst;
         }
-        return React.cloneElement(children, props);
+        return React.cloneElement(children, childrenProps);
     }
     render() {
         return this.renderChildren();
     }
 }
 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 { prefixCls } = useContext(GlobalContext);

package/esnext/form/index.js

@@ -7,7 +7,7 @@ import useForm from './useForm';
 export { default as useForm } from './useForm';
 export * from './type';
 const Form = forwardRef((props, ref) => {
-    const { className = '', style, layout = 'horizontal', initialValues, form: formInstance, children, onValuesChange, onSubmit, onSubmitFailed, disabled, } = props;
+    const { className = '', style, layout = 'horizontal', initialValues, form: formInstance, children, onValuesChange, onChange, onSubmit, onSubmitFailed, disabled, } = props;
     const domRef = useRef(null);
     const initRef = useRef(false);
     const [form] = useForm(formInstance);
@@ -16,6 +16,7 @@ const Form = forwardRef((props, ref) => {
         onValuesChange,
         onSubmit,
         onSubmitFailed,
+        onChange,
     });
     if (!initRef.current) {
         setInitialValues(initialValues || {});