Merge pull request #43 from Lodin/feat/setopen

Replace toggle function with setOpen

Author: Lodin

README.md

@@ -105,11 +105,11 @@ function* treeWalker() {
 
 // Node component receives all the data we created in the `treeWalker` +
 // internal openness state (`isOpen`), function to change internal openness
-// state (`toggle`) and `style` parameter that should be added to the root div.
-const Node = ({data: {isLeaf, name}, isOpen, style, toggle}) => (
+// state (`setOpen`) and `style` parameter that should be added to the root div.
+const Node = ({data: {isLeaf, name}, isOpen, style, setOpen}) => (
   <div style={style}>
     {!isLeaf && (
-      <button type="button" onClick={toggle}>
+      <button type="button" onClick={() => setOpen(!isOpen)}>
         {isOpen ? '-' : '+'}
       </button>
     )}
@@ -297,7 +297,7 @@ tree.recomputeTree({
 - `FixedSizeNodePublicState<TData extends FixedSizeNodeData>` - the node state available for the `Node` component and `recomputeTree`'s `subtreeCallback` function. It has the following shape:
   - `data: FixedSizeNodeData`.
   - `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.
+  - `setOpen(state: boolean): function` - a function to change the openness state of the node. It receives the new openness state as a `boolean` and opens/closes the node accordingly.
 - `FixedSizeTreeProps<TData extends FixedSizeNodeData>` - props that `FixedSizeTree` component receives. Described in the [Props](#props) section.
 - `FixedSizeTreeState<TData extends FixedSizeNodeData>` - state that `FixedSizeTree` component has.
 
@@ -373,10 +373,10 @@ function* treeWalker() {
 }
 
 // Node component receives current node height as a prop
-const Node = ({data: {isLeaf, name}, height, isOpen, style, toggle}) => (
+const Node = ({data: {isLeaf, name}, height, isOpen, style, setOpen}) => (
   <div style={style}>
     {!isLeaf && (
-      <button type="button" onClick={toggle}>
+      <button type="button" onClick={() => setOpen(!isOpen)}>
         {isOpen ? '-' : '+'}
       </button>
     )}
@@ -493,8 +493,7 @@ The `treeWalker` was and is the heart of the `react-vtree`. However, now it look
 Old `treeWalker` worked for both initial tree building and changing node openness state:
 
 ```js
-function* treeWalker(  refresh
-) {
+function* treeWalker(refresh) {
   const stack = [];
 
   stack.push({
@@ -586,6 +585,7 @@ The `recomputeTree` method now receives a list of nodes to change (previously, i
 The most important change is the introduction of the `subtreeCallback`. It is a function that will be applied to each node in the subtree of the specified node. Among other useful things it also allows imitating the behavior of old `useDefaultOpenness` and `useDefaultHeight` options.
 
 Old `recomputeTree`:
+
 ```js
 treeInstance.recomputeTree({
   opennessState: {
@@ -594,7 +594,7 @@ treeInstance.recomputeTree({
     'node-3': false,
   },
   refreshNodes: true,
-  useDefaultOpenness: false
+  useDefaultOpenness: false,
 });
 ```
 
@@ -609,8 +609,42 @@ treeInstance.recomputeTree({
       if (node !== ownerNode) {
         node.isOpen = false;
       }
-    }
+    },
   },
   'node-3': false,
 });
+```
+
+### 4. Migrate all your `toggle()` calls to `setOpen(boolean)`
+
+In the `3.x.x` version node provides a `setOpen` function instead of `toggle` that allows more fine-grained control over the openness state.
+
+Old `toggle`:
+
+```javascript
+const Node = ({data: {isLeaf, name}, isOpen, style, toggle}) => (
+  <div style={style}>
+    {!isLeaf && (
+      <div>
+        <button onClick={toggle}>{isOpen ? '-' : '+'}</button>
+      </div>
+    )}
+    <div>{name}</div>
+  </div>
+);
+```
+
+New `setOpen`:
+```javascript
+const Node = ({data: {isLeaf, name}, isOpen, style, setOpen}) => (
+  <div style={style}>
+    {!isLeaf && (
+      <div>
+        // Imitating the old `toggle` function behavior
+        <button onClick={() => setOpen(!isOpen)}>{isOpen ? '-' : '+'}</button>
+      </div>
+    )}
+    <div>{name}</div>
+  </div>
+);
 ```

__stories__/AsyncData.story.tsx

@@ -97,7 +97,7 @@ const Node: FC<NodeComponentProps<
   data: {download, downloaded, isLeaf, name, nestingLevel},
   isOpen,
   style,
-  toggle,
+  setOpen,
 }) => {
   const [isLoading, setLoading] = useState(false);
 
@@ -118,10 +118,10 @@ const Node: FC<NodeComponentProps<
               if (!downloaded) {
                 setLoading(true);
                 await download();
-                await toggle();
+                await setOpen(!isOpen);
                 setLoading(false);
               } else {
-                await toggle();
+                await setOpen(!isOpen);
               }
             }}
             style={defaultButtonStyle}

__stories__/AsyncDataIdle.story.tsx

@@ -118,7 +118,7 @@ const Node: FC<NodeComponentProps<
   data: {download, downloaded, isLeaf, name, nestingLevel},
   isOpen,
   style,
-  toggle,
+  setOpen,
 }) => {
   const [isLoading, setLoading] = useState(false);
   const createBuildingPromise = useBuildingPromise([download]);
@@ -143,12 +143,12 @@ const Node: FC<NodeComponentProps<
                       setLoading(true);
                       await Promise.all([
                         download(),
-                        toggle(),
+                        setOpen(!isOpen),
                         createBuildingPromise(),
                       ]);
                       setLoading(false);
                     } else {
-                      await toggle();
+                      await setOpen(!isOpen);
                     }
                   }
                 : undefined

__stories__/BigData.story.tsx

@@ -73,7 +73,7 @@ const Node: FC<NodeComponentProps<
   isOpen,
   resize,
   style,
-  toggle,
+  setOpen,
   treeData: itemSize,
 }) => {
   const canOpen = height <= itemSize;
@@ -96,7 +96,11 @@ const Node: FC<NodeComponentProps<
     >
       {!isLeaf && (
         <div>
-          <button type="button" onClick={toggle} style={defaultButtonStyle}>
+          <button
+            type="button"
+            onClick={() => setOpen(!isOpen)}
+            style={defaultButtonStyle}
+          >
             {isOpen ? '-' : '+'}
           </button>
         </div>

__stories__/FixedSizeTree.story.tsx

@@ -99,7 +99,7 @@ function* treeWalker(): ReturnType<TreeWalker<TreeData, NodeMeta>> {
 const Node: FC<NodeComponentProps<
   TreeData,
   FixedSizeNodePublicState<TreeData>
->> = ({data: {isLeaf, name, nestingLevel}, isOpen, style, toggle}) => (
+>> = ({data: {isLeaf, name, nestingLevel}, isOpen, style, setOpen}) => (
   <div
     style={{
       ...style,
@@ -110,7 +110,11 @@ const Node: FC<NodeComponentProps<
   >
     {!isLeaf && (
       <div>
-        <button type="button" onClick={toggle} style={defaultButtonStyle}>
+        <button
+          type="button"
+          onClick={() => setOpen(!isOpen)}
+          style={defaultButtonStyle}
+        >
           {isOpen ? '-' : '+'}
         </button>
       </div>

__stories__/MultipleRoots.story.tsx

@@ -102,7 +102,7 @@ function* treeWalker(): ReturnType<TreeWalker<TreeData, NodeMeta>> {
 const Node: FC<NodeComponentProps<
   TreeData,
   FixedSizeNodePublicState<TreeData>
->> = ({data: {isLeaf, name, nestingLevel}, isOpen, style, toggle}) => (
+>> = ({data: {isLeaf, name, nestingLevel}, isOpen, style, setOpen}) => (
   <div
     style={{
       ...style,
@@ -113,7 +113,11 @@ const Node: FC<NodeComponentProps<
   >
     {!isLeaf && (
       <div>
-        <button type="button" onClick={toggle} style={defaultButtonStyle}>
+        <button
+          type="button"
+          onClick={() => setOpen(!isOpen)}
+          style={defaultButtonStyle}
+        >
           {isOpen ? '-' : '+'}
         </button>
       </div>

__stories__/VariableSizeTree.story.tsx

@@ -73,7 +73,7 @@ const Node: FC<NodeComponentProps<
   isOpen,
   resize,
   style,
-  toggle,
+  setOpen,
   treeData: itemSize,
 }) => {
   const canOpen = height <= itemSize;
@@ -96,7 +96,11 @@ const Node: FC<NodeComponentProps<
     >
       {!isLeaf && (
         <div>
-          <button type="button" onClick={toggle} style={defaultButtonStyle}>
+          <button
+            type="button"
+            onClick={() => setOpen(!isOpen)}
+            style={defaultButtonStyle}
+          >
             {isOpen ? '-' : '+'}
           </button>
         </div>

__tests__/FixedSizeTree.spec.tsx

@@ -138,7 +138,7 @@ describe('FixedSizeTree', () => {
           nestingLevel: 0,
         },
         isOpen: true,
-        toggle: expect.any(Function),
+        setOpen: expect.any(Function),
       },
       {
         data: {
@@ -148,7 +148,7 @@ describe('FixedSizeTree', () => {
           nestingLevel: 1,
         },
         isOpen: true,
-        toggle: expect.any(Function),
+        setOpen: expect.any(Function),
       },
       {
         data: {
@@ -158,7 +158,7 @@ describe('FixedSizeTree', () => {
           nestingLevel: 2,
         },
         isOpen: true,
-        toggle: expect.any(Function),
+        setOpen: expect.any(Function),
       },
       {
         data: {
@@ -168,7 +168,7 @@ describe('FixedSizeTree', () => {
           nestingLevel: 2,
         },
         isOpen: true,
-        toggle: expect.any(Function),
+        setOpen: expect.any(Function),
       },
       {
         data: {
@@ -178,7 +178,7 @@ describe('FixedSizeTree', () => {
           nestingLevel: 1,
         },
         isOpen: true,
-        toggle: expect.any(Function),
+        setOpen: expect.any(Function),
       },
       {
         data: {
@@ -188,7 +188,7 @@ describe('FixedSizeTree', () => {
           nestingLevel: 2,
         },
         isOpen: true,
-        toggle: expect.any(Function),
+        setOpen: expect.any(Function),
       },
       {
         data: {
@@ -198,7 +198,7 @@ describe('FixedSizeTree', () => {
           nestingLevel: 2,
         },
         isOpen: true,
-        toggle: expect.any(Function),
+        setOpen: expect.any(Function),
       },
     ]);
   });
@@ -245,11 +245,11 @@ describe('FixedSizeTree', () => {
   });
 
   it('allows preserving previous state on the new tree building', async () => {
-    const [, {toggle}]: ReadonlyArray<FixedSizeNodePublicState<
+    const [, {setOpen}]: ReadonlyArray<FixedSizeNodePublicState<
       ExtendedData
     >> = extractReceivedRecords(component.find(FixedSizeList));
 
-    await toggle();
+    await setOpen(false);
     component.update();
 
     expect(
@@ -384,7 +384,7 @@ describe('FixedSizeTree', () => {
               nestingLevel: 0,
             },
             isOpen: false,
-            toggle: expect.any(Function),
+            setOpen: expect.any(Function),
           },
         ]);
       });
@@ -533,17 +533,23 @@ describe('FixedSizeTree', () => {
       });
     });
 
-    it('provides a toggle function that changes openness state of the specific node', async () => {
-      const [{toggle}] = extractReceivedRecords(component.find(FixedSizeList));
+    it('provides a setOpen function that changes openness state of the specific node', async () => {
+      const [{setOpen}] = extractReceivedRecords(component.find(FixedSizeList));
 
-      await toggle();
+      await setOpen(false);
       component.update(); // Update the wrapper to get the latest changes
 
-      const list = component.find(FixedSizeList);
+      let list = component.find(FixedSizeList);
       expect(list.prop('itemCount')).toBe(1);
       expect(extractReceivedRecords(list).map(({data: {id}}) => id)).toEqual([
         'foo-1',
       ]);
+
+      await setOpen(true);
+      component.update(); // Update the wrapper to get the latest changes
+
+      list = component.find(FixedSizeList);
+      expect(list.prop('itemCount')).toBe(7);
     });
   });
 });