adwaita-web
Version:
A GTK inspired toolkit designed to build awesome web apps
105 lines (104 loc) • 3.17 kB
JavaScript
import cx from "clsx";
import React, { useRef } from "react";
import { WindowClose } from "../icons";
import useControlled from "../utils/useControlled";
import { Button } from "./Button";
import { Spinner } from "./Spinner";
const noop = () => {
};
const Input = React.forwardRef(function Input2({
type = "text",
value: valueProp,
defaultValue,
className,
size = "medium",
loading,
icon: IconElement,
iconAfter: IconAfterElement,
placeholder,
flat,
disabled: disabledValue,
error,
warning,
progress,
children,
allowClear,
onAccept,
onKeyDown,
onChange = noop,
onClickIconAfter,
...rest
}, ref) {
const spinner = loading ? /* @__PURE__ */ React.createElement(Spinner, null) : /* @__PURE__ */ React.createElement(React.Fragment, null);
const disabled = disabledValue || loading;
const inputRef = useRef(null);
const [value, setValue] = useControlled(valueProp, defaultValue, onChange);
const inputClassName = cx("Input", size, {
flat,
disabled,
error,
warning,
progress: progress !== void 0
}) + " " + cx(className);
const onInputChange = (ev) => {
setValue(ev.currentTarget.value);
};
const onInputKeyDown = (ev) => {
if (ev.nativeEvent.key === "Enter" && onAccept) {
onAccept(ev.currentTarget.value);
ev.preventDefault();
return;
}
if (onKeyDown) {
onKeyDown(ev);
}
};
const onClickContainer = (ev) => {
if (ev.target !== inputRef.current && inputRef.current)
inputRef.current.focus();
};
if (allowClear) {
if (value) {
IconAfterElement = WindowClose;
onClickIconAfter = () => setValue("");
} else {
IconAfterElement = void 0;
}
}
return /* @__PURE__ */ React.createElement("div", {
className: inputClassName,
ref,
onClick: onClickContainer
}, /* @__PURE__ */ React.createElement("span", {
className: "Input__left"
}, IconElement ? /* @__PURE__ */ React.createElement(IconElement, null) : spinner), /* @__PURE__ */ React.createElement("div", {
className: "Input__area"
}, /* @__PURE__ */ React.createElement("input", {
type,
placeholder,
disabled,
className: value === "" ? "empty" : void 0,
ref: inputRef,
value,
onChange: onInputChange,
onKeyDown: onAccept ? onInputKeyDown : onKeyDown,
...rest
}), children && /* @__PURE__ */ React.createElement("div", {
className: "Input__children"
}, children)), progress && /* @__PURE__ */ React.createElement("div", {
className: cx("Input__progress", progress === true ? "indeterminate" : void 0)
}, /* @__PURE__ */ React.createElement("span", {
className: "Input__progress__bar",
style: typeof progress === "number" ? { width: `${progress}%` } : void 0
})), IconAfterElement && (onClickIconAfter ? /* @__PURE__ */ React.createElement(Button, {
className: "Input__right",
flat: true,
size,
onClick: onClickIconAfter
}, /* @__PURE__ */ React.createElement(IconAfterElement, null)) : /* @__PURE__ */ React.createElement("span", {
className: "Input__right"
}, /* @__PURE__ */ React.createElement(IconAfterElement, null))));
});
export {
Input
};