Untitled
unknown
plain_text
16 days ago
9.7 kB
2
Indexable
Never
update the code for primeInputText by adding the props in a similar way as the below code for the props:suffixLabelText suffixLabelClass prefixLabelText prefixLabel labelClassName return ( (showIf != undefined ? showIf : true) && ( <div id={`${id}_wrapper`} className={classNames('ux-form-group', wrapperClass, className, { 'ux-error': getConfigValue('modelErrorMessageFlags.' + model + '.isError'), })} aria-hidden="false" > {clickValidation !== undefined && ( <UXButton mode="link" className={`ux-click-validation offset-md-${labelWidth} ux-col-md-${width}`} click={clickValidationFunc} > {clickValidation} </UXButton> )} <UXLabel id={id} wcmKey={wcmKey} for={id} className={classNames( { required: labelRequiredClassIf || required }, labelClassName, { 'ux-error': getConfigValue( 'modelErrorMessageFlags.' + model + '.isError', ), }, )} labelSubstituteText={labelSubstituteText} labelSubstitute={labelSubstitute} ariaHiddenForRequired={true} > {children} </UXLabel> {this.getFieldErrorTag('top')} <div className={classNames('ux-input-group', { 'ux-error': getConfigValue( 'modelErrorMessageFlags.' + model + '.isError', ), })} > {(prependIcon !== undefined || prefixLabel !== undefined || prefixLabelText !== undefined) && ( <div className="ux-input-group-prepend"> <div className="ux-input-group-text"> {prefixLabel === undefined && prependIcon !== undefined && ( <span className={`fa fa-${prependIcon}`}></span> )} {(prefixLabel !== undefined || prefixLabelText !== undefined) && prependIcon === undefined && ( <span id={`prefixLabelOf_${id}`} wcmkey={prefixLabel}> {this.getPrefixLabel()} </span> )} </div> </div> )} {/* <!-- prettier-ignore --> */} <input type={this.state.mask ? 'password' : this.textBoxType} inputMode={this.inputMode} id={id} required={required} className={classNames( 'ux-form-control', 'ux-inline-input', inputClassName, )} ref={(c) => (this._input = c)} aria-label={arialabel} aria-labelledby={arialabelledby} aria-describedby={this.ariaDesribedText()} aria-required={required ? true : undefined} attribute-type={this.textBoxType} name={id} autoComplete={autoComplete} placeholder={placeholder ? placeholder : ''} maxLength={maxLength} readOnly={readOnly} disabled={disabled} datatype={dataType ? dataType : 'string'} onBlur={this.handleOnBlur} model={model ? model : ''} value={this.state[model] || ''} onFocus={this.handleOnFocus} onDrop={() => { return false; }} onKeyPress={(e) => { this.handleOnKeyPress(e); }} onKeyUp={(e) => { this.handleOnKeyUp(e); }} onKeyDown={(e) => { this.handleOnKeyDown(e); }} onChange={(e) => { this.updateState(e); change ? change(e) : ''; }} aria-invalid={ getConfigValue('modelErrorMessageFlags.' + model + '.isError') ? 'true' : 'false' } /> {(suffixLabel !== undefined || suffixLabelText !== undefined) && ( <UXLabel id={`suffixLabelOf_${this.props.id}`} className={classNames('ux-input-group-addon', sufixLabelClass)} > {this.getSuffixLabel()} </UXLabel> )} {appendIcon !== undefined && !getConfigValue('modelErrorMessageFlags.' + model + '.isError') && ( <div className="ux-input-group-append"> <div className={classNames('ux-input-group-text', { 'ux-error': getConfigValue( 'modelErrorMessageFlags.' + model + '.isError', ), })} > <span className={`fa fa-${appendIcon}`}></span> </div> </div> )} getSuffixLabel() { if (typeof this.props.suffixLabel !== 'undefined') { return parse(Util.getWcmValue(this.props.suffixLabel.toString().toLowerCase(), this)); } else if (typeof this.props.suffixLabelText !== 'undefined') { return this.props.suffixLabelText; } else { return ''; } } getPrefixLabel() { if (typeof this.props.prefixLabel !== 'undefined') { return parse(Util.getWcmValue(this.props.prefixLabel.toString().toLowerCase(), this)); } else if (typeof this.props.prefixLabelText !== 'undefined') { return this.props.prefixLabelText; } else { return ''; } } /** below function will make the aria-describedby text and return it to Dom element */ ariaDesribedText() { let text = `errorMessageSpanForElementWithId_${this.props.id}`; if (this.props.prefixLabel !== undefined && this.props.prependIcon === undefined) { text = text !== undefined ? text + ' prefixLabelOf_' + this.props.id : ' prefixLabelOf_' + this.props.id; } if (this.props.ariadescribedby) { text = text !== undefined ? text + ' ' + this.props.ariadescribedby : ' ' + this.props.ariadescribedby; } if ( this.props.helperTextShowIf && (this.props.helperText || this.props.helperTextLabelKey) ) { text = text !== undefined ? text + ' ' + this.props.id + '_helptext' : ' ' + this.props.id + '_helptext'; } if ( this.props.validatorGroup && ((this.props.showValidatorGroupAlways !== undefined && this.props.showValidatorGroupAlways === true) || (this.state[this.props.model] !== undefined && this.state[this.props.model] !== null && this.state[this.props.model].trim() !== '')) ) { text = text !== undefined ? text + ' ' + 'customValidator_' + this.props.id : ' customValidator_' + this.props.id; } return text; }
Leave a Comment