Untitled

update the below code so that we can implement prop for the below 3 things to the existing prime react inputText component:
prefixLabelText	Used to prepend the value of a prefix label text to the textbox.
prefixLabel	Used to prepend the value of a key from the Content Manager to the label.
labelClassName	Used to apply CSS class names to the label element.



import React, { useState, useEffect } from 'react';
import { InputText } from 'primereact/inputtext';
import PrimeWrapper from '../primeWrapper/primewrapper';

import { Tooltip } from 'primereact/tooltip';

import PropTypes from 'prop-types';

const PrimeInputText = (props) => {
    return (
        (props.showif != undefined ? props.showif : true) && (
            <>
                <div>
                    <label className={props.labelClassName}>{props.evalLabel(props)}</label>
                </div>
                <InputText
                    id={props.id}
                    className={props.className}
                    value={null || props.value}
                    onChange={props.onChange}
                    onInput={props.onInput}
                    keyfilter={props.keyfilter}
                    placeholder={props.placeholder}
                    variant={props.variant} //"filled" | "outlined"
                    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.aria - label}
                    // aria-required={props.aria - required}
                    onBlur={props.onBlur}
                    onFocus={props.onFocus}>
                    {props.children}
                </InputText>
            </>
        )
    );
};

InputText.propTypes = {
    /** Define a unique id for the component */
    id: PropTypes.string,
    /** List of CSS classnames to apply on wrapper element  */
    className: PropTypes.string,
    /** List of CSS classnames to apply on wrapper element for the label  */
    labelClassName: PropTypes.string,
    /** The value of component */
    value: null || 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,
    /** InputText has built-in key filtering support to block certain keys, refer to keyfilter page for more information. */
    /** Format definition of the keys to block. */
    keyfilter: PropTypes.oneOf([
        'int',
        'pint',
        'num',
        'pnum',
        'money',
        'hex',
        'alpha',
        'alphanum',
        'email',
    ]),
    /** 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.oneOf(['true', 'false']),
    /** When present, it specifies that the component should have invalid state style. */
    invalid: PropTypes.oneOf(['true', 'false']),
    /** Setting this attribute will disable the textbox */
    disabled: PropTypes.oneOf(['true', 'false']),
    /** When enabled, it removes component related styles in the core. */
    unstyled: PropTypes.oneOf(['true', 'false']),
    /** Size/width of the input box. */
    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    /** Makes the input field readOnly, so the user cannot modify it's 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','searh','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,

    ///////////////////////////////////////////////// brought from lift

    /** 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,
    /** Determines if an input is required for Form validation */
    required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    /** Contains key value pairs. The values replace the key in each label
     *  Ex: {"key":"userAccount.registration[0].name[0].firstName"}
     *  labelKey : "Label and <%= key %>"
     */
    labelSubstitute: PropTypes.object,
    /** Contains key value pairs. The values replace the key in each label
     *  Ex: {"key":"Any string/Function call which returns string"}
     *  labelKey : "Label and <%= key %>"
     */
    labelSubstituteText: PropTypes.object,

    ///////////////////////////\self defined

    /** List of CSS classnames to apply on label element  */
    labelClassName: PropTypes.string,
};

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

export default PrimeWrapper(PrimeInputText);