@mantine/dates
Version:
Calendars, date and time pickers based on Mantine components
94 lines (93 loc) • 3.24 kB
JavaScript
"use client";
import { padTime } from "../TimePicker/utils/pad-time/pad-time.mjs";
import { jsx } from "react/jsx-runtime";
import { clamp } from "@mantine/hooks";
//#region packages/@mantine/dates/src/components/SpinInput/SpinInput.tsx
const getMaxDigit = (max) => Number(max.toFixed(0)[0]);
function SpinInput({ value, min, max, onChange, focusable, step, onNextInput, onPreviousInput, onFocus, readOnly, allowTemporaryZero = false, placeholder = "--", disableAutoAdvance = false, ...others }) {
const hasMax = Number.isFinite(max);
const maxDigit = hasMax ? getMaxDigit(max) : Infinity;
const arrowsMax = hasMax ? max + 1 - step : max;
const handleChange = (value) => {
if (readOnly) return;
const clearValue = value.replace(/\D/g, "");
if (clearValue !== "") {
let parsedValue = 0;
for (let i = 0; i < clearValue.length; i += 1) {
const digit = clearValue.charCodeAt(i) - 48;
const next = parsedValue * 10 + digit;
parsedValue = next > max ? digit : next;
}
const clampedValue = allowTemporaryZero && parsedValue === 0 && min > 0 ? 0 : clamp(parsedValue, min, max);
onChange(clampedValue);
if (!disableAutoAdvance && (clampedValue > maxDigit || value.startsWith("00"))) onNextInput?.();
}
};
const handleKeyDown = (event) => {
if (readOnly) return;
if (event.key === "0" || event.key === "Num0") {
const { selectionStart, selectionEnd, value: inputValue } = event.currentTarget;
const isEntireValueSelected = inputValue.length > 0 && selectionStart === 0 && selectionEnd === inputValue.length;
if (value === 0 && !isEntireValueSelected) {
event.preventDefault();
onNextInput?.();
}
}
if (event.key === "Home") {
event.preventDefault();
onChange(min);
}
if (event.key === "End" && hasMax) {
event.preventDefault();
onChange(max);
}
if (event.key === "Backspace" || event.key === "Delete") {
event.preventDefault();
if (value !== null) onChange(null);
else onPreviousInput?.();
}
if (event.key === "ArrowRight") {
event.preventDefault();
onNextInput?.();
}
if (event.key === "ArrowLeft") {
event.preventDefault();
onPreviousInput?.();
}
if (event.key === "ArrowUp") {
event.preventDefault();
onChange(value === null ? min : clamp(value + step, min, arrowsMax));
}
if (event.key === "ArrowDown") {
event.preventDefault();
onChange(value === null ? hasMax ? arrowsMax : min : clamp(value - step, min, arrowsMax));
}
};
return /* @__PURE__ */ jsx("input", {
type: "text",
role: "spinbutton",
"aria-valuemin": min,
"aria-valuemax": hasMax ? max : void 0,
"aria-valuenow": value === null ? 0 : value,
"data-empty": value === null || void 0,
inputMode: "numeric",
placeholder,
value: value === null ? "" : padTime(value),
onChange: (event) => handleChange(event.currentTarget.value),
onKeyDown: handleKeyDown,
onFocus: (event) => {
event.currentTarget.select();
onFocus?.(event);
},
onClick: (event) => {
event.stopPropagation();
event.currentTarget.select();
},
onMouseDown: (event) => event.stopPropagation(),
...others
});
}
SpinInput.displayName = "@mantine/dates/SpinInput";
//#endregion
export { SpinInput };
//# sourceMappingURL=SpinInput.mjs.map