Untitled

mail@pastecode.io avatar
unknown
plain_text
a month ago
5.7 kB
2
Indexable
Never
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}
                    value={props.value || ''}
                    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}
                    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}
                    icon={props.icon} // Custom icon should be passed here, not toggleMaskIcon
                    tooltip={props.tooltip}
                    tooltipOptions={props.tooltipOptions}
                    header={props.header}
                    footer={props.footer}
                    tabIndex={props.tabIndex}
                    required={props.required}
                    ariaLabel={props.ariaLabel} // corrected prop name
                    ariaLabelledBy={props.ariaLabelledBy} // corrected prop name
                    onBlur={props.onBlur}
                    onFocus={props.onFocus}
                    onHide={props.onHide}
                    onShow={props.onShow}
                    {...props}>
                    {props.children}
                </Password>
                {props.helperTextShowIf && (props.helperText || props.helperTextLabelKey) && (
                    <div>
                        <small
                            className={classNames(
                                'ux-input-helper-text',
                                props.helperTextClassName,
                            )}
                        >
                            {getHelperTextLabel()}
                        </small>
                    </div>
                )}
            </span>
        )
    );
};

PrimePassword.propTypes = {
    id: PropTypes.string,
    inputId: PropTypes.string, // Removed: not applicable for PrimeReact Password component
    value: PropTypes.string,
    onChange: PropTypes.func.isRequired,
    onInput: PropTypes.func,
    className: PropTypes.string,
    inputClassName: PropTypes.string,
    style: PropTypes.object,
    inputStyle: PropTypes.object,
    placeholder: PropTypes.string,
    disabled: PropTypes.bool,
    autoFocus: PropTypes.bool,
    autoComplete: PropTypes.string,
    maxLength: PropTypes.number,
    keyfilter: PropTypes.any, // Adjusted type to any for keyFilter, since PrimeReact keyfilter takes multiple types
    feedback: PropTypes.bool,
    promptLabel: PropTypes.string,
    weakLabel: PropTypes.string,
    mediumLabel: PropTypes.string,
    strongLabel: PropTypes.string,
    mediumRegex: PropTypes.string,
    strongRegex: PropTypes.string,
    toggleMask: PropTypes.bool,
    icon: PropTypes.any, // Corrected usage of icon instead of toggleMaskIcon
    tooltip: PropTypes.string,
    tooltipOptions: PropTypes.object,
    panelClassName: PropTypes.string,
    panelStyle: PropTypes.object,
    header: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
    footer: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
    tabIndex: PropTypes.number,
    required: PropTypes.bool,
    ariaLabel: PropTypes.string, // Corrected from `arialabel` to `ariaLabel`
    ariaLabelledBy: PropTypes.string, // Corrected from `arialabelledby` to `ariaLabelledBy`
    onBlur: PropTypes.func,
    onFocus: PropTypes.func,
    onHide: PropTypes.func,
    onShow: PropTypes.func,
    showif: PropTypes.bool,
    labelClassName: PropTypes.string,
    helperText: PropTypes.string,
    helperTextLabelKey: PropTypes.string,
    helperTextClassName: PropTypes.string,
    helperTextShowIf: PropTypes.bool,
};

PrimePassword.defaultProps = {
    value: '',
    feedback: true,
    autoComplete: 'off',
    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);
Leave a Comment