Merge pull request #23 from Lodin/feat/add-openness-update

Allow updating node openness programmatically + global refactoring and dependecy updates

Author: Lodin

.babelrc.js

@@ -2,17 +2,17 @@ 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
       ? []
       : [
-          [
-            require('babel-plugin-transform-async-to-promises'),
-            {hoist: true, inlineHelpers: true},
-          ],
           [
             require('@babel/plugin-transform-runtime'),
             {

.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"
+    "@typescript-eslint/promise-function-async": "off",
+    "guard-for-in": "off"
   }
 }

.storybook/webpack.config.js

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

README.md

@@ -5,13 +5,9 @@
 [![Build Status](https://img.shields.io/travis/Lodin/react-vtree/master.svg)](https://travis-ci.org/Lodin/react-vtree)
 [![Test Coverage](https://img.shields.io/codecov/c/github/Lodin/react-vtree/master.svg)](https://codecov.io/gh/Lodin/react-vtree)
 
-This package provides a lightweight and flexible solution for rendering large
-tree structures. It is built on top of the [react-window](https://github.com/bvaughn/react-window)
-library.
+This package provides a lightweight and flexible solution for rendering large tree structures. It is built on top of the [react-window](https://github.com/bvaughn/react-window) library.
 
-**Attention!** This library is entirely rewritten to work with the `react-window`. If
-you are looking for the tree view solution for the [react-virtualized](https://github.com/bvaughn/react-virtualized),
-take a look at [react-virtualized-tree](https://github.com/diogofcunha/react-virtualized-tree).
+**Attention!** This library is entirely rewritten to work with the `react-window`. If you are looking for the tree view solution for the [react-virtualized](https://github.com/bvaughn/react-virtualized), take a look at [react-virtualized-tree](https://github.com/diogofcunha/react-virtualized-tree).
 
 ## Installation
 
@@ -129,73 +125,55 @@ const Example = () => (
 
 #### Props
 
-The component receives all the props of the `FixedSizeList` component except for
-the `itemCount`. Additional properties are the following:
+The component receives all the props of the `FixedSizeList` component except for the `itemCount`. Additional properties are the following:
 
 ##### `children`
 
-The `Node` component that is responsible for rendering each node. It receives
-all the properties [`Row`](https://react-window.now.sh/#/api/FixedSizeList)
-recieves except for the `index` prop plus the following properties:
+The `Node` component that is responsible for rendering each node. It receives all the properties [`Row`](https://react-window.now.sh/#/api/FixedSizeList) recieves except for the `index` prop plus the following properties:
 
 - `data: object` - a data object yielded by the `treeWalker` function.
 - `isOpen: boolean` - a current openness status of the node.
-- `toggle(): function` - a function to change the openness state of the node. It
-  receives no arguments and can be provided directly as an `onClick` handler.
-- `treeData: any` - any data provided via the `itemData` property of the
-  `FixedSizeTree` component.
+- `toggle(): function` - a function to change the openness state of the node. It receives no arguments and can be provided directly as an `onClick` handler.
+- `treeData: any` - any data provided via the `itemData` property of the `FixedSizeTree` component.
 
 ##### `rowComponent: component`
 
-This property receives a custom `Row` component for the `FixedSizeList` that
-will override the default one. It can be used for adding new functionality to an
-existing one by wrapping the default `Row` into a custom component.
+This property receives a custom `Row` component for the `FixedSizeList` that will override the default one. It can be used for adding new functionality to an existing one by wrapping the default `Row` into a custom component.
 
 ##### `* treeWalker(refresh: boolean)`
 
-An iterator function that walks around the tree and yields each node one by one
-flattening them to an array that can be easily displayed by `FixedSizeList`
-component.
+An iterator function that walks around the tree and yields each node one by one flattening them to an array that can be easily displayed by `FixedSizeList` component.
 
-The function receives `refresh` parameter. If it is `true`, the component
-requests the full node update and expects the complete data object yielded. If
-it is `false`, the component awaits only the node id to update the order of
-displayed nodes.
+The function receives `refresh` parameter. If it is `true`, the component requests the full node update and expects the complete data object yielded. If it is `false`, the component awaits only the node id to update the order of displayed nodes.
 
 The data object should contain the following required properties:
 
 - `id` - a unique identifier of the node.
 - `isOpenByDefault` - a default openness state of the node.
 
-You can add any other property you need. This object will be sent directly to
-the `Node` component.
+You can add any other property you need. This object will be sent directly to the `Node` component.
 
-Yielding the object gets the current openness state of the node. Basing on it,
-you should decide if the node's children are going to be rendered.
+Yielding the object gets the current openness state of the node. Basing on it, you should decide if the node's children are going to be rendered.
 
 #### Methods
 
-The component provides all the methods `FixedSizeList` provides with the
-following changes:
+The component provides all the methods `FixedSizeList` provides with the following changes:
 
 ##### `scrollToItem(id: string | symbol, align?: Align): void`
 
 The `scrollToItem` method receives node `id` instead of `index`.
 
 ##### `async recomputeTree(options): void`
 
-This method runs the `treeWalker` function again and, basing on the received
-options, updates either nodes or their order.
+This method runs the `treeWalker` function again and, basing on the received options, updates either nodes or their order.
 
 It receives options object with the following parameters:
 
-- `refreshNodes: boolean` - if this parameter is `true`, `treeWalker` will
-  receive `refresh` option, and the component will expect the data object yielded.
-  If this parameter is either `false` or not provided, the component will expect
-  string id.
-- `useDefaultOpenness: boolean` - if this parameter is `true`, openness state of
-  all nodes will be reset to `isOpenByDefault`. Nodes updated during the tree
-  walking will use the new `isOpenByDefault` value.
+- `opennessState: Record<string, boolean>` - nodes whose IDs are specified as keys of this object will be opened or closed according to boolean values. If the value is `true`, node will be opened; otherwise, it will be closed. This object can be used for changing nodes' openness programmatically without re-creating the `treeWalker` generator.
+  
+  **NOTE**: If you specify both `useDefaultOpenness` and `opennessState`, `opennessState` will be overridden by `useDefaultOpenness` results.
+- `refreshNodes: boolean` - if this parameter is `true`, `treeWalker` will receive `refresh` option, and the component will expect the data object yielded. If this parameter is either `false` or not provided, the component will expect string id.
+- `useDefaultOpenness: boolean` - if this parameter is `true`, openness state of all nodes will be reset to `isOpenByDefault`. Nodes updated during the tree walking will use the new `isOpenByDefault` value.
 
 ### `VariableSizeTree`
 
@@ -292,57 +270,41 @@ const Example = () => (
 
 #### Props
 
-The component receives all the props of the `VariableSizeList` component except
-for the `itemCount` and `itemSize`. `itemSize` is still available but not
-required, and should be used only if the default behavior is not enough.
-Additional properties are the following:
+The component receives all the props of the `VariableSizeList` component except for the `itemCount` and `itemSize`. `itemSize` is still available but not required, and should be used only if the default behavior is not enough. Additional properties are the following:
 
 ##### `children`
 
-The `Node` component. It is the same as the [`FixedSizeTree`](#fixedsizetree)'s
-one but receives two additional properties:
+The `Node` component. It is the same as the [`FixedSizeTree`](#fixedsizetree)'s one but receives two additional properties:
 
 - `height: number` - a current height of the node.
-- `resize(newHeight: number, shouldForceUpdate?: boolean): function` - a
-  function to change the height of the node. It receives two parameters:
+- `resize(newHeight: number, shouldForceUpdate?: boolean): function` - a function to change the height of the node. It receives two parameters:
   - `newHeight: number` - a new height of the node.
-  - `shouldForceUpdate: boolean` - an optional argument that will be sent to the
-    [`resetAfterIndex`](https://react-window.now.sh/#/api/VariableSizeList)
-    method.
+  - `shouldForceUpdate: boolean` - an optional argument that will be sent to the [`resetAfterIndex`](https://react-window.now.sh/#/api/VariableSizeList) method.
 
 ##### `rowComponent: component`
 
-This property receives a custom `Row` component for the `VariableSizeList` that
-will override the default one. It can be used for adding new functionality to an
-existing one by wrapping the default `Row` into a custom component.
+This property receives a custom `Row` component for the `VariableSizeList` that will override the default one. It can be used for adding new functionality to an existing one by wrapping the default `Row` into a custom component.
 
 ##### `* treeWalker(refresh: boolean)`
 
-An iterator function that walks over the tree. It behaves the same as
-`FixedSizeTree`'s `treeWalker`, but there one additional required property for
-the data object:
+An iterator function that walks over the tree. It behaves the same as `FixedSizeTree`'s `treeWalker`, but there one additional required property for the data object:
 
 - `defaultHeight: number` - the default height of the node.
 
 #### Methods
 
-The component provides all the methods `VariableSizeList` provides with the
-following changes:
+The component provides all the methods `VariableSizeList` provides with the following changes:
 
 ##### `scrollToItem(id: string | symbol, align?: Align): void`
 
 The `scrollToItem` method receives node `id` instead of `index`.
 
 ##### `resetAfterId(id: string | symbol, shouldForceUpdate: boolean = false): void`
 
-This method replaces the `resetAfterIndex` method of `VariableSizeList`, but
-works exactly the same. It receives node `id` as a first argument.
+This method replaces the `resetAfterIndex` method of `VariableSizeList`, but works exactly the same. It receives node `id` as a first argument.
 
 ##### `async recomputeTree(options): void`
 
-This method works exactly the same as the `FixedSizeTree`'s one, but receives
-one additional option:
+This method works exactly the same as the `FixedSizeTree`'s one, but receives one additional option:
 
-- `useDefaultHeight: boolean` - if this parameter is `true`, the height of
-  all nodes will be reset to `defaultHeight`. Nodes updated during the tree
-  walking will use the new `defaultHeight` value.
+- `useDefaultHeight: boolean` - if this parameter is `true`, the height of all nodes will be reset to `defaultHeight`. Nodes updated during the tree walking will use the new `defaultHeight` value.

__stories__/FixedSizeTree.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 {
   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 TreeData = 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<TreeData | 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,
@@ -95,9 +95,12 @@ function* treeWalker(
   }
 }
 
-const Node: React.FunctionComponent<FixedSizeNodeComponentProps<
-  ExtendedData
->> = ({data: {isLeaf, name, nestingLevel}, isOpen, style, toggle}) => (
+const Node: FC<FixedSizeNodeComponentProps<TreeData>> = ({
+  data: {isLeaf, name, nestingLevel},
+  isOpen,
+  style,
+  toggle,
+}) => (
   <div
     style={{
       ...style,
@@ -117,23 +120,21 @@ const Node: React.FunctionComponent<FixedSizeNodeComponentProps<
   </div>
 );
 
-interface TreePresenterProps {
-  readonly itemSize: number;
-}
+type TreePresenterProps = Readonly<{
+  itemSize: number;
+}>;
 
-const TreePresenter: React.FunctionComponent<TreePresenterProps> = ({
-  itemSize,
-}) => (
+const TreePresenter: FC<TreePresenterProps> = ({itemSize}) => (
   <AutoSizer disableWidth>
     {({height}) => (
-      <Tree<ExtendedData>
+      <FixedSizeTree
         treeWalker={treeWalker}
         itemSize={itemSize}
         height={height}
         width="100%"
       >
         {Node}
-      </Tree>
+      </FixedSizeTree>
     )}
   </AutoSizer>
 );