Untitled

import React, { useState, useEffect } from 'react';
import { InputTextarea } from 'primereact/inputtextarea';
import PrimeWrapper from '../primeWrapper/primewrapper';
import PropTypes from 'prop-types';
import classNames from 'classnames';

const PrimeInputTextarea = (props) => {
    const [charsRemaining, setCharsRemaining] = useState(props.maxLength || 0);
    const [charsEntered, setCharsEntered] = useState(0);

    const calculateLength = props.calculateLength || ((str) => str.length);

    useEffect(() => {
        const initialText = props.value || '';
        const [text, remainingChars] = getStateValues(initialText);
        setCharsRemaining(remainingChars);
        setCharsEntered(text.length);
    }, [props.value]);

    const getStateValues = (text) => {
        const remainingLength = props.maxLength - calculateLength(text);
        if (remainingLength < 0 && props.truncate) {
            const truncatedText = text.slice(0, -1);
            return getStateValues(truncatedText);
        }
        return [text, remainingLength];
    };

    const handleInputChange = (event) => {
        const value = props.autoCapitalize ? event.target.value.toUpperCase() : event.target.value;
        const [text, remainingChars] = getStateValues(value);
        setCharsRemaining(remainingChars);
        setCharsEntered(text.length);
        props.onChange && props.onChange({ ...event, target: { ...event.target, value: text } });
    };

    const getHelperTextLabel = () => {
        if (typeof props.helperTextLabelKey !== 'undefined') {
            return props.evalHelperText(props);
        } else if (typeof props.helperText !== 'undefined') {
            return props.helperText;
        } else {
            return '';
        }
    };

    const getCharRemainingText = () => {
        const charRemainingText = props.charRemainingKey || 'You have {0} characters remaining.';
        return charRemainingText.replace(/\{0\}/g, charsRemaining);
    };

    const getCharEnteredText = () => {
        const charEnteredText = props.charEnteredKey || '{0} characters entered.';
        return charEnteredText.replace(/\{0\}/g, charsEntered);
    };

    return (
        (props.showif !== undefined ? props.showif : true) && (
            <span>
                <div>
                    <label className={props.labelClassName}>{props.evalLabel(props)}</label>
                </div>
                <span>
                    <InputTextarea
                        id={props.id}
                        className={props.className}
                        name={props.name}
                        value={props.value || ''}
                        onChange={handleInputChange}
                        onInput={props.onInput}
                        onBlur={props.onBlur}
                        onFocus={props.onFocus}
                        disabled={props.evalBool(props, 'disabled')}
                        readOnly={props.readOnly}
                        maxLength={props.maxLength}
                        invalid={props.invalid}
                        placeholder={props.placeholder}
                        style={props.style}
                        tooltip={props.tooltip || null}
                        tooltipOptions={props.tooltipOptions}
                        required={props.required}
                        keyfilter={props.keyfilter}
                        autoFocus={props.autofocus}
                        tabIndex={props.tabIndex}
                        autoResize={props.autoResize}
                        rows={props.rows}
                        cols={props.cols}
                        aria-label={props.ariaLabel}
                        aria-labelledby={props.ariaLabelledBy}
                        variant={props.variant} 
                        required={props.required}>
                        {props.children}
                    </InputTextarea>

                    {props.helperTextShowIf && (props.helperText || props.helperTextLabelKey) && (
                        <div>
                            <small
                                className={classNames(
                                    'ux-input-helper-text',
                                    props.helperTextClassName,
                                )}
                            >
                                {getHelperTextLabel()}
                            </small>
                        </div>
                    )}

                    {props.showRemaining && (
                        <span
                            id={`${props.id}_characterRemaining`}
                            className={classNames(
                                `noChar_${charsRemaining === 0}`,
                                props.charRemainingClass
                            )}
                        >
                            {getCharRemainingText()}
                        </span>
                    )}

                    {props.showCurrent && (
                        <span
                            id={`${props.id}_charEntered`}
                            className={classNames(
                                `noChar_${charsEntered === parseInt(props.maxLength)}`,
                                props.charEnteredClass
                            )}
                        >
                            {getCharEnteredText()}
                        </span>
                    )}
                </span>
            </span>
        )
    );
};

PrimeInputTextarea.propTypes = {
    id: PropTypes.string,
    className: PropTypes.string,
    name: PropTypes.string,
    value: PropTypes.string,
    onChange: PropTypes.func,
    onInput: PropTypes.func,
    onFocus: PropTypes.func,
    onBlur: PropTypes.func,
    disabled: PropTypes.bool,
    readOnly: PropTypes.bool,
    maxLength: PropTypes.number,
    invalid: PropTypes.bool,
    placeholder: PropTypes.string,
    style: PropTypes.object,
    tooltip: PropTypes.string,
    tooltipOptions: PropTypes.object,
    required: PropTypes.bool,
    keyfilter: PropTypes.oneOfType([PropTypes.instanceOf(RegExp), PropTypes.string]),
    autofocus: PropTypes.bool,
    tabIndex: PropTypes.number,
    autoResize: PropTypes.bool,
    rows: PropTypes.number,
    cols: PropTypes.number,
    'aria-label': PropTypes.string,
    'aria-labelledby': PropTypes.string,
    variant: PropTypes.oneOf(['filled', 'outlined']),
    labelKey: PropTypes.string,
    labelClassName: PropTypes.string,
    autoCapitalize: PropTypes.bool,
    helperText: PropTypes.string,
    helperTextLabelKey: PropTypes.string,
    helperTextClassName: PropTypes.string,
    helperTextShowIf: PropTypes.bool,
    showRemaining: PropTypes.bool,
    showCurrent: PropTypes.bool,
    charRemainingKey: PropTypes.string,
    charEnteredKey: PropTypes.string,
    charRemainingClass: PropTypes.string,
    charEnteredClass: PropTypes.string,
    calculateLength: PropTypes.func,
    truncate: PropTypes.bool,
};

PrimeInputTextarea.defaultProps = {
    value: '',
    showRemaining: false,
    showCurrent: false,
    maxLength: 0,
    calculateLength: (str) => str.length,
    truncate: false,
    charRemainingKey: '',
    charEnteredKey: '',
};

export default PrimeWrapper(PrimeInputTextarea);