feat(schema-renderer): support relative target path (#779)

* feat(schema-renderer): support relative target path * docs(x-linkages): improve docs
alibaba · Apr 5, 2020 · f5fe406 · f5fe406
1 parent 3339408
commit f5fe406
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 9 deletions.
diff --git 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(<App />, 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
@@ -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
@@ -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 = {