refactor: global update & refactoring + allow opening and closing nodes programmatically

Author: Lodin

.babelrc.js

@@ -2,10 +2,14 @@ const {BUILD_TYPE} = process.env;
 const isCjs = BUILD_TYPE === 'cjs';
 const isLib = BUILD_TYPE === 'lib';
 
-module.exports = api => ({
+module.exports = (api) => ({
   plugins: [
     [require('@babel/plugin-proposal-class-properties'), {loose: true}],
     [require('@babel/plugin-proposal-optional-chaining'), {loose: true}],
+    [
+      require('@babel/plugin-proposal-nullish-coalescing-operator'),
+      {loose: true},
+    ],
     ...(isLib
       ? []
       : [

.eslintignore

@@ -1,5 +1,3 @@
 **/node_modules/**/*
 **/dist/**/*
 docs
-*.ts
-*.tsx

.eslintrc

@@ -1,9 +1,18 @@
 {
-  "extends": ["eslint-config-poetez", "plugin:prettier/recommended"],
+  "extends": [
+    "eslint-config-poetez/typescript-react",
+    "eslint-config-prettier/@typescript-eslint",
+    "prettier/react",
+    "plugin:prettier/recommended"
+  ],
   "env": {
-    "node": true
+    "browser": true,
+    "node": true,
+    "es6": true,
+    "jest": true
   },
   "rules": {
-    "global-require": "off"
+    "guard-for-in": "off",
+    "react/sort-comp": "off"
   }
 }

.storybook/webpack.config.js

@@ -1,5 +1,3 @@
-/* eslint-disable sort-keys */
-
 module.exports = ({config}) => {
   config.devtool = 'eval';
 

__stories__/FixedSizeTree.story.tsx

@@ -2,10 +2,11 @@ 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, {
+import {
   FixedSizeNodeComponentProps,
   FixedSizeNodeData,
-} from '../src/FixedSizeTree';
+  FixedSizeTree,
+} from '../src';
 
 document.body.style.margin = '0';
 document.body.style.display = 'flex';
@@ -15,22 +16,23 @@ const root = document.getElementById('root')!;
 root.style.margin = '10px 0 0 10px';
 root.style.flex = '1';
 
-type DataNode = {
+type DataNode = Readonly<{
   children: DataNode[];
   id: number;
   name: string;
-};
+}>;
 
-type StackElement = {
+type StackElement = Readonly<{
   nestingLevel: number;
   node: DataNode;
-};
+}>;
 
-type ExtendedData = {
-  readonly isLeaf: boolean;
-  readonly name: string;
-  readonly nestingLevel: number;
-};
+type ExtendedData = FixedSizeNodeData &
+  Readonly<{
+    isLeaf: boolean;
+    name: string;
+    nestingLevel: number;
+  }>;
 
 let nodeId = 0;
 
@@ -47,7 +49,6 @@ const createNode = (depth: number = 0) => {
     return node;
   }
 
-  // tslint:disable-next-line:increment-decrement
   for (let i = 0; i < 5; i++) {
     node.children.push(createNode(depth + 1));
   }
@@ -61,7 +62,7 @@ const defaultButtonStyle = {fontFamily: 'Courier New'};
 
 function* treeWalker(
   refresh: boolean,
-): Generator<FixedSizeNodeData<ExtendedData> | string | symbol, void, boolean> {
+): Generator<ExtendedData | string | symbol, void, boolean> {
   const stack: StackElement[] = [];
 
   stack.push({
@@ -84,7 +85,6 @@ function* treeWalker(
       : id;
 
     if (node.children.length !== 0 && isOpened) {
-      // tslint:disable-next-line:increment-decrement
       for (let i = node.children.length - 1; i >= 0; i--) {
         stack.push({
           nestingLevel: nestingLevel + 1,
@@ -117,23 +117,23 @@ const Node: React.FunctionComponent<FixedSizeNodeComponentProps<
   </div>
 );
 
-interface TreePresenterProps {
+type TreePresenterProps = {
   readonly itemSize: number;
-}
+};
 
 const TreePresenter: React.FunctionComponent<TreePresenterProps> = ({
   itemSize,
 }) => (
   <AutoSizer disableWidth>
     {({height}) => (
-      <Tree<ExtendedData>
+      <FixedSizeTree
         treeWalker={treeWalker}
         itemSize={itemSize}
         height={height}
         width="100%"
       >
         {Node}
-      </Tree>
+      </FixedSizeTree>
     )}
   </AutoSizer>
 );

__stories__/VariableSizeTree.story.tsx

@@ -1,11 +1,12 @@
 import {number, withKnobs} from '@storybook/addon-knobs';
 import {storiesOf} from '@storybook/react';
-import * as React from 'react';
+import React, {FC} from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import Tree, {
+import {
   VariableSizeNodeComponentProps,
   VariableSizeNodeData,
-} from '../src/VariableSizeTree';
+  VariableSizeTree,
+} from '../src';
 
 document.body.style.margin = '0';
 document.body.style.display = 'flex';
@@ -15,22 +16,23 @@ const root = document.getElementById('root')!;
 root.style.margin = '10px 0 0 10px';
 root.style.flex = '1';
 
-type DataNode = {
+type DataNode = Readonly<{
   children: DataNode[];
   id: number;
   name: string;
-};
+}>;
 
-type StackElement = {
+type StackElement = Readonly<{
   nestingLevel: number;
   node: DataNode;
-};
+}>;
 
-type ExtendedData = {
-  readonly isLeaf: boolean;
-  readonly name: string;
-  readonly nestingLevel: number;
-};
+type ExtendedData = VariableSizeNodeData &
+  Readonly<{
+    isLeaf: boolean;
+    name: string;
+    nestingLevel: number;
+  }>;
 
 let nodeId = 0;
 
@@ -47,7 +49,6 @@ const createNode = (depth: number = 0) => {
     return node;
   }
 
-  // tslint:disable-next-line:increment-decrement
   for (let i = 0; i < 5; i++) {
     node.children.push(createNode(depth + 1));
   }
@@ -59,9 +60,7 @@ const rootNode = createNode();
 const defaultGapStyle = {marginLeft: 10};
 const defaultButtonStyle = {fontFamily: 'Courier New'};
 
-const Node: React.FunctionComponent<VariableSizeNodeComponentProps<
-  ExtendedData
->> = ({
+const Node: FC<VariableSizeNodeComponentProps<ExtendedData>> = ({
   height,
   data: {isLeaf, name, nestingLevel},
   isOpen,
@@ -105,23 +104,19 @@ const Node: React.FunctionComponent<VariableSizeNodeComponentProps<
   );
 };
 
-interface TreePresenterProps {
+type TreePresenterProps = Readonly<{
   itemSize: number;
-}
+}>;
 
 const TreePresenter: React.FunctionComponent<TreePresenterProps> = ({
   itemSize,
 }) => {
-  const tree = React.useRef<Tree<ExtendedData>>(null);
+  const tree = React.useRef<VariableSizeTree<ExtendedData>>(null);
 
   const treeWalker = React.useCallback(
-    function*(
+    function* treeWalker(
       refresh: boolean,
-    ): Generator<
-      VariableSizeNodeData<ExtendedData> | string | symbol,
-      void,
-      boolean
-    > {
+    ): Generator<ExtendedData | string | symbol, void, boolean> {
       const stack: StackElement[] = [];
 
       stack.push({
@@ -145,7 +140,6 @@ const TreePresenter: React.FunctionComponent<TreePresenterProps> = ({
           : id;
 
         if (node.children.length !== 0 && isOpened) {
-          // tslint:disable-next-line:increment-decrement
           for (let i = node.children.length - 1; i >= 0; i--) {
             stack.push({
               nestingLevel: nestingLevel + 1,
@@ -159,21 +153,25 @@ const TreePresenter: React.FunctionComponent<TreePresenterProps> = ({
   );
 
   React.useEffect(() => {
-    tree.current?.recomputeTree({refreshNodes: true, useDefaultHeight: true});
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    tree.current?.recomputeTree({
+      refreshNodes: true,
+      useDefaultHeight: true,
+    });
   }, [itemSize]);
 
   return (
     <AutoSizer disableWidth>
       {({height}) => (
-        <Tree<ExtendedData>
+        <VariableSizeTree
           ref={tree}
           itemData={itemSize}
           treeWalker={treeWalker}
           height={height}
           width="100%"
         >
           {Node}
-        </Tree>
+        </VariableSizeTree>
       )}
     </AutoSizer>
   );