CardView: Implement PagerView

Author: Alyar

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

@@ -156,25 +156,21 @@ exports[`common initial render should be successfull 1`] = `
     class="dx-cardview-headers"
   >
     <div
-      class="dx-sortable"
+      class="dx-cardview-header-item"
     >
+      A
       <div
-        class="dx-cardview-header-item"
+        aria-label="Close"
+        class="dx-widget dx-button dx-button-mode-text dx-button-normal dx-button-has-icon dx-cardview-header-item-button"
+        role="button"
+        tabindex="0"
       >
-        A
         <div
-          aria-label="Close"
-          class="dx-widget dx-button dx-button-mode-text dx-button-normal dx-button-has-icon dx-cardview-header-item-button"
-          role="button"
-          tabindex="0"
+          class="dx-button-content"
         >
-          <div
-            class="dx-button-content"
-          >
-            <i
-              class="dx-icon dx-icon-close"
-            />
-          </div>
+          <i
+            class="dx-icon dx-icon-close"
+          />
         </div>
       </div>
     </div>
@@ -292,50 +288,7 @@ exports[`common initial render should be successfull 1`] = `
     />
   </div>
   
-  <div
-    aria-label="Page navigation"
-    class="dx-widget dx-pagination"
-    role="navigation"
-  >
-    <div
-      class="dx-page-sizes"
-    >
-      <div
-        aria-label="Items per page: 5"
-        class="dx-page-size dx-first-child"
-        role="button"
-        tabindex="0"
-      >
-        5
-      </div>
-      <div
-        aria-label="Items per page: 10"
-        class="dx-page-size"
-        role="button"
-        tabindex="0"
-      >
-        10
-      </div>
-    </div>
-    <div
-      class="dx-pages"
-      style="visibility: hidden;"
-    >
-      <div
-        class="dx-page-indexes"
-      >
-        <div
-          aria-current="page"
-          aria-label="Page 1"
-          class="dx-page dx-selection"
-          role="button"
-          tabindex="0"
-        >
-          1
-        </div>
-      </div>
-    </div>
-  </div>
+  
   
 </div>
 `;

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

@@ -4,7 +4,7 @@ import { combined } from '@ts/core/reactive/index';
 import { ColumnsChooserView } from '@ts/grids/new/grid_core/columns_chooser/view';
 import { View } from '@ts/grids/new/grid_core/core/view';
 import { FilterPanelView } from '@ts/grids/new/grid_core/filtering/filter_panel/filter_panel';
-import { PagerView } from '@ts/grids/new/grid_core/pager';
+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';
 

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

@@ -4,7 +4,7 @@ import type { Subscribable } from '@ts/core/reactive/index';
 import { ColumnsChooserView } from '@ts/grids/new/grid_core/columns_chooser/view';
 import { View } from '@ts/grids/new/grid_core/core/view_old';
 import { FilterPanelView } from '@ts/grids/new/grid_core/filtering/filter_panel/filter_panel';
-import { PagerView } from '@ts/grids/new/grid_core/pager';
+import { PagerView } from '@ts/grids/new/grid_core/pager/view';
 import { ToolbarView } from '@ts/grids/new/grid_core/toolbar/view';
 import type { InfernoNode } from 'inferno';
 

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

@@ -5,6 +5,7 @@ import type { WidgetOptions } from '@js/ui/widget/ui.widget';
 import * as columnsController from './columns_controller';
 import * as dataController from './data_controller';
 import { filterPanel } from './filtering';
+import * as pager from './pager';
 import type { SearchProperties } from './search/types';
 import * as toolbar from './toolbar';
 import type { GridCoreNew } from './widget';
@@ -16,6 +17,7 @@ export type Options =
   & WidgetOptions<GridCoreNew>
   & dataController.Options
   & toolbar.Options
+  & pager.Options
   & columnsController.Options
   & filterPanel.Options
   & SearchProperties
@@ -27,6 +29,7 @@ export const defaultOptions = {
   ...dataController.defaultOptions,
   ...columnsController.defaultOptions,
   ...toolbar.defaultOptions,
+  ...pager.defaultOptions,
   ...filterPanel.defaultOptions,
   searchText: '',
 } satisfies Options;

packages/devextreme/js/__internal/grids/new/grid_core/options_controller/options_controller.mock.ts

@@ -1,6 +1,11 @@
-import type { defaultOptions, Options } from '../options';
+import type { Options } from '../options';
+import { defaultOptions } from '../options';
 import { OptionsControllerMock as OptionsControllerBaseMock } from './options_controller_base.mock';
 
 export class OptionsControllerMock extends OptionsControllerBaseMock<
 Options, typeof defaultOptions
-> {}
+> {
+  constructor(options: Options) {
+    super(options, defaultOptions);
+  }
+}

packages/devextreme/js/__internal/grids/new/grid_core/options_controller/options_controller_base.mock.ts

@@ -13,9 +13,10 @@ export class OptionsControllerMock<
   TDefaultProps extends TProps,
 > extends OptionsController<TProps, TDefaultProps> {
   private readonly componentMock: Component<TProps>;
-  constructor(options: TProps) {
+  constructor(options: TProps, defaultOptions: TDefaultProps) {
     const componentMock = new Component(options);
     super(componentMock);
+    this.defaults = defaultOptions;
     this.componentMock = componentMock;
   }
 

packages/devextreme/js/__internal/grids/new/grid_core/options_controller/options_controller_base.ts

@@ -74,7 +74,7 @@ export class OptionsController<TProps, TDefaultProps extends TProps = TProps> {
 
   private readonly props: SubsGetsUpd<TProps>;
 
-  private readonly defaults: TDefaultProps;
+  protected defaults: TDefaultProps;
 
   public static dependencies = [Component];