@cloudbase/weda-ui 3.19.0 → 3.20.1

package/dist/web/components/wd-form-item/wd-form-item.js

@@ -1,18 +1,47 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState } from 'react';
 import classNames from '../../utils/classnames';
 import { useConfig } from '../../utils/config-context';
 import { WdIcon } from '../wd-icon';
+import { WdCard } from '../wd-card';
 import { WdBubble } from '../wd-bubble';
 import { WdFormItemReadOnly } from './wd-form-item-read-only';
 import { usePlatform, textToString } from '../../utils/platform';
-import { useLabelAlign, useLayout, useSize, convertPx, convertIconSize, } from '../../utils/hooks/useFormLegacy';
+import { useLabelAlign, useLayout, useSize, convertPx, convertIconSize } from '../../utils/hooks/useFormLegacy';
 import { X_RUNTIME_DEFAULT } from '../../../configs/type-utils/x-runtime-default';
+// 标题部分，含必填、提示
+const Label = React.memo(function Label({ labelCls, labelStyle, itemWrap, inputId, labelRoot, label, labelTips, iconSize, LabelAdornment, }) {
+    return (_jsxs("div", { className: labelCls, style: labelStyle, children: [_jsxs("label", { className: `${itemWrap}__label-content`, htmlFor: inputId, children: [_jsx("span", { className: `${itemWrap}__label-text ${labelRoot}-text`, title: label, children: textToString(label) }), labelTips && (_jsx("span", { className: `${itemWrap}__label-explain`, children: _jsx(WdBubble, { style: { display: 'inline' }, bubbleChildren: _jsx(WdIcon, { name: "td:help-circle", size: iconSize }), bubbleContent: textToString(labelTips), promptTheme: "dark" }) }))] }), LabelAdornment && _jsx("div", { className: `${itemWrap}__label-adornment`, children: LabelAdornment })] }));
+});
+// // 输入部分
+const Item = React.memo(function Item({ itemWrap, testId, controlWrapCls, readOnly, before, after, readValue, readBeforeAfter, format, value, children, }) {
+    return (_jsx("div", { className: `${itemWrap}__control`, "data-testid": testId, children: _jsx("div", { className: controlWrapCls, children: _jsx(WdFormItemReadOnly, { readOnly: readOnly, readValue: readValue, version: "wd", before: before, after: after, readBeforeAfter: readBeforeAfter, format: format, value: value, children: children }) }) }));
+});
+const LabelContainer = React.memo(function LabelContainer(props) {
+    const { mode, labelProps, itemProps, children } = props || {};
+    const cardRef = React.createRef();
+    const [iconName, setIconName] = useState('chevronup');
+    const headerSlot = (_jsxs(_Fragment, { children: [_jsx(WdIcon, { name: iconName, events: {
+                    tap: () => {
+                        setIconName(iconName === 'chevrondown' ? 'chevronup' : 'chevrondown');
+                    },
+                } }), _jsx(Label, { ...labelProps })] }));
+    if (mode === 'custom' || mode === 'table') {
+        return _jsx(Item, { ...itemProps, children: children });
+    }
+    const contentSlot = _jsx(Item, { ...itemProps, children: children });
+    return (_jsx(WdCard, { ref: cardRef, className: iconName === 'chevrondown' ? 'wd-card-content__hidden' : '', showContent: true, headerSlot: headerSlot, contentSlot: contentSlot, events: { tap: () => { } } }));
+});
+const LabelContainerComp = React.memo(function LabelContainerComp({ isRoot, isH5, mode, labelProps, itemProps, children, }) {
+    const showLabel = isRoot && !isH5;
+    return (_jsxs(_Fragment, { children: [showLabel && _jsx(Label, { ...labelProps }), _jsx(LabelContainer, { isRoot: isRoot, labelProps: labelProps, itemProps: itemProps, mode: mode, children: children })] }));
+});
 /**
  * 表单项包裹，包括标题、文本提示、校验
  */
 // eslint-disable-next-line complexity
-export function WdFormItem(props) {
-    const { id, className, style, label, labelVisible = X_RUNTIME_DEFAULT.labelVisible, labelTips = X_RUNTIME_DEFAULT.labelTips, labelWidth: _labelWidth = X_RUNTIME_DEFAULT.labelWidth, labelWrap = X_RUNTIME_DEFAULT.labelWrap, extra = X_RUNTIME_DEFAULT.extra, required = X_RUNTIME_DEFAULT.required, readOnly, children, testId, requiredFlag = X_RUNTIME_DEFAULT.requiredFlag, validateState, validateErrorMsg, readValue, borderedH5 = X_RUNTIME_DEFAULT.borderedH5, borderedPc = X_RUNTIME_DEFAULT.borderedPc, classRoot, controlAlign, inputId, isWdFormDetail, before, after, readBeforeAfter = true, visible = true, LabelContainer = null, isRoot = true, LabelAdornment, format, value, } = props;
+export const WdFormItem = React.memo(function WdFormItem(props) {
+    const { id, className, style, label, labelVisible = X_RUNTIME_DEFAULT.labelVisible, labelTips = X_RUNTIME_DEFAULT.labelTips, labelWidth: _labelWidth = X_RUNTIME_DEFAULT.labelWidth, labelWrap = X_RUNTIME_DEFAULT.labelWrap, extra = X_RUNTIME_DEFAULT.extra, required = X_RUNTIME_DEFAULT.required, readOnly, children, testId, requiredFlag = X_RUNTIME_DEFAULT.requiredFlag, validateState, validateErrorMsg, readValue, borderedH5 = X_RUNTIME_DEFAULT.borderedH5, borderedPc = X_RUNTIME_DEFAULT.borderedPc, classRoot, controlAlign, inputId, isWdFormDetail, before, after, readBeforeAfter = true, visible = true, hasLabelContainer = null, isRoot = true, LabelAdornment, format, value, } = props;
     const { classPrefix } = useConfig();
     const platform = usePlatform();
     const isH5 = platform === 'h5';
@@ -27,9 +56,7 @@ export function WdFormItem(props) {
     // 样式前缀定义
     const root = `${classPrefix}-${classRoot}`;
     const item = `${classPrefix}-form-item`;
-    const itemLayout = isWdFormDetail
-        ? `${classPrefix}-form-item--detail`
-        : `${item}-`;
+    const itemLayout = isWdFormDetail ? `${classPrefix}-form-item--detail` : `${item}-`;
     const itemWrap = `${classPrefix}-form-item-wrap`;
     const labelRoot = `${root}__label`;
     // 表单项样式
@@ -53,9 +80,45 @@ export function WdFormItem(props) {
         [`${itemWrap}__control-wrap--right`]: controlAlign === 'right',
     });
     // 输入部分
-    const Item = (_jsx("div", { className: `${itemWrap}__control`, "data-testid": testId, children: _jsx("div", { className: controlWrapCls, children: _jsx(WdFormItemReadOnly, { readOnly: readOnly, readValue: readValue, version: "wd", before: before, after: after, readBeforeAfter: readBeforeAfter, format: format, value: value, children: children }) }) }));
+    // const Item = (
+    //   <div className={`${itemWrap}__control`} data-testid={testId}>
+    //     <div className={controlWrapCls}>
+    //       <WdFormItemReadOnly
+    //         readOnly={readOnly}
+    //         readValue={readValue}
+    //         version="wd"
+    //         before={before}
+    //         after={after}
+    //         readBeforeAfter={readBeforeAfter}
+    //         format={format}
+    //         value={value}
+    //       >
+    //         {children}
+    //       </WdFormItemReadOnly>
+    //     </div>
+    //   </div>
+    // );
     // 标题部分，含必填、提示
-    const Label = labelVisible && (_jsxs("div", { className: labelCls, style: labelStyle, children: [_jsxs("label", { className: `${itemWrap}__label-content`, htmlFor: inputId, children: [_jsx("span", { className: `${itemWrap}__label-text ${labelRoot}-text`, title: label, children: textToString(label) }), labelTips && (_jsx("span", { className: `${itemWrap}__label-explain`, children: _jsx(WdBubble, { style: { display: 'inline' }, bubbleChildren: _jsx(WdIcon, { name: "td:help-circle", size: iconSize }), bubbleContent: textToString(labelTips), promptTheme: "dark" }) }))] }), LabelAdornment && (_jsx("div", { className: `${itemWrap}__label-adornment`, children: LabelAdornment }))] }));
+    // const Label = labelVisible && (
+    //   <div className={labelCls} style={labelStyle}>
+    //     <label className={`${itemWrap}__label-content`} htmlFor={inputId}>
+    //       <span className={`${itemWrap}__label-text ${labelRoot}-text`} title={label}>
+    //         {textToString(label)}
+    //       </span>
+    //       {labelTips && (
+    //         <span className={`${itemWrap}__label-explain`}>
+    //           <WdBubble
+    //             style={{ display: 'inline' }}
+    //             bubbleChildren={<WdIcon name="td:help-circle" size={iconSize} />}
+    //             bubbleContent={textToString(labelTips)}
+    //             promptTheme="dark"
+    //           />
+    //         </span>
+    //       )}
+    //     </label>
+    //     {LabelAdornment && <div className={`${itemWrap}__label-adornment`}>{LabelAdornment}</div>}
+    //   </div>
+    // );
     // 下方空白替代(改为距左对齐)
     // const LabelSpace = labelVisible && layout === 'horizontal' && (
     //   <div className={labelCls} style={labelStyle}></div>
@@ -64,11 +127,30 @@ export function WdFormItem(props) {
     const Help = extra && (_jsx("p", { className: `${item}__help`, children: _jsx("span", { className: `${item}__help-text ${root}__help`, children: textToString(extra) }) }));
     // 校验提示文字部分
     const Message = validateErrorMsg && (_jsx("p", { className: `${item}__help`, children: _jsx("span", { className: `${classPrefix}-g-text-${validateState} ${root}__error`, children: textToString(validateErrorMsg) }) }));
+    const labelProps = {
+        labelCls,
+        labelStyle,
+        itemWrap,
+        inputId,
+        labelRoot,
+        label,
+        labelTips,
+        iconSize,
+        LabelAdornment,
+    };
+    const itemProps = {
+        itemWrap,
+        testId,
+        controlWrapCls,
+        readOnly,
+        readValue,
+        readBeforeAfter,
+        format,
+        value,
+        before,
+        after,
+    };
     if (!visible)
         return null;
-    return (_jsxs("div", { className: cls, id: isRoot ? id : null, style: style, children: [_jsx("div", { className: itemWrap, children: LabelContainer ? (_jsx(LabelContainerComp, { LabelContainer: LabelContainer, isRoot: isRoot, isH5: isH5, Label: Label, Item: Item, mode: props === null || props === void 0 ? void 0 : props.mode })) : (_jsxs(_Fragment, { children: [Label, Item] })) }), Message, Help] }));
-}
-const LabelContainerComp = ({ isRoot, isH5, Label, Item, LabelContainer, mode, }) => {
-    const showLabel = isRoot && !isH5;
-    return (_jsxs(_Fragment, { children: [showLabel && Label, _jsx(LabelContainer, { isRoot: isRoot, Label: Label, Item: Item, mode: mode })] }));
-};
+    return (_jsxs("div", { className: cls, id: isRoot ? id : null, style: style, children: [_jsx("div", { className: itemWrap, children: hasLabelContainer ? (_jsx(LabelContainerComp, { isRoot: isRoot, isH5: isH5, mode: props === null || props === void 0 ? void 0 : props.mode, labelProps: labelProps, itemProps: itemProps, children: children })) : (_jsxs(_Fragment, { children: [labelVisible && _jsx(Label, { ...labelProps }), _jsx(Item, { ...itemProps, children: children })] })) }), Message, Help] }));
+});

package/dist/web/components/wd-form-obj/base-form-obj.js

@@ -1,45 +1,22 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-magic-numbers */
-import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useDeepCompareEffect } from '@react-hookz/web';
 import { useConfig } from '../../utils/config-context';
 import { WdFormItem } from '../wd-form-item';
 import { usePlatform } from '../../utils/platform';
 import classNames from '../../utils/classnames';
-import { FormObjContext, FormObjWidgetContext, useFormObjWidget } from '../../utils/widget-api';
-import { noop } from '../../utils/constant';
+import { FormFieldObjProvider } from '../wd-form/contexts/form-field-obj-context';
+import { FormFieldProvider } from '../wd-form/contexts/form-field-context';
+import { noop, NOT_EXISTED_VALUE } from '../../utils/constant';
 import lodashSet from 'lodash.set';
 import lodashGet from 'lodash.get';
-import { useFormInputTrait, useParentForm } from '../form-input-hooks';
+import { useFormInputTrait } from '../form-input-hooks';
 import { deepClone } from '../../utils/tool';
 import isObjectEqual from '../../utils/isObjectEqual';
-import { WdIcon } from '../wd-icon';
-import { WdCard } from '../wd-card';
 import '../style';
 import useDebouncedCallback from '../../utils/hooks/use-debounced-callback';
-import { useMap } from '@react-hookz/web';
-import { isNil } from '../../utils/lodash';
 const classRoot = 'form-obj';
-/**
- * 获取待操作的数据路径，嵌套表单中子组件的名称是按lodashSet形式拼接的，在更新嵌套表单值时，要去除掉当前嵌套表单的路径名称
- * @param operateName 待操作的表单项名称
- * @param currentName 当前表单项名称
- * @returns
- */
-const getValueName = (operateName, currentName) => operateName.replace(new RegExp(`^${currentName}(\\.)?`), '');
-const LabelContainer = (props) => {
-    const { Label, Item, mode } = props || {};
-    const cardRef = React.createRef();
-    const [iconName, setIconName] = useState('chevronup');
-    const headerSlot = (_jsxs(_Fragment, { children: [_jsx(WdIcon, { name: iconName, events: {
-                    tap: () => {
-                        setIconName(iconName === 'chevrondown' ? 'chevronup' : 'chevrondown');
-                    },
-                } }), Label] }));
-    if (mode === 'custom' || mode === 'table') {
-        return _jsx(_Fragment, { children: Item });
-    }
-    return (_jsx(WdCard, { ref: cardRef, className: iconName === 'chevrondown' ? 'wd-card-content__hidden' : '', showContent: true, headerSlot: headerSlot, contentSlot: Item, events: { tap: () => { } } }));
-};
 export const BaseFormObj = forwardRef(function BaseFormObj(props, ref) {
     const { classPrefix } = useConfig();
     const platform = usePlatform();
@@ -51,24 +28,14 @@ export const BaseFormObj = forwardRef(function BaseFormObj(props, ref) {
         ...props,
         classRoot,
         className: classNames(props.className, `${classPrefix}-form-obj-item`),
-        LabelContainer,
+        hasLabelContainer: true,
     };
-    const initValue = { arr: [], obj: {} }[props.objType];
     // 嵌套表单状态
     const [status, updateStatus] = useState('edit');
     const [innerHandle, setInnerHandle] = useState({});
     const inputRef = useRef({});
-    // 嵌套表单的最终值
-    const [objValue, setObjValue] = useState(initValue);
-    // 父级普通表单对象
-    const parentForm = useParentForm(props.$widget);
-    // 父级嵌套表单对象
-    const parentFormObj = useFormObjWidget();
-    // 嵌套表单内的子组件实例对象集合，在form-input-hooks中会调用addFormItem添加关联上
-    const formsItemMap = useMap([]);
-    const { name, value, readOnly, disabled, visible,
-    // onChange: _onChange,
-     } = useFormInputTrait({
+    const [isInformObjContainer, setIsInformObjContainer] = useState(false);
+    const { name, value: objValue, readOnly, disabled, visible, onChange: _onChange, namePath, isInformContainer: _isInformContainer, } = useFormInputTrait({
         label: props.label,
         value: props.value,
         name: props.name,
@@ -83,9 +50,16 @@ export const BaseFormObj = forwardRef(function BaseFormObj(props, ref) {
         onChange: noop,
         $node: props.$node,
     });
+    const valueRef = useRef(props.value);
+    useDeepCompareEffect(() => {
+        if (isObjectEqual(valueRef.current, objValue)) {
+            return;
+        }
+        triggerOnDataChange(objValue);
+    }, [objValue]);
     useEffect(() => {
-        setObjValue(value || {});
-    }, [value]);
+        setIsInformObjContainer(true);
+    }, []);
     useEffect(() => {
         if (readOnly) {
             updateStatus('readOnly');
@@ -102,41 +76,31 @@ export const BaseFormObj = forwardRef(function BaseFormObj(props, ref) {
      */
     const triggerOnDataChange = useDebouncedCallback(useCallback((value) => {
         var _a, _b;
+        valueRef.current = value;
         (_b = (_a = props.events) === null || _a === void 0 ? void 0 : _a.onDataChange) === null || _b === void 0 ? void 0 : _b.call(_a, { data: value });
     }, [props.events]), 500);
-    /**
-     * 不在表单容器中使用时，更新子组件值
-     */
-    const updateChildValue = useDebouncedCallback(useCallback((value) => {
-        formsItemMap.forEach((items, childName) => {
-            var _a;
-            const newValue = lodashGet(value, getValueName(childName, name));
-            if (!Array.isArray(items)) {
-                items = [items];
-            }
-            (_a = items === null || items === void 0 ? void 0 : items.forEach) === null || _a === void 0 ? void 0 : _a.call(items, (item) => {
-                if (item.setValue && !isObjectEqual(item.value, newValue)) {
-                    item.setValue(newValue);
-                }
-            });
-        });
-    }, [formsItemMap, name]), 0);
-    const dealArrChange = (params, objValue) => {
+    const dealArrChange = useCallback((params, objValue) => {
         let value;
         // 顶层为数组类型
-        if (Array.isArray(objValue) && ['add', 'remove'].includes(params.type)) {
+        if (['add', 'remove'].includes(params.type)) {
             value = deepClone(objValue);
+            const _addDefaultValue = deepClone(props.addDefaultValue);
             // 触发添加操作，则增加一个undefined值
             if (params.type === 'add') {
-                value.push(props.addDefaultValue);
+                if (Array.isArray(objValue)) {
+                    value.push(_addDefaultValue);
+                }
+                else {
+                    value = [].concat(_addDefaultValue);
+                }
             }
             // 触发删除操作，则删除对应索引的值
-            if (params.type === 'remove') {
+            if (Array.isArray(objValue) && params.type === 'remove') {
                 value = [...value.slice(0, params.value), ...value.slice(params.value + 1)];
             }
         }
         return value;
-    };
+    }, [props.addDefaultValue]);
     const dealObjChange = (params, objValue) => {
         var _a, _b;
         // 如果设置的是空对象，则认为是覆盖更新
@@ -152,23 +116,21 @@ export const BaseFormObj = forwardRef(function BaseFormObj(props, ref) {
     /**
      * 更新值
      * @param params
-     * @param param1.isUpdateParentForm 是否更新父级表单，因子组件值变化调用change时不去触发父表单的更新，因为子组件自己会触发；因为外部设置了值，则触发父表单更新
-     * @param param1.isUpdateChildValue 是否更新子组件值, 因子组件值变化调用change时不去触发updateChildValueWithoutForm；因为外部设置了值，则触发updateChildValueWithoutForm去更新子组件值
      * @returns
      */
-    const change = useCallback((params, { isUpdateParentForm = false, isUpdateChildValue = true } = {}) => {
-        var _a, _b, _c;
+    const change = useCallback((params) => {
         if (disabled || readOnly) {
             return;
         }
+        const initValue = { arr: [], obj: {} }[props.objType];
         let value = deepClone(params.value);
-        if (props.objType === 'arr') {
-            value = dealArrChange(params, objValue) || value;
-        }
         // 如果有更新标识，则按标识路径更新值
         if (params.name) {
             value = deepClone(objValue);
-            lodashSet(value, getValueName(params.name, name), params.value);
+            lodashSet(value, params.name, params.value);
+        }
+        else if (props.objType === 'arr') {
+            value = dealArrChange(params, objValue) || value;
         }
         else if (props.objType === 'obj') {
             value = dealObjChange(params, objValue) || value;
@@ -176,59 +138,12 @@ export const BaseFormObj = forwardRef(function BaseFormObj(props, ref) {
         if (isObjectEqual(value, objValue) || (value === null && isObjectEqual(initValue, objValue))) {
             return;
         }
-        setObjValue(value || initValue);
-        if (isUpdateChildValue) {
-            // 外部设置数据，同时去更新子组件的值
-            updateChildValue(value);
-        }
-        if (isUpdateParentForm) {
-            // 触发父级普通表单值更新
-            (_a = parentForm === null || parentForm === void 0 ? void 0 : parentForm.__setValueImmediate__) === null || _a === void 0 ? void 0 : _a.call(parentForm, { [name]: value }, false, true);
-        }
-        if (params.name) {
-            // 触发父级嵌套表单值更新
-            (_b = parentFormObj === null || parentFormObj === void 0 ? void 0 : parentFormObj.__setValueImmediate__) === null || _b === void 0 ? void 0 : _b.call(parentFormObj, {
-                name: params.name,
-                value: params.value,
-            });
-        }
-        else if (parentFormObj === null || parentFormObj === void 0 ? void 0 : parentFormObj.formObjName) {
-            // 外部直接调用formObj.setValue的情况下，触发父级嵌套表单值更新
-            (_c = parentFormObj === null || parentFormObj === void 0 ? void 0 : parentFormObj.__setValueImmediate__) === null || _c === void 0 ? void 0 : _c.call(parentFormObj, { name, value });
-        }
+        _onChange(value || initValue);
         triggerOnDataChange(value);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [objValue, updateChildValue, name, parentFormObj, triggerOnDataChange, parentForm, props.objType]);
-    const changeDebounce = useDebouncedCallback(useCallback((value, option) => {
-        change(value, option);
+    }, [disabled, readOnly, props.objType, objValue, _onChange, triggerOnDataChange, dealArrChange]);
+    const changeDebounce = useDebouncedCallback(useCallback((value) => {
+        change(value);
     }, [change]), 300);
-    /**
-     * 子组件默认值变更，触发嵌套表单值更新
-     */
-    const changeByChildFormObj = useCallback((params) => {
-        var _a, _b;
-        const value = deepClone(objValue);
-        lodashSet(value, getValueName(params.name, name), params.value);
-        if (isObjectEqual(value, objValue)) {
-            return;
-        }
-        if (params.name) {
-            // 将值同步给父级嵌套表单
-            (_a = parentFormObj === null || parentFormObj === void 0 ? void 0 : parentFormObj.__setValueImmediate__) === null || _a === void 0 ? void 0 : _a.call(parentFormObj, {
-                name: params.name,
-                value: params.value,
-            });
-        }
-        else if (parentFormObj === null || parentFormObj === void 0 ? void 0 : parentFormObj.formObjName) {
-            // 外部直接调用formObj.setValue的情况下，触发父级嵌套表单值更新
-            (_b = parentFormObj === null || parentFormObj === void 0 ? void 0 : parentFormObj.__setValueImmediate__) === null || _b === void 0 ? void 0 : _b.call(parentFormObj, { name, value });
-        }
-        setObjValue(value || initValue);
-        triggerOnDataChange(value || initValue);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [objValue, name, parentFormObj]);
     useLayoutEffect(() => {
         if (!ref)
             return;
@@ -239,7 +154,7 @@ export const BaseFormObj = forwardRef(function BaseFormObj(props, ref) {
              * @param value
              */
             setValue: (value) => {
-                changeDebounce({ name: '', value }, { isUpdateParentForm: true });
+                changeDebounce({ name: '', value });
             },
             getValue() {
                 return objValue;
@@ -253,15 +168,15 @@ export const BaseFormObj = forwardRef(function BaseFormObj(props, ref) {
                 ...(props.objType === 'arr'
                     ? {
                         add: () => {
-                            change({ type: 'add' }, { isUpdateParentForm: false });
+                            change({ type: 'add' });
                         },
                         remove: ({ index = -1 } = {}) => {
-                            change({ type: 'remove', value: index }, { isUpdateParentForm: false });
+                            change({ type: 'remove', value: index });
                         },
                     }
                     : {}),
                 change: (params) => {
-                    change(params, { isUpdateParentForm: true });
+                    change(params);
                 },
             },
             label: props.label,
@@ -271,72 +186,26 @@ export const BaseFormObj = forwardRef(function BaseFormObj(props, ref) {
             disabled,
             readOnly,
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [innerHandle, props.label, name, objValue, visible, disabled, readOnly, change, props.objType]);
-    const formObjWidgetContextProvider = useMemo(() => {
-        return {
-            formObjName: name,
-            /**
-             * 用于同步子组件的默认值
-             * @param params
-             */
-            __setValueImmediate__(params) {
-                changeByChildFormObj(params);
-            },
-        };
-    }, [changeByChildFormObj, name]);
-    const formObjContextProvider = useMemo(() => {
-        return {
-            formObjName: name,
-            status,
-            /**
-             * 嵌套表单内部子组件值改变时，触发嵌套表单组件的值更新
-             * @param params.name 子组件名称
-             * @param params.value 子组件值
-             */
-            valueChangeFromChild: (params = {}) => {
-                if (!params.name)
-                    return;
-                // 由于是子组件值变更触发，所以嵌套表单值更新后不再次触发子组件值变更
-                change(params, { isUpdateChildValue: false });
-            },
-            /**
-             * 收集嵌套表单内的子组件实例，以便嵌套表单值变化时，主动触发子组件值更新
-             * @param childName 子组件名称
-             * @param formItem 子组件$widget
-             * @returns
-             */
-            addFormItem(childName, formItem) {
-                if (isNil(childName) || !formItem || (typeof childName === 'string' && childName.length === 0)) {
-                    // childName 没设置或为空串的时候不受表单容器控制
-                    console.warn(`组件 #${formItem === null || formItem === void 0 ? void 0 : formItem.id} 表单key(表单输入类组件 childName 属性)没设置或为空串的时候不受表单容器控制`);
-                    return noop;
-                }
-                if (formsItemMap.has(childName)) {
-                    formsItemMap.get(childName).push(formItem);
-                }
-                else {
-                    formsItemMap.set(childName, [formItem]);
-                }
-                return () => {
-                    const items = formsItemMap.get(childName);
-                    const removedArr = items.filter((item) => item !== formItem);
-                    if (removedArr.length <= 0) {
-                        formsItemMap.delete(childName);
-                    }
-                    else {
-                        formsItemMap.set(childName, removedArr);
-                    }
-                };
-            },
-        };
-    }, [change, formsItemMap, name, status]);
-    useEffect(() => {
-        // 如果是最顶层的嵌套表单，则去更新子组件的值，否则自己的值更新不去触发子组件值更新，因为父级普通表单会去更新
-        if (!parentFormObj) {
-            updateChildValue(objValue);
+    }, [innerHandle, props.label, name, objValue, visible, disabled, readOnly, props.objType, change, ref, changeDebounce]);
+    const setFieldValue = useCallback(({ namePath, value }) => {
+        change({ name: namePath, value });
+    }, [change]);
+    const getFieldValue = useCallback(({ namePath, initialValue }) => {
+        const value = lodashGet(objValue, namePath, NOT_EXISTED_VALUE);
+        if (value !== NOT_EXISTED_VALUE) {
+            return value;
+        }
+        else {
+            // 设置初始值,兼容表单项变量绑定场景
+            // form的初始值>formArr/formObj/formDetail>field
+            if (initialValue !== undefined) {
+                return initialValue;
+            }
+            return null;
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [objValue, parentFormObj]);
-    return (_jsx(WdFormItem, { ...formItemProps, children: _jsx(FormObjWidgetContext.Provider, { value: formObjWidgetContextProvider, children: _jsx(FormObjContext.Provider, { value: formObjContextProvider, children: _jsx("fieldset", { className: cls, id: props.id, style: props.style, role: "container", "data-testid": "formObj", children: props.children }) }) }) }));
+    }, [objValue]);
+    if (_isInformContainer) {
+        return (_jsx(FormFieldObjProvider, { namePath: namePath, status: status, objType: props.objType, children: _jsx(WdFormItem, { ...formItemProps, children: _jsx("fieldset", { className: cls, id: props.id, style: props.style, role: "container", "data-testid": "formObj", children: props.children }) }) }));
+    }
+    return (_jsx(FormFieldProvider, { setFieldValue: setFieldValue, isInformContainer: isInformObjContainer, getFieldValue: getFieldValue, children: _jsx(FormFieldObjProvider, { namePath: namePath, status: status, children: _jsx(WdFormItem, { ...formItemProps, children: _jsx("fieldset", { className: cls, id: props.id, style: props.style, role: "container", "data-testid": "formObj", children: props.children }) }) }) }));
 });

package/dist/web/components/wd-input/wd-input.js

@@ -35,7 +35,7 @@ export const WdInput = forwardRef(function WdInput(props, ref) {
     const { value, // 代表组件值，含前后缀
     onChange: _onChange, disabled, readOnly, validateErrorMsg, validateState, visible, } = useFormInputTrait(traitProps);
     const wrapRef = useRef(null);
-    const valueRef = useRef(value);
+    const valueRef = useRef(null);
     const size = useSize(props);
     const iconSize = convertIconSize(size);
     const { classPrefix } = useConfig();

package/dist/web/components/wd-input-number/wd-input-number.js

@@ -38,10 +38,44 @@ const getRuleMessage = ({ value = undefined, max = undefined, min = undefined, v
     });
     return !maxFit ? validMsgObj.max : !minFit ? validMsgObj.min : '';
 };
+const coverValueFix = (value, props) => {
+    const type = (props === null || props === void 0 ? void 0 : props.format) || 'number';
+    if (value === '' && !['plus', 'minus'].includes(type))
+        return '';
+    if (value === 'null' || value === 'undefined')
+        return '';
+    let res = `${value}`;
+    if (isNumber(value) && res.includes('e')) {
+        res = `${res.startsWith('-') ? '-' : ''}${res.replace(/^-/, '').toLocaleString()}`;
+    }
+    res = res.replace(/,/g, '') || null;
+    if (res !== 'Infinity' && res !== '-Infinity') {
+        if (type === 'plus') {
+            res = strNumAddCalc(res, `${props.step}`);
+        }
+        else if (type === 'minus') {
+            res = strNumAddCalc(res, `${-props.step}`);
+        }
+    }
+    res = dealDecimals(res, props === null || props === void 0 ? void 0 : props.decimals, type);
+    // 千分符转换
+    if ((props === null || props === void 0 ? void 0 : props.thousandShow) && res !== 'Infinity' && res !== '-Infinity') {
+        const temp = res.split('.');
+        res = `${temp[0].replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}${temp[1] ? `.${temp[1]}` : ''}`;
+    }
+    return res;
+};
 export const WdInputNumber = forwardRef(function WdInputNumber(props, ref) {
     const { clearable = X_RUNTIME_DEFAULT.clearable } = props;
-    const [realValue, setRealValue] = useState(null); // 真实值
-    const [showValue, setShowValue] = useState(''); // 显示值
+    const inputValueRef = useRef(props.inputValue);
+    const [showValue, setShowValue] = useState(() => {
+        return coverValueFix(`${props.inputValue}`, props);
+    }); // 显示值
+    const [realValue, setRealValue] = useState(() => {
+        const _value = coverValueFix(`${props.inputValue}`, props);
+        const v = dealPercent(_value, props.format === 'percent' ? 'del' : '');
+        return Number(v.replace(/,/g, '')) || null;
+    }); // 真实值
     // 最大值，用于输入值比较
     const max = useMemo(() => {
         return Number(props.format === 'percent' ? dealPercent(`${props.max}`, 'add') : props.max);
@@ -187,7 +221,11 @@ export const WdInputNumber = forwardRef(function WdInputNumber(props, ref) {
     }, [props.decimals, props.format, props.thousandShow]);
     // inputValue变化时，单独处理值更新
     useEffect(() => {
+        if (inputValueRef.current === props.inputValue) {
+            return;
+        }
         dealValueChange(props.inputValue);
+        inputValueRef.current = props.inputValue;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.inputValue]);
     // max、min变化时，去判断当前值是否超出范围
@@ -206,7 +244,7 @@ export const WdInputNumber = forwardRef(function WdInputNumber(props, ref) {
         }
         initValidate(validState, validMsg);
     }, [showValue, props.min, props.max, max, min, initValidate, validMsgObj.max, validMsgObj.min]);
-    const valueRef = useRef(value);
+    const valueRef = useRef(null);
     const [focus, setFocus] = useSyncValue(props.focus);
     const hasClearIcon = getHasClearIcon(clearable, focus, disabled, readOnly, realValue);
     const isRow = props.stepOption === 'both'; // 右侧调整只在pc端生效
@@ -282,24 +320,12 @@ export const WdInputNumber = forwardRef(function WdInputNumber(props, ref) {
     /**
      * 监听非输入引起的value变化，比如调用 setValue, clearValue
      */
-    const updateValueByListen = () => {
-        if (valueRef.current === value) {
-            setIsInit(false);
-            return;
-        }
-        if (!isInit) {
+    useEffect(() => {
+        if (valueRef.current !== value) {
             setRealValue(value);
             setShowValue(getShowValue(`${value}`, props.format));
             valueRef.current = value;
         }
-        // 初始化时同步真实值到表单
-        if (isNumber(realValue) && isInit) {
-            changeForm(realValue);
-        }
-        setIsInit(false);
-    };
-    useEffect(() => {
-        updateValueByListen();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
     /**

package/dist/web/components/wd-rich-text/wd-rich-text.d.ts

@@ -5,7 +5,7 @@ import './style';
 /**
  * 富文本-标准化
  */
-export declare const WdRichText: React.ForwardRefExoticComponent<WdRichTextProps & React.RefAttributes<any>>;
+export declare const WdRichText: React.ForwardRefExoticComponent<WdRichTextProps & React.RefAttributes<unknown>>;
 export interface WdRichTextProps extends CommonPropsType, DataType {
     classRoot?: string;
     acceptTypes?: any;