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

Salesforce Lightning Design System components built with React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Toast = exports.Notification = exports.Alert = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _classnames2 = _interopRequireDefault(require("classnames"));
var _Button = require("./Button");
var _Icon = require("./Icon");
var _excluded = ["className", "type", "level", "alt", "icon", "iconSize", "onClose", "children"];
var NOTIFICATION_TYPES = ['alert', 'toast'];
var NOTIFICATION_LEVELS = ['info', 'success', 'warning', 'error'];
var Notification = exports.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 = (0, _objectWithoutProperties2["default"])(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 = (0, _classnames2["default"])(className, 'slds-notify', typeClassName, levelClassName, (0, _defineProperty2["default"])({}, "slds-alert_".concat(level), type === 'alert' && level && level !== 'info'));
  var iconEl = icon ? /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
    containerClassName: (0, _classnames2["default"])(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["default"].createElement("div", (0, _extends2["default"])({
    className: alertClassNames,
    role: "alert"
  }, pprops), alt ? /*#__PURE__*/_react["default"].createElement("span", {
    className: "slds-assistive-text"
  }, alt) : undefined, onClose ? /*#__PURE__*/_react["default"].createElement("div", {
    className: "slds-notify__close"
  }, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
    type: "icon-inverse",
    icon: "close",
    size: type === 'toast' ? undefined : 'small',
    alt: "Close",
    onClick: onClose
  })) : undefined, iconEl, type === 'toast' ? /*#__PURE__*/_react["default"].createElement("div", {
    className: "slds-notify__content"
  }, /*#__PURE__*/_react["default"].createElement("h2", {
    className: "slds-text-heading_small"
  }, children)) : /*#__PURE__*/_react["default"].createElement("h2", null, children));
};
var Alert = exports.Alert = function Alert(props) {
  return /*#__PURE__*/_react["default"].createElement(Notification, (0, _extends2["default"])({}, props, {
    type: "alert"
  }));
};
var Toast = exports.Toast = function Toast(props) {
  return /*#__PURE__*/_react["default"].createElement(Notification, (0, _extends2["default"])({}, props, {
    type: "toast"
  }));
};
//# sourceMappingURL=Notification.js.map