Untitled

import React 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 handleInputChange = (event) => {
        // If autoCapitalize is true, convert input to uppercase
        const value = props.autoCapitalize ? event.target.value.toUpperCase() : event.target.value;
        props.onChange && props.onChange({ ...event, target: { ...event.target, value } });
    };

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

    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 || null}
                        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} //css not getting applies
                        required={props.required}>
                        {props.children}
                    </InputTextarea>

                    {props.helperTextShowIf && (props.helperText || props.helperTextLabelKey) && (
                        <div>
                            <small
                                className={classNames(
                                    'ux-input-helper-text',
                                    props.helperTextClassName,
                                )}
                                // aria-live={helperTextAriaLive}
                                // id={`${id}_helptext`}
                            >
                                {getHelperTextLabel()}
                            </small>
                        </div>
                    )}
                </span>
            </span>
        )
    );
};

PrimeInputTextarea.propTypes = {
    /** Define a unique id for the component */
    id: PropTypes.string,
    /** List of CSS classnames to apply on wrapper element  */
    className: PropTypes.string,
    /** Name of the input element.  */
    name: PropTypes.string,
    /** The value of component */
    value: PropTypes.string,
    /** Event handler triggered when the user commits a change to the component's value. */
    onChange: PropTypes.func,
    /** Callback to invoke while typing value on input */
    onInput: PropTypes.func,
    /** Fires on focus */
    onFocus: PropTypes.func,
    /** Fires on blur */
    onBlur: PropTypes.func,
    /** Setting this attribute will disable the textarea */
    disabled: PropTypes.bool,
    /** Setting this attribute will generate a readOnly textarea */
    readOnly: PropTypes.bool,
    /** Maximum number of input characters allowed */
    maxLength: PropTypes.string,
    /** Invalid state is displayed using the invalid prop to indicate a failed validation. */
    invalid: PropTypes.string,
    /** Input placeholder text */
    placeholder: PropTypes.string,
    /** Inline styles applied to input element. */
    style: PropTypes.object,
    /** Content of the tooltip. */
    tooltip: PropTypes.string,
    /** Configuration of the tooltip, refer to the tooltip documentation for more information. */
    tooltipOptions: PropTypes.object,
    /** Specifies that the input field must be filled out before submitting the form. */
    required: PropTypes.bool,
    /** Pattern to restrict the input.We can use 'int','pint','num','pnum','money','hex','alpha','alphanum','email' and regular expression (e.g., keyfilter={/[^s]/} ) */
    keyfilter: PropTypes.oneOfType([PropTypes.RegExp, PropTypes.string]),
    /** Automatically focuses the textarea input when the page loads.  */
    autofocus: PropTypes.bool,
    /** Specifies the tab order of an element.  */
    tabIndex: PropTypes.number,
    /** Allows the text area to be resized */
    autoResize: PropTypes.bool,
    /** Specifies the visible number of lines in a text area */
    rows: PropTypes.string,
    /** Specifies the visible width of a text area */
    cols: PropTypes.string,
    /** Defines a string value that labels the current element. */
    'aria-label': PropTypes.string,
    /** Identifies the element (or elements) that labels the current element.*/
    'aria-labelledby': PropTypes.string,
    /** Specifies the input variant of the component. Possible values are "filled" | "outlined" */
    variant: PropTypes.oneOf(['filled', 'outlined']),
    /** Accepts a Content Manager key and assigns the value to the label of the input */
    labelKey: PropTypes.string,
    /** List of CSS classnames to apply on label element  */
    labelClassName: PropTypes.string,
    /** Prop that automatically capitalizes entered text */
    autoCapitalize: PropTypes.bool,
    /**
     * Assistive component that conveys additional guidance
     * about the field, such as how it will be used and what
     * types in values should be provided.
     */
    helperText: PropTypes.string,
    /** Helper Text via Label Key for locale compatability */
    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 */
    required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), //////////////////// TO-DO WITH REACT HOOK FORMS
    /** 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,
    /** 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 = {
    value: null,
    validateOnly: false,
    invalid: false,
    variant: 'outlined',
    tooltip: null,
    tooltipOptions: null,
    type: 'text',
    autofocus: false,
    autoResize: false,
    keyfilter: null,
};

export default PrimeWrapper(PrimeInputTextarea);