@mantine/dates
Version:
Calendars, date and time pickers based on Mantine components
108 lines (107 loc) • 4.09 kB
JavaScript
"use client";
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
const require_use_dates_context = require("../DatesProvider/use-dates-context.cjs");
const require_PickerControl = require("../PickerControl/PickerControl.cjs");
const require_is_year_disabled = require("./is-year-disabled/is-year-disabled.cjs");
const require_get_year_in_tab_order = require("./get-year-in-tab-order/get-year-in-tab-order.cjs");
const require_get_years_data = require("./get-years-data/get-years-data.cjs");
const require_YearsList_module = require("./YearsList.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/YearsList/YearsList.tsx
const defaultProps = {
yearsListFormat: "YYYY",
withCellSpacing: true
};
const YearsList = (0, _mantine_core.factory)((_props) => {
const props = (0, _mantine_core.useProps)("YearsList", defaultProps, _props);
const { classNames, className, style, styles, unstyled, vars, decade, yearsListFormat, locale, minDate, maxDate, getYearControlProps, __staticSelector, __getControlRef, __onControlKeyDown, __onControlClick, __onControlMouseEnter, __preventFocus, __stopPropagation, withCellSpacing, fullWidth, size, attributes, ...others } = props;
const getStyles = (0, _mantine_core.useStyles)({
name: __staticSelector || "YearsList",
classes: require_YearsList_module.default,
props,
className,
style,
classNames,
styles,
unstyled,
attributes,
vars,
rootSelector: "yearsList"
});
const ctx = require_use_dates_context.useDatesContext();
const years = require_get_years_data.getYearsData(decade);
const yearInTabOrder = require_get_year_in_tab_order.getYearInTabOrder({
years,
minDate,
maxDate,
getYearControlProps
});
const rows = years.map((yearsRow, rowIndex) => {
const cells = yearsRow.map((year, cellIndex) => {
const controlProps = getYearControlProps?.(year);
const isYearInTabOrder = (0, dayjs.default)(year).isSame(yearInTabOrder, "year");
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
...getStyles("yearsListCell"),
"data-with-spacing": withCellSpacing || void 0,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PickerControl.PickerControl, {
...getStyles("yearsListControl"),
size,
unstyled,
fullWidth,
"data-mantine-stop-propagation": __stopPropagation || void 0,
disabled: require_is_year_disabled.isYearDisabled({
year,
minDate,
maxDate
}),
ref: (node) => {
if (node) __getControlRef?.(rowIndex, cellIndex, node);
},
...controlProps,
onKeyDown: (event) => {
controlProps?.onKeyDown?.(event);
__onControlKeyDown?.(event, {
rowIndex,
cellIndex,
date: year
});
},
onClick: (event) => {
controlProps?.onClick?.(event);
__onControlClick?.(event, year);
},
onMouseEnter: (event) => {
controlProps?.onMouseEnter?.(event);
__onControlMouseEnter?.(event, year);
},
onMouseDown: (event) => {
controlProps?.onMouseDown?.(event);
__preventFocus && event.preventDefault();
},
tabIndex: __preventFocus || !isYearInTabOrder ? -1 : 0,
children: controlProps?.children ?? (0, dayjs.default)(year).locale(ctx.getLocale(locale)).format(yearsListFormat)
})
}, cellIndex);
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
...getStyles("yearsListRow"),
children: cells
}, rowIndex);
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
component: "table",
size,
...getStyles("yearsList"),
"data-full-width": fullWidth || void 0,
...others,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: rows })
});
});
YearsList.classes = require_YearsList_module.default;
YearsList.displayName = "@mantine/dates/YearsList";
//#endregion
exports.YearsList = YearsList;
//# sourceMappingURL=YearsList.cjs.map