leo-design-ui
Version:
React Design Library
29 lines (28 loc) • 1.66 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import classNames from "classnames";
import { useState } from "react";
import Icon from "../Icon/icon";
import Transition from "../Transition/transition";
var Alert = function (_a) {
var _b;
var type = _a.type, message = _a.message, _c = _a.closable, closable = _c === void 0 ? false : _c, showIcon = _a.showIcon, description = _a.description, onClose = _a.onClose;
var _d = useState(true), hide = _d[0], setHide = _d[1];
var claessnames = classNames('leo-alert', (_b = {},
_b["leo-alert-".concat(type)] = type,
_b));
var closeHandler = function () {
if (onClose) {
onClose();
}
setHide(false);
};
var typeRelateIcon = {
danger: 'circle-xmark',
warning: 'circle-exclamation',
success: 'check-circle',
info: 'circle-info',
primary: 'circle-info'
};
return (_jsx(_Fragment, { children: _jsx(Transition, { in: hide, animation: "zoom-in-top", timeout: 300, children: _jsxs("div", { className: claessnames, children: [_jsxs("div", { className: description ? 'alert_tit_and_text' : 'alert_tit', children: [_jsxs("div", { className: "alert_tit_center", children: [_jsx("div", { children: showIcon && _jsx(Icon, { icon: typeRelateIcon[type], theme: type, className: "alert_icon" }) }), _jsx("div", { children: message })] }), closable && _jsx("div", { className: "closable", onClick: closeHandler, children: _jsx(Icon, { icon: "close" }) })] }), _jsx("div", { className: "description", children: description })] }) }) }));
};
export default Alert;