@up-group-ui/react-controls
Version:
Up shared react controls
77 lines • 4.85 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.UpPassword = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var Input_1 = (0, tslib_1.__importDefault)(require("../Input"));
var SvgIcon_1 = (0, tslib_1.__importDefault)(require("../../Display/SvgIcon"));
var typestyle_1 = require("typestyle");
var withTheme_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming/withTheme"));
var theming_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming"));
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var utils_1 = require("../../../Common/utils");
var styles_1 = require("./styles");
var UpPassword = (function (_super) {
(0, tslib_1.__extends)(UpPassword, _super);
function UpPassword(p, c) {
var _this = _super.call(this, p, c) || this;
_this.toggleVisible = function (e) {
_this.setState(function (prevState) { return ({
isVisible: !prevState.isVisible,
}); });
};
_this.hide = function () {
if (_this.isHidden || _this.updatingShow) {
return;
}
_this.updatingHide = setTimeout(function () { return _this.setState({ isVisible: false }, function () { return (_this.updatingHide = null); }); }, 500);
};
_this.show = function () {
if (_this.isShown || _this.updatingShow) {
return;
}
_this.updatingShow = setTimeout(function () { return _this.setState({ isVisible: true }, function () { return (_this.updatingShow = null); }); }, 0);
};
_this.state = {
isVisible: false,
};
return _this;
}
Object.defineProperty(UpPassword.prototype, "isHidden", {
get: function () {
return this.state.isVisible === false;
},
enumerable: false,
configurable: true
});
Object.defineProperty(UpPassword.prototype, "isShown", {
get: function () {
return this.state.isVisible === true;
},
enumerable: false,
configurable: true
});
UpPassword.prototype.render = function () {
var _this = this;
var iconEyeOpen = 'eye-open';
var iconEyeClose = 'eye-close';
var type = this.state.isVisible === true ? this.props.type : 'password';
var themeStyles = this.props.theme.styles.get('input') || {};
var _a = this.props, showSuccess = _a.showSuccess, onBlur = _a.onBlur, showError = _a.showError, onFocus = _a.onFocus, onClickBehaviour = _a.showPasswordOnClick, rules = _a.rules, value = _a.value, focused = _a.focused, others = (0, tslib_1.__rest)(_a, ["showSuccess", "onBlur", "showError", "onFocus", "showPasswordOnClick", "rules", "value", "focused"]);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, classnames_1.default)((0, typestyle_1.style)(themeStyles), (0, styles_1.getStyles)(this.props), 'up-password', onClickBehaviour ? styles_1.onSide : '') }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { width: '100%' } }, { children: (0, jsx_runtime_1.jsx)(Input_1.default, (0, tslib_1.__assign)({}, others, { showSuccess: showSuccess, onBlur: onBlur, onFocus: onFocus, type: type, showValidationStatus: false, value: value }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { onMouseOver: !onClickBehaviour ? this.show : null, onMouseOut: !onClickBehaviour ? this.hide : null, onClick: onClickBehaviour ? this.toggleVisible : null, iconName: this.state.isVisible ? iconEyeOpen : iconEyeClose }, void 0)] }), void 0), focused && !(0, utils_1.isEmpty)(rules) && ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: (0, classnames_1.default)((0, styles_1.getRulesStyle)(this.props), 'password-rules') }, { children: rules.map(function (_a) {
var text = _a.text, regex = _a.regex;
return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: {
display: 'flex',
alignItems: 'center',
} }, { children: [(0, jsx_runtime_1.jsx)("span", { className: (0, styles_1.getRuleStatus)(_this.props, regex) }, void 0), (0, jsx_runtime_1.jsx)("p", { children: text }, void 0)] }), text));
}) }), void 0))] }, void 0));
};
UpPassword.defaultProps = {
theme: theming_1.default,
};
return UpPassword;
}(react_1.default.Component));
exports.UpPassword = UpPassword;
exports.default = (0, withTheme_1.default)(UpPassword);
//# sourceMappingURL=UpPassword.js.map