CardView: Implement Pager

packages/devextreme/js/__internal/grids/new/card_view/__snapshots__/widget.test.ts.snap

@@ -5,6 +5,8 @@ exports[`common initial render should be successfull 1`] = `
   class="dx-widget dx-cardview"
 >
   
-  This is cardView
+  <div>
+    
+  </div>
 </div>
 `;

packages/devextreme/js/__internal/grids/new/card_view/main_view.tsx

@@ -2,31 +2,46 @@
 /* eslint-disable @typescript-eslint/explicit-member-accessibility */
 import { combined } from '@ts/core/reactive/index';
 import { View } from '@ts/grids/new/grid_core/core/view';
+import { PagerView } from '@ts/grids/new/grid_core/pager/view';
 import { ToolbarView } from '@ts/grids/new/grid_core/toolbar/view';
 import type { ComponentType } from 'inferno';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface MainViewProps {
   Toolbar: ComponentType;
+  Pager: ComponentType;
 }
 
-// eslint-disable-next-line no-empty-pattern
 function MainViewComponent({
-  Toolbar,
+  Toolbar, Pager,
 }: MainViewProps): JSX.Element {
   return (<>
     {/* @ts-expect-error */}
     <Toolbar/>
-    This is cardView
+    <div>
+      {/*
+        TODO:
+        Pager, as renovated component, has strange disposing.
+        See `inferno_renderer.remove` method.
+        It somehow mutates $V prop of parent element.
+        Without this div, CardView would be parent of Pager.
+        In this case all `componentWillUnmount`s aren't called
+      */}
+      {/* @ts-expect-error */}
+      <Pager/>
+    </div>
   </>);
 }
 
 export class MainView extends View<MainViewProps> {
   protected override component = MainViewComponent;
 
-  public static dependencies = [ToolbarView] as const;
+  public static dependencies = [
+    PagerView, ToolbarView,
+  ] as const;
 
   constructor(
+    private readonly pager: PagerView,
     private readonly toolbar: ToolbarView,
   ) {
     super();
@@ -37,6 +52,7 @@ export class MainView extends View<MainViewProps> {
   protected override getProps() {
     return combined({
       Toolbar: this.toolbar.asInferno(),
+      Pager: this.pager.asInferno(),
     });
   }
 }

packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/pager.ts

@@ -0,0 +1,10 @@
+import type { Properties as PaginationProperties } from '@js/ui/pagination';
+import dxPagination from '@js/ui/pagination';
+
+import { InfernoWrapper } from './widget_wrapper';
+
+export class Pager extends InfernoWrapper<PaginationProperties, dxPagination> {
+  protected getComponentFabric(): typeof dxPagination {
+    return dxPagination;
+  }
+}

packages/devextreme/js/__internal/grids/new/grid_core/options.ts

@@ -4,7 +4,8 @@ import type { WidgetOptions } from '@js/ui/widget/ui.widget';
 
 import * as columnsController from './columns_controller/index';
 import * as dataController from './data_controller/index';
-import type * as toolbar from './toolbar';
+import * as pager from './pager/index';
+import type * as toolbar from './toolbar/index';
 import type { GridCoreNew } from './widget';
 
 /**
@@ -13,12 +14,14 @@ import type { GridCoreNew } from './widget';
 export type Options =
   & WidgetOptions<GridCoreNew>
   & dataController.Options
+  & pager.Options
   & columnsController.Options
   & toolbar.Options;
 
 export const defaultOptions = {
   ...dataController.defaultOptions,
   ...columnsController.defaultOptions,
+  ...pager.defaultOptions,
 } satisfies Options;
 
 // TODO: separate by modules