Untitled

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') {
            // Assuming a function to get value from Content Manager or other data source
            return props.evalLabel({ wcmKey: props.prefixLabel });
        } else if (typeof props.prefixLabelText !== 'undefined') {
            return props.prefixLabelText;
        } else {
            return '';
        }
    };

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

    return (
        (props.showif !== undefined ? props.showif : true) && (
            <div className="prime-input-text-wrapper">
                <div>
                    <label className={props.labelClassName}>
                        {props.evalLabel(props)}
                    </label>
                </div>
                <div className="prime-input-text-container">
                    {(props.prefixLabelText || props.prefixLabel) && (
                        <div className="prime-input-text-prefix">
                            <span>{getPrefixLabel()}</span>
                        </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}
                        onBlur={props.onBlur}
                        onFocus={props.onFocus}>
                        {props.children}
                    </InputText>
                    {props.suffixLabelText && (
                        <div className={classNames('prime-input-text-suffix', props.suffixLabelClass)}>
                            <span>{getSuffixLabel()}</span>
                        </div>
                    )}
                </div>
            </div>
        )
    );
};

PrimeInputText.propTypes = {
    id: PropTypes.string,
    className: PropTypes.string,
    labelClassName: PropTypes.string,
    value: PropTypes.string,
    onChange: PropTypes.func,
    onInput: PropTypes.func,
    keyfilter: PropTypes.oneOf(['int', 'pint', 'num', 'pnum', 'money', 'hex', 'alpha', 'alphanum', 'email']),
    placeholder: PropTypes.string,
    variant: PropTypes.oneOf(['filled', 'outlined']),
    tooltip: PropTypes.string,
    tooltipOptions: PropTypes.object,
    validateOnly: PropTypes.bool,
    invalid: PropTypes.bool,
    disabled: PropTypes.bool,
    unstyled: PropTypes.bool,
    readOnly: PropTypes.bool,
    maxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    type: PropTypes.string,
    style: PropTypes.object,
    autofocus: PropTypes.bool,
    autoComplete: PropTypes.string,
    tabIndex: PropTypes.number,
    onBlur: PropTypes.func,
    onFocus: PropTypes.func,
    showif: PropTypes.bool,
    evalLabel: PropTypes.func,
    evalBool: PropTypes.func,
    prefixLabelText: PropTypes.string,
    prefixLabel: PropTypes.string,
    suffixLabelText: PropTypes.string,
    suffixLabelClass: PropTypes.string,
};

PrimeInputText.defaultProps = {
    value: 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);






.prime-input-text-wrapper {
    display: flex;
    flex-direction: column;
}

.prime-input-text-container {
    display: flex;
    align-items: center;
}

.prime-input-text-prefix, .prime-input-text-suffix {
    padding: 0 0.5rem;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}

.prime-input-text-suffix {
    /* Additional styling if necessary */
}