changed API to selectNode(NodeId | null) removed

removed clearNodeSelection removed API to modify hovered state
prevwong · Jan 30, 2020 · 6105722 · 6105722
1 parent 23ab8ab
commit 6105722
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 53 deletions.
diff --git a/packages/core/src/hooks/useEditor.tsx b/packages/core/src/hooks/useEditor.tsx
@@ -50,16 +50,8 @@ export function useEditor<S>(collect?: any): useEditor<S> {
   const actions = useMemo(() => {
     return {
       ...EditorActions,
-      selectNode: (nodeId: NodeId) => {
+      selectNode: (nodeId: NodeId | null) => {
         setNodeEvent("selected", nodeId);
-      },
-      clearNodeSelection: () => {
-        setNodeEvent("selected", null);
-      },
-      hoverNode: (nodeId: NodeId) => {
-        setNodeEvent("hovered", nodeId);
-      },
-      clearHoveredNode: () => {
         setNodeEvent("hovered", null);
       }
     };

diff --git a/packages/docs/docs/api/useEditor.md b/packages/docs/docs/api/useEditor.md
@@ -43,10 +43,7 @@ const { connectors, actions, query, ...collected } = useEditor(collector);
       ["setCustom", "(nodeId: NodeId, update: (custom: Object) => void) => void", "Manipulate the custom values of the given Node"],
       ["setHidden", "(nodeId: NodeId, bool: boolean) => void", "When set to true, the User Component of the specified Node will be hidden, but not removed"],
       ["setOptions", "(options: Object) => void", "Update the editor's options. The options object passed is the same as the &lt;Editor /&gt; props."],
-      ["selectNode", "(nodeId: NodeId) => void", "Select the specified node"],
-      ["clearNodeSelection", "() => void", "Clears the selection of the currently selected node"],
-      ["hoverNode", "(nodeId: NodeId) => void", "Hover the specified node"],
-      ["clearHoveredNode", "() => void", "Clears the hovered state of the currently hovered node"]
+      ["selectNode", "(nodeId: NodeId | null) => void", "Select the specified node. You can clear the selection by passing `null`"],
     ]],
     ["query", "Query", [
       ["createNode", "(child: React.ReactElement) => Node", "Create a Node from a React element"],

diff --git a/packages/examples/landing/components/editor/RenderNode.tsx b/packages/examples/landing/components/editor/RenderNode.tsx
@@ -98,46 +98,45 @@ export const RenderNode = ({ render }) => {
     <>
       {isHover || isActive
         ? ReactDOM.createPortal(
-            <IndicatorDiv
-              ref={currentRef}
-              className="px-2 py-2 text-white bg-primary fixed flex items-center"
-              style={{
-                left: getPos(dom).left,
-                top: getPos(dom).top,
-                zIndex: 9999
-              }}
-            >
-              <h2 className="flex-1 mr-4">{name}</h2>
-              {moveable ? (
-                <Btn className="mr-2 cursor-move" ref={drag}>
-                  <Move />
-                </Btn>
-              ) : null}
-              {id !== ROOT_NODE && (
-                <Btn
-                  className="mr-2 cursor-pointer"
-                  onClick={() => {
-                    actions.selectNode(parent);
-                    actions.clearHoveredNode();
-                  }}
-                >
-                  <ArrowUp />
-                </Btn>
-              )}
-              {deletable ? (
-                <Btn
-                  className="cursor-pointer"
-                  onMouseDown={(e: React.MouseEvent) => {
-                    e.stopPropagation();
-                    actions.delete(id);
-                  }}
-                >
-                  <Delete />
-                </Btn>
-              ) : null}
-            </IndicatorDiv>,
-            document.body
-          )
+          <IndicatorDiv
+            ref={currentRef}
+            className="px-2 py-2 text-white bg-primary fixed flex items-center"
+            style={{
+              left: getPos(dom).left,
+              top: getPos(dom).top,
+              zIndex: 9999
+            }}
+          >
+            <h2 className="flex-1 mr-4">{name}</h2>
+            {moveable ? (
+              <Btn className="mr-2 cursor-move" ref={drag}>
+                <Move />
+              </Btn>
+            ) : null}
+            {id !== ROOT_NODE && (
+              <Btn
+                className="mr-2 cursor-pointer"
+                onClick={() => {
+                  actions.selectNode(parent);
+                }}
+              >
+                <ArrowUp />
+              </Btn>
+            )}
+            {deletable ? (
+              <Btn
+                className="cursor-pointer"
+                onMouseDown={(e: React.MouseEvent) => {
+                  e.stopPropagation();
+                  actions.delete(id);
+                }}
+              >
+                <Delete />
+              </Btn>
+            ) : null}
+          </IndicatorDiv>,
+          document.body
+        )
         : null}
       {render}
     </>