feat(Paginator): Add disableNext,disablePrev Props (#1928)

Author: glekner

packages/patternfly-3/patternfly-react/src/components/Pagination/PaginationRow.js

@@ -35,7 +35,9 @@ const PaginationRow = ({
   onPreviousPage,
   onPageInput,
   onNextPage,
-  onLastPage
+  onLastPage,
+  disableNext,
+  disablePrev
 }) => {
   const { page, perPage, perPageOptions = [] } = pagination;
   const classes = classNames(baseClassName, className, {
@@ -83,6 +85,7 @@ const PaginationRow = ({
           messagesPreviousPage={messages.previousPage}
           onFirstPage={onFirstPage}
           onPreviousPage={onPreviousPage}
+          disable={disablePrev}
         />
 
         <ControlLabel className="sr-only">{messages.currentPage}</ControlLabel>
@@ -97,6 +100,7 @@ const PaginationRow = ({
           messagesLastPage={messages.lastPage}
           onNextPage={onNextPage}
           onLastPage={onLastPage}
+          disable={disableNext}
         />
       </FormGroup>
     </Form>
@@ -154,7 +158,11 @@ PaginationRow.propTypes = {
   /** next page callback */
   onNextPage: PropTypes.func,
   /** last page callback */
-  onLastPage: PropTypes.func
+  onLastPage: PropTypes.func,
+  /** disable next page */
+  disableNext: PropTypes.bool,
+  /** disable previous page */
+  disablePrev: PropTypes.bool
 };
 PaginationRow.defaultProps = {
   baseClassName: 'content-view-pf-pagination',
@@ -177,7 +185,9 @@ PaginationRow.defaultProps = {
   onPageInput: noop,
   onNextPage: noop,
   onLastPage: noop,
-  dropdownButtonId: 'pagination-row-dropdown'
+  dropdownButtonId: 'pagination-row-dropdown',
+  disableNext: false,
+  disablePrev: false
 };
 
 PaginationRow.AmountOfPages = PaginationRowAmountOfPages;

packages/patternfly-3/patternfly-react/src/components/Pagination/PaginationRowBack.js

@@ -14,12 +14,13 @@ const PaginationRowBack = ({
   messagesPreviousPage,
   onFirstPage,
   onPreviousPage,
+  disable,
   ...props
 }) => {
   const classes = classNames('pagination', 'pagination-pf-back', className);
   return (
     <ul className={classes} {...props}>
-      <li className={page === 1 ? 'disabled' : ''}>
+      <li className={page === 1 || disable ? 'disabled' : ''}>
         <a
           href="#"
           title={messagesFirstPage}
@@ -33,7 +34,7 @@ const PaginationRowBack = ({
           <PaginationRowArrowIcon name="double-left" />
         </a>
       </li>
-      <li className={page === 1 ? 'disabled' : ''}>
+      <li className={page === 1 || disable ? 'disabled' : ''}>
         <a
           href="#"
           title={messagesPreviousPage}
@@ -62,11 +63,14 @@ PaginationRowBack.propTypes = {
   /** first page callback */
   onFirstPage: PropTypes.func,
   /** previous page selection callback */
-  onPreviousPage: PropTypes.func
+  onPreviousPage: PropTypes.func,
+  /** disable back button */
+  disable: PropTypes.bool
 };
 PaginationRowBack.defaultProps = {
   className: '',
   onFirstPage: noop,
-  onPreviousPage: noop
+  onPreviousPage: noop,
+  disable: false
 };
 export default PaginationRowBack;

packages/patternfly-3/patternfly-react/src/components/Pagination/PaginationRowForward.js

@@ -15,12 +15,13 @@ const PaginationRowForward = ({
   messagesLastPage,
   onNextPage,
   onLastPage,
+  disable,
   ...props
 }) => {
   const classes = classNames('pagination', 'pagination-pf-forward', className);
   return (
     <ul className={classes}>
-      <li className={page === amountOfPages ? 'disabled' : ''}>
+      <li className={page === amountOfPages || disable ? 'disabled' : ''}>
         <a
           href="#"
           title={messagesNextPage}
@@ -34,7 +35,7 @@ const PaginationRowForward = ({
           <PaginationRowArrowIcon name="right" />
         </a>
       </li>
-      <li className={page === amountOfPages ? 'disabled' : ''}>
+      <li className={page === amountOfPages || disable ? 'disabled' : ''}>
         <a
           href="#"
           title={messagesLastPage}
@@ -65,11 +66,14 @@ PaginationRowForward.propTypes = {
   /** next page callback */
   onNextPage: PropTypes.func,
   /** last page callback */
-  onLastPage: PropTypes.func
+  onLastPage: PropTypes.func,
+  /** disable next button  */
+  disable: PropTypes.bool
 };
 PaginationRowForward.defaultProps = {
   className: '',
   onNextPage: noop,
-  onLastPage: noop
+  onLastPage: noop,
+  disable: false
 };
 export default PaginationRowForward;

packages/patternfly-3/patternfly-react/src/components/Pagination/Paginator.js

@@ -61,7 +61,17 @@ class Paginator extends React.Component {
   render() {
     const { pageChangeValue } = this.state;
 
-    const { className, viewType, itemCount, messages, dropdownButtonId, onPerPageSelect, pagination } = this.props;
+    const {
+      className,
+      viewType,
+      itemCount,
+      messages,
+      dropdownButtonId,
+      onPerPageSelect,
+      pagination,
+      disableNext,
+      disablePrev
+    } = this.props;
 
     const itemsStart = (this.currentPage - 1) * this.perPage + 1;
     const itemsEnd = Math.min(itemsStart + this.perPage - 1, this.itemCount);
@@ -86,6 +96,8 @@ class Paginator extends React.Component {
         onPageInput={e => this.handlePageChange(e)}
         onNextPage={() => this.setPageRelative(1)}
         onLastPage={() => this.setPage(totalPages)}
+        disableNext={disableNext}
+        disablePrev={disablePrev}
       />
     );
   }
@@ -121,7 +133,11 @@ Paginator.propTypes = {
   /** A callback triggered when a page is switched */
   onPageSet: PropTypes.func,
   /** per page selection callback */
-  onPerPageSelect: PropTypes.func
+  onPerPageSelect: PropTypes.func,
+  /** disable next page */
+  disableNext: PropTypes.bool,
+  /** disable previous page */
+  disablePrev: PropTypes.bool
 };
 Paginator.defaultProps = {
   className: '',
@@ -136,7 +152,9 @@ Paginator.defaultProps = {
   },
   dropdownButtonId: 'pagination-row-dropdown',
   onPerPageSelect: noop,
-  onPageSet: noop
+  onPageSet: noop,
+  disableNext: false,
+  disablePrev: false
 };
 
 export default Paginator;