[EuiPagination] Extract PaginationButton creation

CHANGELOG.md

@@ -13,6 +13,7 @@
 - Fixed `EuiSelectable`'s double click bug ([#5021](https://github.com/elastic/eui/pull/5021))
 - Fixed overflowing controls when `EuiCodeBlock` is short in height ([#5018](https://github.com/elastic/eui/pull/5018))
 - Fixed `EuiButtonGroup` firing `onChange` twice ([#5033](https://github.com/elastic/eui/pull/5033))
+- Fixed rerender state issues in `PaginationButton` inside `EuiPagination` ([#5048](https://github.com/elastic/eui/pull/5048))
 
 ## [`37.2.0`](https://github.com/elastic/eui/tree/v37.2.0)
 

src-docs/src/views/resizable_container/resizable_container_basic.js

@@ -1,5 +1,9 @@
-import React from 'react';
-import { EuiText, EuiResizableContainer } from '../../../../src/components';
+import React, { useState } from 'react';
+import {
+  EuiText,
+  EuiResizableContainer,
+  EuiPagination,
+} from '../../../../src/components';
 import { fake } from 'faker';
 
 const text = (
@@ -10,11 +14,30 @@ const text = (
   </>
 );
 
+const Pagination = () => {
+  const [activePage, setActivePage] = useState(0);
+  const PAGE_COUNT = 22;
+
+  const goToPage = (pageNumber) => {
+    setActivePage(pageNumber);
+  };
+
+  return (
+    <EuiPagination
+      aria-label="Many pages example"
+      pageCount={PAGE_COUNT}
+      activePage={activePage}
+      onPageClick={(activePage) => goToPage(activePage)}
+    />
+  );
+};
+
 export default () => (
   <EuiResizableContainer style={{ height: '200px' }}>
     {(EuiResizablePanel, EuiResizableButton) => (
       <>
         <EuiResizablePanel initialSize={50} minSize="30%">
+          <Pagination />
           <EuiText>
             <div>{text}</div>
             <a href="">Hello world</a>
@@ -24,6 +47,7 @@ export default () => (
         <EuiResizableButton />
 
         <EuiResizablePanel initialSize={50} minSize="200px">
+          <Pagination />
           <EuiText>{text}</EuiText>
         </EuiResizablePanel>
       </>

src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap

@@ -521,8 +521,12 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                           className="euiPagination__list"
                         >
                           <PaginationButton
+                            activePage={1}
+                            ariaControls="__table_generated-id"
                             key="0"
+                            pageCount={2}
                             pageIndex={0}
+                            safeClick={[Function]}
                           >
                             <li
                               className="euiPagination__item"
@@ -602,8 +606,12 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                             </li>
                           </PaginationButton>
                           <PaginationButton
+                            activePage={1}
+                            ariaControls="__table_generated-id"
                             key="1"
+                            pageCount={2}
                             pageIndex={1}
+                            safeClick={[Function]}
                           >
                             <li
                               className="euiPagination__item"

src/components/pagination/pagination.tsx

@@ -20,6 +20,40 @@ const MAX_VISIBLE_PAGES = 5;
 const NUMBER_SURROUNDING_PAGES = Math.floor(MAX_VISIBLE_PAGES * 0.5);
 
 export type PageClickHandler = (pageIndex: number) => void;
+type SafeClickHandler = (e: MouseEvent, pageIndex: number) => void;
+
+const PaginationButton = ({
+  pageIndex,
+  inList = true,
+  activePage,
+  pageCount,
+  ariaControls,
+  safeClick,
+}: {
+  pageIndex: number;
+  inList?: boolean;
+  activePage: number;
+  pageCount: number;
+  ariaControls?: string;
+  safeClick: SafeClickHandler;
+}) => {
+  const button = (
+    <EuiPaginationButton
+      isActive={pageIndex === activePage}
+      totalPages={pageCount}
+      onClick={(e: MouseEvent) => safeClick(e, pageIndex)}
+      pageIndex={pageIndex}
+      {...{ 'aria-controls': ariaControls }}
+      hideOnMobile
+    />
+  );
+
+  if (inList) {
+    return <li className="euiPagination__item">{button}</li>;
+  }
+
+  return button;
+};
 
 export interface EuiPaginationProps {
   /**
@@ -57,7 +91,7 @@ export const EuiPagination: FunctionComponent<Props> = ({
   'aria-controls': ariaControls,
   ...rest
 }) => {
-  const safeClick = (e: MouseEvent, pageIndex: number) => {
+  const safeClick: SafeClickHandler = (e, pageIndex) => {
     e.preventDefault();
 
     if (ariaControls) {
@@ -70,30 +104,7 @@ export const EuiPagination: FunctionComponent<Props> = ({
 
     onPageClick(pageIndex);
   };
-  const PaginationButton = ({
-    pageIndex,
-    inList = true,
-  }: {
-    pageIndex: number;
-    inList?: boolean;
-  }) => {
-    const button = (
-      <EuiPaginationButton
-        isActive={pageIndex === activePage}
-        totalPages={pageCount}
-        onClick={(e: MouseEvent) => safeClick(e, pageIndex)}
-        pageIndex={pageIndex}
-        {...(hasControl && { 'aria-controls': ariaControls })}
-        hideOnMobile
-      />
-    );
-
-    if (inList) {
-      return <li className="euiPagination__item">{button}</li>;
-    }
 
-    return button;
-  };
   const classes = classNames('euiPagination', className);
   const hasControl = ariaControls !== undefined;
   const pages = [];
@@ -110,7 +121,16 @@ export const EuiPagination: FunctionComponent<Props> = ({
   );
 
   for (let i = firstPageInRange, index = 0; i < lastPageInRange; i++, index++) {
-    pages.push(<PaginationButton pageIndex={i} key={i} />);
+    pages.push(
+      <PaginationButton
+        pageIndex={i}
+        key={i}
+        activePage={activePage}
+        pageCount={pageCount}
+        ariaControls={ariaControls}
+        safeClick={safeClick}
+      />
+    );
   }
 
   let prevPageButtonProps = {};
@@ -152,7 +172,16 @@ export const EuiPagination: FunctionComponent<Props> = ({
   const firstPageButtons = [];
 
   if (firstPageInRange > 0) {
-    firstPageButtons.push(<PaginationButton pageIndex={0} key={0} />);
+    firstPageButtons.push(
+      <PaginationButton
+        pageIndex={0}
+        key={0}
+        activePage={activePage}
+        pageCount={pageCount}
+        ariaControls={ariaControls}
+        safeClick={safeClick}
+      />
+    );
 
     if (firstPageInRange > 1 && firstPageInRange !== 2) {
       firstPageButtons.push(
@@ -171,7 +200,16 @@ export const EuiPagination: FunctionComponent<Props> = ({
         </EuiI18n>
       );
     } else if (firstPageInRange === 2) {
-      firstPageButtons.push(<PaginationButton pageIndex={1} key={1} />);
+      firstPageButtons.push(
+        <PaginationButton
+          pageIndex={1}
+          key={1}
+          activePage={activePage}
+          pageCount={pageCount}
+          ariaControls={ariaControls}
+          safeClick={safeClick}
+        />
+      );
     }
   }
 
@@ -180,7 +218,14 @@ export const EuiPagination: FunctionComponent<Props> = ({
   if (lastPageInRange < pageCount) {
     if (lastPageInRange + 1 === pageCount - 1) {
       lastPageButtons.push(
-        <PaginationButton pageIndex={lastPageInRange} key={lastPageInRange} />
+        <PaginationButton
+          pageIndex={lastPageInRange}
+          key={lastPageInRange}
+          activePage={activePage}
+          pageCount={pageCount}
+          ariaControls={ariaControls}
+          safeClick={safeClick}
+        />
       );
     } else if (lastPageInRange < pageCount - 1) {
       lastPageButtons.push(
@@ -201,7 +246,14 @@ export const EuiPagination: FunctionComponent<Props> = ({
     }
 
     lastPageButtons.push(
-      <PaginationButton pageIndex={pageCount - 1} key={pageCount - 1} />
+      <PaginationButton
+        pageIndex={pageCount - 1}
+        key={pageCount - 1}
+        activePage={activePage}
+        pageCount={pageCount}
+        ariaControls={ariaControls}
+        safeClick={safeClick}
+      />
     );
   }
 
@@ -243,10 +295,24 @@ export const EuiPagination: FunctionComponent<Props> = ({
 
   if (compressed) {
     const firstPageButtonCompressed = (
-      <PaginationButton pageIndex={activePage} inList={false} />
+      <PaginationButton
+        pageIndex={activePage}
+        inList={false}
+        activePage={activePage}
+        pageCount={pageCount}
+        ariaControls={ariaControls}
+        safeClick={safeClick}
+      />
     );
     const lastPageButtonCompressed = (
-      <PaginationButton pageIndex={pageCount - 1} inList={false} />
+      <PaginationButton
+        pageIndex={pageCount - 1}
+        inList={false}
+        activePage={activePage}
+        pageCount={pageCount}
+        ariaControls={ariaControls}
+        safeClick={safeClick}
+      />
     );
 
     return (