@frontify/fondue
Version:
Design system of Frontify
82 lines (81 loc) • 2.2 kB
JavaScript
import { jsxs as E, jsx as t } from "react/jsx-runtime";
import { IconCaretUp as b, IconCaretDown as F, IconCalendar as I } from "@frontify/fondue-icons";
import { forwardRef as O } from "react";
import { TextInput as R } from "../TextInput/TextInput.es.js";
import { merge as l } from "../../utilities/merge.es.js";
import { Validation as a } from "../../utilities/validation.es.js";
const S = O(
({
value: s,
onClick: r,
isClearable: i,
placeHolder: f,
isCalendarOpen: w,
validation: e = a.Default,
onDateChanged: n,
hugWidth: d = !0,
"aria-label": m
}, g) => {
const u = e === a.Error || e === a.Warning, p = "tw-right-14", h = "tw-right-8", y = "tw-right-4", c = ((o) => {
switch (o) {
case 0:
return y;
case 1:
return h;
case 2:
return p;
}
return "";
})(
(s && i ? 1 : 0) + (u ? 1 : 0)
);
return /* @__PURE__ */ E("div", { ref: g, className: d ? "tw-w-auto" : "tw-w-full", children: [
/* @__PURE__ */ t(
"div",
{
className: l([
"tw-absolute tw-top-2 tw-text-black-60 tw-z-[1]",
c
]),
children: w ? /* @__PURE__ */ t(b, { size: 20 }) : /* @__PURE__ */ t(F, { size: 20 })
}
),
/* @__PURE__ */ t(
"div",
{
className: l([
"tw-absolute tw-top-0 tw-left-0 tw-bottom-0 tw-z-10",
c
]),
onClick: r,
role: "button",
tabIndex: 0,
onKeyDown: (o) => {
(o.key === "Enter" || o.key === " ") && (r == null || r());
},
"aria-label": m,
"data-test-id": "open-close-click-zone"
}
),
/* @__PURE__ */ t(
R,
{
decorator: /* @__PURE__ */ t(I, {}),
placeholder: f,
value: s,
clearable: i,
onEnterPressed: r,
onClear: () => {
n && n(null);
},
validation: e
}
)
] });
}
);
S.displayName = "FondueDatePickerTrigger";
export {
S as DatePickerTrigger
};
//# sourceMappingURL=DatePickerTrigger.es.js.map