@mantine/dates
Version:
Calendars, date and time pickers based on Mantine components
224 lines (223 loc) • 8.81 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_HiddenDatesInput = require("../HiddenDatesInput/HiddenDatesInput.cjs");
const require_is_same_month = require("../Month/is-same-month/is-same-month.cjs");
const require_use_uncontrolled_dates = require("../../hooks/use-uncontrolled-dates/use-uncontrolled-dates.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_date_string_parser = require("./date-string-parser/date-string-parser.cjs");
const require_is_date_valid = require("./is-date-valid/is-date-valid.cjs");
const require_DateInput_module = require("./DateInput.module.cjs");
let dayjs = require("dayjs");
dayjs = require_runtime.__toESM(dayjs);
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
let _mantine_core = require("@mantine/core");
let _mantine_hooks = require("@mantine/hooks");
//#region packages/@mantine/dates/src/components/DateInput/DateInput.tsx
const defaultProps = {
valueFormat: "MMMM D, YYYY",
fixOnBlur: true,
size: "sm"
};
const DateInput = (0, _mantine_core.factory)((_props) => {
const props = (0, _mantine_core.useInputProps)("DateInput", defaultProps, _props);
const { inputProps, wrapperProps, value, defaultValue, onChange, clearable, clearSectionMode, clearButtonProps, popoverProps, getDayProps, locale, valueFormat, withTime, dateParser, minDate, maxDate, fixOnBlur, onFocus, onBlur, onClick, onKeyDown, readOnly, name, form, rightSection, unstyled, classNames, styles, allowDeselect, date, defaultDate, onDateChange, getMonthControlProps, getYearControlProps, disabled, presets, ...rest } = props;
const getStyles = (0, _mantine_core.useStyles)({
name: "DateInput",
classes: require_DateInput_module.default,
props,
classNames,
styles,
unstyled,
attributes: wrapperProps.attributes
});
const _wrapperRef = (0, react.useRef)(null);
const _dropdownRef = (0, react.useRef)(null);
const [dropdownOpened, setDropdownOpened] = (0, react.useState)(false);
const { calendarProps, others } = require_pick_calendar_levels_props.pickCalendarProps(rest);
const ctx = require_use_dates_context.useDatesContext();
const defaultDateParser = (val) => {
const parsedDate = (0, dayjs.default)(val, valueFormat, ctx.getLocale(locale)).toDate();
return Number.isNaN(parsedDate.getTime()) ? require_date_string_parser.dateStringParser(val) : (0, dayjs.default)(parsedDate).format(withTime ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD");
};
const _dateParser = dateParser || defaultDateParser;
const _allowDeselect = allowDeselect !== void 0 ? allowDeselect : clearable;
const formatValue = (val) => val ? (0, dayjs.default)(val).locale(ctx.getLocale(locale)).format(valueFormat) : "";
const [_value, setValue, controlled] = require_use_uncontrolled_dates.useUncontrolledDates({
type: "default",
value,
defaultValue,
onChange,
withTime
});
const [_date, setDate] = require_use_uncontrolled_dates.useUncontrolledDates({
type: "default",
value: date,
defaultValue: defaultValue || defaultDate,
onChange: onDateChange
});
(0, react.useEffect)(() => {
if (controlled && value !== null) setDate(value);
}, [controlled, value]);
const [inputValue, setInputValue] = (0, react.useState)(formatValue(_value));
(0, react.useEffect)(() => {
setInputValue(formatValue(_value));
}, [ctx.getLocale(locale)]);
const handleInputChange = (event) => {
const val = event.currentTarget.value;
setInputValue(val);
setDropdownOpened(true);
if (val.trim() === "" && (allowDeselect || clearable)) setValue(null);
else {
const dateValue = _dateParser(val);
if (dateValue && require_is_date_valid.isDateValid({
date: dateValue,
minDate,
maxDate
})) {
setValue(dateValue);
setDate(dateValue);
}
}
};
const handleInputBlur = (event) => {
onBlur?.(event);
setDropdownOpened(false);
fixOnBlur && setInputValue(formatValue(_value));
};
const handleInputFocus = (event) => {
onFocus?.(event);
setDropdownOpened(true);
};
const handleInputClick = (event) => {
onClick?.(event);
setDropdownOpened(true);
};
const handleInputKeyDown = (event) => {
if (event.key === "Escape") setDropdownOpened(false);
onKeyDown?.(event);
};
const _getDayProps = (day) => ({
...getDayProps?.(day),
selected: (0, dayjs.default)(_value).isSame(day, "day"),
onClick: (event) => {
getDayProps?.(day).onClick?.(event);
const val = _allowDeselect ? (0, dayjs.default)(_value).isSame(day, "day") ? null : day : day;
setValue(val);
!controlled && val && setInputValue(formatValue(val));
setDropdownOpened(false);
}
});
const handlePresetSelect = (val) => {
setValue(val);
if (val) setDate(val);
if (!controlled) setInputValue(val ? formatValue(val) : "");
setDropdownOpened(false);
};
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(),
children: preset.label
}, index));
const clearButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Input.ClearButton, {
onClick: () => {
setValue(null);
!controlled && setInputValue("");
setDropdownOpened(false);
},
unstyled,
...clearButtonProps
});
const _clearable = clearable && !!_value && !readOnly && !disabled;
(0, _mantine_hooks.useDidUpdate)(() => {
_value !== void 0 && !dropdownOpened && setInputValue(formatValue(_value));
}, [_value]);
(0, _mantine_hooks.useClickOutside)(() => setDropdownOpened(false), void 0, [_wrapperRef.current, _dropdownRef.current]);
const calendar = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Calendar.Calendar, {
__staticSelector: "DateInput",
...calendarProps,
classNames,
styles,
unstyled,
__preventFocus: true,
minDate,
maxDate,
locale,
getDayProps: _getDayProps,
size: inputProps.size,
date: _date,
onDateChange: setDate,
getMonthControlProps: (date) => ({
selected: typeof _value === "string" ? require_is_same_month.isSameMonth(date, _value) : false,
...getMonthControlProps?.(date)
}),
getYearControlProps: (date) => ({
selected: typeof _value === "string" ? (0, dayjs.default)(date).isSame(_value, "year") : false,
...getYearControlProps?.(date)
}),
attributes: wrapperProps.attributes
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Input.Wrapper, {
...wrapperProps,
__staticSelector: "DateInput",
ref: _wrapperRef,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Popover, {
opened: dropdownOpened,
trapFocus: false,
position: "bottom-start",
disabled: readOnly || disabled,
withRoles: false,
unstyled,
...popoverProps,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Popover.Target, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Input, {
"data-dates-input": true,
"data-read-only": readOnly || void 0,
autoComplete: "off",
value: inputValue,
onChange: handleInputChange,
onBlur: handleInputBlur,
onFocus: handleInputFocus,
onClick: handleInputClick,
onKeyDown: handleInputKeyDown,
readOnly,
rightSection,
__clearSection: clearButton,
__clearable: _clearable,
__clearSectionMode: clearSectionMode,
...inputProps,
...others,
disabled,
__staticSelector: "DateInput"
}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Popover.Dropdown, {
onMouseDown: (event) => event.preventDefault(),
"data-dates-dropdown": true,
ref: _dropdownRef,
children: presets ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
...getStyles("presetsRoot", { style: { "--preset-font-size": (0, _mantine_core.getFontSize)(inputProps.size) } }),
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
...getStyles("presetsList"),
children: presetButtons
}), calendar]
}) : calendar
})]
})
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_HiddenDatesInput.HiddenDatesInput, {
name,
form,
value: _value,
type: "default",
withTime
})] });
});
DateInput.classes = {
..._mantine_core.Input.classes,
...require_Calendar.Calendar.classes,
...require_DateInput_module.default
};
DateInput.displayName = "@mantine/dates/DateInput";
//#endregion
exports.DateInput = DateInput;
//# sourceMappingURL=DateInput.cjs.map