@heycar-uikit/core/textarea/modern/Textarea.js

The React UI library from HeyCar

import React, { useState, useCallback } from 'react';
import cn from 'classnames';
import FormControl from '../../form-control/modern';
import TextareaCounter from './components/TextareaCounter.js';

var styles = {"textarea":"textarea__textarea_bsysk","formControl":"textarea__formControl_bsysk"};
 require('./styles/default.css');

const Textarea = React.forwardRef(({ value, defaultValue, hint, error, label, maxLength, fullWidth = false, resize = 'none', disabled, readOnly, onFocus, onBlur, onChange, className, dataTestId, ...restProps }, ref) => {
    const textareaClassNames = cn(styles.textarea, className, {
        [styles.resizeVertical]: resize === 'vertical',
    });
    const isUncontrolled = value === undefined;
    const ariaLabel = typeof label === 'string' ? label : undefined;
    const [isFocused, setFocused] = useState(restProps.autoFocus);
    const [stateValue, setStateValue] = useState(defaultValue || '');
    const isFilled = Boolean(isUncontrolled ? stateValue : value);
    const handleTextareaFocus = useCallback((event) => {
        if (!readOnly)
            setFocused(true);
        if (onFocus)
            onFocus(event);
    }, [onFocus, readOnly]);
    const handleTextareaBlur = useCallback((event) => {
        setFocused(false);
        if (onBlur)
            onBlur(event);
    }, [onBlur]);
    const handleTextareaChange = useCallback((event) => {
        if (onChange)
            onChange(event, { value: event.target.value });
        if (isUncontrolled)
            setStateValue(event.target.value);
    }, [onChange, isUncontrolled]);
    const getValueLength = () => {
        if (isUncontrolled)
            return stateValue.length;
        return value.length;
    };
    return (React.createElement(FormControl, { bottomAddons: !!maxLength && (React.createElement(TextareaCounter, { length: getValueLength(), maxLength: maxLength })), className: styles.formControl, disabled: disabled, error: error, filled: isFilled || isFocused, focused: isFocused, fullWidth: fullWidth, hint: hint, label: label },
        React.createElement("textarea", { ...restProps, "aria-label": ariaLabel, className: textareaClassNames, "data-test-id": dataTestId, disabled: disabled, maxLength: maxLength, onBlur: handleTextareaBlur, onChange: handleTextareaChange, onFocus: handleTextareaFocus, readOnly: readOnly, ref: ref, value: value })));
});
Textarea.displayName = 'Textarea';

export { Textarea as default };