[EuiPagination] Extract PaginationButton creation

CHANGELOG.md

@@ -3,6 +3,7 @@
 **Bug fixes**
 
 - Fixed bug in `EuiDataGrid` where a custom `className` was also being passed to the full screen button ([#5050](https://github.com/elastic/eui/pull/5050))
+- Fixed rerender state issues in `PaginationButton` inside `EuiPagination` ([#5048](https://github.com/elastic/eui/pull/5048))
 
 ## [`37.3.0`](https://github.com/elastic/eui/tree/v37.3.0)
 

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

@@ -520,9 +520,13 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                         <ul
                           className="euiPagination__list"
                         >
-                          <PaginationButton
+                          <PaginationButtonWrapper
+                            activePage={1}
+                            ariaControls="__table_generated-id"
                             key="0"
+                            pageCount={2}
                             pageIndex={0}
+                            safeClick={[Function]}
                           >
                             <li
                               className="euiPagination__item"
@@ -600,10 +604,14 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                 </EuiI18n>
                               </EuiPaginationButton>
                             </li>
-                          </PaginationButton>
-                          <PaginationButton
+                          </PaginationButtonWrapper>
+                          <PaginationButtonWrapper
+                            activePage={1}
+                            ariaControls="__table_generated-id"
                             key="1"
+                            pageCount={2}
                             pageIndex={1}
+                            safeClick={[Function]}
                           >
                             <li
                               className="euiPagination__item"
@@ -683,7 +691,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                 </EuiI18n>
                               </EuiPaginationButton>
                             </li>
-                          </PaginationButton>
+                          </PaginationButtonWrapper>
                         </ul>
                         <EuiI18n
                           default="Next page, {page}"

src/components/pagination/pagination.tsx

@@ -20,6 +20,7 @@ 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;
 
 export interface EuiPaginationProps {
   /**
@@ -57,7 +58,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 +71,9 @@ 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>;
-    }
+  const sharedButtonProps = { activePage, pageCount, ariaControls, safeClick };
 
-    return button;
-  };
   const classes = classNames('euiPagination', className);
   const hasControl = ariaControls !== undefined;
   const pages = [];
@@ -110,7 +90,9 @@ export const EuiPagination: FunctionComponent<Props> = ({
   );
 
   for (let i = firstPageInRange, index = 0; i < lastPageInRange; i++, index++) {
-    pages.push(<PaginationButton pageIndex={i} key={i} />);
+    pages.push(
+      <PaginationButtonWrapper pageIndex={i} key={i} {...sharedButtonProps} />
+    );
   }
 
   let prevPageButtonProps = {};
@@ -152,7 +134,9 @@ export const EuiPagination: FunctionComponent<Props> = ({
   const firstPageButtons = [];
 
   if (firstPageInRange > 0) {
-    firstPageButtons.push(<PaginationButton pageIndex={0} key={0} />);
+    firstPageButtons.push(
+      <PaginationButtonWrapper pageIndex={0} key={0} {...sharedButtonProps} />
+    );
 
     if (firstPageInRange > 1 && firstPageInRange !== 2) {
       firstPageButtons.push(
@@ -171,7 +155,9 @@ export const EuiPagination: FunctionComponent<Props> = ({
         </EuiI18n>
       );
     } else if (firstPageInRange === 2) {
-      firstPageButtons.push(<PaginationButton pageIndex={1} key={1} />);
+      firstPageButtons.push(
+        <PaginationButtonWrapper pageIndex={1} key={1} {...sharedButtonProps} />
+      );
     }
   }
 
@@ -180,7 +166,11 @@ export const EuiPagination: FunctionComponent<Props> = ({
   if (lastPageInRange < pageCount) {
     if (lastPageInRange + 1 === pageCount - 1) {
       lastPageButtons.push(
-        <PaginationButton pageIndex={lastPageInRange} key={lastPageInRange} />
+        <PaginationButtonWrapper
+          pageIndex={lastPageInRange}
+          key={lastPageInRange}
+          {...sharedButtonProps}
+        />
       );
     } else if (lastPageInRange < pageCount - 1) {
       lastPageButtons.push(
@@ -201,7 +191,11 @@ export const EuiPagination: FunctionComponent<Props> = ({
     }
 
     lastPageButtons.push(
-      <PaginationButton pageIndex={pageCount - 1} key={pageCount - 1} />
+      <PaginationButtonWrapper
+        pageIndex={pageCount - 1}
+        key={pageCount - 1}
+        {...sharedButtonProps}
+      />
     );
   }
 
@@ -243,10 +237,18 @@ export const EuiPagination: FunctionComponent<Props> = ({
 
   if (compressed) {
     const firstPageButtonCompressed = (
-      <PaginationButton pageIndex={activePage} inList={false} />
+      <PaginationButtonWrapper
+        pageIndex={activePage}
+        inList={false}
+        {...sharedButtonProps}
+      />
     );
     const lastPageButtonCompressed = (
-      <PaginationButton pageIndex={pageCount - 1} inList={false} />
+      <PaginationButtonWrapper
+        pageIndex={pageCount - 1}
+        inList={false}
+        {...sharedButtonProps}
+      />
     );
 
     return (
@@ -288,3 +290,36 @@ export const EuiPagination: FunctionComponent<Props> = ({
     </nav>
   );
 };
+
+const PaginationButtonWrapper = ({
+  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;
+};