UNPKG

@mantine/dates

Version:

Calendars, date and time pickers based on Mantine components

111 lines (110 loc) 4.14 kB
"use client"; const require_use_dates_state = require("../../hooks/use-dates-state/use-dates-state.cjs"); const require_Calendar = require("../Calendar/Calendar.cjs"); const require_pick_calendar_levels_props = require("../Calendar/pick-calendar-levels-props/pick-calendar-levels-props.cjs"); const require_MonthPicker_module = require("./MonthPicker.module.cjs"); let react = require("react"); let react_jsx_runtime = require("react/jsx-runtime"); let _mantine_core = require("@mantine/core"); //#region packages/@mantine/dates/src/components/MonthPicker/MonthPicker.tsx const varsResolver = (0, _mantine_core.createVarsResolver)((_, { size }) => ({ monthPickerRoot: { "--preset-font-size": (0, _mantine_core.getFontSize)(size) } })); const defaultProps = { type: "default" }; const MonthPicker = (0, _mantine_core.factory)((_props) => { const props = (0, _mantine_core.useProps)("MonthPicker", defaultProps, _props); const { classNames, styles, vars, type, defaultValue, value, onChange, __staticSelector, getMonthControlProps, allowSingleDateInRange, allowDeselect, onMouseLeave, onMonthSelect, __updateDateOnMonthSelect, __onPresetSelect, __stopPropagation, presets, className, style, unstyled, size, attributes, onLevelChange, ...rest } = props; const { calendarProps, others } = require_pick_calendar_levels_props.pickCalendarProps(rest); const setDateRef = (0, react.useRef)(null); const setLevelRef = (0, react.useRef)(null); const getStyles = (0, _mantine_core.useStyles)({ name: __staticSelector || "MonthPicker", classes: require_MonthPicker_module.default, props, className, style, classNames, styles, unstyled, attributes, rootSelector: presets ? "monthPickerRoot" : void 0, varsResolver, vars }); const { onDateChange, onRootMouseLeave, onHoveredDateChange, getControlProps, setValue } = require_use_dates_state.useDatesState({ type, level: "month", allowDeselect, allowSingleDateInRange, value, defaultValue, onChange, onMouseLeave }); const { resolvedClassNames, resolvedStyles } = (0, _mantine_core.useResolvedStylesApi)({ classNames, styles, props }); const calendar = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Calendar.Calendar, { classNames: resolvedClassNames, styles: resolvedStyles, size, ...calendarProps, ...!presets ? others : {}, minLevel: "year", __updateDateOnMonthSelect: __updateDateOnMonthSelect ?? false, __staticSelector: __staticSelector || "MonthPicker", onMouseLeave: onRootMouseLeave, onMonthMouseEnter: (_event, date) => onHoveredDateChange(date), onMonthSelect: (date) => { onDateChange(date); onMonthSelect?.(date); }, getMonthControlProps: (date) => ({ ...getControlProps(date), ...getMonthControlProps?.(date) }), onLevelChange, __setDateRef: setDateRef, __setLevelRef: setLevelRef, __stopPropagation, attributes, ...!presets ? { className, style } : {} }); if (!presets) return calendar; const handlePresetSelect = (val) => { const _val = Array.isArray(val) ? val[0] : val; if (_val !== void 0) { setDateRef.current?.(_val); setLevelRef.current?.("year"); __onPresetSelect ? __onPresetSelect(val) : setValue(val); } }; const presetButtons = presets.map((preset, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.UnstyledButton, { ...getStyles("presetButton"), onClick: () => handlePresetSelect(preset.value), onMouseDown: (event) => event.preventDefault(), "data-mantine-stop-propagation": __stopPropagation || void 0, children: preset.label }, index)); return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, { ...getStyles("monthPickerRoot"), size, ...others, children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ...getStyles("presetsList"), children: presetButtons }), calendar] }); }); MonthPicker.classes = { ...require_Calendar.Calendar.classes, ...require_MonthPicker_module.default }; MonthPicker.varsResolver = varsResolver; MonthPicker.displayName = "@mantine/dates/MonthPicker"; //#endregion exports.MonthPicker = MonthPicker; //# sourceMappingURL=MonthPicker.cjs.map