@undp/design-system-react/dist/Pagination-C7dHfirZ.cjs.map

React based design system for UNDP

{"version":3,"file":"Pagination-C7dHfirZ.cjs","names":[],"sources":["../src/components/ui/Pagination/pagination.tsx","../src/components/ui/Pagination/index.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';\nimport React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nfunction PaginationUnit({ className, ...props }: React.ComponentProps<'nav'>) {\n  return (\n    <nav\n      {...props}\n      aria-label='pagination'\n      className={cn('mx-auto flex w-full justify-center', className)}\n    />\n  );\n}\nPaginationUnit.displayName = 'PaginationUnit';\n\nconst PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(\n  ({ className, ...props }, ref) => (\n    <ul\n      {...props}\n      ref={ref}\n      className={cn('flex list-none flex-row items-center gap-1', className)}\n    />\n  ),\n);\nPaginationContent.displayName = 'PaginationContent';\n\nconst PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(\n  ({ className, ...props }, ref) => (\n    <li {...props} ref={ref} className={cn('mr-2 last:mr-0', className)} />\n  ),\n);\nPaginationItem.displayName = 'PaginationItem';\n\nfunction PaginationLink({\n  className,\n  children,\n  ...props\n}: React.ButtonHTMLAttributes<HTMLButtonElement>) {\n  return (\n    <button\n      {...props}\n      type='button'\n      className={cn('p-4 text-base text-content-primary', className)}\n    >\n      {children}\n    </button>\n  );\n}\nPaginationLink.displayName = 'PaginationLink';\n\nfunction PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      {...props}\n      aria-label='Go to previous page'\n      className={cn(\n        'rounded-full bg-surface p-2 hover:bg-surface-hover rtl:scale-x-[-1]',\n        className,\n      )}\n    >\n      <ChevronLeft className='h-6 w-6 stroke-foreground' />\n    </PaginationLink>\n  );\n}\nPaginationPrevious.displayName = 'PaginationPrevious';\n\nfunction PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      {...props}\n      aria-label='Go to next page'\n      className={cn(\n        'rounded-full bg-surface p-2 hover:bg-surface-hover rtl:scale-x-[-1]',\n        className,\n      )}\n    >\n      <ChevronRight className='h-6 w-6 stroke-foreground' />\n    </PaginationLink>\n  );\n}\nPaginationNext.displayName = 'PaginationNext';\n\nfunction PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      {...props}\n      aria-hidden\n      className={cn('flex h-9 w-9 items-center justify-center', className)}\n    >\n      <MoreHorizontal className='h-4 w-4 text-content-primary' />\n      <span className='sr-only'>More pages</span>\n    </span>\n  );\n}\nPaginationEllipsis.displayName = 'PaginationEllipsis';\n\nexport {\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n  PaginationUnit,\n};\n","import { useEffect, useState } from 'react';\nimport { cn } from '@/lib/utils';\nimport {\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n  PaginationUnit,\n} from './pagination';\n\nconst getPageNumbers = (currentPageNo: number, totalPages: number) => {\n  const pages: (number | 'ellipsis')[] = [];\n\n  if (totalPages <= 7) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  // Always show first page\n  pages.push(1);\n\n  if (currentPageNo <= 3) {\n    pages.push(2, 3, 4, 'ellipsis');\n  } else if (currentPageNo >= totalPages - 2) {\n    pages.push('ellipsis', totalPages - 3, totalPages - 2, totalPages - 1);\n  } else {\n    pages.push('ellipsis', currentPageNo - 1, currentPageNo, currentPageNo + 1, 'ellipsis');\n  }\n\n  // Always show last page\n  pages.push(totalPages);\n\n  return pages;\n};\n\nfunction Pagination(props: {\n  defaultPage?: number;\n  total: number;\n  pageSize: number;\n  onChange: (page: number) => void;\n  className?: string;\n  classNames?: {\n    control?: string;\n    list?: string;\n    navigation?: string;\n    ellipsis?: string;\n    active?: string;\n  };\n}) {\n  const { defaultPage = 1, total, pageSize, onChange, className, classNames } = props;\n  const totalPages = Math.ceil(total / pageSize);\n  const [currentPage, setCurrentPage] = useState(defaultPage);\n  const [pageNumbers, setPageNumbers] = useState<(number | 'ellipsis')[]>(\n    getPageNumbers(defaultPage, totalPages),\n  );\n\n  useEffect(() => {\n    setPageNumbers(getPageNumbers(currentPage, totalPages));\n  }, [currentPage, totalPages]);\n  return (\n    <PaginationUnit className={cn('select-none', className, classNames?.control)}>\n      <PaginationContent>\n        <PaginationItem>\n          <PaginationPrevious\n            onClick={() => {\n              if (currentPage > 1) {\n                onChange(currentPage - 1);\n                setCurrentPage(currentPage - 1);\n              }\n            }}\n            className={cn(\n              'cursor-pointer',\n              classNames?.navigation,\n              currentPage <= 1 && 'pointer-events-none cursor-not-allowed opacity-35',\n            )}\n          />\n        </PaginationItem>\n\n        {pageNumbers.map((page) => (\n          <PaginationItem key={page}>\n            {page === 'ellipsis' ? (\n              <PaginationEllipsis className={classNames?.ellipsis} />\n            ) : (\n              <PaginationLink\n                onClick={() => {\n                  setCurrentPage(page);\n                  onChange(page);\n                }}\n                className={cn(\n                  'flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-full hover:bg-surface-hover',\n                  classNames?.list,\n                  page === currentPage && [\n                    'bg-secondary text-content-reverse hover:bg-secondary-hover',\n                    classNames?.active,\n                  ],\n                )}\n              >\n                {page}\n              </PaginationLink>\n            )}\n          </PaginationItem>\n        ))}\n\n        <PaginationItem>\n          <PaginationNext\n            onClick={() => {\n              if (currentPage < totalPages) {\n                onChange(currentPage + 1);\n                setCurrentPage(currentPage + 1);\n              }\n            }}\n            className={cn(\n              'cursor-pointer',\n              classNames?.navigation,\n              currentPage >= totalPages && 'pointer-events-none cursor-not-allowed opacity-35',\n            )}\n          />\n        </PaginationItem>\n      </PaginationContent>\n    </PaginationUnit>\n  );\n}\n\nexport { Pagination };\n"],"mappings":"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"}