@payfit/unity-components
Version:
64 lines (63 loc) • 2.93 kB
JavaScript
import { useState as e } from "react";
import { jsx as t, jsxs as n } from "react/jsx-runtime";
import { useIntl as r } from "react-intl";
import { IconSprite as i } from "@payfit/unity-icons";
import { useId as a } from "react-aria/useId";
//#region src/components/date-calendar/parts/DateSegmentSelect.tsx
function o({ items: o, value: s, onChange: c, type: l, isDisabled: u = !1 }) {
let d = (e) => () => o.find((t) => t.id === e)?.name ?? Array.from({ length: 3 }).join("\0"), f = a(), p = r(), [m, h] = e(d(s)), g = `${f}-calendar-${l}-select-label`, _ = `${f}-calendar-${l}-select`, v = `${f}-calendar-${l}-select-description`, y = l === "month" ? "unity:component:form-field:date-picker:segment-select:month:label" : "unity:component:form-field:date-picker:segment-select:year:label", b = l === "month" ? "unity:component:form-field:date-picker:segment-select:month:description" : "unity:component:form-field:date-picker:segment-select:year:description";
return /* @__PURE__ */ n("div", {
className: "uy:isolation-isolate uy:relative uy:inline-flex uy:items-center uy:cursor-pointer",
children: [
/* @__PURE__ */ t("label", {
id: g,
htmlFor: _,
className: "uy:sr-only",
"aria-hidden": "true",
children: p.formatMessage({
id: y,
defaultMessage: `Change current ${l}`
})
}),
/* @__PURE__ */ t("select", {
id: _,
value: s,
onChange: (e) => {
c(e.target.value), h(d(e.target.value));
},
disabled: u,
className: "uy:appearance-none uy:box-border uy:w-[var(--uy-selected-item-width)] uy:bg-transparent uy:border-none uy:rounded-50 uy:capitalize uy:text-content-form-enabled uy:typography-action-large uy:cursor-pointer uy:pr-300 uy:disabled:text-content-form-disabled uy:data-[focus-visible='true']:outline-2 uy:data-[focus-visible='true']:outline-offset-2 uy:data-[focus-visible='true']:outline-utility-focus-ring [background-color:transparent] [-webkit-tap-highlight-color:transparent]",
style: { "--uy-selected-item-width": `calc(var(--uy-spacing-300) + ${m.length}ch)` },
"aria-labelledby": g,
"aria-describedby": v,
children: o.map((e) => /* @__PURE__ */ t("option", {
value: e.id,
children: e.name
}, e.id))
}),
/* @__PURE__ */ t("div", {
className: "uy:absolute uy:right-0 uy:pointer-events-none uy:text-content-neutral-low",
children: /* @__PURE__ */ t(i, {
src: "CaretDownOutlined",
width: 20,
height: 20,
color: "inherit",
role: "presentation",
className: u ? "uy:text-content-form-disabled" : ""
})
}),
/* @__PURE__ */ t("span", {
id: v,
className: "uy:sr-only",
"aria-hidden": "true",
children: p.formatMessage({
id: b,
defaultMessage: `Press Enter or Space to change ${l}, then use up and down arrows to select a ${l}`
})
})
]
});
}
o.displayName = "DateSegmentSelect";
//#endregion
export { o as DateSegmentSelect };