@serendie/ui
Version:
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
197 lines (196 loc) • 7.49 kB
JavaScript
import { jsx as e, jsxs as n, Fragment as T } from "react/jsx-runtime";
import { date_picker_exports as r } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker.js";
import { Portal as _ } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
import { SerendieSymbolCalendar as q, SerendieSymbolArrowRight as L, SerendieSymbolChevronDown as B, SerendieSymbolChevronLeft as J, SerendieSymbolChevronRight as Y } from "@serendie/symbols";
import { forwardRef as z, useState as E } from "react";
import { datePickerStyles as S } from "./styles.js";
import { textFieldRecipe as x } from "../../recipes/textFieldRecipe.js";
import { useAutoPortalContainer as G } from "../../hooks/useAutoPortalContainer.js";
import { useTranslations as K } from "../../i18n/index.js";
import { css as t } from "../../styled-system/css/css.js";
import { cx as g } from "../../styled-system/css/cx.js";
const te = z(
({
placeholder: a,
label: s,
required: i,
requiredLabel: o,
invalid: c,
invalidMessage: m,
selectionMode: u = "single",
startPlaceholder: R,
endPlaceholder: w,
locale: N = "ja-JP",
isCalendarOnly: k = !1,
portalled: b = !0,
...d
}, f) => {
const h = K(), F = a ?? h("datePicker.selectDate"), I = R ?? h("datePicker.startDate"), D = w ?? h("datePicker.endDate"), W = S(), [O, j] = x.splitVariantProps({
...d
}), l = x(O), [C, p] = E(!1), A = u === "range", { triggerRef: H, portalContainerRef: V } = G(b);
return k ? /* @__PURE__ */ e(
r.Root,
{
locale: N,
...j,
ref: f,
selectionMode: u,
open: !0,
className: l.root,
children: /* @__PURE__ */ e(P, {})
}
) : /* @__PURE__ */ n(
r.Root,
{
locale: N,
...d,
ref: f,
selectionMode: u,
className: l.root,
open: C,
onOpenChange: (y) => {
var v;
p(y.open), (v = d.onOpenChange) == null || v.call(d, y);
},
children: [
/* @__PURE__ */ n(T, { children: [
s && /* @__PURE__ */ n(r.Label, { className: l.label, children: [
s,
i && /* @__PURE__ */ e("span", { className: l.labelRequired, children: o ?? h("common.required") })
] }),
/* @__PURE__ */ n(
r.Control,
{
className: g(
l.inputWrapper,
t({
_expanded: {
outlineWidth: "sd.system.dimension.border.thick",
outlineColor: "sd.system.color.impression.primary"
}
})
),
"data-expanded": C ? !0 : void 0,
"data-invalid": c ? !0 : void 0,
children: [
/* @__PURE__ */ e("div", { className: l.leftContent, children: /* @__PURE__ */ e(
r.Trigger,
{
className: t({ display: "flex" }),
ref: H,
children: /* @__PURE__ */ e(q, {})
}
) }),
A ? /* @__PURE__ */ n(
"div",
{
className: t({
display: "grid",
gridTemplateColumns: "1fr auto 1fr",
alignItems: "center"
}),
children: [
/* @__PURE__ */ e(
r.Input,
{
index: 0,
placeholder: I,
className: g(
l.input,
t({
minWidth: "100%",
borderRadius: "sd.system.dimension.radius.medium"
})
),
onFocus: () => p(!0)
}
),
/* @__PURE__ */ e(L, {}),
/* @__PURE__ */ e(
r.Input,
{
index: 1,
placeholder: D,
className: g(
l.input,
t({
minWidth: "100%",
borderRadius: "sd.system.dimension.radius.medium"
})
),
onFocus: () => p(!0)
}
)
]
}
) : /* @__PURE__ */ e(
r.Input,
{
placeholder: F,
className: l.input,
onFocus: () => p(!0)
}
),
/* @__PURE__ */ e("div", {})
]
}
),
c && m && /* @__PURE__ */ e("div", { className: l.messageField, children: /* @__PURE__ */ e("p", { className: l.invalidMessage, children: m }) })
] }),
/* @__PURE__ */ e(_, { disabled: !b, container: V, children: /* @__PURE__ */ e(r.Positioner, { className: W.positioner, children: /* @__PURE__ */ e(P, {}) }) })
]
}
);
}
), P = () => {
const a = S();
return /* @__PURE__ */ e(r.Content, { className: a.content, children: /* @__PURE__ */ e(r.View, { view: "day", className: a.view, children: /* @__PURE__ */ e(r.Context, { children: (s) => /* @__PURE__ */ n(T, { children: [
/* @__PURE__ */ n(r.ViewControl, { className: a.viewControl, children: [
/* @__PURE__ */ n("div", { className: a.selectWrapper, children: [
/* @__PURE__ */ e(r.YearSelect, { className: a.select }),
/* @__PURE__ */ e(B, { className: a.selectIcon })
] }),
/* @__PURE__ */ n("div", { className: t({ display: "flex", alignItems: "center" }), children: [
/* @__PURE__ */ e(r.PrevTrigger, { className: a.prevTrigger, children: /* @__PURE__ */ e(J, {}) }),
/* @__PURE__ */ e(
r.MonthSelect,
{
className: t({
appearance: "none",
textAlign: "center"
})
}
),
/* @__PURE__ */ e(r.NextTrigger, { className: a.nextTrigger, children: /* @__PURE__ */ e(Y, {}) })
] })
] }),
/* @__PURE__ */ n(r.Table, { className: a.table, children: [
/* @__PURE__ */ e(r.TableHead, { children: /* @__PURE__ */ e(r.TableRow, { children: s.weekDays.map((i, o) => /* @__PURE__ */ e(
r.TableHeader,
{
className: a.tableHeader,
children: i.narrow
},
o
)) }) }),
/* @__PURE__ */ e(r.TableBody, { children: s.weeks.map((i, o) => /* @__PURE__ */ e(r.TableRow, { children: i.map((c, m) => /* @__PURE__ */ e(
r.TableCell,
{
value: c,
className: a.tableCell,
children: /* @__PURE__ */ e(
r.TableCellTrigger,
{
className: a.tableCellTrigger,
children: c.day
}
)
},
m
)) }, o)) })
] })
] }) }) }) });
};
export {
te as DatePicker
};