feat(designable-antd): support restrictSiblingsComponents (#1984)

Author: janryWang

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),

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),

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[]>
 }

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 {

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 {