Merge pull request #36 from Lodin/fix/openness-state-on-creation

Consider opennessState on record creation

Author: Lodin

__tests__/FixedSizeTree.spec.tsx

@@ -4,6 +4,7 @@ import {FixedSizeList} from 'react-window';
 import {
   FixedSizeNodeComponentProps,
   FixedSizeNodeData,
+  FixedSizeNodeRecord,
   FixedSizeTree,
   FixedSizeTreeProps,
   FixedSizeTreeState,
@@ -75,6 +76,18 @@ describe('FixedSizeTree', () => {
     }
   }
 
+  const mountComponent = (): typeof component =>
+    mount(
+      <FixedSizeTree<ExtendedData>
+        itemSize={30}
+        treeWalker={treeWalkerSpy}
+        height={500}
+        width={500}
+      >
+        {Node}
+      </FixedSizeTree>,
+    );
+
   beforeEach(() => {
     tree = {
       children: [
@@ -89,16 +102,7 @@ describe('FixedSizeTree', () => {
 
     treeWalkerSpy = jest.fn(treeWalker);
 
-    component = mount(
-      <FixedSizeTree<ExtendedData>
-        itemSize={30}
-        treeWalker={treeWalkerSpy}
-        height={500}
-        width={500}
-      >
-        {Node}
-      </FixedSizeTree>,
-    );
+    component = mountComponent();
   });
 
   it('renders a component', () => {
@@ -479,6 +483,33 @@ describe('FixedSizeTree', () => {
         expect(foo2!.isOpen).toBeTruthy();
         expect(foo3!.isOpen).toBeTruthy();
       });
+
+      it('opennessState works when node is created during update', async () => {
+        component.unmount();
+        isOpenByDefault = false;
+        component = mountComponent();
+        treeInstance = component.instance();
+
+        await treeInstance.recomputeTree({
+          opennessState: {
+            'foo-1': true,
+            'foo-2': true,
+            'foo-3': true,
+          },
+          refreshNodes: true,
+        });
+        component.update();
+
+        const {records} = component.find(FixedSizeList).prop('itemData') as {
+          records: Record<string, FixedSizeNodeRecord<ExtendedData>>;
+        };
+
+        expect(Object.keys(records).map((key) => records[key].isOpen)).toEqual([
+          true,
+          true,
+          true,
+        ]);
+      });
     });
 
     it('provides a toggle function that changes openness state of the specific node', async () => {

__tests__/VariableSizeTree.spec.tsx

@@ -5,6 +5,7 @@ import {
   Row,
   VariableSizeNodeComponentProps,
   VariableSizeNodeData,
+  VariableSizeNodeRecord,
   VariableSizeTree,
   VariableSizeTreeProps,
   VariableSizeTreeState,
@@ -77,6 +78,17 @@ describe('VariableSizeTree', () => {
     }
   }
 
+  const mountComponent = (): typeof component =>
+    mount(
+      <VariableSizeTree<ExtendedData>
+        treeWalker={treeWalkerSpy}
+        height={500}
+        width={500}
+      >
+        {Node}
+      </VariableSizeTree>,
+    );
+
   beforeEach(() => {
     tree = {
       children: [
@@ -92,15 +104,7 @@ describe('VariableSizeTree', () => {
 
     treeWalkerSpy = jest.fn(treeWalker);
 
-    component = mount(
-      <VariableSizeTree<ExtendedData>
-        treeWalker={treeWalkerSpy}
-        height={500}
-        width={500}
-      >
-        {Node}
-      </VariableSizeTree>,
-    );
+    component = mountComponent();
   });
 
   it('renders a component', () => {
@@ -692,6 +696,33 @@ describe('VariableSizeTree', () => {
         expect(foo2!.isOpen).toBeTruthy();
         expect(foo3!.isOpen).toBeTruthy();
       });
+
+      it('opennessState works when node is created during update', async () => {
+        component.unmount();
+        isOpenByDefault = false;
+        component = mountComponent();
+        treeInstance = component.instance();
+
+        await treeInstance.recomputeTree({
+          opennessState: {
+            'foo-1': true,
+            'foo-2': true,
+            'foo-3': true,
+          },
+          refreshNodes: true,
+        });
+        component.update();
+
+        const {records} = component.find(VariableSizeList).prop('itemData') as {
+          records: Record<string, VariableSizeNodeRecord<ExtendedData>>;
+        };
+
+        expect(Object.keys(records).map((key) => records[key].isOpen)).toEqual([
+          true,
+          true,
+          true,
+        ]);
+      });
     });
 
     it('provides a resize function that changes height of the specific node', () => {

src/Tree.tsx

@@ -130,7 +130,11 @@ export type TreeCreatorOptions<
     TData
   >
 > = Readonly<{
-  createRecord: (data: TData, state: TState) => TNodeRecord;
+  createRecord: (
+    data: TData,
+    options: TUpdateOptions,
+    state: TState,
+  ) => TNodeRecord;
   shouldUpdateRecords: (options: TUpdateOptions) => boolean;
   updateRecord: (
     record: TNodeRecord,
@@ -226,7 +230,7 @@ export const createTreeComputer = <
       const record = records[id as string];
 
       if (!record) {
-        records[id as string] = createRecord(value, state);
+        records[id as string] = createRecord(value, options, state);
       } else {
         record.data = value;
         updateRecordOnNewData(record, options);

src/VariableSizeTree.tsx

@@ -67,11 +67,11 @@ const computeTree = createTreeComputer<
   VariableSizeTreeProps<VariableSizeNodeData>,
   VariableSizeTreeState<VariableSizeNodeData>
 >({
-  createRecord: (data, {recomputeTree, resetAfterId}) => {
+  createRecord: (data, {opennessState}, {recomputeTree, resetAfterId}) => {
     const record = {
       data,
       height: data.defaultHeight,
-      isOpen: data.isOpenByDefault,
+      isOpen: opennessState?.[data.id as string] ?? data.isOpenByDefault,
       resize(height: number, shouldForceUpdate?: boolean): void {
         record.height = height;
         resetAfterId(record.data.id, shouldForceUpdate);

src/utils.ts

@@ -32,11 +32,12 @@ export const identity = <T>(value: T): T => value;
 
 export const createRecord: DefaultTreeCreatorOptions['createRecord'] = (
   data,
+  {opennessState},
   {recomputeTree},
 ) => {
   const record = {
     data,
-    isOpen: data.isOpenByDefault,
+    isOpen: opennessState?.[data.id as string] ?? data.isOpenByDefault,
     toggle(): Promise<void> {
       record.isOpen = !record.isOpen;