From 1b72d11c197fa93715e8564688b438fca0ab3904 Mon Sep 17 00:00:00 2001
From: Janry <zhili.wzl@alibaba-inc.com>
Date: Wed, 11 Aug 2021 11:15:43 +0800
Subject: [PATCH] feat(designable-antd): support restrictSiblingsComponents
 (#1984)

---
 .../src/components/DesignableField/index.tsx  | 24 +++++++++++++++++--
 .../src/components/DesignableField/options.ts |  9 ++++++-
 .../src/components/DesignableField/types.ts   |  1 +
 docs/guide/form-builder.md                    |  1 +
 docs/guide/form-builder.zh-CN.md              |  1 +
 5 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/designable/antd/src/components/DesignableField/index.tsx b/designable/antd/src/components/DesignableField/index.tsx
index 9bfd31e241c..fca6ff1acb3 100644
--- a/designable/antd/src/components/DesignableField/index.tsx
+++ b/designable/antd/src/components/DesignableField/index.tsx
@@ -209,7 +209,7 @@ export const createDesignableField = (
     return base
   }
 
-  const calculateRestricts = (target: TreeNode, source: TreeNode[]) => {
+  const calculateChildrenRestricts = (target: TreeNode, source: TreeNode[]) => {
     const targetComponent = target.props['x-component']
     const restrictChildrenComponents =
       realOptions.restrictChildrenComponents?.[targetComponent]
@@ -226,6 +226,23 @@ export const createDesignableField = (
     return true
   }
 
+  const calculateSiblingsRestricts = (target: TreeNode, source: TreeNode[]) => {
+    const targetComponent = target.props['x-component']
+    const restrictSiblingComponents =
+      realOptions.restrictSiblingComponents?.[targetComponent]
+    if (restrictSiblingComponents?.length) {
+      if (
+        source.every((node) =>
+          includesComponent(node, restrictSiblingComponents, target)
+        )
+      ) {
+        return true
+      }
+      return false
+    }
+    return true
+  }
+
   if (!realOptions.registryName) throw new Error('Can not found registryName')
 
   GlobalRegistry.registerDesignerProps({
@@ -260,12 +277,15 @@ export const createDesignableField = (
           node,
           realOptions.inlineChildrenLayoutComponents
         ),
+        allowSiblings(target, source) {
+          return calculateSiblingsRestricts(target, source)
+        },
         allowAppend(target, source) {
           return (
             (target.props.type === 'void' ||
               target.props.type === 'array' ||
               target.props.type === 'object') &&
-            calculateRestricts(target, source)
+            calculateChildrenRestricts(target, source)
           )
         },
         propsSchema: getFieldPropsSchema(node),
diff --git a/designable/antd/src/components/DesignableField/options.ts b/designable/antd/src/components/DesignableField/options.ts
index 5684667b052..dbe6af3dc3c 100644
--- a/designable/antd/src/components/DesignableField/options.ts
+++ b/designable/antd/src/components/DesignableField/options.ts
@@ -101,13 +101,20 @@ export const createOptions = (
       isArrayTableInlineChildren,
       isArrayCardsInlineChildren,
     ],
-
     restrictChildrenComponents: {
       FormTab: [allowDropWithEmpty, 'FormTab.TabPane'],
       FormCollapse: [allowDropWithEmpty, 'FormCollapse.CollapsePanel'],
       ArrayTable: [allowDropWithEmpty, isObjectNode, 'ArrayTable.Addition'],
       'ArrayTable.Column': [isNotArrayColumn],
     },
+    restrictSiblingComponents: {
+      'FormTab.TabPane': ['FormTab.TabPane'],
+      'FormCollapse.CollapsePanel': [
+        allowDropWithEmpty,
+        'FormCollapse.CollapsePanel',
+      ],
+      'ArrayTable.Column': ['ArrayTable.Column'],
+    },
     components: {
       ...options.components,
       Space: createDesignableContainer(Space),
diff --git a/designable/antd/src/components/DesignableField/types.ts b/designable/antd/src/components/DesignableField/types.ts
index 1b733631b47..9688211efce 100644
--- a/designable/antd/src/components/DesignableField/types.ts
+++ b/designable/antd/src/components/DesignableField/types.ts
@@ -10,4 +10,5 @@ export interface IDesignableFieldFactoryProps {
   inlineChildrenLayoutComponents?: ComponentNameMatcher[]
   inlineLayoutComponents?: ComponentNameMatcher[]
   restrictChildrenComponents?: Record<string, ComponentNameMatcher[]>
+  restrictSiblingComponents?: Record<string, ComponentNameMatcher[]>
 }
diff --git a/docs/guide/form-builder.md b/docs/guide/form-builder.md
index 95587c106d0..99cef9c99fb 100644
--- a/docs/guide/form-builder.md
+++ b/docs/guide/form-builder.md
@@ -213,6 +213,7 @@ interface IDesignableFieldFactoryProps {
   inlineChildrenLayoutComponents?: ComponentNameMatcher[] //Identify which canvas component's child component layout mode is inline mode
   inlineLayoutComponents?: ComponentNameMatcher[] //Identify which canvas components are in inline mode
   restrictChildrenComponents?: Record<string, ComponentNameMatcher[]> //Node constraints, identify the upper and lower constraints between canvas components, for example, the child nodes of A component can only be B/C components
+  restrictSiblingComponents?: Record<string, ComponentNameMatcher[]> //Node constraint, identifies the adjacent constraint relationship of canvas components, for example, adjacent nodes of component A can only be B/C components
 }
 
 interface createDesignableField {
diff --git a/docs/guide/form-builder.zh-CN.md b/docs/guide/form-builder.zh-CN.md
index e99560abf59..ada03f2d4c3 100644
--- a/docs/guide/form-builder.zh-CN.md
+++ b/docs/guide/form-builder.zh-CN.md
@@ -213,6 +213,7 @@ interface IDesignableFieldFactoryProps {
   inlineChildrenLayoutComponents?: ComponentNameMatcher[] //标识哪些画布组件的子组件布局模式是内联模式
   inlineLayoutComponents?: ComponentNameMatcher[] //标识哪些画布组件本身是内联模式
   restrictChildrenComponents?: Record<string, ComponentNameMatcher[]> //节点约束，标识画布组件之间的上下级约束关系，比如A组件的子节点只能是B/C组件
+  restrictSiblingComponents?: Record<string, ComponentNameMatcher[]> //节点约束，标识画布组件相邻约束关系，比如A组件的相邻节点只能是B/C组件
 }
 
 interface createDesignableField {