Untitled
unknown
plain_text
4 months ago
11 kB
4
Indexable
in the below code the auto capitalize is not working, update the code so as to capitalize the input on typing as well. when we type it should be displayed in capital. And do not update the code for anything else like comments
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.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;
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}
// className={classNames(
// { required: labelRequiredClassIf || required },
// labelClassName,
// {
// 'ux-error': getConfigValue(
// 'modelErrorMessageFlags.' + model + '.isError',
// ),
// },
// )}
// labelSubstituteText={labelSubstituteText}
// labelSubstitute={labelSubstitute}
>
{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={props.value || null}
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.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}
// aria-required={required ? true : undefined}
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,
)}
// aria-live={helperTextAriaLive}
// id={`${id}_helptext`}
>
{getHelperTextLabel()}
</small>
</div>
)}
</span>
</span>
)
);
};
PrimeInputText.propTypes = {
/** Define a unique id for the component */
id: PropTypes.string,
/** List of CSS classnames to apply on wrapper element */
className: 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,
/** Pattern to restrict the input.We can use 'int','pint','num','pnum','money','hex','alpha','alphanum','email' and regular expression (e.g., keyfilter={/[^s]/} ) */
keyfilter: PropTypes.oneOfType([PropTypes.RegExp, PropTypes.string]),
/** 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 */
arialabel: 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,
/** List of CSS classnames to apply on label element */
labelClassName: PropTypes.string,
/** 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,
/** List of CSS classnames to apply on prefix text */
prefixLabelClass: PropTypes.string,
/** Appends the value of a Suffix Label Text to the label */
suffixLabelText: PropTypes.string,
/** Appends the value of a key from the Content Manager to the label */
suffixLabel: PropTypes.string,
/** List of CSS classnames to apply on suffix text */
suffixLabelClass: PropTypes.string,
/** Prop that automatically capitalizes entered text */
autoCapitalize: PropTypes.bool,
/**
* Assistive component that conveys additional guidance
* about the field, such as how it will be used and what
* types in values should be provided.
*/
helperText: PropTypes.string,
/** Helper Text via Label Key for locale compatability */
helperTextLabelKey: PropTypes.string,
/** Helper text class name */
helperTextClassName: PropTypes.string,
/** Determines if helper text is hidden or shown */
helperTextShowIf: PropTypes.bool,
/** Determines if an input is required for Form validation */
required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), //////////////////// TO-DO WITH REACT HOOK FORMS
};
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);
Leave a Comment