feat(react-grid): add components for the PagingPanel plugin (#542)

DevExpress · Dec 8, 2017 · 3d226bb · 3d226bb
1 parent 2d12091
commit 3d226bb
Show file tree

Hide file tree

Showing 7 changed files with 181 additions and 121 deletions.
diff --git a/packages/dx-react-grid-bootstrap3/src/plugins/paging-panel.jsx b/packages/dx-react-grid-bootstrap3/src/plugins/paging-panel.jsx
@@ -23,6 +23,8 @@ export class PagingPanel extends React.PureComponent {
   }
 }
 
+PagingPanel.Container = Pager;
+
 PagingPanel.propTypes = {
   messages: PropTypes.shape({
     showAll: PropTypes.string,

diff --git a/packages/dx-react-grid-bootstrap3/src/templates/pager.jsx b/packages/dx-react-grid-bootstrap3/src/templates/pager.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { Pagination, Pager as BootstrapPager } from 'react-bootstrap';
 import { firstRowOnPage, lastRowOnPage } from '@devexpress/dx-grid-core';
 import { PageSizeSelector } from './page-size-selector';
@@ -13,12 +14,17 @@ export const Pager = ({
   allowedPageSizes,
   totalCount,
   getMessage,
+  className,
+  ...restProps
 }) => {
   const from = firstRowOnPage(currentPage, pageSize, totalCount);
   const to = lastRowOnPage(currentPage, pageSize, totalCount);
 
   return (
-    <div className="clearfix">
+    <div
+      className={classNames('clearfix', className)}
+      {...restProps}
+    >
       {!!allowedPageSizes.length && <PageSizeSelector
         pageSize={pageSize}
         onPageSizeChange={onPageSizeChange}
@@ -73,4 +79,9 @@ Pager.propTypes = {
   allowedPageSizes: PropTypes.arrayOf(PropTypes.number).isRequired,
   totalCount: PropTypes.number.isRequired,
   getMessage: PropTypes.func.isRequired,
+  className: PropTypes.string,
+};
+
+Pager.defaultProps = {
+  className: undefined,
 };
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/pager.test.jsx b/packages/dx-react-grid-bootstrap3/src/templates/pager.test.jsx
@@ -1,40 +1,28 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import { Pager } from './pager';
 
+const defaultProps = {
+  totalPages: 10,
+  currentPage: 1,
+  totalCount: 96,
+  pageSize: 10,
+  getMessage: key => key,
+  allowedPageSizes: [],
+  onCurrentPageChange: () => {},
+  onPageSizeChange: () => {},
+};
+
 describe('Pager', () => {
   describe('#render', () => {
-    const mountPager = ({
-      currentPage,
-      totalPages,
-      pageSize,
-      totalCount,
-      getMessage = key => key,
-      allowedPageSizes = [],
-      onPageSizeChange = () => {},
-      onCurrentPageChange = () => {},
-    }) => mount(<Pager
-      totalPages={totalPages}
-      currentPage={currentPage}
-      totalCount={totalCount}
-      pageSize={pageSize}
-      getMessage={getMessage}
-      allowedPageSizes={allowedPageSizes}
-      onCurrentPageChange={onCurrentPageChange}
-      onPageSizeChange={onPageSizeChange}
-    />);
-
     it('can show info about rendered pages', () => {
-      const getMessage = jest.fn();
-      getMessage.mockImplementation(key => key);
-
-      const tree = mountPager({
-        totalPages: 10,
-        currentPage: 1,
-        totalCount: 96,
-        pageSize: 10,
-        getMessage,
-      });
+      const getMessage = jest.fn(key => key);
+      const tree = shallow((
+        <Pager
+          {...defaultProps}
+          getMessage={getMessage}
+        />
+      ));
 
       expect(getMessage)
         .toBeCalledWith('info', { from: 11, to: 20, count: 96 });
@@ -44,13 +32,12 @@ describe('Pager', () => {
 
     it('can render pagination arrows', () => {
       const onCurrentPageChange = jest.fn();
-      const arrows = mountPager({
-        totalPages: 10,
-        currentPage: 2,
-        totalCount: 96,
-        pageSize: 10,
-        onCurrentPageChange,
-      }).find('.pager li');
+      const arrows = mount((
+        <Pager
+          {...defaultProps}
+          onCurrentPageChange={onCurrentPageChange}
+        />
+      )).find('.pager li');
 
       const prew = arrows.at(0);
       const next = arrows.at(1);
@@ -66,13 +53,13 @@ describe('Pager', () => {
 
     it('disables the prev arrow if current page is 1', () => {
       const onCurrentPageChange = jest.fn();
-      const arrows = mountPager({
-        totalPages: 10,
-        currentPage: 0,
-        totalCount: 96,
-        pageSize: 10,
-        onCurrentPageChange,
-      }).find('.pager li');
+      const arrows = mount((
+        <Pager
+          {...defaultProps}
+          currentPage={0}
+          onCurrentPageChange={onCurrentPageChange}
+        />
+      )).find('.pager li');
 
       const prew = arrows.at(0);
       const next = arrows.at(1);
@@ -87,13 +74,14 @@ describe('Pager', () => {
 
     it('disables the next arrow if current page equals to total page count', () => {
       const onCurrentPageChange = jest.fn();
-      const arrows = mountPager({
-        totalPages: 10,
-        currentPage: 9,
-        totalCount: 96,
-        pageSize: 5,
-        onCurrentPageChange,
-      }).find('.pager li');
+      const arrows = mount((
+        <Pager
+          {...defaultProps}
+          currentPage={9}
+          pageSize={5}
+          onCurrentPageChange={onCurrentPageChange}
+        />
+      )).find('.pager li');
 
       const prew = arrows.at(0);
       const next = arrows.at(1);
@@ -107,27 +95,51 @@ describe('Pager', () => {
     });
 
     it('renders page size selector', () => {
-      const pageSizeSelector = mountPager({
-        totalPages: 10,
-        currentPage: 9,
-        totalCount: 96,
-        pageSize: 5,
-        allowedPageSizes: [5, 10],
-      }).find('PageSizeSelector');
-
-      expect(pageSizeSelector).toHaveLength(1);
-      expect(pageSizeSelector.at(0).prop('getMessage')('showAll')).toBe('showAll');
+      const pageSizeSelector = shallow((
+        <Pager
+          {...defaultProps}
+          allowedPageSizes={[5, 10]}
+        />
+      )).find('PageSizeSelector');
+
+      expect(pageSizeSelector)
+        .toHaveLength(1);
+      expect(pageSizeSelector.at(0).prop('getMessage')('showAll'))
+        .toBe('showAll');
     });
 
     it('doesn\'t render page selector if the allowedPageSizes option is not defined ', () => {
-      const pageSizeSelector = mountPager({
-        totalPages: 10,
-        currentPage: 9,
-        totalCount: 96,
-        pageSize: 5,
-      }).find('PageSizeSelector');
+      const pageSizeSelector = shallow((
+        <Pager
+          {...defaultProps}
+        />
+      )).find('PageSizeSelector');
 
       expect(pageSizeSelector).toHaveLength(0);
     });
+
+    it('should pass rest props to the root element', () => {
+      const tree = shallow((
+        <Pager
+          {...defaultProps}
+          onClick="onClick"
+        />
+      ));
+
+      expect(tree.prop('onClick'))
+        .toBe('onClick');
+    });
+
+    it('should add the passed className to the root element', () => {
+      const tree = shallow((
+        <Pager
+          {...defaultProps}
+          className="custom-class"
+        />
+      ));
+
+      expect(tree.is('.custom-class'))
+        .toBeTruthy();
+    });
   });
 });
diff --git a/packages/dx-react-grid-material-ui/src/plugins/paging-panel.jsx b/packages/dx-react-grid-material-ui/src/plugins/paging-panel.jsx
@@ -24,6 +24,8 @@ export class PagingPanel extends React.PureComponent {
   }
 }
 
+PagingPanel.Container = Pager;
+
 PagingPanel.propTypes = {
   messages: PropTypes.shape({
     showAll: PropTypes.string,

diff --git a/packages/dx-react-grid-material-ui/src/templates/pager.jsx b/packages/dx-react-grid-material-ui/src/templates/pager.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { withStyles } from 'material-ui/styles';
 import { PageSizeSelector } from './page-size-selector';
 import { Pagination } from './pagination';
@@ -20,8 +21,13 @@ const PagerBase = ({
   onPageSizeChange,
   totalCount,
   getMessage,
+  className,
+  ...restProps
 }) => (
-  <div className={classes.pager}>
+  <div
+    className={classNames(classes.pager, className)}
+    {...restProps}
+  >
     <Pagination
       totalPages={totalPages}
       totalCount={totalCount}
@@ -49,6 +55,11 @@ PagerBase.propTypes = {
   onPageSizeChange: PropTypes.func.isRequired,
   totalCount: PropTypes.number.isRequired,
   getMessage: PropTypes.func.isRequired,
+  className: PropTypes.string,
+};
+
+PagerBase.defaultProps = {
+  className: undefined,
 };