fix(designable-antd): fix useDropTemplate

alibaba · Jun 22, 2021 · 1830759 · 1830759
1 parent 4813754
commit 1830759
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 2 deletions.
diff --git a/designable/antd/src/hooks/useDropTemplate.ts b/designable/antd/src/hooks/useDropTemplate.ts
@@ -1,6 +1,6 @@
 import { AppendNodeEvent, TreeNode } from '@designable/core'
 import { useDesigner } from '@designable/react'
-import { matchComponent } from '../shared'
+import { matchComponent, matchChildComponent } from '../shared'
 
 export const useDropTemplate = (
   name: string,
@@ -11,7 +11,15 @@ export const useDropTemplate = (
       const { source, target } = event.data
       if (Array.isArray(target)) return
       if (!Array.isArray(source)) return
-      if (matchComponent(target, name) && target.children.length === 0) {
+      if (
+        matchComponent(
+          target,
+          (key) =>
+            key === name &&
+            source.every((child) => !matchChildComponent(child, name))
+        ) &&
+        target.children.length === 0
+      ) {
         target.setNodeChildren(...getChildren(source))
         return false
       }

diff --git a/designable/antd/src/setters/DataSourceSetter/index.tsx b/designable/antd/src/setters/DataSourceSetter/index.tsx
diff --git a/designable/antd/src/setters/ReactionsSetter/index.tsx b/designable/antd/src/setters/ReactionsSetter/index.tsx
diff --git a/designable/antd/src/setters/ValidatorSetter/index.tsx b/designable/antd/src/setters/ValidatorSetter/index.tsx
diff --git a/designable/antd/src/shared.ts b/designable/antd/src/shared.ts
@@ -18,6 +18,19 @@ export const matchComponent = (
   return componentName === name
 }
 
+export const matchChildComponent = (
+  node: TreeNode,
+  name: ComponentNameMatcher,
+  context?: any
+) => {
+  if (name === '*') return true
+  const componentName = node?.props?.['x-component']
+  if (typeof name === 'function')
+    return name(componentName || '', node, context)
+  if (Array.isArray(name)) return name.includes(componentName)
+  return componentName.indexOf(`${name}.`) > -1
+}
+
 export const includesComponent = (
   node: TreeNode,
   names: ComponentNameMatcher[],