Untitled
unknown
plain_text
a year ago
6.3 kB
10
Indexable
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);
Editor is loading...
Leave a Comment