feat: improve approach of sending additional data to node

Author: Lodin

__stories__/FixedSizeTree.story.tsx

@@ -2,8 +2,10 @@ import {number, withKnobs} from '@storybook/addon-knobs';
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import Tree from '../src/FixedSizeTree';
-import {CommonNodeComponentProps, CommonNodeMetadata} from '../src/utils';
+import Tree, {
+  FixedSizeNodeComponentProps,
+  FixedSizeNodeData,
+} from '../src/FixedSizeTree';
 
 document.body.style.margin = '0';
 document.body.style.display = 'flex';
@@ -12,16 +14,22 @@ const root = document.getElementById('root')!;
 root.style.margin = '10px 0 0 10px';
 root.style.flex = '1';
 
-interface DataNode {
+type DataNode = {
   children: DataNode[];
   id: number;
   name: string;
-}
+};
 
-interface StackElement {
+type StackElement = {
   nestingLevel: number;
   node: DataNode;
-}
+};
+
+type ExtendedData = {
+  readonly isLeaf: boolean;
+  readonly name: string;
+  readonly nestingLevel: number;
+};
 
 let nodeId = 0;
 
@@ -52,7 +60,7 @@ const defaultButtonStyle = {fontFamily: 'Courier New'};
 
 function* treeWalker(
   refresh: boolean,
-): IterableIterator<CommonNodeMetadata | string | symbol> {
+): IterableIterator<FixedSizeNodeData<ExtendedData> | string | symbol> {
   const stack: StackElement[] = [];
 
   stack.push({
@@ -66,10 +74,10 @@ function* treeWalker(
 
     const isOpened = yield refresh
       ? {
-          childrenCount: node.children.length,
-          data: node.name,
           id,
+          isLeaf: node.children.length === 0,
           isOpenByDefault: true,
+          name: node.name,
           nestingLevel,
         }
       : id;
@@ -86,34 +94,27 @@ function* treeWalker(
   }
 }
 
-const Node: React.FunctionComponent<CommonNodeComponentProps> = ({
-  metadata: {childrenCount, data, nestingLevel},
-  isOpen,
-  style,
-  toggle,
-}) => {
-  const isLeaf = childrenCount === 0;
-
-  return (
-    <div
-      style={{
-        ...style,
-        alignItems: 'center',
-        display: 'flex',
-        marginLeft: nestingLevel * 30 + (isLeaf ? 48 : 0),
-      }}
-    >
-      {!isLeaf && (
-        <div>
-          <button type="button" onClick={toggle} style={defaultButtonStyle}>
-            {isOpen ? '-' : '+'}
-          </button>
-        </div>
-      )}
-      <div style={defaultTextStyle}>{data}</div>
-    </div>
-  );
-};
+const Node: React.FunctionComponent<
+  FixedSizeNodeComponentProps<ExtendedData>
+> = ({data: {isLeaf, name, nestingLevel}, isOpen, style, toggle}) => (
+  <div
+    style={{
+      ...style,
+      alignItems: 'center',
+      display: 'flex',
+      marginLeft: nestingLevel * 30 + (isLeaf ? 48 : 0),
+    }}
+  >
+    {!isLeaf && (
+      <div>
+        <button type="button" onClick={toggle} style={defaultButtonStyle}>
+          {isOpen ? '-' : '+'}
+        </button>
+      </div>
+    )}
+    <div style={defaultTextStyle}>{name}</div>
+  </div>
+);
 
 interface TreePresenterProps {
   readonly itemSize: number;
@@ -124,7 +125,7 @@ const TreePresenter: React.FunctionComponent<TreePresenterProps> = ({
 }) => (
   <AutoSizer disableWidth>
     {({height}) => (
-      <Tree
+      <Tree<ExtendedData>
         treeWalker={treeWalker}
         itemSize={itemSize}
         height={height}

__stories__/VariableSizeTree.story.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import Tree, {
   VariableSizeNodeComponentProps,
-  VariableSizeNodeMetadata,
+  VariableSizeNodeData,
 } from '../src/VariableSizeTree';
 
 document.body.style.margin = '0';
@@ -14,16 +14,22 @@ const root = document.getElementById('root')!;
 root.style.margin = '10px 0 0 10px';
 root.style.flex = '1';
 
-interface DataNode {
+type DataNode = {
   children: DataNode[];
   id: number;
   name: string;
-}
+};
 
-interface StackElement {
+type StackElement = {
   nestingLevel: number;
   node: DataNode;
-}
+};
+
+type ExtendedData = {
+  readonly isLeaf: boolean;
+  readonly name: string;
+  readonly nestingLevel: number;
+};
 
 let nodeId = 0;
 
@@ -52,16 +58,17 @@ const rootNode = createNode();
 const defaultGapStyle = {marginLeft: 10};
 const defaultButtonStyle = {fontFamily: 'Courier New'};
 
-const Node: React.FunctionComponent<VariableSizeNodeComponentProps> = ({
-  data: itemSize,
+const Node: React.FunctionComponent<
+  VariableSizeNodeComponentProps<ExtendedData>
+> = ({
   height,
-  metadata: {childrenCount, data, nestingLevel},
+  data: {isLeaf, name, nestingLevel},
   isOpen,
   resize,
   style,
   toggle,
+  treeData: itemSize,
 }) => {
-  const isLeaf = childrenCount === 0;
   const canOpen = height <= itemSize;
   const halfSize = itemSize / 2;
 
@@ -87,7 +94,7 @@ const Node: React.FunctionComponent<VariableSizeNodeComponentProps> = ({
           </button>
         </div>
       )}
-      <div style={defaultGapStyle}>{data}</div>
+      <div style={defaultGapStyle}>{name}</div>
       <div>
         <button type="button" onClick={toggleNodeSize} style={defaultGapStyle}>
           {canOpen ? 'Open' : 'Close'}
@@ -104,12 +111,12 @@ interface TreePresenterProps {
 const TreePresenter: React.FunctionComponent<TreePresenterProps> = ({
   itemSize,
 }) => {
-  const tree = React.useRef<Tree>(null);
+  const tree = React.useRef<Tree<ExtendedData>>(null);
 
   const treeWalker = React.useCallback(
     function*(
       refresh: boolean,
-    ): IterableIterator<VariableSizeNodeMetadata | string | symbol> {
+    ): IterableIterator<VariableSizeNodeData<ExtendedData> | string | symbol> {
       const stack: StackElement[] = [];
 
       stack.push({
@@ -123,11 +130,11 @@ const TreePresenter: React.FunctionComponent<TreePresenterProps> = ({
 
         const isOpened = yield refresh
           ? {
-              childrenCount: node.children.length,
-              data: node.name,
               defaultHeight: itemSize,
               id,
+              isLeaf: node.children.length === 0,
               isOpenByDefault: true,
+              name: node.name,
               nestingLevel,
             }
           : id;
@@ -155,7 +162,7 @@ const TreePresenter: React.FunctionComponent<TreePresenterProps> = ({
   return (
     <AutoSizer disableWidth>
       {({height}) => (
-        <Tree
+        <Tree<ExtendedData>
           ref={tree}
           itemData={itemSize}
           treeWalker={treeWalker}