feat(lib ui-schema): ui-schema 支持配置 ui:hidden 表达式实现数据联动

feat(lib ui-schema): ui-schema 支持配置 ui:hidden 表达式实现数据联动

Author: lljj-x

packages/docs/docs/zh/guide/adv-config.md

@@ -14,7 +14,7 @@ sidebarDepth: 2
 * [Todo: 通过 if else 实现联动](#通过-if-else-实现联动)
 
 打破 `JSON Schema` 规范包含如下几种方式：
-
+* 通过ui-schema配置表达式
 * [通过自定义组件配置 ui:field 使用已有联级组件](#通过-ui-field-调用自己的联级组件)
 * [通过 ui-schema fieldStyle 动态样式](#ui-schema-fieldstyle-实现联动)
 
@@ -299,6 +299,10 @@ export default {
 
 就目前来看 if else 比较容易解决数据联动的场景，可以根据值来做判断，但依旧不能解决对值支持逻辑判断，比如`大于`、`小于`，后续版本会考虑支持该特性。
 
+### 通过ui-schema配置表达式
+可能打破 `JSON Schema` 规范，配置思想来源 [ali form-render](https://github.com/alibaba/form-render)。
+
+
 ### ui:field 调用自己的联级组件
 可能打破 `JSON Schema` 规范，**适用于通过配置一个已有的自定义组件来渲染一些复杂的联动场景**
 

packages/docs/docs/zh/guide/todo.md

@@ -22,9 +22,11 @@
 - [x] 优化源码 不需要this的组件调整为 functional
 - [x] 数组支持配置是否显示序号
 - [x] 数组渲染样式微调优化（控制条下间距等）
-- [ ] 支持属性依赖 [属性依赖](https://json-schema.org/understanding-json-schema/reference/object.html#property-dependencies)
+- [x] 支持属性依赖 [属性依赖](https://json-schema.org/understanding-json-schema/reference/object.html#property-dependencies)
+- [x] 支持 ui:hidden 使用 mustache 表达式
+- [ ] review 是否存在无key的数组子节点
+- [ ] 支持 所有ui和err配置使用 mustache 表达式
 - [ ] 支持Schema依赖 [Schema依赖](https://json-schema.org/understanding-json-schema/reference/object.html#schema-dependencies)
-
 - [ ] 添加代码测试
 - [ ] 对照react schema from适配更多规则支持
 - [ ] 解耦elementUi 重新开发form 和formItem组件，通过配置化实现适配elementUi iView 等常用ui组件

packages/lib/src/JsonSchemaForm/common/formUtils.js

@@ -1,16 +1,52 @@
 // eslint-disable-next-line import/no-cycle
 import FIELDS_MAP from '../config/FIELDS_MAP';
 import retrieveSchema from './schema/retriev';
+import { getPathVal } from './vueUtils';
 
 import { isObject, getSchemaType } from './utils';
 
+// 配置表达式，或者常量，或者传入函数
+// 这里打破 JSON Schema 规范
+const regExpression = /{{(.*)}}/;
+function handleExpression(rootFormData, curNodePath, expression) {
+    // 未配置
+    if (undefined === expression) {
+        return undefined;
+    }
+
+    // 配置了 mustache 表达式
+    const matchExpression = regExpression.exec(expression);
+    regExpression.lastIndex = 0; // 重置索引
+    if (matchExpression) {
+        const code = matchExpression[1].trim();
+
+        // eslint-disable-next-line no-new-func
+        const fn = new Function('parentFormData', 'rootFormData', `return ${code}`);
+
+        return fn(getPathVal(rootFormData, curNodePath, 1), rootFormData);
+    }
+
+    // 配置了函数 function
+    if (typeof expression === 'function') {
+        return expression(getPathVal(rootFormData, curNodePath, 1), rootFormData);
+    }
+
+    // 配置了常量 ？？
+    return expression;
+}
+
 // 是否为 hidden Widget
 export function isHiddenWidget({
     schema = {},
-    uiSchema = {}
+    uiSchema = {},
+    curNodePath = '',
+    rootFormData = {}
 }) {
     const widget = uiSchema['ui:widget'] || schema['ui:widget'];
-    return widget === 'HiddenWidget' || widget === 'hidden';
+    const hiddenExpression = uiSchema['ui:hidden'] || schema['ui:hidden'];
+
+    // 支持配置 ui:hidden 表达式
+    return widget === 'HiddenWidget' || widget === 'hidden' || !!handleExpression(rootFormData, curNodePath, hiddenExpression);
 }
 
 // 解析当前节点 ui field

packages/lib/src/JsonSchemaForm/common/vueUtils.js

@@ -44,10 +44,10 @@ export function setPathVal(obj, path, value) {
 }
 
 // 获取当前path值
-export function getPathVal(obj, path) {
+export function getPathVal(obj, path, leftDeviation = 0) {
     const pathArr = path.split(pathSeparator);
 
-    for (let i = 0; i < pathArr.length; i += 1) {
+    for (let i = 0; i < pathArr.length - leftDeviation; i += 1) {
         // 错误路径或者undefined中断查找
         if (obj === undefined) return undefined;
         obj = pathArr[i] === '' ? obj : obj[pathArr[i]];

packages/lib/src/JsonSchemaForm/fields/SchemaField/index.js

@@ -41,57 +41,46 @@ export default {
         // hidden
         const hiddenWidget = isHiddenWidget({
             schema,
-            uiSchema: props.uiSchema
+            uiSchema: props.uiSchema,
+            curNodePath: props.curNodePath,
+            rootFormData: props.rootFormData
         });
 
-        // functional 渲染多节点
-        const renderList = [];
-
-        const pathClassName = nodePath2ClassName(context.props.curNodePath);
+        const pathClassName = nodePath2ClassName(props.curNodePath);
 
         if (schema.anyOf && schema.anyOf.length > 0 && !isSelect(schema)) {
             // anyOf
-            renderList.push(
-                h(FIELDS_MAP.anyOf, {
-                    class: {
-                        [`${pathClassName}-anyOf`]: true,
-                        fieldItem: true,
-                        anyOfField: true
-                    },
-                    props: curProps
-                })
-            );
-        } else if (schema.oneOf && schema.oneOf.length > 0 && !isSelect(schema)) {
+            return h(FIELDS_MAP.anyOf, {
+                class: {
+                    [`${pathClassName}-anyOf`]: true,
+                    fieldItem: true,
+                    anyOfField: true
+                },
+                props: curProps
+            });
+        } if (schema.oneOf && schema.oneOf.length > 0 && !isSelect(schema)) {
             // oneOf
-            renderList.push(
-                h(FIELDS_MAP.oneOf, {
-                    class: {
-                        [`${pathClassName}-oneOf`]: true,
-                        fieldItem: true,
-                        oneOfField: true
-                    },
-                    props: curProps
-                })
-            );
-        } else {
-            renderList.push(
-                // 渲染对应子组件
-                fieldComponent && h(hiddenWidget ? 'div' : fieldComponent, {
-                    props: {
-                        ...curProps,
-                        fieldProps
-                    },
-                    class: {
-                        ...context.data.class,
-                        [lowerCase(fieldComponent.name) || fieldComponent]: true,
-                        hiddenWidget,
-                        fieldItem: true,
-                        [pathClassName]: true
-                    }
-                })
-            );
+            return h(FIELDS_MAP.oneOf, {
+                class: {
+                    [`${pathClassName}-oneOf`]: true,
+                    fieldItem: true,
+                    oneOfField: true
+                },
+                props: curProps
+            });
         }
-
-        return renderList;
+        return (fieldComponent && !hiddenWidget) ? h(fieldComponent, {
+            props: {
+                ...curProps,
+                fieldProps
+            },
+            class: {
+                ...context.data.class,
+                [lowerCase(fieldComponent.name) || fieldComponent]: true,
+                hiddenWidget,
+                fieldItem: true,
+                [pathClassName]: true
+            }
+        }) : null;
     }
 };

packages/lib/src/JsonSchemaForm/fields/combiningSchemas/SelectLinkageField/index.js

@@ -5,7 +5,9 @@
 import {
     getPathVal, setPathVal, deletePathVal, nodePath2ClassName
 } from '../../../common/vueUtils';
-import { isEmptyObject, filterObject, guessType } from '../../../common/utils';
+import {
+    isEmptyObject, filterObject, guessType, isObject
+} from '../../../common/utils';
 
 import { getWidgetConfig, getUserUiOptions, getUserErrOptions } from '../../../common/formUtils';
 
@@ -100,7 +102,7 @@ export default {
             const curFormData = getPathVal(this.rootFormData, this.curNodePath);
 
             // 移除旧key
-            if (guessType(curFormData) === 'object') {
+            if (isObject(curFormData)) {
                 const oldSelectSchema = retrieveSchema(
                     this.selectList[oldVal],
                     this.rootSchema