Untitled
unknown
plain_text
a year ago
10 kB
12
Indexable
the below code is not working properly, im not able to enter input to the primeinputarea component
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 [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 && (
<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)}`,
props.charEnteredClass,
)}>
{getCharEnteredText()}
</small>
</div>
)}
</span>
</span>
)
);
};
PrimeInputTextarea.propTypes = {
/** Define a unique id for the component */
id: PropTypes.string,
/** List of CSS classnames to apply on wrapper element */
className: PropTypes.string,
/** Name of the input element. */
name: 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,
/** Fires on focus */
onFocus: PropTypes.func,
/** Fires on blur */
onBlur: PropTypes.func,
/** Setting this attribute will disable the textarea */
disabled: PropTypes.bool,
/** Setting this attribute will generate a readOnly textarea */
readOnly: PropTypes.bool,
/** Maximum number of input characters allowed */
maxLength: PropTypes.string,
/** Invalid state is displayed using the invalid prop to indicate a failed validation. */
invalid: PropTypes.string,
/** Input placeholder text */
placeholder: PropTypes.string,
/** Inline styles applied to input element. */
style: PropTypes.object,
/** Content of the tooltip. */
tooltip: PropTypes.string,
/** Configuration of the tooltip, refer to the tooltip documentation for more information. */
tooltipOptions: PropTypes.object,
/** Specifies that the input field must be filled out before submitting the form. */
required: PropTypes.bool,
/** Pattern to restrict the input.We can use 'int','pint','num','pnum','money','hex','alpha','alphanum','email' and regular expression (e.g., keyfilter={/[^s]/} ) */
keyfilter: PropTypes.oneOfType([PropTypes.RegExp, PropTypes.string]),
/** Automatically focuses the textarea input when the page loads. */
autofocus: PropTypes.bool,
/** Specifies the tab order of an element. */
tabIndex: PropTypes.number,
/** Allows the text area to be resized */
autoResize: PropTypes.bool,
/** Specifies the visible number of lines in a text area */
rows: PropTypes.string,
/** Specifies the visible width of a text area */
cols: PropTypes.string,
/** Defines a string value that labels the current element. */
'aria-label': PropTypes.string,
/** Identifies the element (or elements) that labels the current element.*/
'aria-labelledby': PropTypes.string,
/** Specifies the input variant of the component. Possible values are "filled" | "outlined" */
variant: PropTypes.oneOf(['filled', 'outlined']),
/** Accepts a Content Manager key and assigns the value to the label of the input */
labelKey: PropTypes.string,
/** List of CSS classnames to apply on label element */
labelClassName: PropTypes.string,
/** Prop that automatically capitalizes entered text */
autoCapitalize: PropTypes.bool,
/**
* 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,
/** 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]), //////////////////// TO-DO WITH REACT HOOK FORMS
/** 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,
/** 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,
};
PrimeInputTextarea.defaultProps = {
value: null,
validateOnly: false,
invalid: false,
variant: 'outlined',
tooltip: null,
tooltipOptions: null,
type: 'text',
autofocus: false,
autoResize: false,
keyfilter: null,
};
export default PrimeWrapper(PrimeInputTextarea);
Editor is loading...
Leave a Comment