@ozen-ui/kit
Version:
React component library
56 lines (55 loc) • 3.67 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Alert = exports.cnAlert = void 0;
var tslib_1 = require("tslib");
require("./Alert.css");
var react_1 = tslib_1.__importStar(require("react"));
var icons_1 = require("@ozen-ui/icons");
var useDeprecated_1 = require("../../hooks/useDeprecated");
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var IconButtonNext_1 = require("../IconButtonNext");
var Paper_1 = require("../Paper");
var constants_1 = require("./constants");
exports.cnAlert = (0, classname_1.cn)('Alert');
var matchStatusToIcon = {
info: react_1.default.createElement(icons_1.InfoCircleFilledIcon, { size: "s" }),
neutral: react_1.default.createElement(icons_1.InfoCircleFilledIcon, { size: "s" }),
success: react_1.default.createElement(icons_1.CheckCircleFilledIcon, { size: "s" }),
error: react_1.default.createElement(icons_1.WarningCircleFilledIcon, { size: "s" }),
warning: react_1.default.createElement(icons_1.WarningTriangleFilledIcon, { size: "s" }),
};
exports.Alert = (0, react_1.forwardRef)(function (inProps, ref) {
var props = (0, useThemeProps_1.useThemeProps)({
props: inProps,
name: 'Alert',
});
var _a = props.status, status = _a === void 0 ? constants_1.ALERT_DEFAULT_STATUS : _a, _b = props.showIcon, showIcon = _b === void 0 ? constants_1.ALERT_DEFAULT_SHOW_ICON : _b, _c = props.inverse, inverse = _c === void 0 ? constants_1.ALERT_DEFAULT_INVERSE : _c, color = props.color, closeText = props.closeText, children = props.children, actionProp = props.action, onClose = props.onClose, title = props.title, className = props.className, other = tslib_1.__rest(props, ["status", "showIcon", "inverse", "color", "closeText", "children", "action", "onClose", "title", "className"]);
(0, useDeprecated_1.useDeprecatedProperty)(!!color, 'color', 'inverse');
var action = (0, react_1.useMemo)(function () {
var actionProps = {
size: '2xs',
className: (0, exports.cnAlert)('Button'),
};
if (!actionProp) {
return null;
}
if (typeof actionProp === 'function') {
return actionProp(actionProps);
}
return react_1.default.cloneElement(actionProp, actionProps);
}, [actionProp]);
return (react_1.default.createElement(Paper_1.Paper, tslib_1.__assign({ radius: "l", shadow: "m", role: "alert", background: "main" }, (color === 'dark' && { background: 'main-inverse' }), (inverse && { background: 'main-inverse' }), other, { className: (0, exports.cnAlert)({
color: color,
status: status,
inverse: inverse,
hasCloseButton: !!onClose,
}, [className]), ref: ref }),
showIcon && (react_1.default.createElement("div", { className: (0, exports.cnAlert)('Icon') }, matchStatusToIcon[status])),
react_1.default.createElement("div", { className: (0, exports.cnAlert)('Content') },
react_1.default.createElement("div", { className: (0, exports.cnAlert)('Title') }, title),
children && react_1.default.createElement("div", { className: (0, exports.cnAlert)('Body') }, children),
action && react_1.default.createElement("div", { className: (0, exports.cnAlert)('Action') }, action)),
onClose && (react_1.default.createElement(IconButtonNext_1.IconButton, { size: "2xs", color: "secondary", icon: icons_1.CrossIcon, onClick: onClose, variant: "function", "aria-label": closeText, className: (0, exports.cnAlert)('CloseButton') }))));
});
exports.Alert.displayName = 'Alert';