Untitled

import { Util as Utils } from '@d-lift/core';
import BaseComponent from '../BaseComponent/BaseComponent';

import React from 'react';
import PropTypes from 'prop-types';
import UXLabel from '../label/Label';

/** Textarea Component */
class Textarea extends BaseComponent {
    static displayName = 'textarea';
    constructor(props) {
        super(props);
        this.state[this.props.model] = this.props.getStateValue(this.props.model);
        this.state.chars_remaining = this.props.maxLength;
        this.state.chars_entered = 0;
        this.calculateLength = (str) => str.length;
        if (this.props.calculateLength && typeof this.props.calculateLength === 'function') {
            this.calculateLength = this.props.calculateLength;
        }
        this.textAreadRef = null;
        this.textAreaSelectionEnd = 0;
    }
    uxComponentDidMount() {
        const id = this.props.id;
        this.textAreaRef = document.getElementById(id);
        let currentText = this.state[this.props.model];
        if (currentText && currentText.length) {
            const [text, remainingChars] = this.getStateValues(currentText);
            this.setState({
                [this.props.model]: this.props.autoCapitalize ? text.toUpperCase() : text,
                chars_remaining: remainingChars,
                chars_entered: text?.length,
            });
        }
    }
    uxComponentDidUpdate() {
        if (this.props.autoCapitalize) {
            this.textAreaRef.selectionEnd = this.textAreaSelectionEnd;
        }
    }
    getCharRemainingText = () => {
        const charRemainingText = Utils.getWcmValue(
            this.props.charRemainingKey.toString().toLowerCase(),
            this,
        );
        return charRemainingText.replace(/\{\{(.*?)\}\}/g, this.state.chars_remaining);
    };

    getCharEnteredText = () => {
        const charEnteredText = Utils.getWcmValue(
            this.props.charEnteredKey.toString().toLowerCase(),
            this,
        );
        return charEnteredText.replace(/\{\{(.*?)\}\}/g, this.state.chars_entered);
    };

    getStateValues = (text) => {
        const remainingLength = this.props.maxLength - this.calculateLength(text);
        if (remainingLength < 0 && this.props.truncate) {
            const truncatedText = text.slice(0, -1);
            return this.getStateValues(truncatedText);
        }
        return [text, remainingLength];
    };
    updateState = (event) => {
        this.textAreaSelectionEnd = this.textAreaRef.selectionEnd;
        let update_state = true;
        if (this.props.change && typeof this.props.change === 'function') {
            update_state = this.props.change(event);
            //If function not returning any thing then considered as true;
            if (update_state === undefined) update_state = true;
        }
        if (update_state) {
            const [text, remainingChars] = this.getStateValues(event.target.value);
            this.setState({
                [this.props.model]: this.props.autoCapitalize ? text.toUpperCase() : text,
                chars_remaining: remainingChars,
                chars_entered: text?.length,
            });
           
        }
    };

    parentUpdates() {
        const { getStateValue, model } = this.props;
        let modelText = getStateValue(model);
        if (modelText && modelText.length) {
            const [text, remainingChars] = this.getStateValues(modelText);
            this.state.chars_remaining = remainingChars;
            this.state.chars_entered = text?.length;
            this.state[model] = text;
        } else {
            this.state[model] = modelText;
        }
    }

    ariaDesribedText() {
        
        if (
            this.props.helperTextShowIf &&
            (this.props.helperText || this.props.helperTextLabelKey)
        ) {
            text =
                text !== undefined
                    ? text + ' ' + this.props.id + '_helptext'
                    : this.props.id + '_helptext';
        }
        if (this.props.showRemaining && !this.props.charRemainingKey) {
            text =
                text !== undefined
                    ? text + ' ' + this.props.id + '_characteremaining'
                    : this.props.id + '_characteremaining';
        }
        if (this.props.showRemaining && this.props.charRemainingKey) {
            text =
                text !== undefined
                    ? text + ' ' + this.props.id + '_custom_characteremaining'
                    : this.props.id + '_custom_characteremaining';
        }
        if (this.props.showCurrent && !this.props.charEnteredKey) {
            text =
                text !== undefined
                    ? text + ' ' + this.props.id + '_charactersentered'
                    : this.props.id + '_charactersentered';
        }
        if (this.props.showCurrent && this.props.charEnteredKey) {
            text =
                text !== undefined
                    ? text + ' ' + this.props.id + '_custom_charactersentered'
                    : this.props.id + '_custom_charactersentered';
        }

        return text;
    }
    renderComponent() {
        let {
            wrap,
            showRemaining,
            showCurrent,
            charRemainingKey,
            charEnteredKey,
            charRemainingClass,
            charEnteredClass,
            inputClassName,
            ariaLabelText,
            ariaMultiline,
        } = this.props;
        return (
            (showIf != undefined ? showIf : true) && (
                
                    <UXLabel
                        id={id}
                        wcmKey={wcmKey}
                        for={id}
                        className={required ? 'required' : ''}
                        ariaHiddenForRequired={true}
                        labelSubstitute={labelSubstitute}
                        labelSubstituteText={labelSubstituteText}
                    >
                        {children}
                    </UXLabel>
                    {this.getFieldErrorTag('top')}
                    <textarea
                        
                        id={id}
                        name={id}
                        value={this.state[model] || ''}
                        aria-placeholder={
                            ariaPlaceholderText ? ariaPlaceholderText : placeholderText
                        }
                        placeholder={placeholderText}
                        maxLength={maxLength}
                        rows={rows}
                        cols={columns}
                        readOnly={readOnly}
                        disabled={disabled}
                    />
                    {showRemaining === true && !charRemainingKey && (
                        <span
                            id={`${id}_characteremaining`}
                            className={`noChar_${this.state.chars_remaining === 0}`}
                        >
                            You have {this.state.chars_remaining} characters remaining.
                        </span>
                    )}
                    {showRemaining === true && charRemainingKey && (
                        <span
                            id={`${id}_custom_characteremaining`}
                            className={`d-block noChar_${this.state.chars_remaining === 0} ${
                                charRemainingClass ? charRemainingClass : ''
                            }`}
                        >
                            {this.getCharRemainingText()}
                        </span>
                    )}
                    {showCurrent === true && !charEnteredKey && (
                        <span
                            id={`${id}_char_entered`}
                            className={`noChar_${this.state.chars_entered === parseInt(maxLength)}`}
                        >
                            {this.state.chars_entered} / {maxLength}
                        </span>
                    )}
                    {showCurrent === true && charEnteredKey && (
                        <span
                            id={`${id}_custom_char_entered`}
                            className={`d-block noChar_${
                                this.state.chars_entered === parseInt(maxLength)
                            } ${charEnteredClass ? charEnteredClass : ''}`}
                        >
                            {this.getCharEnteredText()}
                        </span>
                    )}
                    
            )
        );
    }
}

Textarea.propTypes = {
     /** Specifies how the text in a text area will wrap when submitted in a form */
    wrap: PropTypes.string,
    /** 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,
    /** Custom function to calculate length */
    calculateLength: PropTypes.func,
    /** Determines if component truncates text to max length based on result returned by custom calculateLength function */
    truncate: PropTypes.bool,
    /** Prop that automatically capitalizes entered text */
    autoCapitalize: PropTypes.bool,
};

Textarea.defaultProps = {
    type: 'textarea',
    showRemaining: false,
    showCurrent: false,
    helperTextAriaLive: 'off',
    helperTextShowIf: true,
};

export default Textarea;


Refer the above code to update the primeinputtextarea component with showRemaining,truncate, calculateLength showCurrent,charRemainingKey,charEnteredKey, charRemainingClass,  charEnteredClass,