brightyui
Version:
Brighty UI library
60 lines • 4.61 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var Input_module_scss_1 = tslib_1.__importDefault(require("../../../src/styles/Input.module.scss"));
var cnbuilder_1 = require("cnbuilder");
var CloseIcon_1 = require("../../images/IconComponents/CloseIcon");
var EColors_1 = require("../../types/EColors");
var Typography_1 = tslib_1.__importDefault(require("../Typography/Typography"));
var BinIcon_1 = require("../../images/IconComponents/BinIcon");
var useBool_1 = tslib_1.__importDefault(require("../../hooks/useBool"));
var NoEyeIcon_1 = require("../../images/IconComponents/NoEyeIcon");
var EyeIcon_1 = require("../../images/IconComponents/EyeIcon");
var Input = function (_a) {
var _b, _c;
var className = _a.className, value = _a.value, onChange = _a.onChange, placeholder = _a.placeholder, name = _a.name, disabled = _a.disabled, error = _a.error, hint = _a.hint, _d = _a.type, type = _d === void 0 ? 'text' : _d, onDelete = _a.onDelete, deletable = _a.deletable, mask = _a.mask;
var inputRef = (0, react_1.useRef)(null);
var isButtonHovered = (0, useBool_1.default)();
var showPassword = (0, useBool_1.default)();
var _e = (0, react_1.useState)(placeholder !== null && placeholder !== void 0 ? placeholder : ''), inputPlaceholder = _e[0], setInputPlaceholder = _e[1];
var handleClear = function () {
if (inputRef.current) {
inputRef.current.value = '';
inputRef.current.focus();
if (onDelete) {
onDelete();
}
}
};
var handleClickEye = function (e) {
e.preventDefault();
e.stopPropagation();
showPassword.onToggle();
};
var handleClick = function () {
if (inputRef.current) {
inputRef.current.focus();
}
};
var handleFocus = function () {
if (mask) {
setInputPlaceholder(mask);
}
};
var handleBlur = function () {
if (mask) {
setInputPlaceholder(placeholder !== null && placeholder !== void 0 ? placeholder : '');
}
};
return ((0, jsx_runtime_1.jsxs)("div", { className: Input_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cnbuilder_1.cnb)(Input_module_scss_1.default.root, className, (_b = {},
_b[Input_module_scss_1.default.root__deletable] = deletable,
_b[Input_module_scss_1.default.root__deletable_hovered] = isButtonHovered.value,
_b)), children: [(0, jsx_runtime_1.jsx)("input", { className: (0, cnbuilder_1.cnb)(Input_module_scss_1.default.input, (_c = {},
_c[Input_module_scss_1.default.input__withMask] = mask,
_c)), value: value, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, placeholder: inputPlaceholder, disabled: disabled || deletable, name: name, ref: inputRef, type: type === 'password' ? (showPassword.value ? 'text' : 'password') : type }), (0, jsx_runtime_1.jsx)("span", { className: Input_module_scss_1.default.placeholder, onClick: handleClick, children: placeholder }), type === 'password' && ((0, jsx_runtime_1.jsx)("div", { className: Input_module_scss_1.default.eyeButton, onClick: handleClickEye, children: showPassword.value ? (0, jsx_runtime_1.jsx)(NoEyeIcon_1.NoEyeIcon, {}) : (0, jsx_runtime_1.jsx)(EyeIcon_1.EyeIcon, {}) })), type !== 'password' &&
(deletable ? ((0, jsx_runtime_1.jsx)("button", { className: Input_module_scss_1.default.deleteButton, onClick: onDelete, type: 'button', onMouseEnter: isButtonHovered.onTrue, onMouseLeave: isButtonHovered.onFalse, children: (0, jsx_runtime_1.jsx)(BinIcon_1.BinIcon, {}) })) : ((0, jsx_runtime_1.jsx)("button", { className: Input_module_scss_1.default.closeButton, onClick: handleClear, type: 'button', children: (0, jsx_runtime_1.jsx)(CloseIcon_1.CloseIcon, {}) })))] }), !!error && ((0, jsx_runtime_1.jsx)("div", { className: Input_module_scss_1.default.errorContainer, children: (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: 'captionRegular', color: EColors_1.EColors.error, children: error }) })), !!hint && !error && ((0, jsx_runtime_1.jsx)("div", { className: Input_module_scss_1.default.hintContainer, children: (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: 'captionRegular', color: EColors_1.EColors.text2, children: hint }) }))] }));
};
exports.default = Input;
//# sourceMappingURL=Input.js.map