Untitled

import React, { useState } 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 [inputValue, setInputValue] = useState(props.value || ''); // Initialize state for input value

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

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

    const getHelperTextLabel = () => {
        if (typeof props.helperTextLabelKey !== 'undefined') {
            return props.evalLangText(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;
        setInputValue(value); // Update local state to re-render input with the new value

        // Call parent's onChange handler if provided
        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}>
                        {props.evalLangText(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={inputValue} // Bind state to the value
                        onChange={handleInputChange} // Handle input change
                        onInput={props.onInput}
                        keyfilter={props.keyfilter}
                        placeholder={props.placeholder}
                        variant={props.variant}
                        tooltip={props.tooltip || null}
                        tooltipOptions={props.tooltipOptions}
                        validateOnly={props.validateOnly}
                        invalid={props.invalid}
                        disabled={props.disabled || false}
                        unstyled={props.unstyled || false}
                        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}
                        arialabel={props.arialabel}
                        required={props.required}
                        onBlur={props.onBlur}
                        onFocus={props.onFocus}
                        {...props}>
                        {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,
                                )}>
                                {getHelperTextLabel()}
                            </small>
                        </div>
                    )}
                </span>
            </span>
        )
    );
};

PrimeInputText.propTypes = {
    // ... (keep the existing PropTypes unchanged)
};

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