Fix schema update

packages/form-render/CHANGELOG.md

@@ -1,8 +1,13 @@
 # 更新日志
 
+### 2.3.6
+- [!] 修复 List 组件初始化数据，删除按钮未显示
+- [!] 修复因配置 validator 导致通过 watch 触发 setSchemaBypath 初次不生效
+
 ### 2.3.5 
 - [+] labelWidget、descWidget 增加 addons 访问属性
-- [-] 兼容 widget 大小写配置
+- [!] 兼容 widget 大小写配置
+
 ### 2.3.0
 - [+] 优化 search-form 折叠收起逻辑，不再判断 dom 真实渲染高度，提升渲染性能
 - [!] form.getValues 判断 removeHiddenData = true 时，才去除隐藏控件数据

packages/form-render/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-render",
-  "version": "2.3.5",
+  "version": "2.3.6",
   "description": "通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成",
   "keywords": [
     "Form",

packages/form-render/src/models/validates.ts

@@ -1,5 +1,6 @@
 import Color from 'color';
 import { isUrl, isObject, isFunction } from '../utils';
+import { cloneDeep } from 'lodash-es';
 
 const insertLengthRule = (schema: any, rules: any[]) => {
   const { type, max, min, message } = schema;
@@ -68,7 +69,8 @@ export const transformRules = (rules = [], methods: any, form: any) => {
   }));
 };
 
-export default (schema: any, form: any, methods: any, fieldRef: any) => {
+export default (_schema: any, form: any, methods: any, fieldRef: any) => {
+  const schema = cloneDeep(_schema);
   let { 
     format,
     rules: ruleList = [],

packages/form-render/src/render-core/FieldList/field.tsx

@@ -1,12 +1,9 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 import { Form, message, ConfigProvider, Button } from 'antd';
 import { isFunction, translation } from '../../utils';
 import { getWidget } from '../../models/mapping';
 import { transformRules } from '../../models/validates';
-
-const getParamValue = (formCtx: any, upperCtx: any, schema: any) => (valueKey: string) => {
-  return schema[valueKey] ?? upperCtx[valueKey] ?? formCtx[valueKey];
-};
+import { getParamValue } from './modules';
 
 export default (props: any) => {
   const {
@@ -20,7 +17,6 @@ export default (props: any) => {
     upperCtx,
     formCtx,
     configContext,
-    listData,
     setListData
   } = props;
 
@@ -46,18 +42,8 @@ export default (props: any) => {
 
   let widgetName = schema.widget || 'cardList';
   const Widget = getWidget(widgetName, widgets);
-
   const { props: listProps, removeBtn, rules = [], ...otherSchema } = schema;
-
-  let defaultValue = schema.default ?? schema.defaultValue;
-  if (defaultValue === undefined && !['drawerList', 'list1'].includes(widgetName)) {
-    defaultValue = [{}];
-  }
-
-  useEffect(() => {
-    setListData(defaultValue ||[]);
-  }, []);
-
+
   let {
     addBtnProps,
     delConfirmProps,
@@ -73,6 +59,51 @@ export default (props: any) => {
     ...otherListProps
   } = listProps || {};
 
+  const getValueFromKey = getParamValue(formCtx, upperCtx, schema);
+
+  const readOnly = getValueFromKey('readOnly');
+  const preRootPath = [...(rootPath || [])].splice(0, rootPath.length - 1);
+  const displayType = getValueFromKey('displayType');
+
+  if (hideMove === undefined && globalConfig?.listOperate?.hideMove) {
+    hideMove = globalConfig?.listOperate.hideMove;
+  }
+
+  const listData = form.getFieldValue([...preRootPath, ...path]) || [];
+  if (otherSchema?.min > 0 && listData.length <= otherSchema?.min) {
+    hideDelete = true;
+  }
+
+  if (otherSchema?.max > 0 && otherSchema?.max <= listData.length) {
+    hideAdd = true;
+  }
+
+  if (hideAdd) {
+    hideCopy = true;
+  }
+
+  if (readOnly) {
+    hideAdd = true;
+    hideCopy = true;
+    hideDelete = true;
+    hideMove = true;
+  }
+
+  const defaultValue = useMemo(() => {
+    let result = schema.default ?? schema.defaultValue;
+    if (result === undefined) {
+      result = form.getFieldValue([...preRootPath, ...path]);
+      if (!result && !['drawerList', 'list1'].includes(widgetName)) {
+        result = [{}];
+      }
+    }
+    return result;
+  }, []);
+
+  useEffect(() => {
+    setListData(defaultValue || []);
+  }, []);
+
   const handleAdd = (add: any) => (data?: any) => {
     let addFunc = onAdd;
     if (typeof onAdd === 'string') {
@@ -141,35 +172,6 @@ export default (props: any) => {
     form.setSchemaByPath(path, { hidden: true });
   };
 
-  const getValueFromKey = getParamValue(formCtx, upperCtx, schema);
-
-  const readOnly = getValueFromKey('readOnly');
-  const preRootPath = [...(rootPath || [])].splice(0, rootPath.length - 1);
-  const displayType = getValueFromKey('displayType');
-
-  if (hideMove === undefined && globalConfig?.listOperate?.hideMove) {
-    hideMove = globalConfig?.listOperate.hideMove;
-  }
-
-  if (otherSchema?.min > 0 && listData.length <= otherSchema?.min) {
-    hideDelete = true;
-  }
-
-  if (otherSchema?.max > 0 && otherSchema?.max <= listData.length) {
-    hideAdd = true;
-  }
-
-  if (hideAdd) {
-    hideCopy = true;
-  }
-
-  if (readOnly) {
-    hideAdd = true;
-    hideCopy = true;
-    hideDelete = true;
-    hideMove = true;
-  }
-
   const operateBtnType = globalConfig?.listOperate?.btnType;
 
   let ruleList: any = [];
@@ -281,7 +283,6 @@ export default (props: any) => {
           {removeBtn?.text || t('delete')}
         </Button>
       )}
-
     </>
   );
 }

packages/form-render/src/render-core/FieldList/main.tsx

@@ -9,7 +9,7 @@ import Main from './field';
 const UpperContext = createContext(() => {});
 
 export default (props: any) => {
-  const [listData, setListData] = useState([]);
+  const [_, setListData] = useState([]);
   const { configContext } = props;
 
   const store = useContext(FRContext);
@@ -41,7 +41,9 @@ export default (props: any) => {
   const { labelCol, fieldCol } = getFormListLayout(getValueFromKey, displayType);
 
   let isInline = schema.display === 'inline';
-  if (!setListData?.length && widgetName !== 'drawerList') {
+  const preRootPath = [...(props.rootPath || [])].splice(0, props.rootPath.length - 1);
+  const listData = form.getFieldValue([...preRootPath, ...props.path]);
+  if (!listData?.length && widgetName !== 'drawerList') {
     isInline = true;
   }
 
@@ -79,7 +81,6 @@ export default (props: any) => {
           widgets={widgets}
           configContext={configContext}
           setListData={setListData}
-          listData={listData}
         />
       </Form.Item>
     </Col>

packages/form-render/src/render-core/FieldList/modules.tsx

@@ -100,4 +100,4 @@ export const getTooltip = (schema: any, displayType: string) => {
   }
 
   return null;
-};
+};

packages/form-render/src/widgets/utils/withFieldWrap.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const getProps = (props: any, filter: any[]) => {
   const result = {};
-
+  
   Object.keys(props).forEach(key => {
     if (filter.includes(key)) {
       return;