docs(NavigationTree): virtualized render in storyboook

Author: ariser

src/components/NavigationTree/__stories__/NavigationTree.stories.tsx

@@ -27,6 +27,26 @@ export const Default: Story<NavigationTreeProps> = () => {
     );
 };
 
+export const Virtualized: Story<NavigationTreeProps> = () => {
+    const [activePath, setActivePath] = React.useState('');
+
+    return (
+        <NavigationTree
+            rootState={{
+                path: '',
+                name: 'ru/maps/maps_prod',
+                type: 'database',
+                collapsed: false,
+            }}
+            fetchPath={fetchPathWithLargeResults}
+            getActions={getActions}
+            activePath={activePath}
+            onActivePathUpdate={setActivePath}
+            virtualize
+        />
+    );
+};
+
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
 async function fetchPath(path: string) {
@@ -92,6 +112,68 @@ async function fetchPath(path: string) {
     return items;
 }
 
+async function fetchPathWithLargeResults(path: string) {
+    let items: NavigationTreeDataItem[] = [];
+    console.log(`Fetching "${path}"...`);
+
+    await sleep(1000);
+
+    if (path === '') {
+        items = [
+            {
+                name: '200_items',
+                type: 'directory',
+            },
+            {
+                name: 'folder_with_error',
+                type: 'directory',
+            },
+            {
+                name: '10000_items',
+                type: 'directory',
+            },
+            {
+                name: 'table_1',
+                type: 'table',
+            },
+            {
+                name: 'table_2',
+                type: 'table',
+            },
+            {
+                name: 'table_3',
+                type: 'table',
+            },
+        ];
+    }
+
+    if (path === '/200_items') {
+        items = [];
+        for (let i = 1; i < 200; i++) {
+            items.push({
+                name: `item_${i}`,
+                type: 'table',
+            });
+        }
+    }
+
+    if (path === '/folder_with_error') {
+        throw new Error('Ошибка');
+    }
+
+    if (path === '/10000_items') {
+        items = [];
+        for (let i = 1; i < 10000; i++) {
+            items.push({
+                name: `item_${i}`,
+                type: 'table',
+            });
+        }
+    }
+
+    return items;
+}
+
 function getActions(path: string, type: NavigationTreeNodeType) {
     if (type === 'directory') {
         return [{text: 'Show Directory', action: () => alert(`Directory path is "${path}"`)}];