Add stand to test components performance

app/src/demo/tables/filteredTable/filters.tsx

@@ -25,7 +25,8 @@ export const getFilters = (): TableFiltersConfig<Person>[] => {
             ),
             predicates: defaultPredicates.multiPicker,
             showSearch: false,
-        }, {
+        },
+        {
             field: 'countryId',
             columnKey: 'countryName',
             title: 'Country',
@@ -47,39 +48,45 @@ export const getFilters = (): TableFiltersConfig<Person>[] => {
                     ) }
                 />
             ),
-        }, {
+        },
+        {
             field: 'jobTitleId',
             columnKey: 'jobTitle',
             title: 'Title',
             type: 'multiPicker',
             dataSource: new LazyDataSource({ api: svc.api.demo.jobTitles }),
-        }, {
+        },
+        {
             field: 'departmentId',
             columnKey: 'departmentName',
             title: 'Department',
             type: 'singlePicker',
             dataSource: new LazyDataSource({ api: svc.api.demo.departments }),
             predicates: [{ predicate: 'eq', name: 'is' }, { predicate: 'neq', name: 'is not' }],
-        }, {
+        },
+        {
             field: 'officeId',
             columnKey: 'officeAddress',
             title: 'Office',
             type: 'singlePicker',
             dataSource: new LazyDataSource({ api: svc.api.demo.offices }),
-        }, {
+        },
+        {
             field: 'managerId',
             columnKey: 'managerName',
             title: 'Manager',
             type: 'multiPicker',
             dataSource: new LazyDataSource({ api: svc.api.demo.managers }),
-        }, {
+        },
+        {
             field: 'cityId',
             columnKey: 'cityName',
             title: 'City',
             type: 'multiPicker',
             getName: (item) => `${item.name} (${item.countryName})`,
             dataSource: new LazyDataSource({ api: svc.api.demo.cities }),
-        }, {
+        },
+        {
             field: 'workload',
             columnKey: 'workload',
             title: 'Workload',
@@ -89,18 +96,21 @@ export const getFilters = (): TableFiltersConfig<Person>[] => {
                 { predicate: 'eq', name: '=' }, { predicate: 'neq', name: '≠' }, { predicate: 'lte', name: '≤' }, { predicate: 'gte', name: '≥' },
             ],
             showSearch: false,
-        }, {
+        },
+        {
             field: 'salary',
             columnKey: 'salary',
             title: 'Salary',
             type: 'numeric',
             predicates: defaultPredicates.numeric,
-        }, {
+        },
+        {
             field: 'hireDate',
             columnKey: 'hireDate',
             title: 'Hire Date',
             type: 'datePicker',
-        }, {
+        },
+        {
             field: 'birthDate',
             columnKey: 'birthDate',
             title: 'Birth Date',

app/src/sandbox/SandboxPage.tsx

@@ -24,6 +24,7 @@ import { ProjectTableDemo } from './editableTable';
 import { RtlExample } from './rtl/Rtl-example';
 import { DemoForm } from './rtl/form/DemoForm';
 import { RichTextEditorDemoReadonly } from './RTE-readonly/RichTextEditorDemo';
+import { PerformanceTestPage } from './perfomance-stand/PerformanceTestPage';
 
 export function SandboxPage() {
     const items = useMemo(
@@ -48,6 +49,7 @@ export function SandboxPage() {
             { parentId: 'tokens', id: 'tokensPalette', name: 'Palette', component: PalettePage },
             { id: 'rtl-example', name: 'Rtl-example', component: RtlExample },
             { id: 'rtl-form', name: 'Rtl-Form', component: DemoForm },
+            { id: 'performanceStand', name: 'Performance stand', component: PerformanceTestPage },
         ],
         [],
     );

app/src/sandbox/perfomance-stand/PerformanceTestPage.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useMemo } from 'react';
+import { FlexRow, DatePicker } from '@epam/uui';
+// import { LazyDataSourceApiRequest, useLazyDataSource } from '@epam/uui-core';
+// import { Person } from '@epam/uui-docs';
+// import { svc } from '../../services';
+
+export function PerformanceTestPage() {
+    const [componentValue, componentOnValueChange] = useState<any>();
+    // const loadPersons = useCallback((request: LazyDataSourceApiRequest<Person, number>) => {
+    //     return svc.api.demo.persons(request);
+    // }, []);
+
+    // const dataSource = useLazyDataSource({ api: loadPersons, selectAll: false }, []);
+
+    const renderTestedComponent = () => {
+        // return (
+        //     <PickerInput
+        //         dataSource={ dataSource }
+        //         value={ componentValue }
+        //         onValueChange={ componentOnValueChange }
+        //         valueType="id"
+        //         selectionMode="multi"
+        //     />
+        // );
+
+        return (
+            <DatePicker
+                value={ componentValue }
+                onValueChange={ componentOnValueChange }
+            />
+        );
+    };
+
+    const gridArray = useMemo(() => new Array(30).fill(new Array(8).fill(undefined)), []);
+
+    return (
+        <div>
+            { gridArray.map((row) => {
+                return (
+                    <FlexRow>
+                        { row.map((cell: any, idx: number) => (
+                            <div key={ idx }> 
+                                { renderTestedComponent() }
+                            </div>
+                        )) }
+                    </FlexRow>
+                );
+            }) }
+        </div>
+    );
+}