@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
222 lines (218 loc) • 8.27 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_chevron_left_icon = require('../icon/icons/chevron-left-icon.cjs');
const require_chevron_right_icon = require('../icon/icons/chevron-right-icon.cjs');
const require_chevrons_left_icon = require('../icon/icons/chevrons-left-icon.cjs');
const require_chevrons_right_icon = require('../icon/icons/chevrons-right-icon.cjs');
const require_ellipsis_icon = require('../icon/icons/ellipsis-icon.cjs');
const require_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
const require_icon_button = require('../button/icon-button.cjs');
const require_button_group = require('../button/button-group.cjs');
const require_pagination_style = require('./pagination.style.cjs');
const require_use_pagination = require('./use-pagination.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/components/pagination/pagination.tsx
const { PropsContext: PaginationPropsContext, usePropsContext: usePaginationPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("pagination", require_pagination_style.paginationStyle);
/**
* `Pagination` is a component for managing the pagination and navigation of content.
*
* @see https://yamada-ui.com/docs/components/pagination
*/
const PaginationRoot = withProvider(({ size, variant, children, withControls = true, withEdges = false, controlNextProps, controlPrevProps, controlProps, edgeEndProps, edgeProps, edgeStartProps, ellipsisProps, itemProps,...rest }) => {
const { currentPage, disabled, range, total, getEndTriggerProps, getItemProps, getNextTriggerProps, getPrevTriggerProps, getRootProps, getStartTriggerProps, onChange, onChangeEnd, onChangeNext, onChangePrev, onChangeStart } = require_use_pagination.usePagination(rest);
const context = (0, react.useMemo)(() => ({
currentPage,
disabled,
range,
total,
getEndTriggerProps,
getItemProps,
getNextTriggerProps,
getPrevTriggerProps,
getStartTriggerProps,
onChange,
onChangeEnd,
onChangeNext,
onChangePrev,
onChangeStart
}), [
currentPage,
disabled,
range,
total,
getEndTriggerProps,
getItemProps,
getNextTriggerProps,
getPrevTriggerProps,
getStartTriggerProps,
onChange,
onChangeEnd,
onChangeNext,
onChangePrev,
onChangeStart
]);
const computedChildren = (0, react.useMemo)(() => {
if (children) return children;
else {
const children$1 = [];
if (withEdges) children$1.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationStartTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationItem, {
icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevrons_left_icon.ChevronsLeftIcon, {}),
...edgeProps,
...edgeStartProps
}) }));
if (withControls) children$1.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationPrevTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationItem, {
icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevron_left_icon.ChevronLeftIcon, {}),
...controlProps,
...controlPrevProps
}) }));
children$1.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationItems, { render: (page) => (0, require_utils_index.utils_exports.isNumber)(page) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationItem, {
...itemProps,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.span, {
role: "presentation",
children: page
})
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationItem, {
as: "span",
icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ellipsis_icon.EllipsisIcon, {}),
...ellipsisProps
}) }));
if (withControls) children$1.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationNextTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationItem, {
icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevron_right_icon.ChevronRightIcon, {}),
...controlProps,
...controlNextProps
}) }));
if (withEdges) children$1.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationEndTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationItem, {
icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevrons_right_icon.ChevronsRightIcon, {}),
...edgeProps,
...edgeEndProps
}) }));
return children$1;
}
}, [
children,
withEdges,
withControls,
itemProps,
ellipsisProps,
edgeProps,
edgeStartProps,
edgeEndProps,
controlProps,
controlPrevProps,
controlNextProps
]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_pagination.PaginationContext, {
value: context,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button_group.ButtonGroupRoot, {
as: "nav",
size,
variant,
...getRootProps(),
children: computedChildren
})
});
}, "root", { transferProps: ["variant", "size"] })();
const PaginationItems = ({ children, render }) => {
const { range, getItemProps } = require_use_pagination.usePaginationContext();
return (0, react.useMemo)(() => range.map((page, index) => {
const component = children?.(page) ?? render?.(page);
if ((0, react.isValidElement)(component)) return (0, react.cloneElement)(component, { ...getItemProps({
key: index,
page,
...component.props
}) });
else return component;
}), [
children,
getItemProps,
range,
render
]);
};
const PaginationItem = withContext(require_icon_button.IconButton, "item")();
const PaginationText = withContext("span", "text")(void 0, ({ children, format = "compact",...rest }) => {
const { currentPage, total } = require_use_pagination.usePaginationContext();
const { t } = require_i18n_provider.useI18n("pagination");
const computedChildren = (0, react.useMemo)(() => {
if (children) return (0, require_utils_index.utils_exports.runIfFn)(children, {
page: currentPage,
total
});
else if (format === "short") return t("{value} / {total}", {
total,
value: currentPage
});
else return t("{value} of {total}", {
total,
value: currentPage
});
}, [
children,
currentPage,
format,
total,
t
]);
return {
...rest,
children: computedChildren
};
});
const PaginationStartTrigger = withContext("button", {
name: "startTrigger",
slot: ["trigger", "start"]
})(void 0, (props) => {
const { getStartTriggerProps } = require_use_pagination.usePaginationContext();
return {
asChild: true,
...getStartTriggerProps(props)
};
});
const PaginationEndTrigger = withContext("button", {
name: "endTrigger",
slot: ["trigger", "end"]
})(void 0, (props) => {
const { getEndTriggerProps } = require_use_pagination.usePaginationContext();
return {
asChild: true,
...getEndTriggerProps(props)
};
});
const PaginationPrevTrigger = withContext("button", {
name: "prevTrigger",
slot: ["trigger", "prev"]
})(void 0, (props) => {
const { getPrevTriggerProps } = require_use_pagination.usePaginationContext();
return {
asChild: true,
...getPrevTriggerProps(props)
};
});
const PaginationNextTrigger = withContext("button", {
name: "nextTrigger",
slot: ["trigger", "next"]
})(void 0, (props) => {
const { getNextTriggerProps } = require_use_pagination.usePaginationContext();
return {
asChild: true,
...getNextTriggerProps(props)
};
});
//#endregion
exports.PaginationEndTrigger = PaginationEndTrigger;
exports.PaginationItem = PaginationItem;
exports.PaginationItems = PaginationItems;
exports.PaginationNextTrigger = PaginationNextTrigger;
exports.PaginationPrevTrigger = PaginationPrevTrigger;
exports.PaginationPropsContext = PaginationPropsContext;
exports.PaginationRoot = PaginationRoot;
exports.PaginationStartTrigger = PaginationStartTrigger;
exports.PaginationText = PaginationText;
exports.usePaginationPropsContext = usePaginationPropsContext;
//# sourceMappingURL=pagination.cjs.map