Untitled

update the below code because now autoCapitalize,showCurrent,showRemaining,calculateLength are not working as expected. even if i type the values of character in showCurrent,showRemaining are not getting updated, then autocapitalize is not making the text capital on typing



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

const PrimeInputTextarea = (props) => {
    const {
        register,
        formState: { errors },
    } = useForm({
        mode: 'all',
    });
    const { model, validations, children, onBlur, onChange, ...rest } = props;

    const [inputValue, setInputValue] = useState(props.value || '');
    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);
        setInputValue(initialText); // Ensure state reflects initial value
        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, props.maxLength);
            return [truncatedText, 0]; // Return truncated text and zero remaining chars
        }
        return [text, remainingLength];
    };

    const handleInputChange = (event) => {
        const value = props.autoCapitalize ? event.target.value.toUpperCase() : event.target.value;
        const [text, remainingChars] = getStateValues(value);
        setInputValue(text); // Update component's own state
        setCharsRemaining(remainingChars);
        setCharsEntered(text.length);
        props.onChange && props.onChange({ ...event, target: { ...event.target, value: text } });
    };

    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.evalLangText(props.labelKey, props.label)}
                    </label>
                </div>
                <span>
                    <InputTextarea
                        {...rest}
                        value={inputValue}
                        {...register(model, {
                            validate: validations,
                            onChange: (e) => {
                                handleInputChange(e);
                                if (onChange) {
                                    onChange(e);
                                }
                            },
                            onBlur: (e) => {
                                if (onBlur) {
                                    onBlur(e);
                                }
                            },
                        })}>
                        {children}
                    </InputTextarea>

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

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

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

                    {errors[model]?.message && (
                        <div
                            id={`errorMessageSpanForElementWithId_${props.id}`}
                            className="p-error"
                            // role="alert"
                            //is-error="true"
                        >
                            {errors[model]?.message}
                        </div>
                    )}
                </span>
            </span>
        )
    );
};

PrimeInputTextarea.propTypes = {
    /** Determines if the component is hidden or shown */
    showif: PropTypes.bool,
    /** Accepts a Content Manager key and assigns the value to the label of the input */
    label: PropTypes.string,
    labelKey: PropTypes.string,
    /** List of CSS classnames to apply on label element  */
    labelClassName: PropTypes.string,
    /** Prop that automatically capitalizes entered text */
    autoCapitalize: PropTypes.bool,
    /** Helper Text via Label Key for locale compatability */
    helperTextLabel: PropTypes.string,
    helperTextLabelKey: PropTypes.string,
    /** Helper text class name */
    helperTextClassName: PropTypes.string,
    /** Determines if helper text is hidden or shown */
    helperTextShowIf: PropTypes.bool,
    /** Determines if an input is required for Form validation */
    calculateLength: PropTypes.func,
    /** Determines if component truncates text to max length based on result returned by custom calculateLength function */
    truncate: PropTypes.bool,
    /** Determine whether characters remaining count will show */
    showRemaining: PropTypes.bool,
    /** Determine whether how many characters entered count will show  */
    showCurrent: PropTypes.bool,
    /** Characters Remaining WcmKey */
    charRemainingKey: PropTypes.string,
    /** Characters Entered WcmKey */
    charEnteredKey: PropTypes.string,
    /** Additional classes to add to the characters remaining text */
    charRemainingClass: PropTypes.string,
    /** Additional classes to add to the characters entered text */
    charEnteredClass: PropTypes.string,
};

PrimeInputTextarea.defaultProps = {};

export default PrimeWrapper(PrimeInputTextarea);