@payfit/unity-components
Version:
112 lines (111 loc) • 4.48 kB
JavaScript
import { Icon as e } from "../../icon/Icon.js";
import { Button as t } from "../../button/Button.js";
import { Label as n } from "../../label/Label.js";
import { useRef as r } from "react";
import { uyTv as i } from "@payfit/unity-themes";
import { useButton as a } from "react-aria/useButton";
import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
import { useIntl as l } from "react-intl";
import { useOverlay as u } from "react-aria/useOverlay";
import { useOverlayTrigger as d } from "react-aria/useOverlayTrigger";
//#region src/components/client-side-pagination/parts/PaginationJumpDialog.tsx
var f = i({ slots: {
jumpButton: "uy:sr-only uy:outline-none uy:focus:not-sr-only uy:focus:absolute uy:focus:bottom-full uy:focus:z-10 uy:focus:m-100 uy:focus:rounded-50 uy:focus:underline uy:focus:bg-transparent uy:focus:text-content-primary uy:focus:typography-action uy:focus:ring-2 uy:focus:ring-offset-2 uy:focus:ring-utility-focus-ring",
jumpPopover: "uy:fixed uy:top-1/2 uy:left-1/2 uy:z-20 uy:transform uy:-translate-x-1/2 uy:-translate-y-1/2 uy:bg-surface-neutral uy:p-200 uy:rounded-200 uy:shadow-floating",
jumpForm: "uy:flex uy:flex-col uy:gap-100",
jumpFieldLabel: "uy:typography-body",
jumpFieldWrapper: "uy:mt-50 uy:flex uy:w-full uy:items-center uy:h-500 uy:border uy:border-solid uy:rounded-100 uy:border-border-form-enabled uy:bg-surface-form-enabled uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active",
jumpInput: "uy:pl-100 uy:flex-1 uy:outline-none uy:appearance-none uy:[&::-webkit-outer-spin-button]:appearance-none uy:[&::-webkit-inner-spin-button]:appearance-none",
jumpActions: "uy:flex uy:gap-150 uy:justify-end uy:mt-100"
} });
function p({ pageCount: i, onJumpToPage: p, state: m }) {
let h = l(), g = r(null), _ = r(null), v = r(null), { triggerProps: y } = d({ type: "dialog" }, m, g), { buttonProps: b } = a({
...y,
"aria-label": h.formatMessage({
id: "unity:component:pagination:jump-dialog:button:text",
defaultMessage: "Jump to page"
})
}, g), { overlayProps: x } = u({
isOpen: m.isOpen,
onClose: m.close.bind(m),
shouldCloseOnBlur: !0,
isDismissable: !0
}, _), S = (e) => {
e.preventDefault();
let t = parseInt(v.current?.value || "", 10);
t >= 1 && t <= i && (p(t), m.close());
}, { jumpButton: C, jumpPopover: w, jumpForm: T, jumpFieldLabel: E, jumpFieldWrapper: D, jumpInput: O, jumpActions: k } = f();
return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("button", {
...b,
ref: g,
className: C(),
"aria-expanded": m.isOpen ? "true" : "false",
children: h.formatMessage({
id: "unity:component:pagination:jump-dialog:button:text",
defaultMessage: "Jump to page"
})
}), m.isOpen && /* @__PURE__ */ s("div", {
...x,
ref: _,
className: w(),
"aria-label": h.formatMessage({
id: "unity:component:pagination:jump-dialog:overlay:label",
defaultMessage: "Jump to page"
}),
children: /* @__PURE__ */ c("form", {
onSubmit: S,
className: T(),
children: [
/* @__PURE__ */ s(n, {
className: E(),
htmlFor: `jump-to-page-${x.id}-input`,
children: h.formatMessage({
id: "unity:component:pagination:jump-dialog:input:label",
defaultMessage: "Enter page number (between 1 and {total})"
}, { total: i })
}),
/* @__PURE__ */ c("div", {
className: D(),
children: [/* @__PURE__ */ s("input", {
ref: v,
type: "number",
min: 1,
max: i,
className: O(),
id: `jump-to-page-${x.id}-input`,
autoFocus: !0,
onKeyDown: (e) => {
e.key === "Escape" && m.close();
}
}), /* @__PURE__ */ s(e, {
src: "CaretUpDownOutlined",
role: "presentation",
color: "content.neutral.low",
className: "uy:mx-50",
size: 20
})]
}),
/* @__PURE__ */ c("div", {
className: k(),
children: [/* @__PURE__ */ s(t, {
variant: "ghost",
onPress: m.close.bind(m),
children: h.formatMessage({
id: "unity:component:pagination:jump-dialog:action:cancel",
defaultMessage: "Cancel"
})
}), /* @__PURE__ */ s(t, {
type: "submit",
variant: "primary",
children: h.formatMessage({
id: "unity:component:pagination:jump-dialog:action:go",
defaultMessage: "Go"
})
})]
})
]
})
})] });
}
//#endregion
export { p as PaginationJumpDialog };