fix(pageSize): add pageSize prop back in (#70)

Author: chrisdhanaraj

components/Pagination.js

@@ -21,6 +21,7 @@ class Pagination extends Component {
     totalItems: PropTypes.number.isRequired,
     disabled: PropTypes.bool,
     page: PropTypes.number,
+    pageSize: PropTypes.number,
   };
   static defaultProps = {
     backwardText: 'Backward',
@@ -36,14 +37,22 @@ class Pagination extends Component {
   static uuid = 0;
   state = {
     page: this.props.page,
-    pageSize: this.props.pageSizes[0],
+    pageSize: this.props.pageSize &&
+      this.props.pageSizes.includes(this.props.pageSize)
+      ? this.props.pageSize
+      : this.props.pageSizes[0],
   };
-  componentWillReceiveProps({ pageSizes, page }) {
+  componentWillReceiveProps({ pageSizes, page, pageSize }) {
     if (!equals(pageSizes, this.props.pageSizes)) {
       this.setState({ pageSize: pageSizes[0], page: 1 });
     }
-    if (!equals(page, this.props.page)) {
-      this.setState({ page });
+    if (page !== this.props.page) {
+      this.setState({
+        page,
+      });
+    }
+    if (pageSize !== this.props.pageSize) {
+      this.setState({ pageSize });
     }
   }
   id = Pagination.uuid++;
@@ -101,9 +110,9 @@ class Pagination extends Component {
             onChange={this.handleSizeChange}
             value={pageSize}
           >
-            {pageSizes.map(size => (
+            {pageSizes.map(size =>
               <SelectItem key={size} value={size} text={String(size)} />
-            ))}
+            )}
           </Select>
           <span className="bx--pagination__text">
             {itemsPerPageText}&nbsp;&nbsp;|&nbsp;&nbsp;

components/__tests__/Pagination-test.js

@@ -63,7 +63,11 @@ describe('Pagination', () => {
             actualPageSize = pageSize;
           };
           const pager = mount(
-            <Pagination pageSizes={[5, 10]} totalItems={50} onChange={handler} />
+            <Pagination
+              pageSizes={[5, 10]}
+              totalItems={50}
+              onChange={handler}
+            />
           );
           expect(pager.state().pageSize).toBe(5);
           pager.find('select').simulate('change', { target: { value: 10 } });
@@ -81,7 +85,11 @@ describe('Pagination', () => {
             actualPage = page;
           };
           const pager = mount(
-            <Pagination pageSizes={[5, 10]} totalItems={50} onChange={handler} />
+            <Pagination
+              pageSizes={[5, 10]}
+              totalItems={50}
+              onChange={handler}
+            />
           );
           pager.setState({ page: 2 });
           expect(pager.state().page).toBe(2);
@@ -97,6 +105,19 @@ describe('Pagination', () => {
           pager.setProps({ pageSizes: [3, 6] });
           expect(pager.state().page).toEqual(1);
         });
+        it('should default to pageSize if pageSize is provided', () => {
+          const pager = mount(
+            <Pagination pageSizes={[5, 10]} pageSize={10} totalItems={50} />
+          );
+          expect(pager.state().pageSize).toEqual(10);
+        });
+        it('should default to pageSize if on change to pageSize', () => {
+          const pager = mount(
+            <Pagination pageSizes={[5, 10]} totalItems={50} />
+          );
+          pager.setProps({ pageSize: 10 });
+          expect(pager.state().pageSize).toEqual(10);
+        });
       });
     });
 
@@ -112,8 +133,12 @@ describe('Pagination', () => {
       it('should have two buttons for navigation', () => {
         const buttons = right.find('.bx--pagination__button');
         expect(buttons.length).toBe(2);
-        expect(buttons.at(0).hasClass('bx--pagination__button--backward')).toBe(true);
-        expect(buttons.at(1).hasClass('bx--pagination__button--forward')).toBe(true);
+        expect(buttons.at(0).hasClass('bx--pagination__button--backward')).toBe(
+          true
+        );
+        expect(buttons.at(1).hasClass('bx--pagination__button--forward')).toBe(
+          true
+        );
       });
       it('should disable backward navigation for the first page', () => {
         const buttons = right.find('.bx--pagination__button');
@@ -122,7 +147,11 @@ describe('Pagination', () => {
       });
       it('should disable forward navigation for the last page', () => {
         const smallPage = shallow(
-          <Pagination className="extra-class" pageSizes={[100]} totalItems={50} />
+          <Pagination
+            className="extra-class"
+            pageSizes={[100]}
+            totalItems={50}
+          />
         );
         const buttons = smallPage.find('.bx--pagination__button');
         expect(buttons.at(0).props().disabled).toBe(true);
@@ -136,7 +165,11 @@ describe('Pagination', () => {
             actualPage = page;
           };
           const pager = mount(
-            <Pagination pageSizes={[5, 10]} totalItems={50} onChange={handler} />
+            <Pagination
+              pageSizes={[5, 10]}
+              totalItems={50}
+              onChange={handler}
+            />
           );
           expect(pager.state().page).toBe(1);
           pager.find('.bx--pagination__button--forward').simulate('click');
@@ -149,7 +182,11 @@ describe('Pagination', () => {
             actualPage = page;
           };
           const pager = mount(
-            <Pagination pageSizes={[5, 10]} totalItems={50} onChange={handler} />
+            <Pagination
+              pageSizes={[5, 10]}
+              totalItems={50}
+              onChange={handler}
+            />
           );
           pager.setState({ page: 2 });
           expect(pager.state().page).toBe(2);
@@ -163,10 +200,16 @@ describe('Pagination', () => {
             actualPage = page;
           };
           const pager = mount(
-            <Pagination pageSizes={[5, 10]} totalItems={50} onChange={handler} />
+            <Pagination
+              pageSizes={[5, 10]}
+              totalItems={50}
+              onChange={handler}
+            />
           );
           expect(pager.state().page).toBe(1);
-          pager.find('.bx--text__input').simulate('change', { target: { value: 2 } });
+          pager
+            .find('.bx--text__input')
+            .simulate('change', { target: { value: 2 } });
           expect(actualPage).toBe(2);
           expect(pager.state().page).toBe(2);
         });