@mantine/dates
Version:
Calendars, date and time pickers based on Mantine components
110 lines (109 loc) • 4.47 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_PickerControl = require("../PickerControl/PickerControl.cjs");
const require_is_month_disabled = require("./is-month-disabled/is-month-disabled.cjs");
const require_get_month_in_tab_order = require("./get-month-in-tab-order/get-month-in-tab-order.cjs");
const require_get_months_data = require("./get-months-data/get-months-data.cjs");
const require_MonthsList_module = require("./MonthsList.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/MonthsList/MonthsList.tsx
const defaultProps = {
monthsListFormat: "MMM",
withCellSpacing: true
};
const MonthsList = (0, _mantine_core.factory)((_props) => {
const props = (0, _mantine_core.useProps)("MonthsList", defaultProps, _props);
const { classNames, className, style, styles, unstyled, vars, __staticSelector, year, monthsListFormat, locale, minDate, maxDate, getMonthControlProps, __getControlRef, __onControlKeyDown, __onControlClick, __onControlMouseEnter, __preventFocus, __stopPropagation, withCellSpacing, fullWidth, size, attributes, ...others } = props;
const getStyles = (0, _mantine_core.useStyles)({
name: __staticSelector || "MonthsList",
classes: require_MonthsList_module.default,
props,
className,
style,
classNames,
styles,
unstyled,
attributes,
vars,
rootSelector: "monthsList"
});
const ctx = require_use_dates_context.useDatesContext();
const months = require_get_months_data.getMonthsData(year);
const monthInTabOrder = require_get_month_in_tab_order.getMonthInTabOrder({
months,
minDate: require_to_date_string.toDateString(minDate),
maxDate: require_to_date_string.toDateString(maxDate),
getMonthControlProps
});
const rows = months.map((monthsRow, rowIndex) => {
const cells = monthsRow.map((month, cellIndex) => {
const controlProps = getMonthControlProps?.(month);
const isMonthInTabOrder = (0, dayjs.default)(month).isSame(monthInTabOrder, "month");
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
...getStyles("monthsListCell"),
"data-with-spacing": withCellSpacing || void 0,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PickerControl.PickerControl, {
...getStyles("monthsListControl"),
size,
unstyled,
fullWidth,
__staticSelector: __staticSelector || "MonthsList",
"data-mantine-stop-propagation": __stopPropagation || void 0,
disabled: require_is_month_disabled.isMonthDisabled({
month,
minDate: require_to_date_string.toDateString(minDate),
maxDate: require_to_date_string.toDateString(maxDate)
}),
ref: (node) => {
if (node) __getControlRef?.(rowIndex, cellIndex, node);
},
...controlProps,
onKeyDown: (event) => {
controlProps?.onKeyDown?.(event);
__onControlKeyDown?.(event, {
rowIndex,
cellIndex,
date: month
});
},
onClick: (event) => {
controlProps?.onClick?.(event);
__onControlClick?.(event, month);
},
onMouseEnter: (event) => {
controlProps?.onMouseEnter?.(event);
__onControlMouseEnter?.(event, month);
},
onMouseDown: (event) => {
controlProps?.onMouseDown?.(event);
__preventFocus && event.preventDefault();
},
tabIndex: __preventFocus || !isMonthInTabOrder ? -1 : 0,
children: controlProps?.children ?? (0, dayjs.default)(month).locale(ctx.getLocale(locale)).format(monthsListFormat)
})
}, cellIndex);
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
...getStyles("monthsListRow"),
children: cells
}, rowIndex);
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
component: "table",
size,
...getStyles("monthsList"),
"data-full-width": fullWidth || void 0,
...others,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: rows })
});
});
MonthsList.classes = require_MonthsList_module.default;
MonthsList.displayName = "@mantine/dates/MonthsList";
//#endregion
exports.MonthsList = MonthsList;
//# sourceMappingURL=MonthsList.cjs.map