@mantine/dates
Version:
Calendars, date and time pickers based on Mantine components
156 lines (155 loc) • 6.22 kB
JavaScript
"use client";
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
const require_to_date_string = require("../../utils/to-date-string/to-date-string.cjs");
const require_use_dates_context = require("../DatesProvider/use-dates-context.cjs");
const require_Day = require("../Day/Day.cjs");
const require_WeekdaysRow = require("../WeekdaysRow/WeekdaysRow.cjs");
const require_get_month_days = require("./get-month-days/get-month-days.cjs");
const require_is_same_month = require("./is-same-month/is-same-month.cjs");
const require_is_after_min_date = require("./is-after-min-date/is-after-min-date.cjs");
const require_is_before_max_date = require("./is-before-max-date/is-before-max-date.cjs");
const require_get_date_in_tab_order = require("./get-date-in-tab-order/get-date-in-tab-order.cjs");
const require_get_week_number = require("./get-week-number/get-week-number.cjs");
const require_Month_module = require("./Month.module.cjs");
let dayjs = require("dayjs");
dayjs = require_runtime.__toESM(dayjs);
let react_jsx_runtime = require("react/jsx-runtime");
let _mantine_core = require("@mantine/core");
//#region packages/@mantine/dates/src/components/Month/Month.tsx
const defaultProps = { withCellSpacing: true };
const varsResolver = (0, _mantine_core.createVarsResolver)((_, { size }) => ({ weekNumber: {
"--wn-fz": (0, _mantine_core.getFontSize)(size),
"--wn-size": (0, _mantine_core.getSize)(size, "wn-size")
} }));
const Month = (0, _mantine_core.factory)((_props) => {
const props = (0, _mantine_core.useProps)("Month", defaultProps, _props);
const { classNames, className, style, styles, unstyled, vars, __staticSelector, locale, firstDayOfWeek, weekdayFormat, month, weekendDays, getDayProps, excludeDate, minDate, maxDate, renderDay, hideOutsideDates, hideWeekdays, getDayAriaLabel, static: isStatic, __getDayRef, __onDayKeyDown, __onDayClick, __onDayMouseEnter, __preventFocus, __stopPropagation, withCellSpacing, size, highlightToday, withWeekNumbers, fullWidth, attributes, ...others } = props;
const getStyles = (0, _mantine_core.useStyles)({
name: __staticSelector || "Month",
classes: require_Month_module.default,
props,
className,
style,
classNames,
styles,
unstyled,
attributes,
vars,
varsResolver,
rootSelector: "month"
});
const ctx = require_use_dates_context.useDatesContext();
const dates = require_get_month_days.getMonthDays({
month,
firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),
consistentWeeks: ctx.consistentWeeks
});
const dateInTabOrder = require_get_date_in_tab_order.getDateInTabOrder({
dates,
minDate: require_to_date_string.toDateString(minDate),
maxDate: require_to_date_string.toDateString(maxDate),
getDayProps,
excludeDate,
hideOutsideDates,
month
});
const { resolvedClassNames, resolvedStyles } = (0, _mantine_core.useResolvedStylesApi)({
classNames,
styles,
props
});
const rows = dates.map((row, rowIndex) => {
const cells = row.map((date, cellIndex) => {
const outside = !require_is_same_month.isSameMonth(date, month);
const ariaLabel = getDayAriaLabel?.(date) || (0, dayjs.default)(date).locale(locale || ctx.locale).format("D MMMM YYYY");
const dayProps = getDayProps?.(date);
const isDateInTabOrder = (0, dayjs.default)(date).isSame(dateInTabOrder, "date");
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
...getStyles("monthCell"),
"data-with-spacing": withCellSpacing || void 0,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Day.Day, {
__staticSelector: __staticSelector || "Month",
classNames: resolvedClassNames,
styles: resolvedStyles,
attributes,
unstyled,
"data-mantine-stop-propagation": __stopPropagation || void 0,
highlightToday,
renderDay,
date,
size,
weekend: ctx.getWeekendDays(weekendDays).includes((0, dayjs.default)(date).get("day")),
outside,
hidden: hideOutsideDates ? outside : false,
"aria-label": ariaLabel,
static: isStatic,
fullWidth,
disabled: excludeDate?.(date) || !require_is_before_max_date.isBeforeMaxDate(date, require_to_date_string.toDateString(maxDate)) || !require_is_after_min_date.isAfterMinDate(date, require_to_date_string.toDateString(minDate)),
ref: (node) => {
if (node) __getDayRef?.(rowIndex, cellIndex, node);
},
...dayProps,
onKeyDown: (event) => {
dayProps?.onKeyDown?.(event);
__onDayKeyDown?.(event, {
rowIndex,
cellIndex,
date
});
},
onMouseEnter: (event) => {
dayProps?.onMouseEnter?.(event);
__onDayMouseEnter?.(event, date);
},
onClick: (event) => {
dayProps?.onClick?.(event);
__onDayClick?.(event, date);
},
onMouseDown: (event) => {
dayProps?.onMouseDown?.(event);
__preventFocus && event.preventDefault();
},
tabIndex: __preventFocus || !isDateInTabOrder ? -1 : 0
})
}, date.toString());
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
...getStyles("monthRow"),
children: [withWeekNumbers && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
...getStyles("weekNumber"),
children: require_get_week_number.getWeekNumber(row)
}), cells]
}, rowIndex);
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
component: "table",
...getStyles("month"),
size,
"data-full-width": fullWidth || void 0,
...others,
children: [!hideWeekdays && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
...getStyles("monthThead"),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WeekdaysRow.WeekdaysRow, {
__staticSelector: __staticSelector || "Month",
locale,
firstDayOfWeek,
weekdayFormat,
withWeekNumbers,
size,
classNames: resolvedClassNames,
styles: resolvedStyles,
unstyled,
attributes
})
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
...getStyles("monthTbody"),
children: rows
})]
});
});
Month.classes = require_Month_module.default;
Month.varsResolver = varsResolver;
Month.displayName = "@mantine/dates/Month";
//#endregion
exports.Month = Month;
//# sourceMappingURL=Month.cjs.map