From f5fe406170abd37d2da245aaba120ee44bcb4736 Mon Sep 17 00:00:00 2001 From: Janry Date: Sun, 5 Apr 2020 11:00:43 +0800 Subject: [PATCH] feat(schema-renderer): support relative target path (#779) * feat(schema-renderer): support relative target path * docs(x-linkages): improve docs --- docs/zh-cn/schema-develop/complex-linkage.md | 9 +++++-- docs/zh-cn/schema-develop/form-schema.md | 16 +++++++++++++ .../src/shared/linkage.ts | 24 +++++++++++++------ 3 files changed, 40 insertions(+), 9 deletions(-) diff --git a/docs/zh-cn/schema-develop/complex-linkage.md b/docs/zh-cn/schema-develop/complex-linkage.md index a8114a1602e..629ccb45b7f 100644 --- a/docs/zh-cn/schema-develop/complex-linkage.md +++ b/docs/zh-cn/schema-develop/complex-linkage.md @@ -905,7 +905,7 @@ const mockSchema = { 'x-linkages': [ { type: 'value:state', - target: 'array.[].ff', + target: '..[].ff', state: { visible: '{{!!$value}}' } @@ -1016,13 +1016,18 @@ ReactDOM.render(, document.getElementById('root')) **案例解析** - 自增列表中的动态联动,借助 x-linkages 可以实现相邻联动,或者是跨行联动 -- target 支持一种特殊语法 +- target 相邻查找 - `prevPath.[].fieldName`代表当前行字段 - `prevPath.[+].fieldName`代表下一行字段 - `prevPath.[-].fieldName`代表上一行字段 - `prevPath.[+2].fieldName`代表下下一行字段 - `prevPath.[-2].fieldName`代表上上一行字段 - 一次可以继续往下递增或者递减 +- target 向前路径查找 + - `.path.a.b`代表基于当前字段路径往后计算 + - `..path.a.b`代表往前计算相对路径 + - `...path.a.b`代表继续往前计算相对路径 + - 以此类推 ## 外部联动 diff --git a/docs/zh-cn/schema-develop/form-schema.md b/docs/zh-cn/schema-develop/form-schema.md index a0dd4764dbd..d8b26e6b137 100644 --- a/docs/zh-cn/schema-develop/form-schema.md +++ b/docs/zh-cn/schema-develop/form-schema.md @@ -159,6 +159,22 @@ Formily 针对 Form Schema 支持了表达式的能力,可以帮助我们在 J - target 是一个 FormPathPattern 匹配表达式,在这里我们可以使用 FormPath 的各种匹配语法 - 需要指定每个联动发生的条件(condition),由一个表达式来驱动 +### target 相邻路径查找 + +- `prevPath.[].fieldName`代表当前行字段 +- `prevPath.[+].fieldName`代表下一行字段 +- `prevPath.[-].fieldName`代表上一行字段 +- `prevPath.[+2].fieldName`代表下下一行字段 +- `prevPath.[-2].fieldName`代表上上一行字段 +- 依次类推往下递增或者递减 + +### target 向前路径查找 + +- `.path.a.b`代表基于当前字段路径往后计算 +- `..path.a.b`代表往前计算相对路径 +- `...path.a.b`代表继续往前计算相对路径 +- 以此类推向前查找 + ### 表达式说明 目前表达式的上下文注入了一些环境变量: diff --git a/packages/react-schema-renderer/src/shared/linkage.ts b/packages/react-schema-renderer/src/shared/linkage.ts index c9a0f0ba295..20ddf5cf563 100644 --- a/packages/react-schema-renderer/src/shared/linkage.ts +++ b/packages/react-schema-renderer/src/shared/linkage.ts @@ -12,12 +12,23 @@ import { Schema } from './schema' const pathExpRE = /\[\s*(?:([+-])\s*(\d+)?)?\s*\]/g -const transformTargetPath = (target: string, indexes: number[]) => { +const transformTargetPath = ( + target: string, + indexes: number[], + basePath: FormPath +) => { if (!isStr(target)) return target let index = 0 - const newTarget = target.replace( - pathExpRE, - (_: string, operator: string, delta: string) => { + const newTarget = target + .replace(/^\s*(\.+)/, (_: string, $1: string) => { + const depth = $1.length + let path = basePath + for (let i = 0; i < depth; i++) { + path = path.parent() + } + return path.toString() + '.' + }) + .replace(pathExpRE, (_: string, operator: string, delta: string) => { if (delta) { if (operator === '+') { return String(indexes[index++] + Number(delta)) @@ -32,8 +43,7 @@ const transformTargetPath = (target: string, indexes: number[]) => { } } return String(indexes[index++]) - } - ) + }) pathExpRE.lastIndex = 0 return newTarget } @@ -61,7 +71,7 @@ export const parseLinkages = ( const fieldIndexes = getPathIndexes(fieldName) const formState = getFormState ? getFormState() : {} return linkages.map(({ target, condition, scope, ...params }) => { - const newTarget = transformTargetPath(target, fieldIndexes) + const newTarget = transformTargetPath(target, fieldIndexes, fieldName) const targetState = getFieldState ? getFieldState(newTarget) : {} const fieldValue = fieldName.getIn(formState.values) const _scope = {