@lobehub/ui/es/base-ui/Input/TextArea.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, useMemo, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx, useThemeMode } from "antd-style";
import { useMergeRefs } from "react-merge-refs";
import { Field } from "@base-ui/react/field";
//#region src/base-ui/Input/TextArea.tsx
const textLength = (value) => value === void 0 || value === null ? 0 : Array.from(String(value)).length;
const TextArea = memo(({ ref, className, classNames, styles: customStyles, style, variant, shadow, autoSize, resize = false, disabled, readOnly, allowClear, onClear, onPressEnter, onKeyDown, onChange, showCount, maxLength, value, defaultValue, ...rest }) => {
	const { isDarkMode } = useThemeMode();
	const mergedVariant = variant || (isDarkMode ? "filled" : "outlined");
	const textareaRef = useRef(null);
	const mergedRef = useMergeRefs([ref, textareaRef]);
	const [innerLength, setInnerLength] = useState(() => textLength(value ?? defaultValue));
	const length = value === void 0 ? innerLength : textLength(value);
	const showClear = allowClear && length > 0 && !disabled && !readOnly;
	const over = maxLength !== void 0 && length > maxLength;
	const cssVariables = useMemo(() => {
		if (typeof autoSize !== "object") return {};
		return {
			"--textarea-max-height": autoSize.maxRows ? `calc(1.5em * ${autoSize.maxRows})` : void 0,
			"--textarea-min-rows": autoSize.minRows
		};
	}, [autoSize]);
	return /* @__PURE__ */ jsxs("div", {
		"data-disabled": disabled ? "" : void 0,
		style: {
			...cssVariables,
			...style
		},
		className: cx(rootVariants({
			shadow,
			variant: mergedVariant
		}), styles.textarea, autoSize && styles.textareaAutoSize, resize && styles.textareaResize, showCount && styles.textareaWithCount, className),
		children: [
			/* @__PURE__ */ jsx(Field.Control, {
				className: cx(styles.input, classNames?.input),
				disabled,
				style: customStyles?.input,
				render: /* @__PURE__ */ jsx("textarea", {
					defaultValue,
					maxLength,
					readOnly,
					ref: mergedRef,
					value,
					onChange: (event) => {
						setInnerLength(textLength(event.currentTarget.value));
						onChange?.(event);
					},
					onKeyDown: (event) => {
						if (isPressEnter(event)) onPressEnter?.(event);
						onKeyDown?.(event);
					},
					...rest
				})
			}),
			showClear && /* @__PURE__ */ jsx(ClearButton, {
				className: styles.textareaClear,
				onClear: () => {
					clearNativeValue(textareaRef.current);
					onClear?.();
				}
			}),
			showCount && /* @__PURE__ */ jsx("span", {
				className: styles.count,
				"data-over": over ? "" : void 0,
				children: maxLength === void 0 ? length : `${length} / ${maxLength}`
			})
		]
	});
});
TextArea.displayName = "TextArea";
var TextArea_default = Object.assign(TextArea, { formBinding: { emptyValue: "" } });
//#endregion
export { TextArea_default as default };

//# sourceMappingURL=TextArea.mjs.map