Skip to content

Commit 1f40879

Browse files
sirgallifreysirgallifrey
committed
Apply recomended changes
1 parent 5314341 commit 1f40879

File tree

4 files changed

+71
-105
lines changed

4 files changed

+71
-105
lines changed

‎__tests__/FixedSizeTree.spec.tsx‎

Lines changed: 64 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {mount, ReactWrapper} from 'enzyme';
22
import React, {createRef, FC} from 'react';
3-
import {FixedSizeList} from 'react-window';
3+
import {FixedSizeList, FixedSizeListProps} from 'react-window';
44
import {
55
FixedSizeNodeData,
66
FixedSizeNodePublicState,
@@ -14,10 +14,10 @@ import {
1414
import {NodeComponentProps, NodePublicState} from '../src/Tree';
1515
import {
1616
defaultTree,
17-
treeWithLargeNode,
1817
extractReceivedRecords,
1918
mockRequestIdleCallback,
2019
sleep,
20+
treeWithLargeNode,
2121
} from './utils/misc';
2222

2323
type TreeNode = Readonly<{
@@ -50,21 +50,12 @@ describe('FixedSizeTree', () => {
5050
>;
5151
let tree: TreeNode;
5252
let treeWalkerSpy: jest.Mock;
53-
let isOpenByDefault: (node: TreeNode) => boolean;
53+
let isOpenByDefault: boolean;
5454

55-
const getNodeData = (
55+
let getNodeData: (
5656
node: TreeNode,
5757
nestingLevel: number,
58-
): TreeWalkerValue<ExtendedData, NodeMeta> => ({
59-
data: {
60-
id: node.id.toString(),
61-
isOpenByDefault: isOpenByDefault(node),
62-
name: node.name,
63-
nestingLevel,
64-
},
65-
nestingLevel,
66-
node,
67-
});
58+
) => TreeWalkerValue<ExtendedData, NodeMeta>;
6859

6960
function* treeWalker(): ReturnType<TreeWalker<ExtendedData, NodeMeta>> {
7061
yield getNodeData(tree, 0);
@@ -104,7 +95,21 @@ describe('FixedSizeTree', () => {
10495
beforeEach(() => {
10596
tree = defaultTree;
10697

107-
isOpenByDefault = () => true;
98+
isOpenByDefault = true;
99+
100+
getNodeData = (
101+
node: TreeNode,
102+
nestingLevel: number,
103+
): TreeWalkerValue<ExtendedData, NodeMeta> => ({
104+
data: {
105+
id: node.id.toString(),
106+
isOpenByDefault,
107+
name: node.name,
108+
nestingLevel,
109+
},
110+
nestingLevel,
111+
node,
112+
});
108113

109114
treeWalkerSpy = jest.fn(treeWalker);
110115

@@ -602,75 +607,62 @@ describe('FixedSizeTree', () => {
602607
tree = treeWithLargeNode;
603608
component = mountComponent();
604609

605-
const records = extractReceivedRecords(component.find(FixedSizeList));
610+
const records = extractReceivedRecords<
611+
FixedSizeListProps,
612+
ExtendedData,
613+
NodePublicState<ExtendedData>
614+
>(component.find(FixedSizeList));
615+
606616
const {setOpen} = records.find(
607617
(record) => record.data.id === 'largeNode-1',
608-
) as NodePublicState<ExtendedData>;
618+
)!;
609619

610620
await setOpen(false);
611621
component.update(); // Update the wrapper to get the latest changes
612622

613623
const updatedRecords = extractReceivedRecords(
614624
component.find(FixedSizeList),
615625
);
616-
expect(updatedRecords).toEqual([
617-
expect.objectContaining({
618-
data: expect.objectContaining({
619-
id: 'root-1',
620-
}),
621-
}),
622-
expect.objectContaining({
623-
data: expect.objectContaining({
624-
id: 'smallNode-1',
625-
}),
626-
}),
627-
expect.objectContaining({
628-
data: expect.objectContaining({
629-
id: 'smallNodeChild-1',
630-
}),
631-
}),
632-
expect.objectContaining({
633-
data: expect.objectContaining({
634-
id: 'smallNodeChild-2',
635-
}),
636-
}),
637-
expect.objectContaining({
638-
data: expect.objectContaining({
639-
id: 'largeNode-1',
640-
}),
641-
}),
642-
expect.objectContaining({
643-
data: expect.objectContaining({
644-
id: 'smallNode-2',
645-
}),
646-
}),
647-
expect.objectContaining({
648-
data: expect.objectContaining({
649-
id: 'smallNodeChild-3',
650-
}),
651-
}),
652-
expect.objectContaining({
653-
data: expect.objectContaining({
654-
id: 'smallNodeChild-4',
655-
}),
656-
}),
626+
627+
expect(updatedRecords.map(({data: {id}}) => id)).toEqual([
628+
'root-1',
629+
'smallNode-1',
630+
'smallNodeChild-1',
631+
'smallNodeChild-2',
632+
'largeNode-1',
633+
'smallNode-2',
634+
'smallNodeChild-3',
635+
'smallNodeChild-4',
657636
]);
658637
});
659638

660639
it('correctly expands node with 100.000 children', async () => {
640+
getNodeData = (
641+
node: TreeNode,
642+
nestingLevel: number,
643+
): TreeWalkerValue<ExtendedData, NodeMeta> => ({
644+
data: {
645+
id: node.id.toString(),
646+
isOpenByDefault: node.id !== 'largeNode-1',
647+
name: node.name,
648+
nestingLevel,
649+
},
650+
nestingLevel,
651+
node,
652+
});
661653
tree = treeWithLargeNode;
662-
isOpenByDefault = (node) => {
663-
if (node.id === 'largeNode-1') {
664-
return false;
665-
}
666-
return true;
667-
};
654+
668655
component = mountComponent();
669656

670-
const records = extractReceivedRecords(component.find(FixedSizeList));
657+
const records = extractReceivedRecords<
658+
FixedSizeListProps,
659+
ExtendedData,
660+
NodePublicState<ExtendedData>
661+
>(component.find(FixedSizeList));
662+
671663
const {setOpen} = records.find(
672664
(record) => record.data.id === 'largeNode-1',
673-
) as NodePublicState<ExtendedData>;
665+
)!;
674666

675667
await setOpen(true);
676668
component.update(); // Update the wrapper to get the latest changes
@@ -679,32 +671,12 @@ describe('FixedSizeTree', () => {
679671
component.find(FixedSizeList),
680672
);
681673

682-
expect(updatedRecords.slice(-5)).toEqual([
683-
expect.objectContaining({
684-
data: expect.objectContaining({
685-
id: 'largeNodeChild-99999',
686-
}),
687-
}),
688-
expect.objectContaining({
689-
data: expect.objectContaining({
690-
id: 'largeNodeChild-100000',
691-
}),
692-
}),
693-
expect.objectContaining({
694-
data: expect.objectContaining({
695-
id: 'smallNode-2',
696-
}),
697-
}),
698-
expect.objectContaining({
699-
data: expect.objectContaining({
700-
id: 'smallNodeChild-3',
701-
}),
702-
}),
703-
expect.objectContaining({
704-
data: expect.objectContaining({
705-
id: 'smallNodeChild-4',
706-
}),
707-
}),
674+
expect(updatedRecords.slice(-5).map(({data: {id}}) => id)).toEqual([
675+
'largeNodeChild-99999',
676+
'largeNodeChild-100000',
677+
'smallNode-2',
678+
'smallNodeChild-3',
679+
'smallNodeChild-4',
708680
]);
709681
});
710682
});

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-vtree",
3-
"version": "3.0.0-beta.0",
3+
"version": "3.0.0-beta.1",
44
"description": "React component for efficiently rendering large tree structures",
55
"main": "./dist/cjs/index.js",
66
"module": "./dist/es/index.js",

‎src/Tree.tsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -457,8 +457,6 @@ const updateExistingTree = <
457457
[index + 1, countToRemove],
458458
];
459459

460-
let orderPartsCursor = 0;
461-
462460
// Unfortunately, splice cannot work with big arrays. If array exceeds
463461
// some length it may fire an exception. The length is specific for
464462
// each engine; e.g., MDN says about 65536 for Webkit. So, to avoid this
@@ -479,19 +477,15 @@ const updateExistingTree = <
479477
: true;
480478

481479
if (record.isShown) {
482-
orderParts[orderPartsCursor].push(record.public.data.id);
480+
const currentOrderPart = orderParts[orderParts.length - 1];
481+
currentOrderPart.push(record.public.data.id);
483482

484483
if (
485-
orderParts[orderPartsCursor].length === MAX_FUNCTION_ARGUMENTS
484+
currentOrderPart.length ===
485+
MAX_FUNCTION_ARGUMENTS + SPLICE_DEFAULT_ARGUMENTS_NUMBER
486486
) {
487-
orderPartsCursor += 1;
488-
// Every chunk contains 2 arguments (start and delete) that are not records
489-
// we have to account for them when setting the start point of a new chunk.
490487
orderParts.push([
491-
index +
492-
1 +
493-
orderPartsCursor * MAX_FUNCTION_ARGUMENTS -
494-
orderPartsCursor * SPLICE_DEFAULT_ARGUMENTS_NUMBER,
488+
index + 1 + MAX_FUNCTION_ARGUMENTS * orderParts.length,
495489
0,
496490
]);
497491
}

0 commit comments

Comments
 (0)