@mantine/dates
Version:
Calendars, date and time pickers based on Mantine components
290 lines (289 loc) • 11.7 kB
JavaScript
"use client";
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
const require_assign_time = require("../../utils/assign-time/assign-time.cjs");
const require_get_default_clamped_date = require("../../utils/get-default-clamped-date/get-default-clamped-date.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_TimePicker = require("../TimePicker/TimePicker.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_DatePicker = require("../DatePicker/DatePicker.cjs");
const require_get_min_max_time = require("../DateTimePicker/get-min-max-time/get-min-max-time.cjs");
const require_InlineDateTimePicker_module = require("./InlineDateTimePicker.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/InlineDateTimePicker/InlineDateTimePicker.tsx
const defaultProps = {
type: "default",
size: "sm"
};
const InlineDateTimePicker = (0, _mantine_core.genericFactory)((_props) => {
const props = (0, _mantine_core.useProps)("InlineDateTimePicker", defaultProps, _props);
const { value, defaultValue, onChange, valueFormat, locale, classNames, styles, unstyled, timePickerProps, endTimePickerProps, submitButtonProps, withSeconds, level, defaultLevel, size, variant, vars, minDate, maxDate, defaultDate, defaultTimeValue, presets, attributes, onSubmit, labelSeparator, type, className, style, __stopPropagation, __staticSelector, __onEnter, __onPresetSelect, fullWidth, ...rest } = props;
const _staticSelector = __staticSelector || "InlineDateTimePicker";
const getStyles = (0, _mantine_core.useStyles)({
name: _staticSelector,
classes: require_InlineDateTimePicker_module.default,
props,
classNames,
styles,
unstyled,
attributes,
vars
});
const { resolvedClassNames, resolvedStyles } = (0, _mantine_core.useResolvedStylesApi)({
classNames,
styles,
props
});
const ctx = require_use_dates_context.useDatesContext();
const _valueFormat = valueFormat || (withSeconds ? "DD/MM/YYYY HH:mm:ss" : "DD/MM/YYYY HH:mm");
const _labelSeparator = ctx.getLabelSeparator(labelSeparator);
const isRange = type === "range";
const startTimePickerRef = (0, react.useRef)(null);
const startTimePickerRefMerged = (0, _mantine_hooks.useMergedRef)(startTimePickerRef, timePickerProps?.hoursRef);
const endTimePickerRefMerged = (0, _mantine_hooks.useMergedRef)((0, react.useRef)(null), endTimePickerProps?.hoursRef);
const { calendarProps: { allowSingleDateInRange, ...calendarProps }, others } = require_pick_calendar_levels_props.pickCalendarProps(rest);
const [_value, setValue] = require_use_uncontrolled_dates.useUncontrolledDates({
type,
value,
defaultValue,
onChange,
withTime: true
});
const formatTime = (dateValue) => dateValue ? (0, dayjs.default)(dateValue).format(withSeconds ? "HH:mm:ss" : "HH:mm") : "";
const getInitialStartTime = () => {
if (defaultTimeValue) return defaultTimeValue;
if (isRange) return Array.isArray(_value) ? formatTime(_value[0]) : "";
return formatTime(_value);
};
const getInitialEndTime = () => {
if (defaultTimeValue) return defaultTimeValue;
return isRange && Array.isArray(_value) ? formatTime(_value[1]) : "";
};
const [startTimeValue, setStartTimeValue] = (0, react.useState)(getInitialStartTime);
const [endTimeValue, setEndTimeValue] = (0, react.useState)(getInitialEndTime);
const [currentLevel, setCurrentLevel] = (0, react.useState)(level || defaultLevel || "month");
const _defaultDate = isRange ? (Array.isArray(_value) ? _value[0] : null) || defaultDate : _value || defaultDate;
const handleDefaultDateChange = (date) => {
if (date) setValue(require_assign_time.assignTime(require_clamp_date.clampDate(minDate, maxDate, date), startTimeValue || defaultTimeValue || ""));
startTimePickerRef.current?.focus();
};
const handleRangeDateChange = (dates) => {
const [start, end] = dates;
setValue([start ? require_assign_time.assignTime(require_clamp_date.clampDate(minDate, maxDate, start), startTimeValue || defaultTimeValue || "") : null, end ? require_assign_time.assignTime(require_clamp_date.clampDate(minDate, maxDate, end), endTimeValue || defaultTimeValue || "") : null]);
if (start && end) startTimePickerRef.current?.focus();
};
const handleDateChange = (date) => {
if (isRange) handleRangeDateChange(date);
else handleDefaultDateChange(date);
};
const handleStartTimeChange = (timeString) => {
timePickerProps?.onChange?.(timeString);
setStartTimeValue(timeString);
if (timeString) if (isRange && Array.isArray(_value)) {
if (_value[0]) setValue([require_assign_time.assignTime(_value[0], timeString), _value[1]]);
} else setValue(require_assign_time.assignTime(_value, timeString));
};
const handleEndTimeChange = (timeString) => {
endTimePickerProps?.onChange?.(timeString);
setEndTimeValue(timeString);
if (timeString && isRange && Array.isArray(_value) && _value[1]) {
const newEnd = require_assign_time.assignTime(_value[1], timeString);
setValue([_value[0], newEnd]);
}
};
const handleTimeInputKeyDown = (event) => {
if (event.key === "Enter") {
event.preventDefault();
__onEnter?.();
}
};
const getFormattedRange = () => {
if (!isRange || !Array.isArray(_value)) return "";
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 start = formatDate(_value[0]);
const end = formatDate(_value[1]);
if (start && end) return `${start} ${_labelSeparator} ${end}`;
if (start) return `${start} ${_labelSeparator} ...`;
return "";
};
(0, _mantine_hooks.useDidUpdate)(() => {
if (isRange && Array.isArray(_value)) {
setStartTimeValue(formatTime(_value[0]));
setEndTimeValue(formatTime(_value[1]));
} else setStartTimeValue(formatTime(_value));
}, [_value]);
const startMinTime = isRange ? require_get_min_max_time.getMinTime({
minDate,
value: Array.isArray(_value) ? _value[0] : null
}) : require_get_min_max_time.getMinTime({
minDate,
value: _value
});
const startMaxTime = isRange ? require_get_min_max_time.getMaxTime({
maxDate,
value: Array.isArray(_value) ? _value[0] : null
}) : require_get_min_max_time.getMaxTime({
maxDate,
value: _value
});
const endMinTime = isRange ? require_get_min_max_time.getMinTime({
minDate,
value: Array.isArray(_value) ? _value[1] : null
}) : void 0;
const endMaxTime = isRange ? require_get_min_max_time.getMaxTime({
maxDate,
value: Array.isArray(_value) ? _value[1] : null
}) : void 0;
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
...getStyles("root", {
className,
style
}),
...others,
ref: props.ref,
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DatePicker.DatePicker, {
fullWidth: fullWidth ?? true,
...calendarProps,
maxDate,
minDate,
size,
variant,
type,
value: _value,
defaultDate: _defaultDate || require_get_default_clamped_date.getDefaultClampedDate({
maxDate,
minDate
}),
onChange: handleDateChange,
locale,
classNames: resolvedClassNames,
styles: resolvedStyles,
unstyled,
__staticSelector: _staticSelector,
__stopPropagation,
level,
defaultLevel,
onLevelChange: (_level) => {
setCurrentLevel(_level);
calendarProps.onLevelChange?.(_level);
},
presets,
allowSingleDateInRange,
__onPresetSelect,
attributes
}),
currentLevel === "month" && !isRange && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
...getStyles("timeWrapper"),
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TimePicker.TimePicker, {
value: startTimeValue,
withSeconds,
unstyled,
min: startMinTime,
max: startMaxTime,
...timePickerProps,
...getStyles("timeInput", {
className: timePickerProps?.className,
style: timePickerProps?.style
}),
onChange: handleStartTimeChange,
onKeyDown: handleTimeInputKeyDown,
size,
"data-mantine-stop-propagation": __stopPropagation || void 0,
hoursRef: startTimePickerRefMerged
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.ActionIcon, {
variant: "default",
size: `input-${size || "sm"}`,
...getStyles("submitButton", {
className: submitButtonProps?.className,
style: submitButtonProps?.style
}),
unstyled,
"data-mantine-stop-propagation": __stopPropagation || void 0,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.CheckIcon, { size: "30%" }),
...submitButtonProps,
onClick: (event) => {
submitButtonProps?.onClick?.(event);
onSubmit?.();
}
})]
}),
currentLevel === "month" && isRange && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Text, {
...getStyles("rangeInfo"),
children: getFormattedRange()
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
...getStyles("rangeTimeWrapper"),
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TimePicker.TimePicker, {
value: startTimeValue,
withSeconds,
unstyled,
min: startMinTime,
max: startMaxTime,
...timePickerProps,
...getStyles("rangeTimeInput", {
className: timePickerProps?.className,
style: timePickerProps?.style
}),
onChange: handleStartTimeChange,
onKeyDown: handleTimeInputKeyDown,
size,
"data-mantine-stop-propagation": __stopPropagation || void 0,
hoursRef: startTimePickerRefMerged
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TimePicker.TimePicker, {
value: endTimeValue,
withSeconds,
unstyled,
min: endMinTime,
max: endMaxTime,
...endTimePickerProps,
...getStyles("rangeTimeInput", {
className: endTimePickerProps?.className,
style: endTimePickerProps?.style
}),
onChange: handleEndTimeChange,
onKeyDown: handleTimeInputKeyDown,
size,
"data-mantine-stop-propagation": __stopPropagation || void 0,
hoursRef: endTimePickerRefMerged
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.ActionIcon, {
variant: "default",
size: `input-${size || "sm"}`,
...getStyles("submitButton", {
className: submitButtonProps?.className,
style: submitButtonProps?.style
}),
unstyled,
"data-mantine-stop-propagation": __stopPropagation || void 0,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.CheckIcon, { size: "30%" }),
...submitButtonProps,
onClick: (event) => {
submitButtonProps?.onClick?.(event);
onSubmit?.();
}
})
]
})] })
]
});
});
InlineDateTimePicker.classes = {
...require_InlineDateTimePicker_module.default,
...require_DatePicker.DatePicker.classes
};
InlineDateTimePicker.displayName = "@mantine/dates/InlineDateTimePicker";
//#endregion
exports.InlineDateTimePicker = InlineDateTimePicker;
//# sourceMappingURL=InlineDateTimePicker.cjs.map