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

UI Components Library for React.js

import { __rest, __assign } 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';

var CPasswordInput = forwardRef(function (_a, ref) {
    var children = _a.children, _b = _a.ariaLabelToggler, ariaLabelToggler = _b === void 0 ? 'Toggle password visibility' : _b, className = _a.className, _c = _a.delay, delay = _c === void 0 ? false : _c, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, floatingClassName = _a.floatingClassName, floatingLabel = _a.floatingLabel, id = _a.id, invalid = _a.invalid, label = _a.label, onChange = _a.onChange, _d = _a.showPassword, showPasswordProp = _d === void 0 ? false : _d, size = _a.size, text = _a.text, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, rest = __rest(_a, ["children", "ariaLabelToggler", "className", "delay", "feedback", "feedbackInvalid", "feedbackValid", "floatingClassName", "floatingLabel", "id", "invalid", "label", "onChange", "showPassword", "size", "text", "tooltipFeedback", "valid"]);
    var _e = useState(), value = _e[0], setValue = _e[1];
    var _f = useState(showPasswordProp), showPassword = _f[0], setShowPassword = _f[1];
    useEffect(function () {
        var timeOutId = setTimeout(function () { return value && onChange && onChange(value); }, typeof delay === 'number' ? delay : 500);
        return function () { return clearTimeout(timeOutId); };
    }, [value]);
    useEffect(function () {
        setShowPassword(showPasswordProp);
    }, [showPasswordProp]);
    var renderInputAndButton = function () {
        var _a;
        return (React.createElement(React.Fragment, null,
            React.createElement("input", __assign({ className: classNames('form-control', (_a = {},
                    _a["form-control-".concat(size)] = size,
                    _a['is-invalid'] = invalid,
                    _a['is-valid'] = valid,
                    _a), className), id: id, type: showPassword ? 'text' : 'password', onChange: function (event) { return (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: function () { return setShowPassword(function (prev) { return !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 = __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