61 lines
1.3 KiB
JavaScript
61 lines
1.3 KiB
JavaScript
import { memo, useRef, useEffect } from "react";
|
|
|
|
const CellInput = memo(
|
|
({
|
|
type = "text",
|
|
value,
|
|
onChange,
|
|
onKeyDown,
|
|
dataCell,
|
|
className,
|
|
placeholder,
|
|
step,
|
|
hasError,
|
|
dataBarcode = false,
|
|
onFocus,
|
|
list
|
|
}) => {
|
|
const inputRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const inputEl = inputRef.current;
|
|
if (type === "number" && inputEl) {
|
|
const handleWheel = (e) => e.preventDefault();
|
|
inputEl.addEventListener("wheel", handleWheel, { passive: false });
|
|
|
|
return () => {
|
|
inputEl.removeEventListener("wheel", handleWheel);
|
|
};
|
|
}
|
|
}, [type]);
|
|
|
|
return (
|
|
<input
|
|
ref={inputRef}
|
|
type={type}
|
|
value={value || ""}
|
|
onChange={onChange}
|
|
onKeyDown={(e) => {
|
|
if (type === "number" && ["ArrowUp", "ArrowDown"].includes(e.key)) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
onKeyDown?.(e);
|
|
}}
|
|
data-cell={dataCell}
|
|
data-barcode={dataBarcode}
|
|
onFocus={onFocus}
|
|
className={`cell-input${hasError ? " error" : ""}${
|
|
className ? " " + className : ""
|
|
}`}
|
|
placeholder={placeholder}
|
|
step={step}
|
|
autoComplete="off"
|
|
list={list}
|
|
/>
|
|
);
|
|
}
|
|
);
|
|
|
|
export default CellInput;
|