refactor(react-grid): remove totalCount property from PagingState to CustomPaging (#555)

BREAKING CHANGES:

We have moved the PagingState plugin's `totalCount` property to the CustomPaging plugin to improve API consistency. Now, you can add the CustomPaging plugin to a project and specify its `totalCount` property to implement remote paging.

Before:

```js
<Grid>
  <...>
  <PagingState totalCount={10} />
</Grid>
```

After:

```js
<Grid>
  <...>
  <PagingState />
  <CustomPaging totalCount={10} />
</Grid>
```

Author: MaximKudriavtsev

packages/dx-react-demos/src/bootstrap3/featured-remote-data/demo.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {
   PagingState,
   SortingState,
+  CustomPaging,
 } from '@devexpress/dx-react-grid';
 import {
   Grid,
@@ -151,6 +152,8 @@ export default class Demo extends React.PureComponent {
             onCurrentPageChange={this.changeCurrentPage}
             pageSize={pageSize}
             onPageSizeChange={this.changePageSize}
+          />
+          <CustomPaging
             totalCount={totalCount}
           />
           <Table

packages/dx-react-demos/src/bootstrap3/paging/remote-paging.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   PagingState,
+  CustomPaging,
 } from '@devexpress/dx-react-grid';
 import {
   Grid,
@@ -84,6 +85,8 @@ export default class Demo extends React.PureComponent {
             currentPage={currentPage}
             onCurrentPageChange={this.changeCurrentPage}
             pageSize={pageSize}
+          />
+          <CustomPaging
             totalCount={totalCount}
           />
           <Table />

packages/dx-react-demos/src/material-ui/featured-remote-data/demo.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {
   PagingState,
   SortingState,
+  CustomPaging,
 } from '@devexpress/dx-react-grid';
 import {
   Grid,
@@ -161,6 +162,8 @@ export default class Demo extends React.PureComponent {
             onCurrentPageChange={this.changeCurrentPage}
             pageSize={pageSize}
             onPageSizeChange={this.changePageSize}
+          />
+          <CustomPaging
             totalCount={totalCount}
           />
           <Table

packages/dx-react-demos/src/material-ui/paging/remote-paging.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   PagingState,
+  CustomPaging,
 } from '@devexpress/dx-react-grid';
 import {
   Grid,
@@ -84,6 +85,8 @@ export default class Demo extends React.PureComponent {
             currentPage={currentPage}
             onCurrentPageChange={this.changeCurrentPage}
             pageSize={pageSize}
+          />
+          <CustomPaging
             totalCount={totalCount}
           />
           <Table />

packages/dx-react-grid/docs/guides/paging.md

@@ -7,34 +7,35 @@ The Grid component supports data paging. You can specify the page size and switc
 The following plugins implement filtering features:
 
 - [PagingState](../reference/paging-state.md) - controls the paging state
+- [CustomPaging](../reference/custom-paging.md) - allows implementing a custom totalCount calculation logic
 - [IntegratedPaging](../reference/integrated-paging.md) - performs built-in data paging
 - [PagingPanel](../reference/paging-panel.md) - renders the Paging Panel
 
 Note that the [plugin order](./plugin-overview.md#plugin-order) is important.
 
 ## Basic Paging Setup
 
-Import the plugins listed above to set up a Grid with basic paging.
+Use the `PagingState`, `LocalPaging` (or `CustomPaging`), and `PagingPanel` plugins to set up a Grid with paging.
 
 ## Uncontrolled Mode
 
-In the [uncontrolled mode](controlled-and-uncontrolled-modes.md), specify the initial active page index in the `PagingState` plugin's `defaultCurrentPage` property.
+In [uncontrolled mode](controlled-and-uncontrolled-modes.md), specify the initial active page index in the `PagingState` plugin's `defaultCurrentPage` property.
 
-In the following example, the page size is specified using the `PagingState` plugin's `pageSize` property, which is usual for the controlled mode. However, the `onPageSizeChange` event handler is not specified because page size is not supposed to be changed internally as the Page Size Selector is not available.
+In the following example, the page size is specified using the `PagingState` plugin's `pageSize` property, which is usual for the controlled mode. However, the `onPageSizeChange` event handler is not specified because the page size is not supposed to be changed internally as the Page Size Selector is not available.
 
 .embedded-demo(paging/uncontrolled-mode)
 
 ## Page Size Selection
 
 Assign an array of available page sizes to the `PagingPanel` plugin's `pageSizes` property to enable page size selection via the UI. The Page Size Selector displays the 'All' item if the specified array contains an item whose value is 0. You can specify custom text for this Page Size Selector item using the `messages.showAll` property.
 
-The example below demonstrates the basic configuration for the uncontrolled mode. The `PagingState` plugin's `defaultPageSize` property defines the initial page size.
+The example below demonstrates a basic configuration for the uncontrolled mode. The `PagingState` plugin's `defaultPageSize` property defines the initial page size.
 
 .embedded-demo(paging/page-size-selector)
 
 ## Controlled Mode
 
-In the [controlled mode](controlled-and-uncontrolled-modes.md), specify the following `PagingState` plugin property pairs to set a state value and handle its changes:
+In [controlled mode](controlled-and-uncontrolled-modes.md), specify the following `PagingState` plugin property pairs to set a state value and handle its changes:
 
 - `currentPage` and `onCurrentPageChange` - the currently displayed page's index
 - `pageSize` and `onPageSizeChange` - the page size
@@ -45,14 +46,14 @@ Note that the `onPageSizeChange` handler makes sense only if the `pageSizes` opt
 
 ## Remote Paging
 
-You can handle the Grid's paging state changes to request a page data from the server according to the current page index and page size if your data service supports paging.
+You can handle the Grid's paging state changes to request page data from the server according to the current page index and the page size if your data service supports paging.
 
-Paging options are updated once an end-user interacts with Paging Panel controls. Handle paging option changes using the `PagingState` plugin's `onCurrentPageChange` and `onPageSizeChange` events and request data from the server using the applied paging options. Once the page data is received from the server, pass it to the `Grid` component's `rows` property.
+Paging options are updated once an end-user interacts with Paging Panel controls. Handle paging option changes using the `PagingState` plugin's `onCurrentPageChange` and `onPageSizeChange` events, and request data from the server using the applied paging options. Once the page data is received from the server, pass it to the `Grid` component's `rows` property.
 
-Note that in the case of remote paging, you do not need to use the `IntegratedPaging` plugin.
+For remote paging, use the `CustomPaging` plugin instead of the `IntegratedPaging` plugin.
 
 .embedded-demo(paging/remote-paging)
 
 ## Using Paging with Other Data Processing Plugins
 
-When you use paging features with sorting, grouping, or filtering, take a note of the order in which the plugins appear in the Grid's container. You need to choose whether to paginate filtered rows or filter the current page. In the first case, put the `IntegratedFiltering` plugin before the `IntegratedPaging` one. Otherwise, inverse the plugins' order.
+When you use paging features with sorting, grouping, or filtering, take note of the order in which the plugins appear in the Grid's container. You need to choose whether to paginate filtered rows or filter the current page. In the former case, put the `IntegratedFiltering` plugin before the `IntegratedPaging` one. Otherwise, inverse the plugins' order.

packages/dx-react-grid/docs/reference/custom-paging.md

@@ -0,0 +1,27 @@
+# CustomPaging Plugin Reference
+
+A plugin that allows implementing a custom totalCount calculation logic.
+
+## User Reference
+
+### Dependencies
+
+- [PagingState](paging-state.md)
+
+### Properties
+
+Name | Type | Default | Description
+-----|------|---------|------------
+totalCount | number | 0 | The total row count.
+
+## Plugin Developer Reference
+
+### Imports
+
+none
+
+### Exports
+
+Name | Plugin | Type | Description
+-----|--------|------|------------
+totalCount | Getter | number | The total row count.

packages/dx-react-grid/docs/reference/paging-state.md

@@ -13,12 +13,11 @@ none
 Name | Type | Default | Description
 -----|------|---------|------------
 currentPage | number | | Specifies the current page number.
-defaultCurrentPage | number | 0 | Specifies the initial page in the uncontrolled mode.
+defaultCurrentPage | number | 0 | Specifies the initial page in uncontrolled mode.
 onCurrentPageChange | (currentPage: number) => void | | Handles current page changes.
 pageSize | number | | Specifies the page size. Set this property to `0` to show all rows on a page.
-defaultPageSize | number | 10 | Specifies the initial page size in the uncontrolled mode.
+defaultPageSize | number | 10 | Specifies the initial page size in uncontrolled mode.
 onPageSizeChange | (pageSize: number) => void | | Handles page size changes.
-totalCount | number | 0 | Specifies the total row count.
 
 ## Plugin Developer Reference
 
@@ -34,4 +33,3 @@ pageSize | Getter | number | The page size.
 setPageSize | Action | (size: number) => void | Changes the page size.
 currentPage | Getter | number | The current page number.
 setCurrentPage | Action | (page: number) => void | Changes the current page number.
-totalCount | Getter | number | The total row count.

packages/dx-react-grid/src/index.js

@@ -8,6 +8,7 @@ export { EditingState } from './plugins/editing-state';
 
 export { PagingState } from './plugins/paging-state';
 export { IntegratedPaging } from './plugins/integrated-paging';
+export { CustomPaging } from './plugins/custom-paging';
 
 export { GroupingState } from './plugins/grouping-state';
 export { IntegratedGrouping } from './plugins/integrated-grouping';

packages/dx-react-grid/src/plugins/custom-paging.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Getter, PluginContainer } from '@devexpress/dx-react-core';
+
+const pluginDependencies = [
+  { pluginName: 'PagingState' },
+];
+
+export class CustomPaging extends React.PureComponent {
+  render() {
+    const { totalCount } = this.props;
+
+    return (
+      <PluginContainer
+        pluginName="CustomPaging"
+        dependencies={pluginDependencies}
+      >
+        <Getter name="totalCount" value={totalCount} />
+      </PluginContainer>
+    );
+  }
+}
+
+CustomPaging.propTypes = {
+  totalCount: PropTypes.number,
+};
+
+CustomPaging.defaultProps = {
+  totalCount: 0,
+};

packages/dx-react-grid/src/plugins/custom-paging.test.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { PluginHost } from '@devexpress/dx-react-core';
+import { CustomPaging } from './custom-paging';
+import { pluginDepsToComponents, getComputedState } from './test-utils';
+
+const defaultDeps = {
+  plugins: ['PagingState'],
+};
+
+describe('CustomPaging', () => {
+  it('should provide value from the "totalCount" property', () => {
+    const tree = mount((
+      <PluginHost>
+        {pluginDepsToComponents(defaultDeps)}
+        <CustomPaging
+          totalCount={100}
+        />
+      </PluginHost>
+    ));
+
+    expect(getComputedState(tree).totalCount)
+      .toBe(100);
+  });
+
+  it('should provide \'0\' if a value for the "totalCount" property undefined', () => {
+    const tree = mount((
+      <PluginHost>
+        {pluginDepsToComponents(defaultDeps)}
+        <CustomPaging />
+      </PluginHost>
+    ));
+
+    expect(getComputedState(tree).totalCount)
+      .toBe(0);
+  });
+});