@mantine/dates
Version:
Calendars, date and time pickers based on Mantine components
169 lines (168 loc) • 6.18 kB
JavaScript
"use client";
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
const require_clamp_date = require("../../utils/clamp-date/clamp-date.cjs");
const require_use_dates_context = require("../DatesProvider/use-dates-context.cjs");
const require_PickerInputBase = require("../PickerInputBase/PickerInputBase.cjs");
const require_use_uncontrolled_dates = require("../../hooks/use-uncontrolled-dates/use-uncontrolled-dates.cjs");
const require_pick_calendar_levels_props = require("../Calendar/pick-calendar-levels-props/pick-calendar-levels-props.cjs");
const require_InlineDateTimePicker = require("../InlineDateTimePicker/InlineDateTimePicker.cjs");
const require_DateTimePicker_module = require("./DateTimePicker.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/DateTimePicker/DateTimePicker.tsx
const defaultProps = {
type: "default",
dropdownType: "popover",
size: "sm"
};
const DateTimePicker = (0, _mantine_core.genericFactory)((_props) => {
const props = (0, _mantine_core.useProps)([
"Input",
"InputWrapper",
"DateTimePicker"
], defaultProps, _props);
const { value, defaultValue, onChange, valueFormat, locale, classNames, styles, unstyled, timePickerProps, endTimePickerProps, submitButtonProps, withSeconds, level, defaultLevel, size, variant, dropdownType, vars, minDate, maxDate, defaultDate, defaultTimeValue, presets, attributes, onDropdownClose, type, labelSeparator, allowSingleDateInRange, ...rest } = props;
const isRange = type === "range";
(0, _mantine_core.useStyles)({
name: "DateTimePicker",
classes: require_DateTimePicker_module.default,
props,
classNames,
styles,
unstyled,
attributes,
vars
});
const { resolvedClassNames, resolvedStyles } = (0, _mantine_core.useResolvedStylesApi)({
classNames,
styles,
props
});
const _withSeconds = withSeconds || timePickerProps?.withSeconds;
const _valueFormat = valueFormat || (_withSeconds ? "DD/MM/YYYY HH:mm:ss" : "DD/MM/YYYY HH:mm");
const { calendarProps: { allowSingleDateInRange: _asdir, ...calendarProps }, others } = require_pick_calendar_levels_props.pickCalendarProps(rest);
const ctx = require_use_dates_context.useDatesContext();
const _labelSeparator = ctx.getLabelSeparator(labelSeparator);
const [_value, setValue] = require_use_uncontrolled_dates.useUncontrolledDates({
type,
value,
defaultValue,
onChange,
withTime: true
});
const [dropdownOpened, dropdownHandlers] = (0, _mantine_hooks.useDisclosure)(false);
const [inlineKey, setInlineKey] = (0, react.useState)(0);
const formatDate = (v) => {
if (!v) return "";
if (typeof _valueFormat === "function") return _valueFormat(v);
return (0, dayjs.default)(v).locale(ctx.getLocale(locale)).format(_valueFormat);
};
const getFormattedValue = () => {
if (isRange && Array.isArray(_value)) {
const start = formatDate(_value[0]);
const end = formatDate(_value[1]);
if (start && end) return `${start} ${_labelSeparator} ${end}`;
if (start) return `${start} ${_labelSeparator} ...`;
return "";
}
return formatDate(_value);
};
const formattedValue = getFormattedValue();
(0, _mantine_hooks.useDidUpdate)(() => {
if (dropdownOpened) setInlineKey((k) => k + 1);
}, [dropdownOpened]);
const __stopPropagation = dropdownType === "popover";
const clearIncompleteRange = () => {
if (isRange && Array.isArray(_value) && _value[0] && !_value[1]) setValue([null, null]);
};
const handleDropdownClose = () => {
clearIncompleteRange();
if (isRange && Array.isArray(_value)) {
const clampedStart = _value[0] ? require_clamp_date.clampDate(minDate, maxDate, _value[0]) : null;
const clampedEnd = _value[1] ? require_clamp_date.clampDate(minDate, maxDate, _value[1]) : null;
if (_value[0] && _value[0] !== clampedStart || _value[1] && _value[1] !== clampedEnd) setValue([clampedStart, clampedEnd]);
} else if (_value) {
const clamped = require_clamp_date.clampDate(minDate, maxDate, _value);
if (_value !== clamped) setValue(clamped);
}
onDropdownClose?.();
};
const handleSubmitOrEnter = () => {
handleDropdownClose();
dropdownHandlers.close();
};
const onClear = () => {
if (isRange) setValue([null, null]);
else setValue(null);
};
const shouldClear = isRange ? Array.isArray(_value) && !!_value[0] : !!_value;
const handlePresetSelect = (val) => {
setValue(val);
};
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PickerInputBase.PickerInputBase, {
formattedValue,
dropdownOpened: !rest.disabled ? dropdownOpened : false,
dropdownHandlers,
classNames: resolvedClassNames,
styles: resolvedStyles,
unstyled,
onClear,
shouldClear,
value: _value,
size,
variant,
dropdownType,
...others,
type,
__staticSelector: "DateTimePicker",
onDropdownClose: handleDropdownClose,
withTime: true,
attributes,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InlineDateTimePicker.InlineDateTimePicker, {
...calendarProps,
fullWidth: false,
type,
value: _value,
onChange: setValue,
maxDate,
minDate,
size,
variant,
locale,
classNames: resolvedClassNames,
styles: resolvedStyles,
unstyled,
level,
defaultLevel,
defaultDate,
defaultTimeValue,
presets,
allowSingleDateInRange,
timePickerProps,
endTimePickerProps,
submitButtonProps,
withSeconds,
valueFormat,
labelSeparator,
attributes,
onSubmit: handleSubmitOrEnter,
__stopPropagation,
__staticSelector: "DateTimePicker",
__onEnter: handleSubmitOrEnter,
__onPresetSelect: handlePresetSelect
}, inlineKey)
});
});
DateTimePicker.classes = {
...require_DateTimePicker_module.default,
...require_PickerInputBase.PickerInputBase.classes,
...require_InlineDateTimePicker.InlineDateTimePicker.classes
};
DateTimePicker.displayName = "@mantine/dates/DateTimePicker";
//#endregion
exports.DateTimePicker = DateTimePicker;
//# sourceMappingURL=DateTimePicker.cjs.map