@mantine/dates
Version:
Calendars, date and time pickers based on Mantine components
288 lines (287 loc) • 10.4 kB
JavaScript
"use client";
import { assignTime } from "../../utils/assign-time/assign-time.mjs";
import { getDefaultClampedDate } from "../../utils/get-default-clamped-date/get-default-clamped-date.mjs";
import { clampDate } from "../../utils/clamp-date/clamp-date.mjs";
import { useDatesContext } from "../DatesProvider/use-dates-context.mjs";
import { TimePicker } from "../TimePicker/TimePicker.mjs";
import { useUncontrolledDates } from "../../hooks/use-uncontrolled-dates/use-uncontrolled-dates.mjs";
import { pickCalendarProps } from "../Calendar/pick-calendar-levels-props/pick-calendar-levels-props.mjs";
import { DatePicker } from "../DatePicker/DatePicker.mjs";
import { getMaxTime, getMinTime } from "../DateTimePicker/get-min-max-time/get-min-max-time.mjs";
import InlineDateTimePicker_module_default from "./InlineDateTimePicker.module.mjs";
import dayjs from "dayjs";
import { useRef, useState } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { ActionIcon, Box, CheckIcon, Text, genericFactory, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
import { useDidUpdate, useMergedRef } from "@mantine/hooks";
//#region packages/@mantine/dates/src/components/InlineDateTimePicker/InlineDateTimePicker.tsx
const defaultProps = {
type: "default",
size: "sm"
};
const InlineDateTimePicker = genericFactory((_props) => {
const props = 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 = useStyles({
name: _staticSelector,
classes: InlineDateTimePicker_module_default,
props,
classNames,
styles,
unstyled,
attributes,
vars
});
const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
classNames,
styles,
props
});
const ctx = 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 = useRef(null);
const startTimePickerRefMerged = useMergedRef(startTimePickerRef, timePickerProps?.hoursRef);
const endTimePickerRefMerged = useMergedRef(useRef(null), endTimePickerProps?.hoursRef);
const { calendarProps: { allowSingleDateInRange, ...calendarProps }, others } = pickCalendarProps(rest);
const [_value, setValue] = useUncontrolledDates({
type,
value,
defaultValue,
onChange,
withTime: true
});
const formatTime = (dateValue) => dateValue ? dayjs(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] = useState(getInitialStartTime);
const [endTimeValue, setEndTimeValue] = useState(getInitialEndTime);
const [currentLevel, setCurrentLevel] = useState(level || defaultLevel || "month");
const _defaultDate = isRange ? (Array.isArray(_value) ? _value[0] : null) || defaultDate : _value || defaultDate;
const handleDefaultDateChange = (date) => {
if (date) setValue(assignTime(clampDate(minDate, maxDate, date), startTimeValue || defaultTimeValue || ""));
startTimePickerRef.current?.focus();
};
const handleRangeDateChange = (dates) => {
const [start, end] = dates;
setValue([start ? assignTime(clampDate(minDate, maxDate, start), startTimeValue || defaultTimeValue || "") : null, end ? assignTime(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([assignTime(_value[0], timeString), _value[1]]);
} else setValue(assignTime(_value, timeString));
};
const handleEndTimeChange = (timeString) => {
endTimePickerProps?.onChange?.(timeString);
setEndTimeValue(timeString);
if (timeString && isRange && Array.isArray(_value) && _value[1]) {
const newEnd = 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 dayjs(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 "";
};
useDidUpdate(() => {
if (isRange && Array.isArray(_value)) {
setStartTimeValue(formatTime(_value[0]));
setEndTimeValue(formatTime(_value[1]));
} else setStartTimeValue(formatTime(_value));
}, [_value]);
const startMinTime = isRange ? getMinTime({
minDate,
value: Array.isArray(_value) ? _value[0] : null
}) : getMinTime({
minDate,
value: _value
});
const startMaxTime = isRange ? getMaxTime({
maxDate,
value: Array.isArray(_value) ? _value[0] : null
}) : getMaxTime({
maxDate,
value: _value
});
const endMinTime = isRange ? getMinTime({
minDate,
value: Array.isArray(_value) ? _value[1] : null
}) : void 0;
const endMaxTime = isRange ? getMaxTime({
maxDate,
value: Array.isArray(_value) ? _value[1] : null
}) : void 0;
return /* @__PURE__ */ jsxs(Box, {
...getStyles("root", {
className,
style
}),
...others,
ref: props.ref,
children: [
/* @__PURE__ */ jsx(DatePicker, {
fullWidth: fullWidth ?? true,
...calendarProps,
maxDate,
minDate,
size,
variant,
type,
value: _value,
defaultDate: _defaultDate || 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__ */ jsxs("div", {
...getStyles("timeWrapper"),
children: [/* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(CheckIcon, { size: "30%" }),
...submitButtonProps,
onClick: (event) => {
submitButtonProps?.onClick?.(event);
onSubmit?.();
}
})]
}),
currentLevel === "month" && isRange && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text, {
...getStyles("rangeInfo"),
children: getFormattedRange()
}), /* @__PURE__ */ jsxs("div", {
...getStyles("rangeTimeWrapper"),
children: [
/* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(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__ */ jsx(CheckIcon, { size: "30%" }),
...submitButtonProps,
onClick: (event) => {
submitButtonProps?.onClick?.(event);
onSubmit?.();
}
})
]
})] })
]
});
});
InlineDateTimePicker.classes = {
...InlineDateTimePicker_module_default,
...DatePicker.classes
};
InlineDateTimePicker.displayName = "@mantine/dates/InlineDateTimePicker";
//#endregion
export { InlineDateTimePicker };
//# sourceMappingURL=InlineDateTimePicker.mjs.map