Merge pull request #28 from Lodin/fix/recompute-on-expand

Fix resetting height after re-computation (second attempt)

Author: Lodin

__tests__/VariableSizeTree.spec.tsx

@@ -226,6 +226,16 @@ describe('VariableSizeTree', () => {
     });
 
     describe('recomputeTree', () => {
+      let resetAfterIndexSpy: jest.SpyInstance;
+
+      beforeEach(() => {
+        const listInstance = component
+          .find(VariableSizeList)
+          .instance() as VariableSizeList;
+
+        resetAfterIndexSpy = jest.spyOn(listInstance, 'resetAfterIndex');
+      });
+
       it('updates tree order', async () => {
         tree = {
           children: [
@@ -284,6 +294,8 @@ describe('VariableSizeTree', () => {
             treeData: undefined,
           },
         );
+
+        expect(resetAfterIndexSpy).toHaveBeenCalledWith(0, true);
       });
 
       it('updates tree nodes metadata', async () => {
@@ -344,6 +356,8 @@ describe('VariableSizeTree', () => {
             treeData: undefined,
           },
         );
+
+        expect(resetAfterIndexSpy).toHaveBeenCalledWith(0, true);
       });
 
       it('resets current openness to default', async () => {
@@ -408,6 +422,8 @@ describe('VariableSizeTree', () => {
             treeData: undefined,
           },
         );
+
+        expect(resetAfterIndexSpy).toHaveBeenCalledWith(0, true);
       });
 
       it('resets current openness to the new default provided by the node refreshing', async () => {
@@ -465,6 +481,8 @@ describe('VariableSizeTree', () => {
             treeData: undefined,
           },
         );
+
+        expect(resetAfterIndexSpy).toHaveBeenCalledWith(0, true);
       });
 
       it('provides a toggle function that changes openness state of the specific node', async () => {
@@ -482,6 +500,8 @@ describe('VariableSizeTree', () => {
         expect(treeWalkerSpy).toHaveBeenCalledWith(false);
         expect(foo1.height).toBe(defaultHeight);
         expect(foo1.isOpen).toBeFalsy();
+
+        expect(resetAfterIndexSpy).toHaveBeenCalledWith(0, true);
       });
 
       it('resets current height to default', async () => {
@@ -548,6 +568,8 @@ describe('VariableSizeTree', () => {
             treeData: undefined,
           },
         );
+
+        expect(resetAfterIndexSpy).toHaveBeenCalledWith(0, true);
       });
 
       it('resets current height to the new default provided by the node refreshing', async () => {
@@ -605,6 +627,8 @@ describe('VariableSizeTree', () => {
             treeData: undefined,
           },
         );
+
+        expect(resetAfterIndexSpy).toHaveBeenCalledWith(0, true);
       });
 
       it('opens and closes nodes as specified in opennessState', async () => {
@@ -646,6 +670,7 @@ describe('VariableSizeTree', () => {
         expect(foo1!.isOpen).toBeTruthy();
         expect(foo2!.isOpen).toBeTruthy();
         expect(foo3!.isOpen).not.toBeTruthy();
+        expect(resetAfterIndexSpy).toHaveBeenCalledWith(0, true);
       });
 
       it('opennessState is overridden by useDefaultOpenness', async () => {

src/FixedSizeTree.tsx

@@ -77,8 +77,8 @@ export class FixedSizeTree<T extends FixedSizeNodeData = NodeData> extends Tree<
     return (
       <FixedSizeList
         {...rest}
-        itemData={this.state}
         itemCount={this.state.order!.length}
+        itemData={this.state}
         ref={this.list}
       >
         {rowComponent!}

src/Tree.tsx

@@ -12,6 +12,7 @@ import {
   ListProps,
   VariableSizeList,
 } from 'react-window';
+import {DefaultTreeProps, DefaultTreeState} from './utils';
 
 export type NodeData = Readonly<{
   /**
@@ -261,14 +262,14 @@ class Tree<
   >,
   TListComponent extends FixedSizeList | VariableSizeList
 > extends PureComponent<TProps, TState> {
-  public static defaultProps: Partial<TreeProps<any, any>> = {
+  public static defaultProps: Partial<DefaultTreeProps> = {
     rowComponent: Row,
   };
 
   public static getDerivedStateFromProps(
-    props: TreeProps<any, any>,
-    state: TreeState<any, any, any, any>,
-  ): Partial<TreeState<any, any, any, any>> {
+    props: DefaultTreeProps,
+    state: DefaultTreeState,
+  ): Partial<DefaultTreeState> {
     const {children: component, itemData: treeData, treeWalker} = props;
     const {computeTree, order, treeWalker: oldTreeWalker} = state;
 

src/VariableSizeTree.tsx

@@ -138,9 +138,7 @@ export class VariableSizeTree<T extends VariableSizeNodeData> extends Tree<
 
   public recomputeTree(options?: VariableSizeUpdateOptions): Promise<void> {
     return super.recomputeTree(options).then(() => {
-      if (options?.useDefaultHeight) {
-        this.list.current?.resetAfterIndex(0, true);
-      }
+      this.list.current?.resetAfterIndex(0, true);
     });
   }
 
@@ -150,8 +148,8 @@ export class VariableSizeTree<T extends VariableSizeNodeData> extends Tree<
     return (
       <VariableSizeList
         {...rest}
-        itemData={this.state}
         itemCount={this.state.order!.length}
+        itemData={this.state}
         // eslint-disable-next-line @typescript-eslint/unbound-method
         itemSize={itemSize ?? this.getItemSize}
         ref={this.list}

src/utils.ts

@@ -3,21 +3,29 @@ import {
   NodeData,
   NodeRecord,
   TreeCreatorOptions,
+  TreeProps,
   TreeState,
   UpdateOptions,
 } from './Tree';
 
+export type DefaultTreeProps = TreeProps<
+  NodeComponentProps<NodeData>,
+  NodeData
+>;
+
+export type DefaultTreeState = TreeState<
+  NodeComponentProps<NodeData>,
+  NodeRecord<NodeData>,
+  UpdateOptions,
+  NodeData
+>;
+
 export type DefaultTreeCreatorOptions = TreeCreatorOptions<
   NodeComponentProps<NodeData>,
   NodeRecord<NodeData>,
   UpdateOptions,
   NodeData,
-  TreeState<
-    NodeComponentProps<NodeData>,
-    NodeRecord<NodeData>,
-    UpdateOptions,
-    NodeData
-  >
+  DefaultTreeState
 >;
 
 export const identity = <T>(value: T): T => value;