@drivy/cobalt/components/Form/TextArea.js

Opinionated design system for Drivy's projects.

import { jsx, jsxs } from "react/jsx-runtime";
import classnames from "classnames";
import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
import { withFieldLabelAndHint } from "./field.js";
const TextArea = /*#__PURE__*/ forwardRef((props, ref)=>{
    const { autosize, className, inputClassName, status, maxLength, onChange, ...nativeProps } = props;
    const internalRef = useRef(null);
    const [length, setLength] = useState(0);
    const [height, setHeight] = useState(0);
    const hasAutosize = autosize || maxLength && maxLength > 0;
    useEffect(()=>{
        if (ref && "current" in ref) ref.current = internalRef.current;
    }, [
        ref
    ]);
    const handleAutosize = useCallback((el)=>{
        if (!el) return;
        if (hasAutosize) {
            setLength(el.value.length);
            setHeight(el.scrollHeight + 2);
        }
    }, [
        hasAutosize
    ]);
    useEffect(()=>{
        handleAutosize(internalRef.current);
    }, [
        handleAutosize
    ]);
    const handleChange = (event)=>{
        handleAutosize(event.target);
        onChange?.(event);
    };
    return /*#__PURE__*/ jsxs("div", {
        className: classnames("cobalt-TextAreaField", className, {
            "cobalt-TextAreaField--withLimit": maxLength && maxLength > 0,
            "cobalt-TextAreaField--success": "success" === status,
            "cobalt-TextAreaField--error": "error" === status
        }),
        children: [
            /*#__PURE__*/ jsx("textarea", {
                ...nativeProps,
                maxLength: maxLength,
                style: hasAutosize ? {
                    height: `${height}px`
                } : {},
                onChange: handleChange,
                className: classnames("cobalt-TextAreaField__Input", inputClassName),
                ref: internalRef
            }),
            length > 0 && maxLength && maxLength > 0 && /*#__PURE__*/ jsxs("div", {
                className: "cobalt-TextAreaField__RemainingChars",
                children: [
                    maxLength - length,
                    " remaining characters"
                ]
            })
        ]
    });
});
TextArea.displayName = "TextArea";
const wrappedComponent = withFieldLabelAndHint(TextArea);
wrappedComponent.displayName = "TextArea";
export { wrappedComponent as TextArea };

//# sourceMappingURL=TextArea.js.map