@mantine/dates
Version:
Calendars, date and time pickers based on Mantine components
76 lines (75 loc) • 2.57 kB
JavaScript
"use client";
import TimeInput_module_default from "./TimeInput.module.mjs";
import { jsx } from "react/jsx-runtime";
import cx from "clsx";
import { InputBase, factory, useProps, useResolvedStylesApi } from "@mantine/core";
//#region packages/@mantine/dates/src/components/TimeInput/TimeInput.tsx
const TimeInput = factory((_props) => {
const props = useProps([
"Input",
"InputWrapper",
"TimeInput"
], null, _props);
const { classNames, styles, unstyled, vars, withSeconds, minTime, maxTime, value, onChange, step, ...others } = props;
const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
classNames,
styles,
props
});
/**
* Check if time is within limits or not
* If the given value is within limits, return 0
* If the given value is greater than the maxTime, return 1
* If the given value is less than the minTime, return -1
*/
const checkIfTimeLimitExceeded = (val) => {
if (minTime !== void 0 || maxTime !== void 0) {
const [hours, minutes, seconds] = val.split(":").map(Number);
if (minTime) {
const [minHours, minMinutes, minSeconds] = minTime.split(":").map(Number);
if (hours < minHours || hours === minHours && minutes < minMinutes || withSeconds && hours === minHours && minutes === minMinutes && seconds < minSeconds) return -1;
}
if (maxTime) {
const [maxHours, maxMinutes, maxSeconds] = maxTime.split(":").map(Number);
if (hours > maxHours || hours === maxHours && minutes > maxMinutes || withSeconds && hours === maxHours && minutes === maxMinutes && seconds > maxSeconds) return 1;
}
}
return 0;
};
const onTimeBlur = (event) => {
props.onBlur?.(event);
if (minTime !== void 0 || maxTime !== void 0) {
const val = event.currentTarget.value;
if (val) {
const check = checkIfTimeLimitExceeded(val);
if (check === 1) {
if (maxTime) event.currentTarget.value = maxTime;
props.onChange?.(event);
} else if (check === -1) {
if (minTime) event.currentTarget.value = minTime;
props.onChange?.(event);
}
}
}
};
return /* @__PURE__ */ jsx(InputBase, {
classNames: {
...resolvedClassNames,
input: cx(TimeInput_module_default.input, resolvedClassNames?.input)
},
styles: resolvedStyles,
unstyled,
value,
step: step ?? (withSeconds ? 1 : 60),
...others,
onChange,
onBlur: onTimeBlur,
type: "time",
__staticSelector: "TimeInput"
});
});
TimeInput.classes = InputBase.classes;
TimeInput.displayName = "@mantine/dates/TimeInput";
//#endregion
export { TimeInput };
//# sourceMappingURL=TimeInput.mjs.map