@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
59 lines (58 loc) • 2.08 kB
JavaScript
"use client";
import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
import { polymorphic } from "../../../core/factory/create-polymorphic-component.mjs";
import { usePaginationContext } from "../Pagination.context.mjs";
import { PaginationControl } from "../PaginationControl/PaginationControl.mjs";
import { PaginationFirstIcon, PaginationLastIcon, PaginationNextIcon, PaginationPreviousIcon } from "../Pagination.icons.mjs";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Pagination/PaginationEdges/PaginationEdges.tsx
function createEdgeComponent({ icon, name, action, type }) {
const defaultProps = { icon };
const Component = (props) => {
const { icon: Icon, ...others } = useProps(name, defaultProps, props);
const ctx = usePaginationContext();
const disabled = type === "next" ? ctx.active === ctx.total : ctx.active === 1;
return /* @__PURE__ */ jsx(PaginationControl, {
disabled: ctx.disabled || disabled,
onClick: ctx[action],
withPadding: false,
...others,
children: /* @__PURE__ */ jsx(Icon, {
className: "mantine-rotate-rtl",
style: {
width: "calc(var(--pagination-control-size) / 1.8)",
height: "calc(var(--pagination-control-size) / 1.8)"
}
})
});
};
Component.displayName = `@mantine/core/${name}`;
return polymorphic(Component);
}
const PaginationNext = createEdgeComponent({
icon: PaginationNextIcon,
name: "PaginationNext",
action: "onNext",
type: "next"
});
const PaginationPrevious = createEdgeComponent({
icon: PaginationPreviousIcon,
name: "PaginationPrevious",
action: "onPrevious",
type: "previous"
});
const PaginationFirst = createEdgeComponent({
icon: PaginationFirstIcon,
name: "PaginationFirst",
action: "onFirst",
type: "previous"
});
const PaginationLast = createEdgeComponent({
icon: PaginationLastIcon,
name: "PaginationLast",
action: "onLast",
type: "next"
});
//#endregion
export { PaginationFirst, PaginationLast, PaginationNext, PaginationPrevious };
//# sourceMappingURL=PaginationEdges.mjs.map