Untitled

mail@pastecode.io avatar
unknown
plain_text
20 days ago
6.3 kB
2
Indexable
Never
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.evalLabel({ wcmKey: props.prefixLabel });
        } else if (typeof props.prefixLabelText !== 'undefined') {
            return props.prefixLabelText;
        } else {
            return '';
        }
    };

    const getSuffixLabel = () => {
        if (typeof props.suffixLabel !== 'undefined') {
            return props.evalLabel({ wcmKey: props.suffixLabel });
        } else if (typeof props.suffixLabelText !== 'undefined') {
            return props.suffixLabelText;
        } 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) && (
            <div className="prime-input-text-wrapper">
                <div>
                    <label className={props.labelClassName}>
                        {props.evalLabel(props)}
                    </label>
                </div>
                <span className="prime-input-text-container">
                    {(props.prefixLabelText || props.prefixLabel) && (
                        <span className="prime-input-text-prefix">
                            <span>{getPrefixLabel()}</span>
                        </span>
                    )}
                    <InputText
                        id={props.id}
                        className={props.className}
                        value={props.value || ''}
                        onChange={handleInputChange}
                        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.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}
                        autoCapitalize={props.autoCapitalize ? 'true' : 'false'}
                        onBlur={props.onBlur}
                        onFocus={props.onFocus}
                    >
                        {props.children}
                    </InputText>
                    {props.suffixLabelText && (
                        <span
                            className={classNames(
                                'prime-input-text-suffix',
                                props.suffixLabelClass,
                            )}>
                            <span>{getSuffixLabel()}</span>
                        </span>
                    )}
                </span>
            </div>
        )
    );
};

PrimeInputText.propTypes = {
    id: PropTypes.string,
    className: 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.oneOfType([PropTypes.bool, PropTypes.string]),
    invalid: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    unstyled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    maxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    type: PropTypes.string,
    style: PropTypes.object,
    autofocus: PropTypes.bool,
    autoComplete: PropTypes.string,
    tabIndex: PropTypes.number,
    arialabel: PropTypes.string,
    required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    onBlur: PropTypes.func,
    onFocus: PropTypes.func,
    showif: PropTypes.bool,
    labelKey: PropTypes.string,
    prefixLabelText: PropTypes.string,
    prefixLabel: PropTypes.string,
    labelClassName: PropTypes.string,
    suffixLabelText: PropTypes.string,
    suffixLabel: PropTypes.string,
    sufixLabelClass: PropTypes.string,
    labelSubstitute: PropTypes.object,
    labelSubstituteText: PropTypes.object,
    helperText: PropTypes.string,
    helperTextLabelKey: PropTypes.string,
    helperTextClassName: PropTypes.string,
    helperTextAriaLive: PropTypes.oneOf(['off', 'polite', 'assertive']),
    helperTextShowIf: PropTypes.bool,
    required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    autoCapitalize: PropTypes.bool, // New Prop for autoCapitalize
};

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

export default PrimeWrapper(PrimeInputText);
Leave a Comment