daily-toolset/dist/form/inputs/FormTextArea.js

A lightweight, versatile collection of TypeScript utility functions for everyday development needs. Simplify and streamline your Node.js, React, and Next.js projects with a powerful suite of well-organized helpers for strings, arrays, dates, objects, and

"use strict";
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormTextArea = FormTextArea;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const textarea_1 = require("../../components/ui/textarea");
const FormLabel_1 = require("./FormLabel");
const InputError_1 = require("./InputError");
const formProvider_1 = require("../../form/formProvider");
function FormTextArea({ autosize = true, minRows = 1, maxRows = 4, isRequired, label, isDisabled, error, name, defaultValue, onChange, style, ...rest }) {
    const { formValues, formErrors, updateValue, validateField } = (0, formProvider_1.useForm)();
    const errorData = error
        ? error
        : name
            ? (formErrors === null || formErrors === void 0 ? void 0 : formErrors[name]) || ""
            : "";
    const textareaRef = (0, react_1.useRef)(null);
    const id = (0, react_1.useId)();
    const handleResize = () => {
        if (textareaRef.current && autosize) {
            const lineHeight = parseInt(getComputedStyle(textareaRef.current).lineHeight || "20", 10);
            const maxHeight = maxRows ? maxRows * lineHeight : Infinity;
            textareaRef.current.style.height = "auto"; // Reset height to recalculate
            textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, maxHeight)}px`; // Set height within maxHeight
        }
    };
    (0, react_1.useEffect)(() => {
        handleResize(); // Adjust height on mount
    }, [defaultValue]);
    return ((0, jsx_runtime_1.jsxs)("div", { className: "explita-input-root", children: [(0, jsx_runtime_1.jsx)(FormLabel_1.Label, { id: id, label: label, isRequired: isRequired }), (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { id: id, ref: textareaRef, rows: minRows, name: name, defaultValue: defaultValue
                    ? defaultValue
                    : name
                        ? formValues[name]
                        : "", onInput: handleResize, onChange: onChange
                    ? onChange
                    : async (e) => {
                        updateValue(name, e.target.value);
                        await validateField(name, e.target.value);
                    }, disabled: isDisabled, style: {
                    ...style,
                    overflowY: "auto",
                    resize: "none",
                }, "data-error": errorData.length > 0, ...rest }), (0, jsx_runtime_1.jsx)(InputError_1.InputError, { message: errorData })] }));
}