@yamada-ui/calendar
Version:
Yamada UI calendar component
239 lines (237 loc) • 8.27 kB
JavaScript
"use client"
import {
useMonth
} from "./chunk-5B5Z44KW.mjs";
import {
CalendarHeader
} from "./chunk-D7INJNSZ.mjs";
import {
useCalendarContext
} from "./chunk-UMK6LUR5.mjs";
import {
getFormattedLabel,
getMonthDays,
getWeekdays
} from "./chunk-BPJGE3HG.mjs";
// src/month.tsx
import { Button } from "@yamada-ui/button";
import { ui } from "@yamada-ui/core";
import {
cx,
dataAttr,
filterUndefined,
isBoolean,
isNull,
isUndefined
} from "@yamada-ui/utils";
import dayjs from "dayjs";
import { useMemo } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var Month = ({
className,
controlProps,
dayProps,
headerProps,
labelProps,
nextProps,
prevProps,
tableProps,
weekdayProps,
...rest
}) => {
var _a, _b, _c, _d, _e, _f;
const {
amountOfMonths,
dateFormat,
firstDayOfWeek,
locale,
month: selectedMonth,
styles,
weekdayFormat,
withWeekdays
} = useCalendarContext();
const { getButtonProps, getGridProps } = useMonth();
const { component: customWeekday = Weekday, ...computedWeekdayProps } = weekdayProps != null ? weekdayProps : {};
const { component: customDay = Day, ...computedDayProps } = dayProps != null ? dayProps : {};
const {
tbody: tbodyProps,
td: tdProps,
th: thProps,
thead: theadProps,
tr: trProps,
...computedTableProps
} = tableProps != null ? tableProps : {};
const weekdays = useMemo(
() => getWeekdays(locale, firstDayOfWeek, weekdayFormat),
[firstDayOfWeek, locale, weekdayFormat]
);
const w = (_a = rest.w) != null ? _a : rest.width;
const minW = (_b = rest.minW) != null ? _b : rest.minWidth;
const maxW = (_c = rest.maxW) != null ? _c : rest.maxWidth;
const h = (_d = rest.h) != null ? _d : rest.height;
const minH = (_e = rest.minH) != null ? _e : rest.minHeight;
const maxH = (_f = rest.maxH) != null ? _f : rest.maxHeight;
return /* @__PURE__ */ jsx(Fragment, { children: Array(amountOfMonths).fill(0).map((_, index) => {
var _a2, _b2, _c2, _d2, _e2, _f2, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
const month = dayjs(selectedMonth).add(index, "months").toDate();
const days = getMonthDays(month, firstDayOfWeek);
const formattedLabel = getFormattedLabel(month, locale, dateFormat);
return /* @__PURE__ */ jsxs(
ui.div,
{
__css: { ...styles.content },
...filterUndefined(rest),
children: [
/* @__PURE__ */ jsx(
CalendarHeader,
{
...{
...headerProps,
index,
label: formattedLabel,
controlProps,
labelProps,
nextProps,
prevProps
}
}
),
/* @__PURE__ */ jsxs(
ui.table,
{
className: cx("ui-calendar__month", className),
__css: {
h: (_c2 = (_a2 = styles.content) == null ? void 0 : _a2.h) != null ? _c2 : (_b2 = styles.content) == null ? void 0 : _b2.height,
maxH: (_f2 = (_d2 = styles.content) == null ? void 0 : _d2.maxH) != null ? _f2 : (_e2 = styles.content) == null ? void 0 : _e2.maxHeight,
maxW: (_i = (_g = styles.content) == null ? void 0 : _g.maxW) != null ? _i : (_h = styles.content) == null ? void 0 : _h.maxWidth,
minH: (_l = (_j = styles.content) == null ? void 0 : _j.minH) != null ? _l : (_k = styles.content) == null ? void 0 : _k.minHeight,
minW: (_o = (_m = styles.content) == null ? void 0 : _m.minW) != null ? _o : (_n = styles.content) == null ? void 0 : _n.minWidth,
w: (_r = (_p = styles.content) == null ? void 0 : _p.w) != null ? _r : (_q = styles.content) == null ? void 0 : _q.width,
...styles.date
},
...getGridProps({
month,
...filterUndefined({
h,
maxH,
maxW,
minH,
minW,
w,
...computedTableProps
})
}),
children: [
withWeekdays ? /* @__PURE__ */ jsx(ui.thead, { ...theadProps, children: /* @__PURE__ */ jsx(ui.tr, { __css: { ...styles.row }, ...trProps, children: weekdays.map((weekday, index2) => /* @__PURE__ */ jsx(
ui.th,
{
__css: {
fontWeight: "normal",
...styles.cell
},
...thProps,
children: /* @__PURE__ */ jsx(
ui.div,
{
className: "ui-calendar__month__weekday",
__css: {
display: "flex",
w: "100%",
...styles.weekday
},
...computedWeekdayProps,
children: customWeekday({ index: index2, weekday })
}
)
},
index2
)) }) }) : null,
/* @__PURE__ */ jsx(ui.tbody, { ...tbodyProps, children: days.map((cells, row) => {
return /* @__PURE__ */ jsx(ui.tr, { __css: { ...styles.row }, ...trProps, children: cells.map((date, col) => {
const {
between,
end,
hidden,
outside,
selected,
start,
weekend,
...props
} = getButtonProps({
...computedDayProps,
index,
month,
value: date
});
const day = customDay({
col,
date,
outside,
row,
selected,
weekday: weekdays[col],
weekend
});
const displayed = !isNull(day) && !isUndefined(day) && !isBoolean(day);
const css = {
display: hidden || !displayed ? "none" : "inline-flex",
fontSize: void 0,
fontWeight: "normal",
h: "auto",
minW: "auto",
p: 0,
_ripple: {
display: "block"
},
...styles.day
};
return /* @__PURE__ */ jsx(
ui.td,
{
"data-between": dataAttr(between),
"data-end": dataAttr(end),
"data-start": dataAttr(start),
__css: { ...styles.cell },
...tdProps,
children: /* @__PURE__ */ jsx(
Button,
{
className: "ui-calendar__month__day",
variant: "unstyled",
__css: css,
...props,
children: day
}
)
},
col
);
}) }, row);
}) })
]
}
)
]
},
index
);
}) });
};
Month.displayName = "Month";
Month.__ui__ = "Month";
var Weekday = ({ weekday }) => {
return /* @__PURE__ */ jsx(ui.span, { className: "ui-calendar__month__weekday__label", children: weekday });
};
Weekday.displayName = "Weekday";
Weekday.__ui__ = "Weekday";
var Day = ({ date }) => {
return /* @__PURE__ */ jsx(ui.span, { className: "ui-calendar__month__day__label", children: date.getDate() });
};
Day.displayName = "Day";
Day.__ui__ = "Day";
export {
Month,
Weekday,
Day
};
//# sourceMappingURL=chunk-PRPD4DHS.mjs.map