Untitled

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) => {
    const { prefixLabelText, prefixLabel, labelClassName, showif = true } = props;

    return (
        showif && (
            <>
                <div>
                    {/* Render the prefixLabelText or prefixLabel if provided */}
                    {prefixLabelText && (
                        <span className={`prefix-label ${labelClassName || ''}`}>{prefixLabelText}</span>
                    )}
                    {prefixLabel && (
                        <span className={`prefix-label ${labelClassName || ''}`}>{prefixLabel}</span>
                    )}
                    {/* Render the main label */}
                    <label className={labelClassName}>{props.evalLabel(props)}</label>
                </div>
                <InputText
                    id={props.id}
                    className={props.className}
                    value={props.value || null}
                    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}
                    onBlur={props.onBlur}
                    onFocus={props.onFocus}
                >
                    {props.children}
                </InputText>
            </>
        )
    );
};

PrimeInputText.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: 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. */
    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.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,
    /** 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 */
    labelSubstitute: PropTypes.object,
    /** Contains key-value pairs. The values replace the key in each label */
    labelSubstituteText: PropTypes.object,
    /** 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,
};

PrimeInputText.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',
    showif: true,
    prefixLabelText: '',
    prefixLabel: '',
};

export default PrimeWrapper(PrimeInputText);