feat(pagination.tsx): next and previous buttons should disable when o…

…n 1 and last page respectively (#731) * feat(pagination.tsx): next and previous buttons should disable when on 1 and last page respectively * feat(pagination.tsx): created separate button for Next/Previous pagination buttons fix #726 * fix(paginationbutton.tsx): added default value for disabled prop #726 --------- Co-authored-by: Lokesh Pathrabe <[email protected]>
themesberg · May 25, 2023 · 8e8531b · 8e8531b
1 parent 8d6d79e
commit 8e8531b
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 23 deletions.
diff --git a/src/lib/components/Pagination/Pagination.spec.tsx b/src/lib/components/Pagination/Pagination.spec.tsx
@@ -61,6 +61,29 @@ describe('Pagination', () => {
       expect(pages()).toEqual([1, 2, 3, 4, 5]);
       expect(currentPage()).toEqual(4);
     });
+
+    it('should disable previous button when on 1st page', async () => {
+      render(<PaginationTest />);
+
+      const firstButton = buttons()[0];
+
+      expect(currentPage()).toEqual(1);
+      expect(firstButton).toBeDisabled();
+    });
+
+    it('should disable next button when on last page', async () => {
+      const user = userEvent.setup();
+      render(<PaginationTest />);
+
+      const lastButton = buttons()[buttons().length - 1];
+
+      for (let i = 0; i < 5; ++i) {
+        await user.click(nextButton());
+      }
+
+      expect(currentPage()).toEqual(5);
+      expect(lastButton).toBeDisabled();
+    });
   });
 
   describe('Props', () => {

diff --git a/src/lib/components/Pagination/Pagination.tsx b/src/lib/components/Pagination/Pagination.tsx
@@ -6,7 +6,7 @@ import { mergeDeep } from '../../helpers/mergeDeep';
 import range from '../../helpers/range';
 import { useTheme } from '../Flowbite/ThemeContext';
 import type { FlowbitePaginationButtonTheme, PaginationButtonProps } from './PaginationButton';
-import PaginationButton from './PaginationButton';
+import { PaginationButton, PaginationNavigation } from './PaginationButton';
 
 export interface FlowbitePaginationTheme {
   base: string;
@@ -87,16 +87,14 @@ const PaginationComponent: FC<PaginationProps> = ({
       )}
       <ul className={theme.pages.base}>
         <li>
-          {renderPaginationButton({
-            className: classNames(classNames(theme.pages.previous.base, showIcon && theme.pages.showIcon)),
-            onClick: goToPreviousPage,
-            children: (
-              <>
-                {showIcon && <HiChevronLeft aria-hidden className={theme.pages.previous.icon} />}
-                {previousLabel}
-              </>
-            ),
-          })}
+          <PaginationNavigation
+            className={classNames(theme.pages.previous.base, showIcon && theme.pages.showIcon)}
+            onClick={goToPreviousPage}
+            disabled={currentPage === 1}
+          >
+            {showIcon && <HiChevronLeft aria-hidden className={theme.pages.previous.icon} />}
+            {previousLabel}
+          </PaginationNavigation>
         </li>
         {layout === 'pagination' &&
           range(firstPage, lastPage).map((page: number) => (
@@ -112,16 +110,14 @@ const PaginationComponent: FC<PaginationProps> = ({
             </li>
           ))}
         <li>
-          {renderPaginationButton({
-            className: classNames(theme.pages.next.base, showIcon && theme.pages.showIcon),
-            onClick: goToNextPage,
-            children: (
-              <>
-                {nextLabel}
-                {showIcon && <HiChevronRight aria-hidden className={theme.pages.next.icon} />}
-              </>
-            ),
-          })}
+          <PaginationNavigation
+            className={classNames(theme.pages.next.base, showIcon && theme.pages.showIcon)}
+            onClick={goToNextPage}
+            disabled={currentPage === totalPages}
+          >
+            {nextLabel}
+            {showIcon && <HiChevronRight aria-hidden className={theme.pages.next.icon} />}
+          </PaginationNavigation>
         </li>
       </ul>
     </nav>

diff --git a/src/lib/components/Pagination/PaginationButton.tsx b/src/lib/components/Pagination/PaginationButton.tsx
@@ -7,6 +7,7 @@ import { useTheme } from '../Flowbite/ThemeContext';
 export interface FlowbitePaginationButtonTheme {
   base: string;
   active: string;
+  disabled: string;
 }
 
 export interface PaginationButtonProps extends ComponentProps<'button'> {
@@ -17,7 +18,11 @@ export interface PaginationButtonProps extends ComponentProps<'button'> {
   theme?: DeepPartial<FlowbitePaginationButtonTheme>;
 }
 
-const PaginationButton: FC<PaginationButtonProps> = ({
+export interface PaginationPrevButtonProps extends Omit<PaginationButtonProps, 'active'> {
+  disabled?: boolean;
+}
+
+export const PaginationButton: FC<PaginationButtonProps> = ({
   active,
   children,
   className,
@@ -44,4 +49,32 @@ const PaginationButton: FC<PaginationButtonProps> = ({
 };
 
 PaginationButton.displayName = 'Pagination.Button';
-export default PaginationButton;
+
+export const PaginationNavigation: FC<PaginationPrevButtonProps> = ({
+  children,
+  className,
+  onClick,
+  theme: customTheme = {},
+  disabled = false,
+  ...props
+}) => {
+  const theme = mergeDeep(useTheme().theme.pagination, customTheme);
+
+  return (
+    <button
+      className={classNames(
+        {
+          [theme.pages.selector.disabled]: disabled,
+        },
+        className,
+      )}
+      disabled={disabled}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+PaginationNavigation.displayName = 'Pagination.Navigation';
diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts
@@ -633,6 +633,7 @@ const theme: FlowbiteTheme = {
         base: 'w-12 border border-gray-300 bg-white py-2 leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white',
         active:
           'bg-blue-50 text-blue-600 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white',
+        disabled: 'opacity-50 cursor-normal',
       },
     },
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -633,6 +633,7 @@ const theme: FlowbiteTheme = { @@
             base: 'w-12 border border-gray-300 bg-white py-2 leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white',
             active:
               'bg-blue-50 text-blue-600 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white',
+            disabled: 'opacity-50 cursor-normal',
           },
         },
       },
@@ Expand Down @@