✨: Add unselect feature

Author: tomas-teston

src/features/app/app.page.css

@@ -1,10 +1,6 @@
 main {
   display: grid;
   height: 100%;
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto max-content 1fr;
   padding: 20px;
 }
-
-main > div {
-  position: relative;
-}

src/features/app/app.page.tsx

@@ -5,10 +5,8 @@ import { MyTree } from "./components/my-tree";
 const App = () => (
   <main>
     <h1>TREE COMPONENT</h1>
-    <div>
-      <MyTree />
-    </div>
+    <MyTree />
   </main>
 );
 
-export default App;
+export default App;

src/features/app/components/my-tree.css

@@ -0,0 +1,3 @@
+.tree-container {
+  position: relative;
+}

src/features/app/components/my-tree.tsx

@@ -1,15 +1,20 @@
+import './my-tree-node.css'
+import './my-tree.css'
+
 import { MyTreeNode, MyTreeNodeData } from "./my-tree-node";
 import {
   Tree,
+  TreeNodeComponentRef,
   TreeOnDragType,
   TreeOnLoadType,
   TreeOnRemoveType,
   TreeOnSelectType,
 } from "../../../shared/components/tree";
-
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 
 export const MyTree = () => {
+  const treeRef = useRef<TreeNodeComponentRef>(null);
+  
   const handleLoad: TreeOnLoadType<MyTreeNodeData> = useCallback((node) => {
     const DELAY_IN_MS = 500;
     const NUMBER_OF_ELEMENTS_FOR_LEVEL = 10;
@@ -59,14 +64,26 @@ export const MyTree = () => {
     []
   );
 
+  const handleUnSelect = () => {
+    treeRef.current?.unSelect();
+  }
+
   return (
-    <Tree
-      nodeHeigth={40}
-      Node={MyTreeNode}
-      onLoad={handleLoad}
-      onDrag={handleDrag}
-      onRemove={handleRemove}
-      onSelect={handleOnSelect}
-    />
+    <>
+      <div>
+        <button type="button" onClick={handleUnSelect} >UnSelect</button>
+      </div>
+      <div className='tree-container'>
+        <Tree
+          ref={treeRef}
+          nodeHeigth={40}
+          Node={MyTreeNode}
+          onLoad={handleLoad}
+          onDrag={handleDrag}
+          onRemove={handleRemove}
+          onSelect={handleOnSelect}
+        />
+      </div>
+    </>
   );
 };

src/shared/components/tree/hooks/tree.hook.ts

@@ -74,11 +74,16 @@ export const useTree = <TData>({ onLoad, onRemove, onSelect }: UseTreeProps<TDat
     onSelect(node);
   };
 
+  const handleUnSelect = () => {
+    dispatch({type: 'UNSELECT_NODE'});
+  }
+
   return {
     tree,
     dispatch,
     handleToggle,
     handleRemove,
-    handleSelect
+    handleSelect,
+    handleUnSelect
   };
 };

src/shared/components/tree/models/tree.model.ts

@@ -139,3 +139,14 @@ export const selectNode = <TData>(
     children: rootNode.children.map((rootNode) => selectNode(rootNode, node)),
   } as TreeNodeInternal<TData>;
 };
+
+export const unSelectNode = <TData>(
+  node: TreeNodeInternal<TData>,
+): TreeNodeInternal<TData> => {
+  return {
+    ...node,
+    selected: false,
+    children: node.children.map(unSelectNode),
+  } as TreeNodeInternal<TData>;
+};
+

src/shared/components/tree/state/actions/unselect-node.action.ts

@@ -0,0 +1,18 @@
+import { TreeState } from "../tree.state";
+import { unSelectNode } from "../../models/tree.model";
+
+export type UnSelectNodeAction = {
+  type: "UNSELECT_NODE";
+};
+
+export const unSelectNodeActionHandler = <TData>(
+  state: TreeState<TData>,
+): TreeState<TData> => {
+
+  return {
+    ...state,
+    nodes: state.nodes.map((rootNode) =>
+      unSelectNode(rootNode)
+    ),
+  };
+};

src/shared/components/tree/state/tree.reducer.ts

@@ -5,6 +5,7 @@ import { removeNodeActionHandler } from "./actions/remove-nodeAction";
 import { selectNodeActionHandler } from "./actions/select-node.action";
 import { setStatusNodeActionHandler } from "./actions/set-status-node.action";
 import { toggleActionHandler } from "./actions/toggle-node.action";
+import { unSelectNodeActionHandler } from "./actions/unselect-node.action";
 import { TreeAction, TreeState } from "./tree.state";
 
 export type TreeReducer<TData> = typeof treeReducer<TData>;
@@ -24,6 +25,7 @@ export const treeReducer = <TData>(
     MOVE_NODE: moveNodeActionHandler,
     SET_STATUS_NODE: setStatusNodeActionHandler,
     SELECT_NODE: selectNodeActionHandler,
+    UNSELECT_NODE: unSelectNodeActionHandler
   };
 
   return actionFn[action.type]?.(state, action) ?? state;

src/shared/components/tree/state/tree.state.ts

@@ -6,6 +6,7 @@ import { SelectNodeAction } from "./actions/select-node.action";
 import { SetStatusNodeAction } from "./actions/set-status-node.action";
 import { ToggleNodeAction } from "./actions/toggle-node.action";
 import { TreeNodeInternal } from "../models/tree.model";
+import { UnSelectNodeAction } from './actions/unselect-node.action';
 
 export type TreeState<TData> = {
   nodes: TreeNodeInternal<TData>[];
@@ -18,4 +19,5 @@ export type TreeAction<TData> =
   | RemoveNodeAction<TData>
   | MoveNodeAction<TData>
   | SetStatusNodeAction<TData>
-  | SelectNodeAction<TData>;
+  | SelectNodeAction<TData>
+  | UnSelectNodeAction;

src/shared/components/tree/tree.tsx

@@ -1,11 +1,15 @@
+import React, { Ref, RefAttributes, forwardRef, useImperativeHandle } from "react";
 import { TreeOnDragType, useTreeDraggable } from "./hooks/tree-draggable.hook";
 import { TreeOnLoadType, TreeOnRemoveType, TreeOnSelectType, useTree } from "./hooks/tree.hook";
 
 import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeList } from "react-window";
-import React from "react";
 import { TreeNode } from "./models/tree.model";
 
+export type TreeNodeComponentRef = {
+  unSelect: () => void;
+}
+
 export type TreeNodeComponent<TData> = (_: {
   level: number;
   loading: boolean;
@@ -27,20 +31,27 @@ type TreeProps<TData> = {
   onSelect: TreeOnSelectType<TData>;
 };
 
-export function Tree<TData>({
+export const Tree = forwardRef(<TData extends object>({
   nodeHeigth,
   Node,
   onDrag,
   ...props
-}: TreeProps<TData>) {
-  const { tree, dispatch, handleToggle, handleRemove, handleSelect } = useTree(props);
+}: TreeProps<TData>, ref: Ref<TreeNodeComponentRef>) => {
+  const { tree, dispatch, handleToggle, handleRemove, handleSelect, handleUnSelect } = useTree(props);
 
   const draggablePropsFn = useTreeDraggable<TData>((node, parentNode) => {
     onDrag(node, parentNode).then(() => {
       dispatch({ type: "MOVE_NODE", payload: { node, parentNode } });
     });
   });
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      unSelect: handleUnSelect
+    })
+  )
+
   return (
     <AutoSizer>
       {({ width, height }) => (
@@ -73,4 +84,4 @@ export function Tree<TData>({
       )}
     </AutoSizer>
   );
-}
+}) as <TData extends object> (props: TreeProps<TData> & RefAttributes<TreeNodeComponentRef>) => JSX.Element;