@mantine/dates
Version:
Calendars, date and time pickers based on Mantine components
95 lines (94 loc) • 2.71 kB
JavaScript
"use client";
const require_TimePicker_context = require("../TimePicker.context.cjs");
let react_jsx_runtime = require("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 = require_TimePicker_context.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("option", {
value: "",
children: "--"
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
value: labels.am,
children: labels.am
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
value: labels.pm,
children: labels.pm
})
]
});
}
AmPmInput.displayName = "@mantine/dates/AmPmInput";
//#endregion
exports.AmPmInput = AmPmInput;
//# sourceMappingURL=AmPmInput.cjs.map