react-lightning-design-system/module/scripts/Notification.js

Salesforce Lightning Design System components built with React

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "type", "level", "alt", "icon", "iconSize", "onClose", "children"];
import React from 'react';
import classnames from 'classnames';
import { Button } from './Button';
import { Icon } from './Icon';
var NOTIFICATION_TYPES = ['alert', 'toast'];
var NOTIFICATION_LEVELS = ['info', 'success', 'warning', 'error'];
export var Notification = function Notification(props) {
  var className = props.className,
    type = props.type,
    level = props.level,
    alt = props.alt,
    icon = props.icon,
    _props$iconSize = props.iconSize,
    iconSize = _props$iconSize === void 0 ? 'small' : _props$iconSize,
    onClose = props.onClose,
    children = props.children,
    pprops = _objectWithoutProperties(props, _excluded);
  var typeClassName = type && NOTIFICATION_TYPES.indexOf(type) >= 0 ? "slds-notify_".concat(type) : null;
  var levelClassName = level && NOTIFICATION_LEVELS.indexOf(level) >= 0 ? "slds-theme_".concat(level) : null;
  var alertClassNames = classnames(className, 'slds-notify', typeClassName, levelClassName, _defineProperty({}, "slds-alert_".concat(level), type === 'alert' && level && level !== 'info'));
  var iconEl = icon ? /*#__PURE__*/React.createElement(Icon, {
    containerClassName: classnames(type === 'toast' ? 'slds-m-right_small' : 'slds-m-right_x-small', type === 'alert' ? ['slds-no-flex', 'slds-align-top'] : null),
    icon: icon,
    size: iconSize !== null && iconSize !== void 0 ? iconSize : type === 'toast' ? 'small' : 'x-small',
    fillColor: "currentColor",
    textColor: level === 'warning' ? 'default' : null
  }) : undefined;
  return /*#__PURE__*/React.createElement("div", _extends({
    className: alertClassNames,
    role: "alert"
  }, pprops), alt ? /*#__PURE__*/React.createElement("span", {
    className: "slds-assistive-text"
  }, alt) : undefined, onClose ? /*#__PURE__*/React.createElement("div", {
    className: "slds-notify__close"
  }, /*#__PURE__*/React.createElement(Button, {
    type: "icon-inverse",
    icon: "close",
    size: type === 'toast' ? undefined : 'small',
    alt: "Close",
    onClick: onClose
  })) : undefined, iconEl, type === 'toast' ? /*#__PURE__*/React.createElement("div", {
    className: "slds-notify__content"
  }, /*#__PURE__*/React.createElement("h2", {
    className: "slds-text-heading_small"
  }, children)) : /*#__PURE__*/React.createElement("h2", null, children));
};
export var Alert = function Alert(props) {
  return /*#__PURE__*/React.createElement(Notification, _extends({}, props, {
    type: "alert"
  }));
};
export var Toast = function Toast(props) {
  return /*#__PURE__*/React.createElement(Notification, _extends({}, props, {
    type: "toast"
  }));
};
//# sourceMappingURL=Notification.js.map