@arco-design/mobile-react 2.36.1 → 2.37.0

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 || {});

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

@@ -1,8 +1,8 @@
 import { IRules } from '@arco-design/mobile-utils';
-import { ReactNode } from 'react';
+import { ReactElement, 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",
@@ -46,12 +46,17 @@ export interface FormProps {
      * @en Form initial value
      */
     initialValues?: FieldItem;
-    children: React.ReactNodeArray | ReactNode;
+    children: ReactNode[] | ReactNode;
     /**
      * 表单项数据变化时的回调
      * @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 {
     /**
@@ -263,7 +282,7 @@ export interface FormItemProps {
      * 表单项子节点
      * @en Form item children
      */
-    children: JSX.Element;
+    children: ReactElement;
     /**
      * 表单项是否刷新
      * @en Form item is updated
@@ -278,7 +297,7 @@ export interface FormItemProps {
      * 表单项下方节点
      * @en Form item extra node
      */
-    extra?: JSX.Element;
+    extra?: ReactElement;
     /**
      * 触发事件更新事件名称
      * @en The function name when updating data
@@ -318,7 +337,7 @@ export interface IFormItemInnerProps {
      * 表单项子节点
      * @en Form item children
      */
-    children: JSX.Element;
+    children: ReactElement<any, any>;
     /**
      * 表单项是否刷新
      * @en Form item is updated
@@ -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;
+        }
+    });
+}