feat(Pagination): add disabled flag for whole component

packages/patternfly-4/react-core/src/components/Pagination/Navigation.tsx

@@ -9,6 +9,8 @@ import { KEY_CODES } from '../../helpers/constants';
 export interface NavigationProps extends React.HTMLProps<HTMLElement> {
   /** Additional classes for the container */
   className?: string;
+  /** Flag indicating if the pagination is disabled */
+  isDisabled?: boolean;
   /** The number of the last page */
   lastPage?: number;
   /** The number of first page where pagination starts */
@@ -55,6 +57,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
 
   static defaultProps = {
     className: '',
+    isDisabled: false,
     lastPage: 0,
     firstPage: 0,
     pagesTitle: '',
@@ -102,6 +105,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
   render () {
     const {
       page,
+      isDisabled,
       lastPage,
       firstPage,
       pagesTitle,
@@ -125,7 +129,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
       <nav className={css(styles.paginationNav, className)} aria-label={paginationTitle} {...props}>
         <Button
           variant={ButtonVariant.plain}
-          isDisabled={page === firstPage}
+          isDisabled={isDisabled || page === firstPage}
           aria-label={toFirstPage}
           data-action="first"
           onClick={event => {
@@ -138,7 +142,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
         </Button>
         <Button
           variant={ButtonVariant.plain}
-          isDisabled={page === firstPage}
+          isDisabled={isDisabled || page === firstPage}
           data-action="previous"
           onClick={event => {
             const newPage = page as number - 1 >= 1 ? page as number - 1 : 1;
@@ -155,7 +159,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
             className={css(styles.formControl)}
             aria-label={currPage}
             type="number"
-            disabled={page === firstPage && page === lastPage}
+            disabled={isDisabled || page === firstPage && page === lastPage}
             min={lastPage <= 0 && firstPage <= 0 ? 0 : 1}
             max={lastPage}
             value={userInputPage}
@@ -168,7 +172,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
         </div>
         <Button
           variant={ButtonVariant.plain}
-          isDisabled={page === lastPage}
+          isDisabled={isDisabled || page === lastPage}
           aria-label={toNextPage}
           data-action="next"
           onClick={event => {
@@ -182,7 +186,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
         </Button>
         <Button
           variant={ButtonVariant.plain}
-          isDisabled={page === lastPage}
+          isDisabled={isDisabled || page === lastPage}
           aria-label={toLastPage}
           data-action="last"
           onClick={event => {

packages/patternfly-4/react-core/src/components/Pagination/OptionsToggle.tsx

@@ -25,6 +25,8 @@ export interface OptionsToggleProps extends React.HTMLProps<HTMLDivElement> {
   onToggle?: (isOpen: boolean) => void,
   /** Flag indicating if the Options Menu dropdown is open or not */
   isOpen?: boolean,
+  /** Flag indicating if the Options Menu is disabled */
+  isDisabled?: boolean,
   /** */
   parentRef?: HTMLElement;
   /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex, itemCount, itemsTitle props. */
@@ -41,16 +43,17 @@ export const OptionsToggle: React.FunctionComponent<OptionsToggleProps> = ({
   showToggle = true,
   onToggle = (_isOpen: boolean) => undefined as any,
   isOpen = false,
+  isDisabled = false,
   parentRef = null,
   toggleTemplate: ToggleTemplate = '',
 }:OptionsToggleProps ) => {
   return (
-    <div className={css(styles.optionsMenuToggle, getModifier(styles, 'plain'), getModifier(styles, 'text'))} >
+    <div className={css(styles.optionsMenuToggle, isDisabled && getModifier(styles, 'disabled'), getModifier(styles, 'plain'), getModifier(styles, 'text'))} >
       {showToggle && (
         <DropdownToggle
           aria-label={optionsToggle}
           onToggle={onToggle}
-          isDisabled={itemCount <= 0}
+          isDisabled={isDisabled || itemCount <= 0}
           isOpen={isOpen}
           id={`${widgetId}-toggle`}
           className={styles.optionsMenuToggleButton}

packages/patternfly-4/react-core/src/components/Pagination/Pagination.md

@@ -87,6 +87,48 @@ class PaginationBottom extends React.Component {
 }
 ```
 
+## Pagination disabled
+```js
+import React from 'react';
+import { Pagination, PaginationVariant } from '@patternfly/react-core';
+
+class PaginationTop extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      perPage: 20
+    };
+
+    this.onSetPage = (_event, pageNumber) => {
+      this.setState({
+        page: pageNumber
+      });
+    };
+
+    this.onPerPageSelect = (_event, perPage) => {
+      this.setState({
+        perPage
+      });
+    };
+  }
+
+  render() {
+    return (
+      <Pagination
+        itemCount={523}
+        perPage={this.state.perPage}
+        page={this.state.page}
+        onSetPage={this.onSetPage}
+        widgetId="pagination-options-menu-top"
+        onPerPageSelect={this.onPerPageSelect}
+        isDisabled
+      />
+    );
+  }
+}
+```
+
 ## No items
 ```js
 import React from 'react';

packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.js → packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.tsx

@@ -13,6 +13,11 @@ describe('component render', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  test('should render correctly disabled', () => {
+    const wrapper = mount(<Pagination itemCount={20} isDisabled />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
   test('limited number of pages', () => {
     const wrapper = mount(<Pagination itemCount={20} perPage={20} />);
     expect(wrapper).toMatchSnapshot();

packages/patternfly-4/react-core/src/components/Pagination/Pagination.tsx

@@ -60,6 +60,8 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement> {
   itemCount: number;
   /** Position where pagination is rendered. */
   variant?: 'top' | 'bottom' | 'left' | 'right';
+  /** Flag indicating if pagination is disabled */
+  isDisabled?: boolean;
   /** Number of items per page. */
   perPage?: number;
   /** Select from options to number of items per page. */
@@ -100,6 +102,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
   children = null,
   className = '',
   variant = PaginationVariant.top,
+  isDisabled = false,
   perPage = defaultPerPageOptions[0].value,
   titles = {
     items: 'items',
@@ -170,6 +173,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
         dropDirection={dropDirection}
         widgetId={widgetId}
         toggleTemplate={toggleTemplate}
+        isDisabled={isDisabled}
       />
       <Navigation
         pagesTitle={titles.page}
@@ -188,6 +192,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
         onNextClick={onNextClick}
         onLastClick={onLastClick}
         onPageInput={onPageInput}
+        isDisabled={isDisabled}
       />
       {children}
     </div>

packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -13,6 +13,8 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   className?: string;
   /** Id added to the title of the Pagination Options Menu */
   widgetId?: string;
+  /** Flag indicating if Pagination Options Menu is disabled */
+  isDisabled?: boolean;
   /** Menu will open up or open down from the Options menu toggle */
   dropDirection?: 'up' | 'down';
   /** Array of titles and values which will be the options on the Options Menu dropdown */
@@ -48,6 +50,7 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
   static defaultProps = {
    className: '',
    widgetId: '',
+   isDisabled: false,
    dropDirection: DropdownDirection.down,
    perPageOptions: [] as PerPageOptions[],
    itemsPerPageTitle: 'Items per page',
@@ -109,7 +112,7 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
   };
 
   render() {
-    const { className, widgetId, itemsPerPageTitle, dropDirection, optionsToggle, perPageOptions, toggleTemplate, firstIndex, lastIndex, itemCount, itemsTitle } = this.props;
+    const { className, widgetId, isDisabled, itemsPerPageTitle, dropDirection, optionsToggle, perPageOptions, toggleTemplate, firstIndex, lastIndex, itemCount, itemsTitle } = this.props;
     const { isOpen } = this.state;
 
     return (
@@ -137,6 +140,7 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
               itemsTitle={itemsTitle}
               toggleTemplate={toggleTemplate}
               parentRef={this.parentRef.current}
+              isDisabled={isDisabled}
             />
           }
           dropdownItems={this.renderItems()}