@coreui/react-pro/dist/esm/components/password-input/CPasswordInput.js

UI Components Library for React.js

import { __rest } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../_virtual/index.js';
import { CFormControlWrapper } from '../form/CFormControlWrapper.js';

const CPasswordInput = forwardRef((_a, ref) => {
    var { children, ariaLabelToggler = 'Toggle password visibility', className, delay = false, feedback, feedbackInvalid, feedbackValid, floatingClassName, floatingLabel, id, invalid, label, onChange, showPassword: showPasswordProp = false, size, text, tooltipFeedback, valid } = _a, rest = __rest(_a, ["children", "ariaLabelToggler", "className", "delay", "feedback", "feedbackInvalid", "feedbackValid", "floatingClassName", "floatingLabel", "id", "invalid", "label", "onChange", "showPassword", "size", "text", "tooltipFeedback", "valid"]);
    const [value, setValue] = useState();
    const [showPassword, setShowPassword] = useState(showPasswordProp);
    useEffect(() => {
        const timeOutId = setTimeout(() => value && onChange && onChange(value), typeof delay === 'number' ? delay : 500);
        return () => clearTimeout(timeOutId);
    }, [value]);
    useEffect(() => {
        setShowPassword(showPasswordProp);
    }, [showPasswordProp]);
    const renderInputAndButton = () => (React.createElement(React.Fragment, null,
        React.createElement("input", Object.assign({ className: classNames('form-control', {
                [`form-control-${size}`]: size,
                'is-invalid': invalid,
                'is-valid': valid,
            }, className), id: id, type: showPassword ? 'text' : 'password', onChange: (event) => (delay ? setValue(event) : onChange === null || onChange === void 0 ? void 0 : onChange(event)) }, rest, { ref: ref }), children),
        React.createElement("button", { type: "button", className: "form-password-action", "data-coreui-toggle": "password", "aria-label": ariaLabelToggler, onClick: () => setShowPassword((prev) => !prev) },
            React.createElement("span", { className: "form-password-action-icon" }))));
    return (React.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingClassName: classNames('form-password', floatingClassName), floatingLabel: floatingLabel, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid }, floatingLabel ? (renderInputAndButton()) : (React.createElement("div", { className: "form-password" }, renderInputAndButton()))));
});
CPasswordInput.propTypes = Object.assign({ ariaLabelToggler: PropTypes.string, className: PropTypes.string, id: PropTypes.string, delay: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]), showPassword: PropTypes.bool, size: PropTypes.oneOf(['sm', 'lg']) }, CFormControlWrapper.propTypes);
CPasswordInput.displayName = 'CPasswordInput';

export { CPasswordInput };
//# sourceMappingURL=CPasswordInput.js.map