Untitled
unknown
plain_text
16 days ago
7.3 kB
2
Indexable
Never
import React, { useState, useEffect } from 'react'; import { InputTextarea } from 'primereact/inputtextarea'; import PrimeWrapper from '../primeWrapper/primewrapper'; import PropTypes from 'prop-types'; import classNames from 'classnames'; const PrimeInputTextarea = (props) => { const [charsRemaining, setCharsRemaining] = useState(props.maxLength || 0); const [charsEntered, setCharsEntered] = useState(0); const calculateLength = props.calculateLength || ((str) => str.length); useEffect(() => { const initialText = props.value || ''; const [text, remainingChars] = getStateValues(initialText); setCharsRemaining(remainingChars); setCharsEntered(text.length); }, [props.value]); const getStateValues = (text) => { const remainingLength = props.maxLength - calculateLength(text); if (remainingLength < 0 && props.truncate) { const truncatedText = text.slice(0, -1); return getStateValues(truncatedText); } return [text, remainingLength]; }; const handleInputChange = (event) => { const value = props.autoCapitalize ? event.target.value.toUpperCase() : event.target.value; const [text, remainingChars] = getStateValues(value); setCharsRemaining(remainingChars); setCharsEntered(text.length); props.onChange && props.onChange({ ...event, target: { ...event.target, value: text } }); }; const getHelperTextLabel = () => { if (typeof props.helperTextLabelKey !== 'undefined') { return props.evalHelperText(props); } else if (typeof props.helperText !== 'undefined') { return props.helperText; } else { return ''; } }; const getCharRemainingText = () => { const charRemainingText = props.charRemainingKey || 'You have {0} characters remaining.'; return charRemainingText.replace(/\{0\}/g, charsRemaining); }; const getCharEnteredText = () => { const charEnteredText = props.charEnteredKey || '{0} characters entered.'; return charEnteredText.replace(/\{0\}/g, charsEntered); }; return ( (props.showif !== undefined ? props.showif : true) && ( <span> <div> <label className={props.labelClassName}>{props.evalLabel(props)}</label> </div> <span> <InputTextarea id={props.id} className={props.className} name={props.name} value={props.value || ''} onChange={handleInputChange} onInput={props.onInput} onBlur={props.onBlur} onFocus={props.onFocus} disabled={props.evalBool(props, 'disabled')} readOnly={props.readOnly} maxLength={props.maxLength} invalid={props.invalid} placeholder={props.placeholder} style={props.style} tooltip={props.tooltip || null} tooltipOptions={props.tooltipOptions} required={props.required} keyfilter={props.keyfilter} autoFocus={props.autofocus} tabIndex={props.tabIndex} autoResize={props.autoResize} rows={props.rows} cols={props.cols} aria-label={props.ariaLabel} aria-labelledby={props.ariaLabelledBy} variant={props.variant} required={props.required}> {props.children} </InputTextarea> {props.helperTextShowIf && (props.helperText || props.helperTextLabelKey) && ( <div> <small className={classNames( 'ux-input-helper-text', props.helperTextClassName, )} > {getHelperTextLabel()} </small> </div> )} {props.showRemaining && ( <span id={`${props.id}_characterRemaining`} className={classNames( `noChar_${charsRemaining === 0}`, props.charRemainingClass )} > {getCharRemainingText()} </span> )} {props.showCurrent && ( <span id={`${props.id}_charEntered`} className={classNames( `noChar_${charsEntered === parseInt(props.maxLength)}`, props.charEnteredClass )} > {getCharEnteredText()} </span> )} </span> </span> ) ); }; PrimeInputTextarea.propTypes = { id: PropTypes.string, className: PropTypes.string, name: PropTypes.string, value: PropTypes.string, onChange: PropTypes.func, onInput: PropTypes.func, onFocus: PropTypes.func, onBlur: PropTypes.func, disabled: PropTypes.bool, readOnly: PropTypes.bool, maxLength: PropTypes.number, invalid: PropTypes.bool, placeholder: PropTypes.string, style: PropTypes.object, tooltip: PropTypes.string, tooltipOptions: PropTypes.object, required: PropTypes.bool, keyfilter: PropTypes.oneOfType([PropTypes.instanceOf(RegExp), PropTypes.string]), autofocus: PropTypes.bool, tabIndex: PropTypes.number, autoResize: PropTypes.bool, rows: PropTypes.number, cols: PropTypes.number, 'aria-label': PropTypes.string, 'aria-labelledby': PropTypes.string, variant: PropTypes.oneOf(['filled', 'outlined']), labelKey: PropTypes.string, labelClassName: PropTypes.string, autoCapitalize: PropTypes.bool, helperText: PropTypes.string, helperTextLabelKey: PropTypes.string, helperTextClassName: PropTypes.string, helperTextShowIf: PropTypes.bool, showRemaining: PropTypes.bool, showCurrent: PropTypes.bool, charRemainingKey: PropTypes.string, charEnteredKey: PropTypes.string, charRemainingClass: PropTypes.string, charEnteredClass: PropTypes.string, calculateLength: PropTypes.func, truncate: PropTypes.bool, }; PrimeInputTextarea.defaultProps = { value: '', showRemaining: false, showCurrent: false, maxLength: 0, calculateLength: (str) => str.length, truncate: false, charRemainingKey: '', charEnteredKey: '', }; export default PrimeWrapper(PrimeInputTextarea);
Leave a Comment