Untitled

update the below code so that oncapitalize will take in input in capital letters similar to primeinputtextarea


import React from 'react';
import { InputText } from 'primereact/inputtext';
import PrimeWrapper from '../primeWrapper/primewrapper';
import PropTypes from 'prop-types';
import classNames from 'classnames';

const PrimeInputText = (props) => {
    const getPrefixLabel = () => {
        if (typeof props.prefixLabel !== 'undefined') {
            return props.evalPrefix(props);
        } else if (typeof props.prefixLabelText !== 'undefined') {
            return props.prefixLabelText;
        } else {
            return '';
        }
    };

    const getSuffixLabel = () => {
        if (typeof props.suffixLabel !== 'undefined') {
            return props.evalSuffix(props);
        } else if (typeof props.suffixLabelText !== 'undefined') {
            return props.suffixLabelText;
        } else {
            return '';
        }
    };

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

    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 } });
    };

    return (
        (props.showif !== undefined ? props.showif : true) && (
            <span className="prime-input-text-wrapper">
                <div>
                    <label
                        className={props.labelClassName}
                        // className={classNames(
                        //     { required: labelRequiredClassIf || required },
                        //     labelClassName,
                        //     {
                        //         'ux-error': getConfigValue(
                        //             'modelErrorMessageFlags.' + model + '.isError',
                        //         ),
                        //     },
                        // )}
                        // labelSubstituteText={labelSubstituteText}
                        // labelSubstitute={labelSubstitute}
                    >
                        {props.evalLabel(props)}
                    </label>
                </div>
                <span className="prime-input-text-container">
                    {(props.prefixLabelText || props.prefixLabel) && (
                        <span
                            className={classNames(
                                'prime-input-text-prefix',
                                props.prefixLabelClass,
                            )}>
                            <span>{getPrefixLabel()}</span>
                        </span>
                    )}
                    <InputText
                        id={props.id}
                        className={props.className}
                        value={props.value || null}
                        onChange={handleInputChange}
                        onInput={props.onInput}
                        keyfilter={props.keyfilter}
                        placeholder={props.placeholder}
                        variant={props.variant} //css not getting applies
                        tooltip={props.tooltip || null}
                        tooltipOptions={props.tooltipOptions}
                        validateOnly={props.validateOnly}
                        invalid={props.invalid}
                        disabled={props.evalBool(props, 'disabled')}
                        unstyled={props.evalBool(props, 'unstyled')}
                        readOnly={props.readOnly}
                        maxLength={props.maxLength}
                        size={props.size || null}
                        type={props.type}
                        style={props.style}
                        autoFocus={props.autofocus}
                        autoComplete={props.autoComplete}
                        tabIndex={props.tabIndex}
                        aria-label={props.arialabel}
                        required={props.required}
                        // aria-required={required ? true : undefined}
                        onBlur={props.onBlur}
                        onFocus={props.onFocus}>
                        {props.children}
                    </InputText>
                    {(props.suffixLabelText || props.suffixLabel) && (
                        <span
                            className={classNames(
                                'prime-input-text-suffix',
                                props.suffixLabelClass,
                            )}>
                            <span>{getSuffixLabel()}</span>
                        </span>
                    )}

                    {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>
        )
    );
};

PrimeInputText.propTypes = {
    /** Define a unique id for the component */
    id: PropTypes.string,
    /** List of CSS classnames to apply on wrapper element  */
    className: 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,
    /** 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]),
    /** Temporary text element that can be replaced with something else */
    placeholder: PropTypes.string,
    /** Specifies the input variant of the component. Possible values are "filled" | "outlined" */
    variant: PropTypes.oneOf(['filled', 'outlined']),
    /** Content of the tooltip. */
    tooltip: PropTypes.string,
    /** Configuration of the tooltip, refer to the tooltip documentation for more information. */
    tooltipOptions: PropTypes.object,
    /** When enabled, instead of blocking keys, input is validated internally to test against the regular expression. */
    validateOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    /** When present, it specifies that the component should have invalid state style. */
    invalid: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    /** Setting this attribute will disable the textbox */
    disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    /** When enabled, it removes component related styles in the core. */
    unstyled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    /** Size/width of the input box. */
    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    /** Makes the input field readOnly, so the user cannot modify its value. */
    readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    /** Maximum number of input characters allowed */
    maxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    /** Specifies the type of the input element(e.g., 'text','password','email','number','tel','url','search','date','datetime-local','month','week','time'). Default is 'text'. */
    type: PropTypes.string,
    /** Inline styles applied to input element. */
    style: PropTypes.object,
    /** Sets autofocus property on textbox */
    autofocus: PropTypes.bool,
    /** Sets auto complete property on textbox */
    autoComplete: PropTypes.string,
    /** Specifies the tab order of the input element when the user navigates using the keyboard. */
    tabIndex: PropTypes.number,

    /** Attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen  */
    //'aria-label': PropTypes.string,
    /** Indicates that input is required  */
    //'aria-required': PropTypes.bool,

    /** Takes a user defined javascript function which executes on a 'blur' event */
    onBlur: PropTypes.func,
    /** Event handler which is triggered when the input field gains focus */
    onFocus: PropTypes.func,
    /** 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 */
    labelKey: PropTypes.string,
    /** List of CSS classnames to apply on label element  */
    labelClassName: PropTypes.string,
    /** Text to prepend as a prefix label inside the input */
    prefixLabelText: PropTypes.string,
    /** Text to prepend from a dynamic source, such as a Content Manager */
    prefixLabel: PropTypes.string,
    /** List of CSS classnames to apply on prefix text  */
    prefixLabelClass: PropTypes.string,
    /** Appends the value of a Suffix Label Text to the label */
    suffixLabelText: PropTypes.string,
    /** Appends the value of a key from the Content Manager to the label */
    suffixLabel: PropTypes.string,
    /** List of CSS classnames to apply on suffix text  */
    suffixLabelClass: 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
};

PrimeInputText.defaultProps = {
    value: null,
    validateOnly: false,
    invalid: false,
    variant: 'outlined',
    tooltip: null,
    tooltipOptions: null,
    unstyled: false,
    size: null,
    type: 'text',
    autofocus: false,
    autoComplete: 'on',
    keyfilter: null,
};

export default PrimeWrapper(PrimeInputText);