Untitled
unknown
plain_text
a year ago
13 kB
10
Indexable
uxComponentDidUpdate() {
if (this.props.autoCapitalize) {
this.textBoxRef.selectionEnd = this.textBoxSelectionEnd;
}
if (this._input !== undefined && this.props.autofocus === true && !this.focusSetTriggered) {
this._input.focus();
this.focusSetTriggered = true;
}
}
updateState = (event) => {
this.textBoxSelectionEnd = this.textBoxRef.selectionEnd;
if (this.props.inputMode === 'number' || this.props.inputMode === 'numeric') {
if (!/^[0-9]*$/.test(event.target.value)) {
return false;
}
}
if (this.props.inputMode === 'decimal') {
if (!/^[\d]*?\.*?\d*$/.test(event.target.value)) {
return false;
}
}
if (this.props.inputMode === 'currency') {
if (!/^[\d]*\.?([\d]{1,2})?$/.test(event.target.value)) {
return false;
}
}
if (this.inputPattern !== undefined) {
let re = new RegExp(this.inputPattern);
if (!re.test(event.target.value)) {
return false;
}
}
let model = {};
model[this.props.model] = this.props.autoCapitalize
? event.target.value.toUpperCase()
: event.target.value;
this.setState(model);
if (this?.props?.experiment?.autoCompleteMode === true) {
if (this.state.isFocus === false) {
let updatedValue = this.props.autoCapitalize
? event.target.value.toUpperCase()
: event.target.value;
this.props.stateHandler(this.props.model, updatedValue);
}
//Commented out as part of LIFT-404
// if (
// document.querySelector(`#${this.props.id}:-internal-autofill-selected`) !== null &&
// document.querySelector(`#${this.props.id}:-internal-autofill-selected`).length > 0
// ) {
// this.props.stateHandler(this.props.model, event.target.value);
// }
}
};
refer to the above code and update the primeInputText component to add autocapitalize prop to it
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 '';
}
};
return (
(props.showif !== undefined ? props.showif : true) && (
<div 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.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 || null}
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}
aria-label={props.arialabel}
// required={required}
// aria-required={required ? true : undefined}
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 = {
/** 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,
/** InputText has built-in key filtering support to block certain keys, refer to keyfilter page for more information. */
keyfilter: PropTypes.oneOf([
'int',
'pint',
'num',
'pnum',
'money',
'hex',
'alpha',
'alphanum',
'email',
]),
/** 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 */
//'aria-label': PropTypes.string,
/** Indicates that input is required */
//'aria-required': PropTypes.bool,
/** Determines if an input is required for Form validation */
required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
/** 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 */
////////////////////////// LIFT-PROPS
showif: PropTypes.bool,
/** Accepts a Content Manager key and assigns the value to the label of the input */
labelKey: 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 label element */
labelClassName: 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 */
sufixLabelClass: PropTypes.string,
////////////////////////// TO-DO
/** Contains key-value pairs. The values replace the key in each label */
labelSubstitute: PropTypes.object,
/** Contains key-value pairs. The values replace the key in each label */
labelSubstituteText: PropTypes.object,
/**
* 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,
/** Adds aria-live to Helper text */
helperTextAriaLive: PropTypes.oneOf(['off', 'polite', 'assertive']),
/** 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]),
/** Prop that automatically capitalizes entered text */
autoCapitalize: PropTypes.bool,
};
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 */
// }
Editor is loading...
Leave a Comment