brightyui
Version:
Brighty UI library
44 lines • 3.48 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 DateInput_module_scss_1 = tslib_1.__importDefault(require("../../../src/styles/DateInput.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 DateInput = function (_a) {
var _b;
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, onDelete = _a.onDelete, deletable = _a.deletable;
var inputRef = (0, react_1.useRef)(null);
var isButtonHovered = (0, useBool_1.default)();
var a = (0, useBool_1.default)();
var handleClear = function () {
if (inputRef.current) {
inputRef.current.value = '';
inputRef.current.focus();
}
};
var handleClick = function () {
if (inputRef.current) {
inputRef.current.focus();
}
};
var handleFocus = function () {
a.onTrue();
};
var handleBlur = function () {
if (!value) {
a.onFalse();
}
};
return ((0, jsx_runtime_1.jsxs)("div", { className: DateInput_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cnbuilder_1.cnb)(DateInput_module_scss_1.default.root, className, (_b = {},
_b[DateInput_module_scss_1.default.root__deletable] = deletable,
_b[DateInput_module_scss_1.default.root__deletable_hovered] = isButtonHovered.value,
_b)), children: [(0, jsx_runtime_1.jsx)("input", { className: (0, cnbuilder_1.cnb)(DateInput_module_scss_1.default.input), value: value, onChange: onChange, placeholder: placeholder, disabled: disabled || deletable, name: name, ref: inputRef, type: a.value ? 'date' : 'text', onFocus: handleFocus, onBlur: handleBlur }), (0, jsx_runtime_1.jsx)("span", { className: DateInput_module_scss_1.default.placeholder, onClick: handleClick, children: placeholder }), deletable ? ((0, jsx_runtime_1.jsx)("button", { className: DateInput_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: DateInput_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: DateInput_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: DateInput_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 = DateInput;
//# sourceMappingURL=DateInput.js.map