Untitled
unknown
plain_text
14 days ago
10 kB
2
Indexable
Never
import { Util as Utils } from '@d-lift/core'; import BaseComponent from '../BaseComponent/BaseComponent'; import React from 'react'; import PropTypes from 'prop-types'; import UXLabel from '../label/Label'; /** Textarea Component */ class Textarea extends BaseComponent { static displayName = 'textarea'; constructor(props) { super(props); this.state[this.props.model] = this.props.getStateValue(this.props.model); this.state.chars_remaining = this.props.maxLength; this.state.chars_entered = 0; this.calculateLength = (str) => str.length; if (this.props.calculateLength && typeof this.props.calculateLength === 'function') { this.calculateLength = this.props.calculateLength; } this.textAreadRef = null; this.textAreaSelectionEnd = 0; } uxComponentDidMount() { const id = this.props.id; this.textAreaRef = document.getElementById(id); let currentText = this.state[this.props.model]; if (currentText && currentText.length) { const [text, remainingChars] = this.getStateValues(currentText); this.setState({ [this.props.model]: this.props.autoCapitalize ? text.toUpperCase() : text, chars_remaining: remainingChars, chars_entered: text?.length, }); } } uxComponentDidUpdate() { if (this.props.autoCapitalize) { this.textAreaRef.selectionEnd = this.textAreaSelectionEnd; } } getCharRemainingText = () => { const charRemainingText = Utils.getWcmValue( this.props.charRemainingKey.toString().toLowerCase(), this, ); return charRemainingText.replace(/\{\{(.*?)\}\}/g, this.state.chars_remaining); }; getCharEnteredText = () => { const charEnteredText = Utils.getWcmValue( this.props.charEnteredKey.toString().toLowerCase(), this, ); return charEnteredText.replace(/\{\{(.*?)\}\}/g, this.state.chars_entered); }; getStateValues = (text) => { const remainingLength = this.props.maxLength - this.calculateLength(text); if (remainingLength < 0 && this.props.truncate) { const truncatedText = text.slice(0, -1); return this.getStateValues(truncatedText); } return [text, remainingLength]; }; updateState = (event) => { this.textAreaSelectionEnd = this.textAreaRef.selectionEnd; let update_state = true; if (this.props.change && typeof this.props.change === 'function') { update_state = this.props.change(event); //If function not returning any thing then considered as true; if (update_state === undefined) update_state = true; } if (update_state) { const [text, remainingChars] = this.getStateValues(event.target.value); this.setState({ [this.props.model]: this.props.autoCapitalize ? text.toUpperCase() : text, chars_remaining: remainingChars, chars_entered: text?.length, }); } }; parentUpdates() { const { getStateValue, model } = this.props; let modelText = getStateValue(model); if (modelText && modelText.length) { const [text, remainingChars] = this.getStateValues(modelText); this.state.chars_remaining = remainingChars; this.state.chars_entered = text?.length; this.state[model] = text; } else { this.state[model] = modelText; } } ariaDesribedText() { 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.showRemaining && !this.props.charRemainingKey) { text = text !== undefined ? text + ' ' + this.props.id + '_characteremaining' : this.props.id + '_characteremaining'; } if (this.props.showRemaining && this.props.charRemainingKey) { text = text !== undefined ? text + ' ' + this.props.id + '_custom_characteremaining' : this.props.id + '_custom_characteremaining'; } if (this.props.showCurrent && !this.props.charEnteredKey) { text = text !== undefined ? text + ' ' + this.props.id + '_charactersentered' : this.props.id + '_charactersentered'; } if (this.props.showCurrent && this.props.charEnteredKey) { text = text !== undefined ? text + ' ' + this.props.id + '_custom_charactersentered' : this.props.id + '_custom_charactersentered'; } return text; } renderComponent() { let { wrap, showRemaining, showCurrent, charRemainingKey, charEnteredKey, charRemainingClass, charEnteredClass, inputClassName, ariaLabelText, ariaMultiline, } = this.props; return ( (showIf != undefined ? showIf : true) && ( <UXLabel id={id} wcmKey={wcmKey} for={id} className={required ? 'required' : ''} ariaHiddenForRequired={true} labelSubstitute={labelSubstitute} labelSubstituteText={labelSubstituteText} > {children} </UXLabel> {this.getFieldErrorTag('top')} <textarea id={id} name={id} value={this.state[model] || ''} aria-placeholder={ ariaPlaceholderText ? ariaPlaceholderText : placeholderText } placeholder={placeholderText} maxLength={maxLength} rows={rows} cols={columns} readOnly={readOnly} disabled={disabled} /> {showRemaining === true && !charRemainingKey && ( <span id={`${id}_characteremaining`} className={`noChar_${this.state.chars_remaining === 0}`} > You have {this.state.chars_remaining} characters remaining. </span> )} {showRemaining === true && charRemainingKey && ( <span id={`${id}_custom_characteremaining`} className={`d-block noChar_${this.state.chars_remaining === 0} ${ charRemainingClass ? charRemainingClass : '' }`} > {this.getCharRemainingText()} </span> )} {showCurrent === true && !charEnteredKey && ( <span id={`${id}_char_entered`} className={`noChar_${this.state.chars_entered === parseInt(maxLength)}`} > {this.state.chars_entered} / {maxLength} </span> )} {showCurrent === true && charEnteredKey && ( <span id={`${id}_custom_char_entered`} className={`d-block noChar_${ this.state.chars_entered === parseInt(maxLength) } ${charEnteredClass ? charEnteredClass : ''}`} > {this.getCharEnteredText()} </span> )} ) ); } } Textarea.propTypes = { /** Specifies how the text in a text area will wrap when submitted in a form */ wrap: PropTypes.string, /** Determine whether characters remaining count will show */ showRemaining: PropTypes.bool, /** Determine whether how many characters entered count will show */ showCurrent: PropTypes.bool, /** Characters Remaining WcmKey */ charRemainingKey: PropTypes.string, /** Characters Entered WcmKey */ charEnteredKey: PropTypes.string, /** Additional classes to add to the characters remaining text */ charRemainingClass: PropTypes.string, /** Additional classes to add to the characters entered text */ charEnteredClass: PropTypes.string, /** Custom function to calculate length */ calculateLength: PropTypes.func, /** Determines if component truncates text to max length based on result returned by custom calculateLength function */ truncate: PropTypes.bool, /** Prop that automatically capitalizes entered text */ autoCapitalize: PropTypes.bool, }; Textarea.defaultProps = { type: 'textarea', showRemaining: false, showCurrent: false, helperTextAriaLive: 'off', helperTextShowIf: true, }; export default Textarea; Refer the above code to update the primeinputtextarea component with showRemaining,truncate, calculateLength showCurrent,charRemainingKey,charEnteredKey, charRemainingClass, charEnteredClass,
Leave a Comment