Repository: couds/react-bulma-components (js)

Issue:
Disable next button on Pagination when making data fetch
Currently, the previous and the next buttons are disabled when the user is on the first or last page.

Is it possible to disable the button when the user clicks NEXT so they don't have the option to continuously click through and make a bunch of async requests?  Thanks

![demo](http://g.recordit.co/7oiZwNlA0b.gif)

Pull request:
Can now manually disable prev/next button in Pagination component
A prop `disabled: PropTypes.bool` is added to `<Pagination />` which disables all buttons in pagination.
Closes #150.

Patch:
diff --git a/src/components/pagination/pagination.js b/src/components/pagination/pagination.js
index a5e361a..4f08a71 100644
--- a/src/components/pagination/pagination.js
+++ b/src/components/pagination/pagination.js
@@ -9,6 +9,8 @@ export default class Pagination extends React.PureComponent {
     ...modifiers.propTypes,
     /** Current page */
     current: PropTypes.number,
+    /** whether to disable the buttons */
+    disabled: PropTypes.bool,
     /** Total pages in total */
     total: PropTypes.number,
     /** Amount og pages to display at the left and right of the current (if delta 2 and current page is 3, the paginator will display pages from 1 to 5) */
@@ -35,6 +37,7 @@ export default class Pagination extends React.PureComponent {
     next: 'Next',
     previous: 'Previous',
     showPrevNext: true,
+    disabled: undefined,
     autoHide: true,
     className: undefined,
     renderAs: 'nav',
@@ -73,6 +76,7 @@ export default class Pagination extends React.PureComponent {
   render() {
     const {
       current,
+      disabled,
       total,
       next,
       previous,
@@ -93,6 +97,8 @@ export default class Pagination extends React.PureComponent {
 
     const firstPage = this.firstPage(current, total);
     const lastPage = this.lastPage(current, total);
+    const prevDisabled = current === 1 || disabled;
+    const nextDisabled = current === total || disabled;
 
     return (
       <Element
@@ -107,19 +113,19 @@ export default class Pagination extends React.PureComponent {
               <a
                 role="button"
                 tabIndex={0}
-                onClick={current === 1 ? undefined : this.goToPage(current - 1)}
+                onClick={prevDisabled ? undefined : this.goToPage(current - 1)}
                 className="pagination-previous"
                 title="This is the first page"
-                disabled={current === 1}
+                disabled={prevDisabled}
               >
                 {previous}
               </a>
               <a
                 role="button"
                 tabIndex={0}
-                onClick={current === total ? undefined : this.goToPage(current + 1)}
+                onClick={nextDisabled ? undefined : this.goToPage(current + 1)}
                 className="pagination-next"
-                disabled={current === total}
+                disabled={nextDisabled}
               >
                 {next}
               </a>
@@ -144,6 +150,7 @@ export default class Pagination extends React.PureComponent {
                         onClick={current === firstPage + i ? undefined : this.goToPage(firstPage + i)}
                         aria-label={`Page ${i + firstPage}`}
                         aria-current="page"
+                        disabled={disabled}
                       >
                         {i + firstPage}
                       </a>
diff --git a/src/components/pagination/pagination.story.js b/src/components/pagination/pagination.story.js
index 19187bc..0a9a33b 100644
--- a/src/components/pagination/pagination.story.js
+++ b/src/components/pagination/pagination.story.js
@@ -16,4 +16,7 @@ storiesOf('Pagination', module)
   )))
   .add('Without prev/next button', (() => (
     <Pagination showPrevNext={false} current={3} total={5} delta={1} />
+  )))
+  .add('With all buttons manually disabled', (() => (
+      <Pagination disabled current={3} total={5} />
   )));


Test patch:
diff --git a/src/components/pagination/__test__/__snapshots__/pagination.test.js.snap b/src/components/pagination/__test__/__snapshots__/pagination.test.js.snap
index 15ef10e..64efe7e 100644
--- a/src/components/pagination/__test__/__snapshots__/pagination.test.js.snap
+++ b/src/components/pagination/__test__/__snapshots__/pagination.test.js.snap
@@ -1,5 +1,72 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Pagination component All buttons should be disabled 1`] = `
+<nav
+  aria-label="pagination"
+  className="pagination"
+>
+  <a
+    className="pagination-previous"
+    disabled={true}
+    role="button"
+    tabIndex={0}
+    title="This is the first page"
+  >
+    Previous
+  </a>
+  <a
+    className="pagination-next"
+    disabled={true}
+    role="button"
+    tabIndex={0}
+  >
+    Next
+  </a>
+  <ul
+    className="pagination-list"
+  >
+    <li>
+      <a
+        aria-current="page"
+        aria-label="Page 1"
+        className="pagination-link is-current"
+        disabled={true}
+        role="button"
+        tabIndex={0}
+      >
+        1
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current="page"
+        aria-label="Page 2"
+        className="pagination-link"
+        disabled={true}
+        onClick={[Function]}
+        role="button"
+        tabIndex={0}
+      >
+        2
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current="page"
+        aria-label="Page 3"
+        className="pagination-link"
+        disabled={true}
+        onClick={[Function]}
+        role="button"
+        tabIndex={0}
+      >
+        3
+      </a>
+    </li>
+  </ul>
+</nav>
+`;
+
 exports[`Pagination component Next button should be disabled 1`] = `
 <nav
   aria-label="pagination"
@@ -7,7 +74,6 @@ exports[`Pagination component Next button should be disabled 1`] = `
 >
   <a
     className="pagination-previous"
-    disabled={false}
     onClick={[Function]}
     role="button"
     tabIndex={0}
@@ -83,7 +149,6 @@ exports[`Pagination component Should have 3 pages and page 1 active 1`] = `
   </a>
   <a
     className="pagination-next"
-    disabled={false}
     onClick={[Function]}
     role="button"
     tabIndex={0}
@@ -139,7 +204,6 @@ exports[`Pagination component Should have 5 pages, page 5 active and display pag
 >
   <a
     className="pagination-previous"
-    disabled={false}
     onClick={[Function]}
     role="button"
     tabIndex={0}
@@ -275,7 +339,6 @@ exports[`Pagination component Should not display page numbers 1`] = `
 >
   <a
     className="pagination-previous"
-    disabled={false}
     onClick={[Function]}
     role="button"
     tabIndex={0}
diff --git a/src/components/pagination/__test__/pagination.test.js b/src/components/pagination/__test__/pagination.test.js
index 3db4ae4..fa1fdd3 100644
--- a/src/components/pagination/__test__/pagination.test.js
+++ b/src/components/pagination/__test__/pagination.test.js
@@ -27,6 +27,10 @@ describe('Pagination component', () => {
     const component = renderer.create(<Pagination total={3} current={3} />);
     expect(component.toJSON()).toMatchSnapshot();
   });
+  it('All buttons should be disabled', () => {
+    const component = renderer.create(<Pagination total={3} current={1} disabled />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
   it('Should not render if total pages equals 1', () => {
     const component = renderer.create(<Pagination total={1} current={1} />);
     expect(component.toJSON()).toMatchSnapshot();