@mantine/dates
Version:
Calendars, date and time pickers based on Mantine components
202 lines (201 loc) • 5.95 kB
JavaScript
"use client";
const require_clamp_time = require("./utils/clamp-time/clamp-time.cjs");
const require_get_parsed_time = require("./utils/get-parsed-time/get-parsed-time.cjs");
const require_get_time_string = require("./utils/get-time-string/get-time-string.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
//#region packages/@mantine/dates/src/components/TimePicker/use-time-picker.ts
function useTimePicker({ value, defaultValue, onChange, format, amPmLabels, withSeconds = false, min, max, clearable, readOnly, disabled, pasteSplit, type }) {
const parsedTime = require_get_parsed_time.getParsedTime({
time: value || defaultValue || "",
amPmLabels,
format
});
const initialTimeString = require_get_time_string.getTimeString({
hours: parsedTime.hours,
minutes: parsedTime.minutes,
seconds: parsedTime.seconds,
format,
withSeconds,
amPm: parsedTime.amPm,
amPmLabels
});
const acceptChange = (0, react.useRef)(true);
const wasInvalidBefore = (0, react.useRef)(!initialTimeString.valid);
const [hours, setHours] = (0, react.useState)(parsedTime.hours);
const [minutes, setMinutes] = (0, react.useState)(parsedTime.minutes);
const [seconds, setSeconds] = (0, react.useState)(parsedTime.seconds);
const [amPm, setAmPm] = (0, react.useState)(parsedTime.amPm);
const isClearable = clearable && !readOnly && !disabled && (hours !== null || minutes !== null || seconds !== null || amPm !== null);
const hoursRef = (0, react.useRef)(null);
const minutesRef = (0, react.useRef)(null);
const secondsRef = (0, react.useRef)(null);
const amPmRef = (0, react.useRef)(null);
const focus = (field) => {
if (field === "hours") hoursRef.current?.focus();
if (field === "minutes") minutesRef.current?.focus();
if (field === "seconds") secondsRef.current?.focus();
if (field === "amPm") amPmRef.current?.focus();
};
const handleTimeChange = (field, val) => {
const timeString = require_get_time_string.getTimeString({
hours: field === "hours" ? val : hours,
minutes: field === "minutes" ? val : minutes,
seconds: field === "seconds" ? val : seconds,
amPm: field === "amPm" ? val : amPm,
format,
withSeconds,
amPmLabels
});
if (timeString.valid) {
acceptChange.current = false;
wasInvalidBefore.current = false;
if (field === "hours") setHours(val);
if (field === "minutes") setMinutes(val);
if (field === "seconds") setSeconds(val);
if (field === "amPm") setAmPm(val);
onChange?.(timeString.value);
} else {
acceptChange.current = false;
if (!wasInvalidBefore.current) {
onChange?.("");
wasInvalidBefore.current = true;
}
}
};
const setTimeString = (timeString) => {
acceptChange.current = false;
const parsedTime = require_get_parsed_time.getParsedTime({
time: timeString,
amPmLabels,
format
});
setHours(parsedTime.hours);
setMinutes(parsedTime.minutes);
setSeconds(parsedTime.seconds);
setAmPm(parsedTime.amPm);
wasInvalidBefore.current = !require_get_time_string.getTimeString({
...parsedTime,
format,
withSeconds,
amPmLabels
}).valid;
onChange?.(timeString);
};
const onHoursChange = (value) => {
let adjustedValue = value;
if (format === "12h" && typeof value === "number" && value > 12) adjustedValue = (value - 1) % 12 + 1;
setHours(adjustedValue);
handleTimeChange("hours", adjustedValue);
focus("hours");
};
const onMinutesChange = (value) => {
setMinutes(value);
handleTimeChange("minutes", value);
focus("minutes");
};
const onSecondsChange = (value) => {
setSeconds(value);
handleTimeChange("seconds", value);
focus("seconds");
};
const onAmPmChange = (value) => {
setAmPm(value);
handleTimeChange("amPm", value);
focus("amPm");
};
const clear = () => {
acceptChange.current = false;
setHours(null);
setMinutes(null);
setSeconds(null);
setAmPm(null);
onChange?.("");
wasInvalidBefore.current = true;
focus("hours");
};
const onPaste = (event) => {
event.preventDefault();
const pastedValue = event.clipboardData.getData("text");
const parsedTime = (pasteSplit || require_get_parsed_time.getParsedTime)({
time: pastedValue,
format,
amPmLabels
});
const timeString = require_get_time_string.getTimeString({
...parsedTime,
format,
withSeconds,
amPmLabels
});
if (timeString.valid) {
acceptChange.current = false;
const defaultMax = type === "duration" ? void 0 : "23:59:59";
const clamped = require_clamp_time.clampTime(timeString.value, min || "00:00:00", max || defaultMax);
onChange?.(clamped.timeString);
setHours(parsedTime.hours);
setMinutes(parsedTime.minutes);
setSeconds(parsedTime.seconds);
setAmPm(parsedTime.amPm);
}
};
const hiddenInputValue = require_get_time_string.getTimeString({
hours,
minutes,
seconds,
format,
withSeconds,
amPm,
amPmLabels
});
(0, _mantine_hooks.useDidUpdate)(() => {
if (value === "") {
acceptChange.current = false;
setHours(null);
setMinutes(null);
setSeconds(null);
setAmPm(null);
acceptChange.current = true;
return;
}
if (acceptChange.current && typeof value === "string") {
const parsedTime = require_get_parsed_time.getParsedTime({
time: value || "",
amPmLabels,
format
});
setHours(parsedTime.hours);
setMinutes(parsedTime.minutes);
setSeconds(parsedTime.seconds);
setAmPm(parsedTime.amPm);
}
acceptChange.current = true;
}, [value]);
return {
refs: {
hours: hoursRef,
minutes: minutesRef,
seconds: secondsRef,
amPm: amPmRef
},
values: {
hours,
minutes,
seconds,
amPm
},
setHours: onHoursChange,
setMinutes: onMinutesChange,
setSeconds: onSecondsChange,
setAmPm: onAmPmChange,
focus,
clear,
onPaste,
setTimeString,
isClearable,
hiddenInputValue: hiddenInputValue.value
};
}
//#endregion
exports.useTimePicker = useTimePicker;
//# sourceMappingURL=use-time-picker.cjs.map