@frontify/fondue
Version:
Design system of Frontify
154 lines (153 loc) • 4.97 kB
JavaScript
import { jsx as e, jsxs as d } from "react/jsx-runtime";
/* empty css */
import { shift as V, offset as Y } from "@floating-ui/dom";
import { format as q, getYear as G } from "date-fns";
import { forwardRef as J, useState as O } from "react";
import D from "react-datepicker";
import { createPortal as Q } from "react-dom";
import U from "../../foundation/Icon/Generated/IconCaretLeft.es.js";
import X from "../../foundation/Icon/Generated/IconCaretLeftDouble.es.js";
import Z from "../../foundation/Icon/Generated/IconCaretRight.es.js";
import _ from "../../foundation/Icon/Generated/IconCaretRightDouble.es.js";
import { IconSize as a } from "../../foundation/Icon/IconSize.es.js";
import { merge as $ } from "../../utilities/merge.es.js";
import { Validation as ee } from "../../utilities/validation.es.js";
import { DatePickerTrigger as te } from "./DatePickerTrigger.es.js";
import { Button as i } from "../Button/Button.es.js";
import { ButtonEmphasis as o, ButtonSize as s, ButtonStyle as n } from "../Button/ButtonTypes.es.js";
const re = D.default ?? D, ae = (m, r) => m === "single" ? r < /* @__PURE__ */ new Date() ? "past-date" : "future-date" : "range-day", ie = J(
({
placeHolder: m = "Select a date",
isClearable: r,
shouldCloseOnSelect: k,
onChange: p,
onOpen: l,
onClose: c,
onBlur: g,
onKeyDown: h,
dateFormat: C = "MMM dd, yyyy",
value: z,
startDate: M,
endDate: S,
minDate: x,
maxDate: P,
validation: I = ee.Default,
customTrigger: N,
customHeader: R,
children: b,
hasPopperArrow: W = !0,
preventOpenOnFocus: v = !1,
inline: f = !1,
filterDate: B = () => !0,
variant: u = "single",
"data-test-id": j = "date-picker"
}, L) => {
const [w, y] = O(!1), A = () => {
y(!0), l == null || l();
}, E = () => {
y(!1), c == null || c();
};
return /* @__PURE__ */ e("div", { "data-test-id": j, children: /* @__PURE__ */ e(
re,
{
calendarClassName: $([
"react-datepicker-wrap tw-pointer-events-auto",
f && "react-datepicker-inline"
]),
inline: f,
selected: z,
startDate: M,
endDate: S,
minDate: x,
maxDate: P,
calendarStartDay: 1,
onChange: p,
onKeyDown: w ? void 0 : h,
onBlur: g,
selectsRange: u === "range",
showPopperArrow: W,
preventOpenOnFocus: v,
filterDate: B,
customInput: N ?? /* @__PURE__ */ e(
te,
{
isCalendarOpen: w,
isClearable: r,
placeHolder: m,
validation: I,
onDateChanged: p
}
),
ref: L,
formatWeekDay: (t) => t.slice(0, 1),
isClearable: r,
dateFormat: C,
onCalendarClose: E,
onCalendarOpen: A,
shouldCloseOnSelect: k,
dayClassName: (t) => ae(u, t),
popperProps: {
strategy: "fixed"
},
popperContainer: ({ children: t }) => Q(t, document.body),
popperModifiers: [V({ padding: 8 }), Y(8)],
renderCustomHeader: ({ date: t, decreaseMonth: F, increaseMonth: H, increaseYear: K, decreaseYear: T }) => /* @__PURE__ */ d("div", { className: "tw-flex tw-flex-col tw-gap-3", children: [
R,
/* @__PURE__ */ d("div", { className: "tw-flex tw-justify-between tw-pb-4 tw-px-0", children: [
/* @__PURE__ */ e(
i,
{
style: n.Default,
size: s.Medium,
onClick: T,
emphasis: o.Weak,
icon: /* @__PURE__ */ e(X, { size: a.Size20 })
}
),
/* @__PURE__ */ e(
i,
{
style: n.Default,
size: s.Medium,
onClick: F,
emphasis: o.Weak,
icon: /* @__PURE__ */ e(U, { size: a.Size20 })
}
),
/* @__PURE__ */ d("p", { className: "tw-font-sans tw-font-semibold tw-grow tw-self-center", children: [
q(t, "MMMM"),
" ",
G(t)
] }),
/* @__PURE__ */ e(
i,
{
style: n.Default,
size: s.Medium,
onClick: H,
emphasis: o.Weak,
icon: /* @__PURE__ */ e(Z, { size: a.Size20 })
}
),
/* @__PURE__ */ e(
i,
{
style: n.Default,
size: s.Medium,
onClick: K,
emphasis: o.Weak,
icon: /* @__PURE__ */ e(_, { size: a.Size20 })
}
)
] })
] }),
children: b
}
) });
}
);
ie.displayName = "FondueDatePicker";
export {
ie as DatePicker
};
//# sourceMappingURL=DatePicker.es.js.map