@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
1 lines • 9.56 kB
Source Map (JSON)
{"version":3,"file":"use-pagination.cjs","names":["createContext","useControllableState","useI18n","page","getRootProps: PropGetter","mergeRefs","getItemProps: PropGetter<\"button\", { page?: Page }>","getStartTriggerProps: PropGetter<\"button\">","getEndTriggerProps: PropGetter<\"button\">","getPrevTriggerProps: PropGetter<\"button\">"],"sources":["../../../../src/components/pagination/use-pagination.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useMemo } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { createContext, handlerAll, isNumber, mergeRefs } from \"../../utils\"\n\nexport type Page = \"ellipsis\" | number\n\ninterface PaginationContext extends Omit<UsePaginationReturn, \"getRootProps\"> {}\n\nconst [PaginationContext, usePaginationContext] =\n createContext<PaginationContext>({\n name: \"PaginationContext\",\n })\n\nexport { PaginationContext, usePaginationContext }\n\nexport interface UsePaginationProps\n extends Omit<HTMLProps, \"onChange\" | \"page\"> {\n /**\n * The total number of pages in pagination.\n */\n total: number\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: number\n /**\n * The initial page of the pagination.\n * Should be less than `total` and greater than `1`.\n *\n * @default 1\n */\n defaultPage?: number\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * The page of the pagination.\n * Should be less than `total` and greater than `1`.\n */\n page?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: number\n /**\n * The callback invoked when the page changes.\n */\n onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n boundaries = 1,\n defaultPage = 1,\n disabled = false,\n page,\n siblings = 1,\n total,\n onChange: onChangeProp,\n ...rest\n}: UsePaginationProps) => {\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\n })\n const { t } = useI18n(\"pagination\")\n const range = useMemo((): Page[] => {\n const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(currentPage - siblings, boundaries)\n const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n const prevDots = prevSiblings > boundaries + 2\n const nextDots = nextSiblings < total - (boundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = siblings * 2 + boundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"ellipsis\",\n ...computedRange(total - (boundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = boundaries + 1 + 2 * siblings\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(prevSiblings, nextSiblings),\n \"ellipsis\",\n ...computedRange(total - boundaries + 1, total),\n ]\n }, [boundaries, siblings, currentPage, total])\n\n const onChange = useCallback(\n (page: number) => setCurrentPage(Math.max(1, Math.min(total, page))),\n [setCurrentPage, total],\n )\n\n const onChangeStart = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n const onChangeEnd = useCallback(\n () => setCurrentPage(total),\n [setCurrentPage, total],\n )\n\n const onChangePrev = useCallback(\n () => setCurrentPage((prev) => Math.max(1, prev - 1)),\n [setCurrentPage],\n )\n\n const onChangeNext = useCallback(\n () => setCurrentPage((prev) => Math.min(total, prev + 1)),\n [setCurrentPage, total],\n )\n\n const getRootProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n ...rest,\n ...props,\n ref: mergeRefs(ref, rest.ref),\n \"aria-label\": t(\"Pagination\"),\n role: \"navigation\",\n }),\n [rest, t],\n )\n\n const getItemProps: PropGetter<\"button\", { page?: Page }> = useCallback(\n ({ page, ...props } = {}) => {\n if (isNumber(page)) {\n return {\n type: \"button\",\n \"aria-current\": currentPage === page ? \"page\" : undefined,\n \"aria-label\": t(\"Go to page {value}\", { value: page }),\n disabled,\n ...props,\n onClick: handlerAll(props.onClick, () => onChange(page)),\n }\n } else {\n return { ...props, \"data-ellipsis\": \"\" }\n }\n },\n [currentPage, t, onChange, disabled],\n )\n\n const getStartTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n type: \"button\",\n \"aria-label\": t(\"Go to first page\"),\n disabled: disabled || currentPage === 1,\n ...props,\n onClick: handlerAll(props.onClick, onChangeStart),\n }),\n [onChangeStart, t, disabled, currentPage],\n )\n\n const getEndTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n type: \"button\",\n \"aria-label\": t(\"Go to last page\"),\n disabled: disabled || currentPage === total,\n ...props,\n onClick: handlerAll(props.onClick, onChangeEnd),\n }),\n [onChangeEnd, t, disabled, currentPage, total],\n )\n\n const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n type: \"button\",\n \"aria-label\": t(\"Go to previous page\"),\n disabled: disabled || currentPage === 1,\n ...props,\n onClick: handlerAll(props.onClick, onChangePrev),\n }),\n [onChangePrev, t, disabled, currentPage],\n )\n\n const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n type: \"button\",\n \"aria-label\": t(\"Go to next page\"),\n disabled: disabled || currentPage === total,\n ...props,\n onClick: handlerAll(props.onClick, onChangeNext),\n }),\n [onChangeNext, t, disabled, currentPage, total],\n )\n\n return {\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n\nconst computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n"],"mappings":"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"}