Untitled

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);