@lobehub/ui/es/base-ui/Input/Input.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

"use client";
import { rootVariants, styles } from "./style.mjs";
import ClearButton from "./ClearButton.mjs";
import { clearNativeValue } from "./clearNativeValue.mjs";
import { isPressEnter } from "./pressEnter.mjs";
import { memo, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx, useThemeMode } from "antd-style";
import { useMergeRefs } from "react-merge-refs";
import { Input } from "@base-ui/react/input";
//#region src/base-ui/Input/Input.tsx
const hasText = (value) => value !== void 0 && value !== null && String(value).length > 0;
const Input$1 = memo(({ ref, className, classNames, styles: customStyles, style, variant, shadow, size = "middle", prefix, suffix, disabled, readOnly, allowClear, onClear, onPressEnter, onKeyDown, onChange, value, defaultValue, ...rest }) => {
	const { isDarkMode } = useThemeMode();
	const mergedVariant = variant || (isDarkMode ? "filled" : "outlined");
	const inputRef = useRef(null);
	const mergedRef = useMergeRefs([ref, inputRef]);
	const [filled, setFilled] = useState(() => hasText(value ?? defaultValue));
	const isFilled = value === void 0 ? filled : hasText(value);
	const showClear = allowClear && isFilled && !disabled && !readOnly;
	return /* @__PURE__ */ jsxs("div", {
		className: cx(rootVariants({
			shadow,
			size,
			variant: mergedVariant
		}), className),
		"data-disabled": disabled ? "" : void 0,
		style,
		children: [
			prefix && /* @__PURE__ */ jsx("span", {
				className: cx(styles.slot, classNames?.prefix),
				style: customStyles?.prefix,
				children: prefix
			}),
			/* @__PURE__ */ jsx(Input, {
				className: cx(styles.input, classNames?.input),
				defaultValue,
				disabled,
				readOnly,
				ref: mergedRef,
				style: customStyles?.input,
				value,
				onChange: (event) => {
					setFilled(event.currentTarget.value.length > 0);
					onChange?.(event);
				},
				onKeyDown: (event) => {
					if (isPressEnter(event)) onPressEnter?.(event);
					onKeyDown?.(event);
				},
				...rest
			}),
			showClear && /* @__PURE__ */ jsx(ClearButton, { onClear: () => {
				clearNativeValue(inputRef.current);
				onClear?.();
			} }),
			suffix && /* @__PURE__ */ jsx("span", {
				className: cx(styles.slot, classNames?.suffix),
				style: customStyles?.suffix,
				children: suffix
			})
		]
	});
});
Input$1.displayName = "Input";
var Input_default = Object.assign(Input$1, { formBinding: { emptyValue: "" } });
//#endregion
export { Input_default as default };

//# sourceMappingURL=Input.mjs.map