@gravity-ui/uikit
Version:
Gravity UI base styling and components
44 lines (43 loc) • 2.89 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Xmark } from '@gravity-ui/icons';
import { Button } from "../Button/index.js";
import { Card } from "../Card/index.js";
import { Icon } from "../Icon/index.js";
import { colorText } from "../Text/index.js";
import { useDefaultProps } from "../theme/useDefaultProps.js";
import { AlertAction } from "./AlertAction.js";
import { AlertActions } from "./AlertActions.js";
import { AlertContextProvider } from "./AlertContextProvider.js";
import { AlertIcon } from "./AlertIcon.js";
import { AlertTitle } from "./AlertTitle.js";
import { DEFAULT_ICON_SIZE, bAlert } from "./constants.js";
import i18n from "./i18n/index.js";
function alertSizeToIconSize(alertSize) {
switch (alertSize) {
case 's':
return 16;
case 'm':
return 18;
case 'l':
default:
return 22;
}
}
export const Alert = (rawProps) => {
const props = useDefaultProps('Alert', rawProps);
const { theme = 'normal', view = 'filled', size = 'm', layout = 'vertical', actionsLayout = layout === 'vertical' ? 'horizontal' : 'vertical', message, className, corners, style, onClose, align = 'baseline', qa, } = props;
const commonProps = {
style,
className: bAlert({ corners, size, align: align }, className),
};
const { t } = i18n.useTranslation();
const content = (_jsxs(React.Fragment, { children: [typeof props.icon === 'undefined' ? (_jsx(Alert.Icon, { theme: theme, view: view, align: align, size: alertSizeToIconSize(size) })) : (props.icon && ( // ability to pass `null` as `icon` prop value
_jsx("div", { className: bAlert('icon-wrapper', { align }), children: props.icon }))), _jsxs("div", { className: bAlert('main', { layout }), children: [_jsxs("div", { children: [typeof props.title === 'string' ? (_jsx(Alert.Title, { text: props.title })) : (props.title), message ? (_jsx("div", { className: bAlert('message', { 'with-top-margin': Boolean(props.title) }), children: message })) : null] }), Array.isArray(props.actions) ? (_jsx(Alert.Actions, { items: props.actions })) : (props.actions)] }), onClose && (_jsx(Button, { view: "flat", className: bAlert('close-btn'), onClick: onClose, "aria-label": t('label_close'), size: size, children: _jsx(Icon, { data: Xmark, size: DEFAULT_ICON_SIZE, className: colorText({ color: 'secondary' }) }) }))] }));
return (_jsx(AlertContextProvider, { layout: layout, view: view, size: size, actionsLayout: actionsLayout, children: theme === 'clear' ? (_jsx("div", { ...commonProps, "data-qa": qa, children: content })) : (_jsx(Card, { ...commonProps, qa: qa, theme: theme, view: view, children: content })) }));
};
Alert.Icon = AlertIcon;
Alert.Title = AlertTitle;
Alert.Actions = AlertActions;
Alert.Action = AlertAction;
//# sourceMappingURL=Alert.js.map