Untitled
unknown
plain_text
5 months ago
12 kB
2
Indexable
in the below code the helperTextLabelKey prop is not working, update the code similar to prefixLabel/suffixLabel
import React from 'react';
import { InputText } from 'primereact/inputtext';
import PrimeWrapper from '../primeWrapper/primewrapper';
import PropTypes from 'prop-types';
import classNames from 'classnames';
const PrimeInputText = (props) => {
const getPrefixLabel = () => {
if (typeof props.prefixLabel !== 'undefined') {
return props.evalPrefix(props);
} else if (typeof props.prefixLabelText !== 'undefined') {
return props.prefixLabelText;
} else {
return '';
}
};
const getSuffixLabel = () => {
if (typeof props.suffixLabel !== 'undefined') {
return props.evalSuffix(props);
} else if (typeof props.suffixLabelText !== 'undefined') {
return props.suffixLabelText;
} else {
return '';
}
};
const getHelperTextLabel = () => {
if (typeof props.helperTextLabelKey !== 'undefined') {
return props.evalHelperText(props);
} else if (typeof props.helperText !== 'undefined') {
return props.helperText;
} else {
return '';
}
};
const handleInputChange = (event) => {
// If autoCapitalize is true, convert input to uppercase
const value = props.autoCapitalize ? event.target.value.toUpperCase() : event.target.value;
props.onChange && props.onChange({ ...event, target: { ...event.target, value } });
};
return (
(props.showif !== undefined ? props.showif : true) && (
<span className="prime-input-text-wrapper">
<div>
<label
className={props.labelClassName}
// className={classNames(
// { required: labelRequiredClassIf || required },
// labelClassName,
// {
// 'ux-error': getConfigValue(
// 'modelErrorMessageFlags.' + model + '.isError',
// ),
// },
// )}
// labelSubstituteText={labelSubstituteText}
// labelSubstitute={labelSubstitute}
>
{props.evalLabel(props)}
</label>
</div>
<span className="prime-input-text-container">
{(props.prefixLabelText || props.prefixLabel) && (
<span
className={classNames(
'prime-input-text-prefix',
props.prefixLabelClass,
)}>
<span>{getPrefixLabel()}</span>
</span>
)}
<InputText
id={props.id}
className={props.className}
value={props.value || null}
onChange={handleInputChange}
onInput={props.onInput}
keyfilter={props.keyfilter}
placeholder={props.placeholder}
variant={props.variant} //"filled" | "outlined"
tooltip={props.tooltip || null}
tooltipOptions={props.tooltipOptions}
validateOnly={props.validateOnly}
invalid={props.invalid}
disabled={props.evalBool(props, 'disabled')}
unstyled={props.evalBool(props, 'unstyled')}
readOnly={props.readOnly}
maxLength={props.maxLength}
size={props.size || null}
type={props.type}
style={props.style}
autoFocus={props.autofocus}
autoComplete={props.autoComplete}
tabIndex={props.tabIndex}
aria-label={props.arialabel}
// required={required}
// aria-required={required ? true : undefined}
onBlur={props.onBlur}
onFocus={props.onFocus}>
{props.children}
</InputText>
{(props.suffixLabelText || props.suffixLabel) && (
<span
className={classNames(
'prime-input-text-suffix',
props.suffixLabelClass,
)}>
<span>{getSuffixLabel()}</span>
</span>
)}
{props.helperTextShowIf && (props.helperText || props.helperTextLabelKey) && (
<div>
<small
className={classNames(
'ux-input-helper-text',
props.helperTextClassName,
)}
// aria-live={helperTextAriaLive}
// id={`${id}_helptext`}
>
{getHelperTextLabel()}
{/* {props.helperTextLabelKey
? props.evalLabel(props.helperTextLabelKey)
: props.helperText} */}
</small>
</div>
)}
</span>
</span>
)
);
};
PrimeInputText.propTypes = {
/** Define a unique id for the component */
id: PropTypes.string,
/** List of CSS classnames to apply on wrapper element */
className: 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,
/** InputText has built-in key filtering support to block certain keys, refer to keyfilter page for more information. */
keyfilter: PropTypes.oneOf([
'int',
'pint',
'num',
'pnum',
'money',
'hex',
'alpha',
'alphanum',
'email',
]),
/** Temporary text element that can be replaced with something else */
placeholder: PropTypes.string,
/** Specifies the input variant of the component. Possible values are "filled" | "outlined" */
variant: PropTypes.oneOf(['filled', 'outlined']),
/** Content of the tooltip. */
tooltip: PropTypes.string,
/** Configuration of the tooltip, refer to the tooltip documentation for more information. */
tooltipOptions: PropTypes.object,
/** When enabled, instead of blocking keys, input is validated internally to test against the regular expression. */
validateOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
/** When present, it specifies that the component should have invalid state style. */
invalid: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
/** Setting this attribute will disable the textbox */
disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
/** When enabled, it removes component related styles in the core. */
unstyled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
/** Size/width of the input box. */
size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Makes the input field readOnly, so the user cannot modify its value. */
readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
/** Maximum number of input characters allowed */
maxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Specifies the type of the input element(e.g., 'text','password','email','number','tel','url','search','date','datetime-local','month','week','time'). Default is 'text'. */
type: PropTypes.string,
/** Inline styles applied to input element. */
style: PropTypes.object,
/** Sets autofocus property on textbox */
autofocus: PropTypes.bool,
/** Sets auto complete property on textbox */
autoComplete: PropTypes.string,
/** Specifies the tab order of the input element when the user navigates using the keyboard. */
tabIndex: PropTypes.number,
/** Attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen */
//'aria-label': PropTypes.string,
/** Indicates that input is required */
//'aria-required': PropTypes.bool,
/** Determines if an input is required for Form validation */
required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
/** Takes a user defined javascript function which executes on a 'blur' event */
onBlur: PropTypes.func,
/** Event handler which is triggered when the input field gains focus */
onFocus: PropTypes.func,
/** Determines if the component is hidden or shown */
////////////////////////// LIFT-PROPS
showif: PropTypes.bool,
/** 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,
/** Text to prepend as a prefix label inside the input */
prefixLabelText: PropTypes.string,
/** Text to prepend from a dynamic source, such as a Content Manager */
prefixLabel: PropTypes.string,
/** List of CSS classnames to apply on prefix text */
prefixLabelClass: PropTypes.string,
/** Appends the value of a Suffix Label Text to the label */
suffixLabelText: PropTypes.string,
/** Appends the value of a key from the Content Manager to the label */
suffixLabel: PropTypes.string,
/** List of CSS classnames to apply on suffix text */
suffixLabelClass: 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, ////////////////////////// TO-DO
/** 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
/** Contains key-value pairs. The values replace the key in each label */
labelSubstitute: PropTypes.object, ////////////////////////// TO-DO
/** Contains key-value pairs. The values replace the key in each label */
labelSubstituteText: PropTypes.object, ////////////////////////// TO-DO
};
PrimeInputText.defaultProps = {
value: null,
validateOnly: false,
invalid: false,
variant: 'outlined',
tooltip: null,
tooltipOptions: null,
unstyled: false,
size: null,
type: 'text',
autofocus: false,
autoComplete: 'on',
};
export default PrimeWrapper(PrimeInputText);
// .prime-input-text-wrapper {
// display: flex;
// flex-direction: column;
// }
// .prime-input-text-container {
// display: flex;
// align-items: center;
// }
// .prime-input-text-prefix, .prime-input-text-suffix {
// padding: 0 0.5rem;
// background-color: #f0f0f0;
// border: 1px solid #ccc;
// }
// .prime-input-text-suffix {
// /* Additional styling if necessary */
// }
Leave a Comment