feat: support custom NodeTree in connectors.create() (#317)

* fix: fix create userElement's type to support custom nodeTree * fix: fix type * add type * modify * modify * fix * modify
prevwong · Jan 16, 2022 · d4c2164 · d4c2164
1 parent 58ec5b2
commit d4c2164
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/packages/core/src/events/CoreEventHandlers.ts b/packages/core/src/events/CoreEventHandlers.ts
@@ -19,7 +19,7 @@ export class CoreEventHandlers<O = {}> extends EventHandlers<
       drop: (el: HTMLElement, id: NodeId) => {},
       create: (
         el: HTMLElement,
-        UserElement: React.ReactElement,
+        UserElement: React.ReactElement | (() => NodeTree | React.ReactElement),
         options?: Partial<CreateHandlerOptions>
       ) => {},
     };

diff --git a/packages/core/src/events/DefaultEventHandlers.ts b/packages/core/src/events/DefaultEventHandlers.ts
@@ -1,11 +1,12 @@
 import { isChromium, isLinux } from '@craftjs/utils';
 import { isFunction } from 'lodash';
+import React from 'react';
 
 import { CoreEventHandlers, CreateHandlerOptions } from './CoreEventHandlers';
 import { Positioner } from './Positioner';
 import { createShadow } from './createShadow';
 
-import { Indicator, NodeId, DragTarget } from '../interfaces';
+import { Indicator, NodeId, DragTarget, NodeTree } from '../interfaces';
 
 export type DefaultEventHandlersOptions = {
   isMultiSelectEnabled: (e: MouseEvent) => boolean;
@@ -260,7 +261,7 @@ export class DefaultEventHandlers<O = {}> extends CoreEventHandlers<
       },
       create: (
         el: HTMLElement,
-        userElement: React.ReactElement,
+        userElement: React.ReactElement | (() => NodeTree | React.ReactElement),
         options?: Partial<CreateHandlerOptions>
       ) => {
         el.setAttribute('draggable', 'true');
@@ -270,9 +271,17 @@ export class DefaultEventHandlers<O = {}> extends CoreEventHandlers<
           'dragstart',
           (e) => {
             e.craft.stopPropagation();
-            const tree = store.query
-              .parseReactElement(userElement)
-              .toNodeTree();
+            let tree;
+            if (typeof userElement === 'function') {
+              const result = userElement();
+              if (React.isValidElement(result)) {
+                tree = store.query.parseReactElement(result).toNodeTree();
+              } else {
+                tree = result;
+              }
+            } else {
+              tree = store.query.parseReactElement(userElement).toNodeTree();
+            }
 
             const dom = e.currentTarget as HTMLElement;
             this.draggedElementShadow = createShadow(