Merge pull request #22 from Bandmators/feature/pagination

feat: support Link element at AutoPagination
Bandmators · Apr 23, 2024 · f4d045c · f4d045c
2 parents 03320c1 + 7b3b7a6
commit f4d045c
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 14 deletions.
diff --git a/src/components/Pagination/AutoPagination.tsx b/src/components/Pagination/AutoPagination.tsx
@@ -1,17 +1,17 @@
-import React from 'react';
-
 import { Pagination } from './Pagination';
 import { PaginationContent } from './PaginationContent';
 import { PaginationItem } from './PaginationItem';
-import { PaginationLink, PaginationNext, PaginationPrevious } from './PaginationLink';
+import { PaginationLink, PaginationNextLink, PaginationPreviousLink } from './PaginationLink';
 
 interface AutoPaginationProps {
   pageNo: number;
   pageSize: number;
   pageGap?: number;
+
+  linkas?: React.ElementType;
 }
 
-export const AutoPagination = ({ pageNo, pageSize, pageGap = 10 }: AutoPaginationProps) => {
+export const AutoPagination = ({ pageNo, pageSize, pageGap = 10, linkas }: AutoPaginationProps) => {
   const start = Math.floor(pageNo / (pageGap + 1)) * pageGap;
   const end = Math.min(start + pageGap, pageSize);
   const pages = Array.from({ length: end - start }, (_, index) => index + start + 1);
@@ -20,17 +20,27 @@ export const AutoPagination = ({ pageNo, pageSize, pageGap = 10 }: AutoPaginatio
     <Pagination>
       <PaginationContent>
         <PaginationItem>
-          <PaginationPrevious disabled={pageNo <= pageGap} href={`?page=${start}`} />
+          <PaginationPreviousLink
+            disabled={pageNo <= pageGap}
+            href={`?page=${start}`}
+            to={`?page=${start}`}
+            as={linkas}
+          />
         </PaginationItem>
         {pages.map(page => (
           <PaginationItem key={`bmates-pagination-${page}`}>
-            <PaginationLink active={page === pageNo} href={`?page=${page}`}>
+            <PaginationLink active={page === pageNo} href={`?page=${page}`} to={`?page=${page}`} as={linkas}>
               {page}
             </PaginationLink>
           </PaginationItem>
         ))}
         <PaginationItem>
-          <PaginationNext disabled={end >= pageSize} href={`?page=${end + 1}`} />
+          <PaginationNextLink
+            disabled={end >= pageSize}
+            href={`?page=${end + 1}`}
+            to={`?page=${end + 1}`}
+            as={linkas}
+          />
         </PaginationItem>
       </PaginationContent>
     </Pagination>

diff --git a/src/components/Pagination/PaginationLink.tsx b/src/components/Pagination/PaginationLink.tsx
@@ -7,28 +7,40 @@ import { composeEventHandlers } from '@/libs/event';
 interface PaginationLinkProps extends React.ComponentPropsWithoutRef<'a'> {
   active?: boolean;
   disabled?: boolean;
+
+  as?: React.ElementType;
+
+  /*
+   * For React-Router-Dom Link
+   */
+  to?: string;
 }
 
 export const PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(
-  ({ active = false, disabled = false, onClick, ...props }, ref) => {
+  ({ active = false, disabled = false, onClick, as, ...props }, ref) => {
     const handleOnclick = (e: React.MouseEvent<HTMLAnchorElement>) => {
       if (disabled) e.preventDefault();
     };
 
     return (
       <>
         {disabled ? (
-          <DisabledLink disabled={disabled} aria-disabled="true" {...props} />
+          <DisabledLink disabled={disabled} aria-disabled="true" as={as} {...props} />
         ) : (
-          <Link ref={ref} active={active} onClick={composeEventHandlers(handleOnclick, onClick)} {...props} />
+          <Link ref={ref} as={as} active={active} onClick={composeEventHandlers(handleOnclick, onClick)} {...props} />
         )}
       </>
     );
   },
 );
 PaginationLink.displayName = 'PaginationLink';
 
-export const PaginationPrevious = ({ active = false, disabled = false, children, ...props }: PaginationLinkProps) => {
+export const PaginationPreviousLink = ({
+  active = false,
+  disabled = false,
+  children,
+  ...props
+}: PaginationLinkProps) => {
   return (
     <PaginationLink active={active} disabled={disabled} {...props}>
       <svg
@@ -50,7 +62,7 @@ export const PaginationPrevious = ({ active = false, disabled = false, children,
   );
 };
 
-export const PaginationNext = ({ active = false, disabled = false, children, ...props }: PaginationLinkProps) => {
+export const PaginationNextLink = ({ active = false, disabled = false, children, ...props }: PaginationLinkProps) => {
   return (
     <PaginationLink active={active} disabled={disabled} {...props}>
       {children}

diff --git a/src/stories/common/Pagination.stories.tsx b/src/stories/common/Pagination.stories.tsx
@@ -7,7 +7,7 @@ import {
   PaginationContent,
   PaginationItem,
   PaginationLink,
-  PaginationPrevious,
+  PaginationPreviousLink,
 } from '../../';
 
 const meta = {
@@ -51,7 +51,7 @@ export const Disabled: Story = {
       return (
         <Pagination>
           <PaginationContent>
-            <PaginationPrevious disabled />
+            <PaginationPreviousLink disabled />
             {[1, 2, 3].map(page => (
               <PaginationItem key={page}>
                 <PaginationLink>{page}</PaginationLink>