@elastic/eui
Version:
Elastic UI Component Library
172 lines (171 loc) • 8.11 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["title", "text", "color", "iconType", "children", "className", "actionProps", "style", "onClose", "animationMs"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React, { useMemo } from 'react';
import classNames from 'classnames';
import { getTokenName } from '@elastic/eui-theme-common';
import { useEuiMemoizedStyles, useEuiTheme } from '../../services';
import { EuiScreenReaderOnly } from '../accessibility';
import { EuiButtonIcon } from '../button';
import { EuiI18n } from '../i18n';
import { EuiIcon } from '../icon';
import { EuiText } from '../text';
import { euiToastStyles, euiToastHeaderStyles } from './toast.styles';
import { EuiNotificationIcon } from '../notification_icon/notification_icon';
import { euiNotificationIconStyles } from '../notification_icon/notification_icon.styles';
import { EuiToastAction } from './toast_action';
import { EuiTitle } from '../title';
import { jsx as ___EmotionJSX } from "@emotion/react";
export var COLOR_TO_NOTIFICATION_ICON_MAP = {
primary: 'info',
success: 'success',
warning: 'warning',
danger: 'error'
};
export var EuiToast = function EuiToast(_ref) {
var title = _ref.title,
text = _ref.text,
_ref$color = _ref.color,
color = _ref$color === void 0 ? 'primary' : _ref$color,
iconType = _ref.iconType,
children = _ref.children,
className = _ref.className,
actionProps = _ref.actionProps,
style = _ref.style,
onClose = _ref.onClose,
animationMs = _ref.animationMs,
rest = _objectWithoutProperties(_ref, _excluded);
var _useEuiTheme = useEuiTheme(),
euiTheme = _useEuiTheme.euiTheme;
var styles = useEuiMemoizedStyles(euiToastStyles);
var iconStyles = useEuiMemoizedStyles(euiNotificationIconStyles);
var headerStyles = useEuiMemoizedStyles(euiToastHeaderStyles);
var cssStyles = [styles.euiToast];
var decorCssStyles = [styles.decor, animationMs && styles.hasAnimation];
var classes = classNames('euiToast', className, _defineProperty({}, "euiToast--".concat(color), color));
var highlightColorToken = getTokenName('borderStrong', color);
var typeColor = euiTheme.colors[highlightColorToken];
var backgroundLightToken = getTokenName('backgroundLight', color);
var backgroundLightColor = euiTheme.colors[backgroundLightToken];
var cssVariables = useMemo(function () {
return _objectSpread({
'--euiToastTypeColor': typeColor,
'--euiToastTypeBackgroundColor': backgroundLightColor
}, animationMs && {
'--euiToastAnimationMs': "".concat(animationMs, "ms")
});
}, [typeColor, backgroundLightColor, animationMs]);
var dismissButton = useMemo(function () {
if (!onClose) return;
return ___EmotionJSX(EuiI18n, {
token: "euiToast.dismissToast",
default: "Dismiss toast"
}, function (dismissToast) {
return ___EmotionJSX(EuiButtonIcon, {
css: styles.dismissButton,
iconType: "cross",
color: "text",
size: "xs",
"aria-label": dismissToast,
onClick: onClose,
"data-test-subj": "toastCloseButton"
});
});
}, [onClose, styles]);
var header = useMemo(function () {
if (!title) return;
var headerCssStyles = [headerStyles.euiToastHeader, onClose && headerStyles.hasDismissButton];
return ___EmotionJSX(EuiTitle, {
size: "xs",
css: headerCssStyles,
"data-test-subj": "euiToastHeader__title"
}, ___EmotionJSX("p", null, title));
}, [title, headerStyles, onClose]);
var icon = useMemo(function () {
if (!iconType) {
var _COLOR_TO_NOTIFICATIO;
var defaultIconType = (_COLOR_TO_NOTIFICATIO = COLOR_TO_NOTIFICATION_ICON_MAP[color]) !== null && _COLOR_TO_NOTIFICATIO !== void 0 ? _COLOR_TO_NOTIFICATIO : 'info';
return ___EmotionJSX(EuiNotificationIcon, {
css: styles.icon,
type: defaultIconType,
size: "l"
});
}
return ___EmotionJSX(EuiIcon, {
css: [styles.icon, iconStyles.size.l, ";label:icon;"],
type: iconType,
size: "l",
"aria-hidden": "true",
color: typeColor
});
}, [iconType, color, typeColor, styles, iconStyles]);
var optionalChildren = useMemo(function () {
if (!text && !children) return null;
return ___EmotionJSX("div", {
css: styles.text,
"data-test-subj": "euiToastBody"
}, text && ___EmotionJSX(EuiText, {
size: "s",
color: "default",
className: "euiToast__text",
"data-test-subj": "euiToastText"
}, text), children && ___EmotionJSX(EuiText, {
className: "euiToast__additionalContent",
size: "s",
color: "default",
"data-test-subj": "euiToastAdditionalContent"
}, children));
}, [text, children, styles]);
var actionControls = useMemo(function () {
var actionPrimaryProps = _objectSpread(_objectSpread({}, actionProps === null || actionProps === void 0 ? void 0 : actionProps.primary), {}, {
color: color
});
var actionSecondaryProps = _objectSpread(_objectSpread({}, actionProps === null || actionProps === void 0 ? void 0 : actionProps.secondary), {}, {
color: color
});
var hasActionPrimary = Boolean(actionProps === null || actionProps === void 0 ? void 0 : actionProps.primary);
var hasActionSecondary = Boolean(actionProps === null || actionProps === void 0 ? void 0 : actionProps.secondary);
if (!hasActionPrimary && !hasActionSecondary) return null;
var actionPrimary = hasActionPrimary && ___EmotionJSX(EuiToastAction, _extends({
actionType: "primary"
}, actionPrimaryProps));
var actionSecondary = hasActionSecondary && ___EmotionJSX(EuiToastAction, _extends({
actionType: "secondary"
}, actionSecondaryProps));
return ___EmotionJSX("div", {
css: styles.actions
}, actionPrimary, actionSecondary);
}, [actionProps, color, styles]);
return ___EmotionJSX("div", _extends({
css: cssStyles,
className: classes,
style: _objectSpread(_objectSpread({}, cssVariables), style)
}, rest), ___EmotionJSX("div", {
className: "euiToastDecor",
css: decorCssStyles,
role: "presentation"
}), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, ___EmotionJSX(EuiI18n, {
token: "euiToast.newNotification",
default: "A new notification appears"
}))), ___EmotionJSX("div", {
css: styles.wrapper
}, ___EmotionJSX("div", {
css: styles.body
}, icon, ___EmotionJSX("div", {
css: styles.content
},
// Note: the DOM position of the dismiss button matters to screen reader users.
// We generally want them to have some context of _what_ they're dismissing,
// instead of navigating to the dismiss button first before the content
header && optionalChildren ? ___EmotionJSX(React.Fragment, null, header, dismissButton, optionalChildren) : ___EmotionJSX(React.Fragment, null, header || optionalChildren, dismissButton))), actionControls));
};