Untitled
unknown
plain_text
15 days ago
5.5 kB
2
Indexable
Never
import React, { useEffect, useState } 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 [inputValue, setInputValue] = useState(props.value || ''); 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); setInputValue(initialText); // Ensure state reflects initial value 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, props.maxLength); return [truncatedText, 0]; // Return truncated text and zero remaining chars } return [text, remainingLength]; }; const handleInputChange = (event) => { const value = props.autoCapitalize ? event.target.value.toUpperCase() : event.target.value; const [text, remainingChars] = getStateValues(value); setInputValue(text); // Update component's own state setCharsRemaining(remainingChars); setCharsEntered(text.length); props.onChange && props.onChange({ ...event, target: { ...event.target, value: text } }); }; // Other methods remain the same... 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={inputValue} // Use local state for controlled component 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['aria-label']} aria-labelledby={props['aria-labelledby']} 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 && ( <div> <small id={`${props.id}_characterRemaining`} className={classNames( `noChar_${charsRemaining === 0}`, props.charRemainingClass, )}> {getCharRemainingText()} </small> </div> )} {props.showCurrent && ( <div> <small id={`${props.id}_charEntered`} className={classNames( `noChar_${charsEntered === parseInt(props.maxLength, 10)}`, props.charEnteredClass, )}> {getCharEnteredText()} </small> </div> )} </span> </span> ) ); }; PrimeInputTextarea.propTypes = { // Same as defined in your code }; PrimeInputTextarea.defaultProps = { value: '', // Other default props }; export default PrimeWrapper(PrimeInputTextarea);
Leave a Comment