Untitled
unknown
plain_text
a year ago
10 kB
10
Indexable
correct the below code according to the prime react password component. check if the default values, prop typees and other descriptions are correct.
import React from 'react';
import { Password } from 'primereact/password';
import PrimeWrapper from '../primeWrapper/primewrapper';
import PropTypes from 'prop-types';
import classNames from 'classnames';
const PrimePassword = (props) => {
const getHelperTextLabel = () => {
if (typeof props.helperTextLabelKey !== 'undefined') {
return props.evalLangText(props);
} else if (typeof props.helperText !== 'undefined') {
return props.helperText;
} else {
return '';
}
};
return (
(props.showif !== undefined ? props.showif : true) && (
<span className="prime-input-text-wrapper">
<div>
<label className={props.labelClassName}> {props.evalLangText(props)}</label>
</div>
<Password
id={props.id}
inputId={props.inputId}
value={props.value || null}
onChange={props.onChange}
onInput={props.onInput}
className={props.className}
inputClassName={props.inputClassName}
style={props.style}
inputStyle={props.inputStyle}
placeholder={props.placeholder}
disabled={props.disabled}
autoFocus={props.autoFocus}
autoComplete={props.autoComplete}
maxLength={props.maxLength}
keyfilter={props.keyfilter}
invalid={props.invalid}
feedback={props.feedback}
promptLabel={props.promptLabel}
panelClassName={props.panelClassName}
panelStyle={props.panelStyle}
weakLabel={props.weakLabel}
mediumLabel={props.mediumLabel}
strongLabel={props.strongLabel}
mediumRegex={props.mediumRegex}
strongRegex={props.strongRegex}
toggleMask={props.toggleMask}
toggleMaskIcon={props.toggleMaskIcon}
tooltip={props.tooltip || null}
tooltipOptions={props.tooltipOptions}
header={props.header}
footer={props.footer}
icon={props.icon}
showIcon={props.showIcon}
hideIcon={props.hideIcon}
meter={props.meter}
meterLabel={props.meterLabel}
tabIndex={props.tabIndex}
required={props.required}
arialabel={props.arialabel}
arialabelledby={props.arialabelledby}
onInput={props.onInput}
onBlur={props.onBlur}
onFocus={props.onFocus}
onHide={props.onHide}
onShow={props.onFocus}
{...props}>
{props.children}
</Password>
{props.helperTextShowIf && (props.helperText || props.helperTextLabelKey) && (
<div>
<small
className={classNames(
'ux-input-helper-text',
props.helperTextClassName,
)}
// aria-live={helperTextAriaLive}
// id={`${id}_helptext`}
>
{getHelperTextLabel()}
</small>
</div>
)}
</span>
)
);
};
PrimePassword.propTypes = {
/** Define a unique id for the component */
id: PropTypes.string,
/** Unique identifier of the input element. */
inputId: PropTypes.string,
/** The value of component */
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** 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,
/** List of CSS classnames to apply on wrapper element */
className: PropTypes.string,
/** Style class of the input element. */
inputClassName: PropTypes.string,
/** Inline styles applied to apply on wrapper element */
style: PropTypes.object,
/** Inline style of the input element. */
inputStyle: PropTypes.object,
/** Temporary text element that can be replaced with something else */
placeholder: PropTypes.string,
/** Setting this attribute will disable the textbox */
disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
/** Sets autofocus property on textbox */
autoFocus: PropTypes.bool,
/** Sets auto complete property on textbox */
autoComplete: PropTypes.string,
/** Maximum number of characters allowed in the input field. */
maxLength: PropTypes.number,
/** Format definition of the keys to block. */
keyfilter: PropTypes.KeyFilterType,
/** Invalid state is displayed using the invalid prop to indicate a failed validation. */
invalid: PropTypes.string,
/** Whether to display a strength indicator or not.. */
feedback: PropTypes.bool,
/** Text for prompt when the field is empty. */
promptLabel: PropTypes.string,
/** Label for a weak password. */
weakLabel: PropTypes.string,
/** Label for a medium-strength password. */
mediumLabel: PropTypes.string,
/** Label for a strong password. */
strongLabel: PropTypes.string,
/**Regex for a medium-strength password. */
mediumRegex: PropTypes.string,
/** Regex for a strong password. */
strongRegex: PropTypes.string,
/** Whether to show an icon to toggle password . */
toggleMask: PropTypes.bool,
/** Custom icon for toggling password visibility. */
toggleMaskIcon: PropTypes.string,
/** Content of the tooltip. */
tooltip: PropTypes.string,
/** Configuration of the tooltip, refer to the tooltip documentation for more information. */
tooltipOptions: PropTypes.object,
/** Inline style of the overlay panel element. */
panelClassName: PropTypes.string,
/** Inline style of the overlay panel element. */
panelStyle: PropTypes.object,
/** Template of panel content if "feedback" is enabled. */
content: PropTypes.oneOfType([PropTypes.ReactNode, PropTypes.Function]),
/** Content to display at the top of the strength indicator panel. */
header: PropTypes.oneOfType([PropTypes.ReactNode, PropTypes.Function]),
/** Content to display at the bottom of the strength indicator panel. */
footer: PropTypes.oneOfType([PropTypes.ReactNode, PropTypes.Function]),
/** Template of mask icon if "toggleMask" is enabled. */
icon: PropTypes.oneOfType([PropTypes.ReactNode, PropTypes.Function]),
/** Displays an eye icon to show/hide password. */
showIcon: PropTypes.bool,
/** Displays an eye icon to show/hide password. */
hideIcon: PropTypes.bool,
/** Uses to pass attributes to the meter's DOM element. */
meter: PropTypes.bool,
/** Uses to pass attributes to the label's DOM element. */
meterLabel: PropTypes.bool,
/** Specifies the tab order of the input element when the user navigates using the keyboard. */
tabIndex: PropTypes.number,
/** Determines if an input is required for Form validation */
required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), //////////////////// TO-DO WITH REACT HOOK FORMS
/** 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. */
arialabel: PropTypes.string,
/** Attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs. */
arialabelledby: PropTypes.string,
/** Callback to invoke on input event of input field. */
onInput: PropTypes.func,
/** 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,
/** Callback to invoke when overlay becomes hidden. */
onHide: PropTypes.func,
/** Callback to invoke when overlay becomes visible. */
onShow: PropTypes.func,
/** Determines if the component is hidden or shown */
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,
/**
* 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 */
};
PrimePassword.defaultProps = {
value: null,
invalid: false,
unstyled: false,
autofocus: false,
toggleMask: false,
autoComplete: 'on',
promptLabel: 'Please enter a password',
weakLabel: 'Weak',
mediumLabel: 'Medium',
strongLabel: 'Strong',
mediumRegex:
'^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,}).',
strongRegex: '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})',
};
export default PrimeWrapper(PrimePassword);
Editor is loading...
Leave a Comment