@dndbuilder.com/react
Version:
Drag and drop builder for React
89 lines (88 loc) • 2.86 kB
JavaScript
"use client";
import { jsxs as d, jsx as a } from "react/jsx-runtime";
import { classNames as c } from "../../../../../utils.js";
import { useState as b, useEffect as u } from "react";
import { FiChevronLeft as h, FiChevronRight as n } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fi/index.js";
const j = (e, s) => {
const r = Math.min(Math.max(3, e), s - 2), m = Math.max(r - 2, 1), l = Math.max(r + 2, e);
let i = [];
for (let t = m; t <= l; ++t)
t > 0 && i.push(t);
return i;
}, A = ({
current: e,
totalPage: s,
onPageChange: r,
className: m,
...l
}) => {
const [i, t] = b([]), [x, v] = b(!1), [f, p] = b(!0);
return u(() => {
t(j(e, s)), v(e > 1), p(e < s);
}, [e]), /* @__PURE__ */ d(
"div",
{
className: c("inline-flex items-center justify-between gap-2 text-sm", m),
...l,
children: [
/* @__PURE__ */ a(
"button",
{
className: c(
"reset flex h-8 items-center justify-center rounded-sm border border-gray-300 px-4 text-gray-800",
x ? "hover:border-primary-500 hover:bg-primary-50 hover:text-primary-500" : "cursor-not-allowed text-gray-400 hover:bg-transparent"
),
disabled: !x,
onClick: () => {
r == null || r(e - 1);
},
children: /* @__PURE__ */ a(h, {})
}
),
i.map((o, y) => o == e ? /* @__PURE__ */ d(
"button",
{
disabled: !0,
className: "reset active flex h-8 w-8 cursor-not-allowed items-center justify-center rounded-sm border text-gray-400 hover:bg-transparent",
children: [
o,
" "
]
},
y
) : /* @__PURE__ */ d(
"button",
{
onClick: () => {
r == null || r(o);
},
className: "reset hover:border-primary-500 hover:bg-primary-50 hover:text-primary-500 flex h-8 w-8 items-center justify-center rounded-sm border text-gray-800",
children: [
o,
" "
]
},
y
)),
/* @__PURE__ */ a(
"button",
{
className: c(
"reset flex h-8 items-center justify-center rounded-sm border border-gray-300 px-4 text-gray-800",
f ? "hover:border-primary-500 hover:bg-primary-50 hover:text-primary-500" : "cursor-not-allowed text-gray-400 hover:bg-transparent"
),
disabled: !f,
onClick: () => {
r == null || r(e + 1);
},
children: /* @__PURE__ */ a(n, {})
}
)
]
}
);
};
export {
A as BlockPagination
};
//# sourceMappingURL=block-pagination.js.map