@mantine/dates
Version:
Calendars, date and time pickers based on Mantine components
95 lines (94 loc) • 2.54 kB
JavaScript
"use client";
import { useTimePickerContext } from "../TimePicker.context.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/dates/src/components/TimePicker/AmPmInput/AmPmInput.tsx
function AmPmInput({ labels, value, onChange, className, style, onPreviousInput, readOnly, onMouseDown, onTouchStart, inputType, ...others }) {
const ctx = useTimePickerContext();
const handleKeyDown = (event) => {
if (readOnly) return;
if (event.key === "Home") {
event.preventDefault();
onChange(labels.am);
}
if (event.key === "End") {
event.preventDefault();
onChange(labels.pm);
}
if (event.key === "Backspace" || event.key === "Delete") {
event.preventDefault();
if (value === null) onPreviousInput?.();
else onChange(null);
}
if (event.key === "ArrowLeft") {
event.preventDefault();
onPreviousInput?.();
}
if (event.key === "ArrowUp" || event.key === "ArrowDown") {
event.preventDefault();
onChange(value === labels.am ? labels.pm : labels.am);
}
if (event.code === "KeyA") {
event.preventDefault();
onChange(labels.am);
}
if (event.code === "KeyP") {
event.preventDefault();
onChange(labels.pm);
}
};
if (inputType === "input") {
const displayValue = value || "--";
const inputSize = displayValue.length + 1;
return /* @__PURE__ */ jsx("input", {
...ctx.getStyles("field", {
className,
style
}),
value: displayValue,
size: inputSize,
onChange: (event) => !readOnly && onChange(event.target.value || null),
onClick: ((event) => event.stopPropagation()),
onKeyDown: handleKeyDown,
onMouseDown: (event) => {
event.stopPropagation();
onMouseDown?.(event);
},
"data-am-pm": true,
...others
});
}
return /* @__PURE__ */ jsxs("select", {
...ctx.getStyles("field", {
className,
style
}),
value: value || "",
onChange: (event) => !readOnly && onChange(event.target.value || null),
onClick: (event) => event.stopPropagation(),
onKeyDown: handleKeyDown,
onMouseDown: (event) => {
event.stopPropagation();
onMouseDown?.(event);
},
"data-am-pm": true,
...others,
children: [
/* @__PURE__ */ jsx("option", {
value: "",
children: "--"
}),
/* @__PURE__ */ jsx("option", {
value: labels.am,
children: labels.am
}),
/* @__PURE__ */ jsx("option", {
value: labels.pm,
children: labels.pm
})
]
});
}
AmPmInput.displayName = "@mantine/dates/AmPmInput";
//#endregion
export { AmPmInput };
//# sourceMappingURL=AmPmInput.mjs.map