@yamada-ui/pagination
Version:
Yamada UI pagination component
123 lines (122 loc) • 4.32 kB
JavaScript
"use client"
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/use-pagination.ts
var use_pagination_exports = {};
__export(use_pagination_exports, {
PaginationProvider: () => PaginationProvider,
computedRange: () => computedRange,
usePagination: () => usePagination,
usePaginationContext: () => usePaginationContext
});
module.exports = __toCommonJS(use_pagination_exports);
var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
var import_use_value = require("@yamada-ui/use-value");
var import_utils = require("@yamada-ui/utils");
var import_react = require("react");
var [PaginationProvider, usePaginationContext] = (0, import_utils.createContext)({
name: "PaginationContext",
errorMessage: `usePaginationContext returned is 'undefined'. Seems you forgot to wrap the components in "<Pagination />"`
});
var computedRange = (start, end) => Array.from({ length: end - start + 1 }, (_, index) => index + start);
var usePagination = ({
boundaries: _boundaries = 1,
defaultPage = 1,
isDisabled = false,
disabled = isDisabled,
page,
siblings: _siblings = 1,
total,
onChange: onChangeProp
}) => {
const siblings = (0, import_use_value.useValue)(_siblings);
const boundaries = (0, import_use_value.useValue)(_boundaries);
const [currentPage, setCurrentPage] = (0, import_use_controllable_state.useControllableState)({
defaultValue: defaultPage,
value: page,
onChange: onChangeProp
});
const range = (0, import_react.useMemo)(() => {
const minimumTotal = siblings * 2 + 3 + boundaries * 2;
if (minimumTotal >= total) return computedRange(1, total);
const prevSiblings = Math.max(currentPage - siblings, boundaries);
const nextSiblings = Math.min(currentPage + siblings, total - boundaries);
const prevDots = prevSiblings > boundaries + 2;
const nextDots = nextSiblings < total - (boundaries + 1);
if (!prevDots && nextDots) {
const prevPages = siblings * 2 + boundaries + 2;
return [
...computedRange(1, prevPages),
"ellipsis",
...computedRange(total - (boundaries - 1), total)
];
}
if (prevDots && !nextDots) {
const nextPages = boundaries + 1 + 2 * siblings;
return [
...computedRange(1, boundaries),
"ellipsis",
...computedRange(total - nextPages, total)
];
}
return [
...computedRange(1, boundaries),
"ellipsis",
...computedRange(prevSiblings, nextSiblings),
"ellipsis",
...computedRange(total - boundaries + 1, total)
];
}, [boundaries, siblings, currentPage, total]);
const onFirst = (0, import_react.useCallback)(() => setCurrentPage(1), [setCurrentPage]);
const onLast = (0, import_react.useCallback)(
() => setCurrentPage(total),
[setCurrentPage, total]
);
const onPrev = (0, import_react.useCallback)(
() => setCurrentPage((prev) => prev === 1 ? prev : prev - 1),
[setCurrentPage]
);
const onNext = (0, import_react.useCallback)(
() => setCurrentPage((prev) => prev === total ? prev : prev + 1),
[setCurrentPage, total]
);
const onChange = (0, import_react.useCallback)(
(page2) => setCurrentPage(page2),
[setCurrentPage]
);
return {
currentPage,
disabled,
range,
total,
onChange,
onFirst,
onLast,
onNext,
onPrev
};
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
PaginationProvider,
computedRange,
usePagination,
usePaginationContext
});
//# sourceMappingURL=use-pagination.js.map