adwaita-web
Version:
A GTK inspired toolkit designed to build awesome web apps
60 lines (59 loc) • 1.91 kB
JavaScript
import cx from "clsx";
import React, { useState } from "react";
import { ListAdd, ListRemove } from "../icons";
const noop = () => {
};
const asNumber = (value) => {
if (value === "")
return 0;
return Number(value);
};
function InputNumber({
className,
size = "medium",
vertical,
disabled,
value: valueProp,
defaultValue,
onChange = noop,
...rest
}) {
const [valueState, setValueState] = useState(defaultValue ?? "");
const value = valueProp ?? valueState;
const step = rest.step ?? 1;
const min = rest.min ?? -Infinity;
const max = rest.max ?? Infinity;
const setValue = valueProp !== void 0 ? onChange ?? setValueState : setValueState;
const onInputChange = (ev) => {
setValue(Number(ev.target.value));
};
const onUp = () => setValue(asNumber(value) + step);
const onDown = () => setValue(asNumber(value) - step);
const downDisabled = disabled || asNumber(value) - step < min;
const upDisabled = disabled || asNumber(value) + step > max;
const buttonClassNames = vertical ? "Button image-button" : void 0;
return /* @__PURE__ */ React.createElement("div", {
className: cx("InputNumber", className, size, { disabled, vertical })
}, /* @__PURE__ */ React.createElement("div", {
className: "Input__area"
}, /* @__PURE__ */ React.createElement("input", {
type: "number",
disabled,
value,
onChange: onInputChange,
...rest
})), /* @__PURE__ */ React.createElement("button", {
tabIndex: -1,
className: cx("InputNumber__button down", buttonClassNames),
disabled: downDisabled,
onClick: onDown
}, /* @__PURE__ */ React.createElement(ListRemove, null)), /* @__PURE__ */ React.createElement("button", {
tabIndex: -1,
className: cx("InputNumber__button up", buttonClassNames),
disabled: upDisabled,
onClick: onUp
}, /* @__PURE__ */ React.createElement(ListAdd, null)));
}
export {
InputNumber
};