brightyui
Version:
Brighty UI library
57 lines • 3.71 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useState } from 'react';
import styles from '../../../src/styles/Input.module.scss';
import { cnb } from 'cnbuilder';
import { CloseIcon } from '../../images/IconComponents/CloseIcon';
import { EColors } from '../../types/EColors';
import Typography from '../Typography/Typography';
import { BinIcon } from '../../images/IconComponents/BinIcon';
import useBool from '../../hooks/useBool';
import { NoEyeIcon } from '../../images/IconComponents/NoEyeIcon';
import { EyeIcon } from '../../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 = useRef(null);
var isButtonHovered = useBool();
var showPassword = useBool();
var _e = 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 (_jsxs("div", { className: styles.wrapper, children: [_jsxs("div", { className: cnb(styles.root, className, (_b = {},
_b[styles.root__deletable] = deletable,
_b[styles.root__deletable_hovered] = isButtonHovered.value,
_b)), children: [_jsx("input", { className: cnb(styles.input, (_c = {},
_c[styles.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 }), _jsx("span", { className: styles.placeholder, onClick: handleClick, children: placeholder }), type === 'password' && (_jsx("div", { className: styles.eyeButton, onClick: handleClickEye, children: showPassword.value ? _jsx(NoEyeIcon, {}) : _jsx(EyeIcon, {}) })), type !== 'password' &&
(deletable ? (_jsx("button", { className: styles.deleteButton, onClick: onDelete, type: 'button', onMouseEnter: isButtonHovered.onTrue, onMouseLeave: isButtonHovered.onFalse, children: _jsx(BinIcon, {}) })) : (_jsx("button", { className: styles.closeButton, onClick: handleClear, type: 'button', children: _jsx(CloseIcon, {}) })))] }), !!error && (_jsx("div", { className: styles.errorContainer, children: _jsx(Typography, { variant: 'captionRegular', color: EColors.error, children: error }) })), !!hint && !error && (_jsx("div", { className: styles.hintContainer, children: _jsx(Typography, { variant: 'captionRegular', color: EColors.text2, children: hint }) }))] }));
};
export default Input;
//# sourceMappingURL=Input.js.map