brightyui
Version:
Brighty UI library
41 lines • 2.66 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef } from 'react';
import styles from '../../../src/styles/DateInput.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';
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 = useRef(null);
var isButtonHovered = useBool();
var a = useBool();
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 (_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), value: value, onChange: onChange, placeholder: placeholder, disabled: disabled || deletable, name: name, ref: inputRef, type: a.value ? 'date' : 'text', onFocus: handleFocus, onBlur: handleBlur }), _jsx("span", { className: styles.placeholder, onClick: handleClick, children: placeholder }), 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 DateInput;
//# sourceMappingURL=DateInput.js.map