fix(Pagination): Fix pagination to update page count (#2639)

* Fix pagination to update page count * Remove comment * Fix issues with input and page selection * Update snapshots
patternfly · Aug 6, 2019 · ff9c745 · ff9c745
1 parent f74191b
commit ff9c745
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Pagination/Navigation.tsx b/packages/patternfly-4/react-core/src/components/Pagination/Navigation.tsx
@@ -29,7 +29,7 @@ export interface NavigationProps extends React.HTMLProps<HTMLElement> {
   paginationTitle?: string;
   /** The number of the current page */
   page: React.ReactText;
-  /** Function called when user sets page */
+  /** Function called when page is changed */
   onSetPage: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when user clicks to navigate to next page */
   onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
@@ -93,6 +93,12 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
     }
   }
 
+  componentDidUpdate(lastState: NavigationProps) {
+    if (this.props.page !== lastState.page && this.props.page <= this.props.lastPage && this.state.userInputPage !== this.props.page) {
+      this.setState({ userInputPage: this.props.page });
+    }
+   }
+
   render () {
     const {
       page,
@@ -150,7 +156,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
             aria-label={currPage}
             type="number"
             disabled={page === firstPage && page === lastPage}
-            min={lastPage <= 0 && firstPage <=0 ? 0 : 1}
+            min={lastPage <= 0 && firstPage <= 0 ? 0 : 1}
             max={lastPage}
             value={userInputPage}
             onKeyDown={event => this.onKeyDown(event, page, lastPage, onPageInput, onSetPage)}

diff --git a/packages/patternfly-4/react-core/src/components/Pagination/Pagination.tsx b/packages/patternfly-4/react-core/src/components/Pagination/Pagination.tsx
@@ -64,6 +64,8 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement> {
   perPage?: number;
   /** Select from options to number of items per page. */
   perPageOptions?: PerPageOptions[];
+  /** Page we start at. */
+  firstPage?: number;
   /** Current page number. */
   page?: number;
   /** First index of items on current page. */
@@ -112,6 +114,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
     currPage: 'Current page',
     paginationTitle: 'Pagination'
   },
+  firstPage = 1,
   page = 1,
   itemCount,
   itemsStart = null,
@@ -130,6 +133,12 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
   ...props
 }: PaginationProps) => {
   const lastPage = Math.ceil(itemCount / perPage);
+  if (page < firstPage) {
+    page = firstPage;
+  } else if (page > lastPage) {
+    page = lastPage;
+  }
+
   const firstIndex = itemCount <= 0 ? 0 : (page - 1) * perPage + 1;
   let lastIndex;
   if (itemCount <= 0) {