@ozen-ui/kit
Version:
React component library
53 lines (52 loc) • 3.26 kB
JavaScript
import { __assign, __rest } from "tslib";
import './Alert.css';
import React, { forwardRef, useMemo } from 'react';
import { CrossIcon, InfoCircleFilledIcon, CheckCircleFilledIcon, WarningTriangleFilledIcon, WarningCircleFilledIcon, } from '@ozen-ui/icons';
import { useDeprecatedProperty } from '../../hooks/useDeprecated';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { IconButton } from '../IconButtonNext';
import { Paper } from '../Paper';
import { ALERT_DEFAULT_STATUS, ALERT_DEFAULT_SHOW_ICON, ALERT_DEFAULT_INVERSE, } from './constants';
export var cnAlert = cn('Alert');
var matchStatusToIcon = {
info: React.createElement(InfoCircleFilledIcon, { size: "s" }),
neutral: React.createElement(InfoCircleFilledIcon, { size: "s" }),
success: React.createElement(CheckCircleFilledIcon, { size: "s" }),
error: React.createElement(WarningCircleFilledIcon, { size: "s" }),
warning: React.createElement(WarningTriangleFilledIcon, { size: "s" }),
};
export var Alert = forwardRef(function (inProps, ref) {
var props = useThemeProps({
props: inProps,
name: 'Alert',
});
var _a = props.status, status = _a === void 0 ? ALERT_DEFAULT_STATUS : _a, _b = props.showIcon, showIcon = _b === void 0 ? ALERT_DEFAULT_SHOW_ICON : _b, _c = props.inverse, inverse = _c === void 0 ? 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 = __rest(props, ["status", "showIcon", "inverse", "color", "closeText", "children", "action", "onClose", "title", "className"]);
useDeprecatedProperty(!!color, 'color', 'inverse');
var action = useMemo(function () {
var actionProps = {
size: '2xs',
className: cnAlert('Button'),
};
if (!actionProp) {
return null;
}
if (typeof actionProp === 'function') {
return actionProp(actionProps);
}
return React.cloneElement(actionProp, actionProps);
}, [actionProp]);
return (React.createElement(Paper, __assign({ radius: "l", shadow: "m", role: "alert", background: "main" }, (color === 'dark' && { background: 'main-inverse' }), (inverse && { background: 'main-inverse' }), other, { className: cnAlert({
color: color,
status: status,
inverse: inverse,
hasCloseButton: !!onClose,
}, [className]), ref: ref }),
showIcon && (React.createElement("div", { className: cnAlert('Icon') }, matchStatusToIcon[status])),
React.createElement("div", { className: cnAlert('Content') },
React.createElement("div", { className: cnAlert('Title') }, title),
children && React.createElement("div", { className: cnAlert('Body') }, children),
action && React.createElement("div", { className: cnAlert('Action') }, action)),
onClose && (React.createElement(IconButton, { size: "2xs", color: "secondary", icon: CrossIcon, onClick: onClose, variant: "function", "aria-label": closeText, className: cnAlert('CloseButton') }))));
});
Alert.displayName = 'Alert';