Renovated DataGrid: Separate the common part of the DataGrid and Tree…

…List (DevExpress#16730)

* Renovated DataGrid: Separate the common part of the DataGrid and TreeList

* Eliminated the faults

* Fix test

jest.config.js

@@ -19,9 +19,10 @@ module.exports = {
         '!**/__tests__/**/*',
     ],
     coveragePathIgnorePatterns: [
-        './js/renovation/ui/data_grid/datagrid_component.ts',
-        './js/renovation/ui/data_grid/common/data_grid_view_props.ts',
-        './js/renovation/ui/data_grid/utils/get_updated_options.ts',
+        './js/renovation/ui/grids/data_grid/datagrid_component.ts',
+        './js/renovation/ui/grids/data_grid/common/data_grid_view_props.ts',
+        './js/renovation/ui/grids/grid_base/common/grid_base_view_props.ts',
+        './js/renovation/ui/grids/data_grid/utils/get_updated_options.ts',
         './js/renovation/ui/scheduler/workspaces/utils.ts',
         './js/renovation/ui/scroll_view/scrollable_simulated_props.ts',
         './js/renovation/ui/scroll_view/scrollable_utils.ts',

js/renovation/component_wrapper/data_grid.ts

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import Component from './component';
-import type { DataGrid } from '../ui/data_grid/data_grid';
+import type { DataGrid } from '../ui/grids/data_grid/data_grid';
 
 export default class DataGridWrapper extends Component {
     beginUpdate() {

js/renovation/ui/data_grid/__tests__/data_grid.test.tsx → js/renovation/ui/grids/data_grid/__tests__/data_grid.test.tsx

@@ -4,13 +4,13 @@ import { mount } from 'enzyme';
 import each from 'jest-each';
 import { DataGrid, viewFunction as DataGridView } from '../data_grid';
 import { DataGridProps } from '../common/data_grid_props';
-import { Widget } from '../../common/widget';
+import { Widget } from '../../../common/widget';
 import { DataGridViews } from '../data_grid_views';
 import '../datagrid_component';
 import { getUpdatedOptions } from '../utils/get_updated_options';
 
 jest.mock('../data_grid_views', () => ({ DataGridViews: () => null }));
-jest.mock('../../../../ui/data_grid/ui.data_grid', () => jest.fn());
+jest.mock('../../../../../ui/data_grid/ui.data_grid', () => jest.fn());
 jest.mock('../datagrid_component', () => ({
   DataGridComponent: jest.fn().mockImplementation((options) => ({
     option: () => options,

js/renovation/ui/data_grid/__tests__/data_grid_views.test.tsx → js/renovation/ui/grids/data_grid/__tests__/data_grid_views.test.tsx

@@ -1,10 +1,6 @@
 import { mount } from 'enzyme';
 import { DataGridViews, viewFunction } from '../data_grid_views';
-import { DataGridViewWrapper } from '../data_grid_view_wrapper';
-
-jest.mock('../data_grid_view_wrapper', () => ({ DataGridViewWrapper: () => null }));
-
-const GRIDBASE_CONTAINER_CLASS = 'dx-gridbase-container';
+import { GridBaseViews } from '../../grid_base/grid_base_views';
 
 describe('DataGridViews', () => {
   describe('View', () => {
@@ -17,13 +13,7 @@ describe('DataGridViews', () => {
       } as any;
       const tree = mount(viewFunction(props));
 
-      expect(tree.hasClass(GRIDBASE_CONTAINER_CLASS)).toBe(true);
-      expect(tree.children().length).toBe(2);
-      expect(tree.find(DataGridViewWrapper).length).toBe(2);
-      expect(tree.find(DataGridViewWrapper).get(0).key).toBe('view1');
-      expect(tree.find(DataGridViewWrapper).get(0).props.view).toBe('viewComponent1');
-      expect(tree.find(DataGridViewWrapper).get(1).key).toBe('view2');
-      expect(tree.find(DataGridViewWrapper).get(1).props.view).toBe('viewComponent2');
+      expect(tree.find(GridBaseViews).length).toBe(1);
     });
   });
 

js/renovation/ui/data_grid/common/data_grid_props.tsx → js/renovation/ui/grids/data_grid/common/data_grid_props.tsx

@@ -7,18 +7,18 @@ import {
   Nested,
   Template,
 } from 'devextreme-generator/component_declaration/common';
-import DxDataGrid from '../../../../ui/data_grid';
-import type { Options, dxDataGridColumn, dxDataGridRowObject } from '../../../../ui/data_grid';
-import { BaseWidgetProps } from '../../../utils/base_props';
-
-import type { dxFilterBuilderOptions } from '../../../../ui/filter_builder';
-import type { dxElement } from '../../../../core/element';
-import type { template } from '../../../../core/templates/template';
-import type { event } from '../../../../events/index';
-import DataSource from '../../../../data/data_source';
-import type { DataSourceOptions } from '../../../../data/data_source';
-import type { dxPopupOptions } from '../../../../ui/popup';
-import type { dxToolbarOptions } from '../../../../ui/toolbar';
+import DxDataGrid from '../../../../../ui/data_grid';
+import type { Options, dxDataGridColumn, dxDataGridRowObject } from '../../../../../ui/data_grid';
+import { BaseWidgetProps } from '../../../../utils/base_props';
+
+import type { dxFilterBuilderOptions } from '../../../../../ui/filter_builder';
+import type { dxElement } from '../../../../../core/element';
+import type { template } from '../../../../../core/templates/template';
+import type { event } from '../../../../../events/index';
+import DataSource from '../../../../../data/data_source';
+import type { DataSourceOptions } from '../../../../../data/data_source';
+import type { dxPopupOptions } from '../../../../../ui/popup';
+import type { dxToolbarOptions } from '../../../../../ui/toolbar';
 import type {
   RequiredRule,
   NumericRule,
@@ -30,14 +30,14 @@ import type {
   EmailRule,
   AsyncRule,
 // eslint-disable-next-line import/extensions
-} from '../../../../ui/validation_rules';
-import type { format } from '../../../../ui/widget/ui.widget';
-import type dxSortable from '../../../../ui/sortable';
-import type dxDraggable from '../../../../ui/draggable';
-import type { dxFormSimpleItem, dxFormOptions } from '../../../../ui/form';
-import type Store from '../../../../data/abstract_store';
-import type { ExcelDataGridCell } from '../../../../excel_exporter';
-import type { ExcelFont } from '../../../../exporter/excel/excel.doc_comments';
+} from '../../../../../ui/validation_rules';
+import type { format } from '../../../../../ui/widget/ui.widget';
+import type dxSortable from '../../../../../ui/sortable';
+import type dxDraggable from '../../../../../ui/draggable';
+import type { dxFormSimpleItem, dxFormOptions } from '../../../../../ui/form';
+import type Store from '../../../../../data/abstract_store';
+import type { ExcelDataGridCell } from '../../../../../excel_exporter';
+import type { ExcelFont } from '../../../../../exporter/excel/excel.doc_comments';
 
 @ComponentBindings()
 export class DataGridColumnButton {

js/renovation/ui/grids/data_grid/common/types.ts

@@ -0,0 +1,6 @@
+import dxDataGrid from '../../../../../ui/data_grid';
+
+export interface GridInstance extends dxDataGrid {
+  getView: (name: string) => any;
+  getController: (name: string) => any;
+}

js/renovation/ui/data_grid/data_grid.tsx → js/renovation/ui/grids/data_grid/data_grid.tsx

@@ -6,15 +6,15 @@ import {
   DataGridProps,
 } from './common/data_grid_props';
 
-import '../../../ui/data_grid/ui.data_grid';
+import '../../../../ui/data_grid/ui.data_grid';
 
-import { Widget } from '../common/widget';
+import { Widget } from '../../common/widget';
 import { DataGridComponent } from './datagrid_component';
 import { DataGridViews } from './data_grid_views';
 import { GridInstance } from './common/types';
 import { getUpdatedOptions } from './utils/get_updated_options';
-import DataGridBaseComponent from '../../component_wrapper/data_grid';
-import { DisposeEffectReturn } from '../../utils/effect_return';
+import DataGridBaseComponent from '../../../component_wrapper/data_grid';
+import { DisposeEffectReturn } from '../../../utils/effect_return';
 
 const aria = { role: 'presentation' };
 

js/renovation/ui/data_grid/data_grid_views.tsx → js/renovation/ui/grids/data_grid/data_grid_views.tsx

@@ -1,30 +1,27 @@
 import {
   JSXComponent, Component,
 } from 'devextreme-generator/component_declaration/common';
-import { DataGridView } from './common/types';
+import { GridBaseViews } from '../grid_base/grid_base_views';
+import { GridBaseView } from '../grid_base/common/types';
 import { DataGridViewProps } from './common/data_grid_view_props';
-import { DataGridViewWrapper } from './data_grid_view_wrapper';
-import { gridViewModule } from '../../../ui/grid_core/ui.grid_core.grid_view';
+import { gridViewModule } from '../../../../ui/grid_core/ui.grid_core.grid_view';
 
 const { VIEW_NAMES } = gridViewModule;
 
-const GRIDBASE_CONTAINER_CLASS = 'dx-gridbase-container';
+const DATA_GRID_CLASS = 'dx-datagrid';
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export const viewFunction = ({
   views,
 }: DataGridViews) => (
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  <div className={`dx-datagrid ${GRIDBASE_CONTAINER_CLASS}`}>
-    {(views.map(({ name, view }) => (<DataGridViewWrapper key={name} view={view} />)))}
-  </div>
+  <GridBaseViews views={views} className={DATA_GRID_CLASS} />
 );
 
 @Component({ defaultOptionRules: null, view: viewFunction })
 export class DataGridViews extends JSXComponent<DataGridViewProps, 'instance'>() {
-  get views(): { name: string; view: DataGridView }[] {
+  get views(): { name: string; view: GridBaseView }[] {
     const views = VIEW_NAMES.map(
-      (viewName) => this.props.instance?.getView(viewName) as DataGridView,
+      (viewName) => this.props.instance?.getView(viewName) as GridBaseView,
     ).filter((view) => view);
 
     return views.map((view) => ({

js/renovation/ui/data_grid/datagrid_component.ts → js/renovation/ui/grids/data_grid/datagrid_component.ts

@@ -1,7 +1,7 @@
 /* eslint-disable class-methods-use-this */
 /* eslint-disable no-underscore-dangle */
-import DataGridBase from '../../../ui/data_grid/ui.data_grid.base';
-import $ from '../../../core/renderer';
+import DataGridBase from '../../../../ui/data_grid/ui.data_grid.base';
+import $ from '../../../../core/renderer';
 
 const DATA_GRID_NAME = 'dxDataGrid';
 

js/renovation/ui/data_grid/utils/get_updated_options.ts → js/renovation/ui/grids/data_grid/utils/get_updated_options.ts

@@ -1,4 +1,4 @@
-import { type } from '../../../../core/utils/type';
+import { type } from '../../../../../core/utils/type';
 
 interface ResultItem {
   path: string;

js/renovation/ui/data_grid/__tests__/data_grid_view_wrapper.test.tsx → js/renovation/ui/grids/grid_base/__tests__/grid_base_view_wrapper.test.tsx

@@ -1,7 +1,7 @@
 import { createRef } from 'react';
 import { mount } from 'enzyme';
-import { DataGridViewWrapper, viewFunction } from '../data_grid_view_wrapper';
-import $ from '../../../../core/renderer';
+import { GridBaseViewWrapper, viewFunction } from '../grid_base_view_wrapper';
+import $ from '../../../../../core/renderer';
 
 describe('DataGridViews', () => {
   describe('View', () => {
@@ -25,7 +25,7 @@ describe('DataGridViews', () => {
       const props = {
         view,
       } as any;
-      const component = new DataGridViewWrapper(props);
+      const component = new GridBaseViewWrapper(props);
       component.widgetRef = widgetRef;
 
       component.renderView();

js/renovation/ui/grids/grid_base/__tests__/grid_base_views.test.tsx

@@ -0,0 +1,33 @@
+import { mount } from 'enzyme';
+import { GridBaseViews, viewFunction } from '../grid_base_views';
+import { GridBaseViewWrapper } from '../grid_base_view_wrapper';
+
+jest.mock('../grid_base_view_wrapper', () => ({ GridBaseViewWrapper: () => null }));
+
+const GRIDBASE_CONTAINER_CLASS = 'dx-gridbase-container';
+
+describe('GridBaseViews', () => {
+  describe('View', () => {
+    it('default render', () => {
+      const options = {
+        props: {
+          views: [
+            { name: 'view1', view: 'viewComponent1' },
+            { name: 'view2', view: 'viewComponent2' },
+          ],
+          className: 'myClass',
+        },
+      } as unknown as GridBaseViews;
+      const tree = mount(viewFunction(options));
+
+      expect(tree.hasClass('myClass')).toBe(true);
+      expect(tree.hasClass(GRIDBASE_CONTAINER_CLASS)).toBe(true);
+      expect(tree.children().length).toBe(2);
+      expect(tree.find(GridBaseViewWrapper).length).toBe(2);
+      expect(tree.find(GridBaseViewWrapper).get(0).key).toBe('view1');
+      expect(tree.find(GridBaseViewWrapper).get(0).props.view).toBe('viewComponent1');
+      expect(tree.find(GridBaseViewWrapper).get(1).key).toBe('view2');
+      expect(tree.find(GridBaseViewWrapper).get(1).props.view).toBe('viewComponent2');
+    });
+  });
+});

js/renovation/ui/grids/grid_base/common/grid_base_view_props.ts

@@ -0,0 +1,9 @@
+import { ComponentBindings, OneWay } from 'devextreme-generator/component_declaration/common';
+import { GridBaseView } from './types';
+
+@ComponentBindings()
+export class GridBaseViewProps {
+  @OneWay() views!: { name: string; view: GridBaseView }[];
+
+  @OneWay() className!: string;
+}

js/renovation/ui/grids/grid_base/common/types.ts

@@ -0,0 +1,13 @@
+// eslint-disable-next-line import/named
+import { GridBase } from '../../../../../ui/data_grid';
+
+export interface GridBaseInstance extends GridBase {
+  getView: (name: string) => any;
+  getController: (name: string) => any;
+}
+
+export interface GridBaseView {
+  name: string;
+  _$element: any;
+  render: () => any;
+}

js/renovation/ui/data_grid/data_grid_view_wrapper.tsx → js/renovation/ui/grids/grid_base/grid_base_view_wrapper.tsx

@@ -1,20 +1,20 @@
 import {
   JSXComponent, Component, Ref, OneWay, ComponentBindings, Effect, RefObject,
 } from 'devextreme-generator/component_declaration/common';
-import $ from '../../../core/renderer';
-import type { DataGridView } from './common/types';
+import $ from '../../../../core/renderer';
+import type { GridBaseView } from './common/types';
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export const viewFunction = ({ widgetRef }: DataGridViewWrapper) => (
+export const viewFunction = ({ widgetRef }: GridBaseViewWrapper) => (
   <div ref={widgetRef} />
 );
 @ComponentBindings()
-export class DataGridViewWrapperProps {
-  @OneWay() view!: DataGridView;
+export class GridBaseViewWrapperProps {
+  @OneWay() view!: GridBaseView;
 }
 
 @Component({ defaultOptionRules: null, view: viewFunction })
-export class DataGridViewWrapper extends JSXComponent<DataGridViewWrapperProps, 'view'>() {
+export class GridBaseViewWrapper extends JSXComponent<GridBaseViewWrapperProps, 'view'>() {
   @Ref()
   widgetRef!: RefObject<HTMLDivElement>;
 

js/renovation/ui/grids/grid_base/grid_base_views.tsx

@@ -0,0 +1,24 @@
+import {
+  JSXComponent, Component,
+} from 'devextreme-generator/component_declaration/common';
+import { GridBaseViewProps } from './common/grid_base_view_props';
+import { GridBaseViewWrapper } from './grid_base_view_wrapper';
+
+const GRIDBASE_CONTAINER_CLASS = 'dx-gridbase-container';
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export const viewFunction = ({
+  props: {
+    views,
+    className,
+  },
+}: GridBaseViews) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  <div className={`${className} ${GRIDBASE_CONTAINER_CLASS}`}>
+    {(views.map(({ name, view }) => (<GridBaseViewWrapper key={name} view={view} />)))}
+  </div>
+);
+
+@Component({ defaultOptionRules: null, view: viewFunction })
+export class GridBaseViews extends JSXComponent<GridBaseViewProps, 'views'>() {
+}