@cbinsights/fds/lib/components/Toaster/Toast.js

Form: A design system by CB Insights

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _classcat = _interopRequireDefault(require("classcat"));

var _styleConstants = _interopRequireDefault(require("../../dictionary/js/styleConstants"));

var _CheckIcon = _interopRequireDefault(require("../../icons/react/CheckIcon"));

var _InformationIcon = _interopRequireDefault(require("../../icons/react/InformationIcon"));

var _DenyIcon = _interopRequireDefault(require("../../icons/react/DenyIcon"));

var _Flex = _interopRequireDefault(require("../Flex"));

var _FlexItem = _interopRequireDefault(require("../FlexItem"));

var _Button = _interopRequireDefault(require("../Button"));

var _IconButton = _interopRequireDefault(require("../IconButton"));

var _CountdownButton = _interopRequireDefault(require("./CountdownButton"));

var Toast = function Toast(_ref) {
  var _ref$isAutoDismiss = _ref.isAutoDismiss,
      isAutoDismiss = _ref$isAutoDismiss === void 0 ? true : _ref$isAutoDismiss,
      _ref$dismissDelay = _ref.dismissDelay,
      dismissDelay = _ref$dismissDelay === void 0 ? 4000 : _ref$dismissDelay,
      _ref$canDismiss = _ref.canDismiss,
      canDismiss = _ref$canDismiss === void 0 ? true : _ref$canDismiss,
      _ref$dismissOnAction = _ref.dismissOnAction,
      dismissOnAction = _ref$dismissOnAction === void 0 ? true : _ref$dismissOnAction,
      _ref$type = _ref.type,
      type = _ref$type === void 0 ? 'info' : _ref$type,
      _ref$content = _ref.content,
      content = _ref$content === void 0 ? null : _ref$content,
      actionLabel = _ref.actionLabel,
      progress = _ref.progress,
      onAction = _ref.onAction,
      onDismiss = _ref.onDismiss;
  var classNames = (0, _classcat.default)(['toast', "toast--".concat(type)]);
  var icon = {
    info: /*#__PURE__*/_react.default.createElement(_InformationIcon.default, {
      size: "l",
      color: _styleConstants.default.COLOR_WHITE
    }),
    success: /*#__PURE__*/_react.default.createElement(_CheckIcon.default, {
      size: "xs",
      color: _styleConstants.default.COLOR_WHITE
    }),
    warn: /*#__PURE__*/_react.default.createElement("div", {
      role: "image",
      className: "fontWeight--bold color--white"
    }, "!"),
    error: /*#__PURE__*/_react.default.createElement("div", {
      role: "image",
      className: "fontWeight--bold color--white"
    }, "!"),
    progress: undefined
  }[type];
  var accentColor = {
    info: _styleConstants.default.COLOR_BLUE,
    warn: _styleConstants.default.COLOR_ORANGE,
    error: _styleConstants.default.COLOR_RED,
    success: _styleConstants.default.COLOR_GREEN,
    progress: _styleConstants.default.COLOR_AQUA
  }[type];
  var iconStyle = {
    backgroundColor: accentColor
  };

  var onActionDismiss = function onActionDismiss(event) {
    if (dismissOnAction && onDismiss) onDismiss();
    if (onAction) onAction(event);
  };

  return /*#__PURE__*/_react.default.createElement("div", {
    className: classNames,
    role: type === 'error' ? 'alert' : 'log',
    "aria-relevant": "all",
    "aria-atomic": "true"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "toast-bar"
  }, /*#__PURE__*/_react.default.createElement("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    className: (0, _classcat.default)(['toast-svg', {
      'toast-svg--animate': type === 'progress' && !progress
    }])
  }, /*#__PURE__*/_react.default.createElement("line", {
    x1: "0%",
    y1: "50%",
    x2: type === 'progress' && progress ? "".concat(progress, "%") : '100%',
    y2: "50%",
    stroke: accentColor,
    strokeWidth: _styleConstants.default.SPACE_S,
    strokeDasharray: type === 'progress' && !progress ? '200 400' : ''
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: "toast-content alignChild--left--center"
  }, /*#__PURE__*/_react.default.createElement(_Flex.default, null, icon && /*#__PURE__*/_react.default.createElement(_FlexItem.default, {
    shrink: true
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "toast-constrainGrowth alignChild--center--center"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "toast-icon media--s",
    style: iconStyle
  }, icon))), /*#__PURE__*/_react.default.createElement(_FlexItem.default, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "toast-constrainGrowth"
  }, content)), actionLabel && (onAction || onDismiss && dismissOnAction) && /*#__PURE__*/_react.default.createElement(_FlexItem.default, {
    shrink: true
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "toast-constrainGrowth alignChild--center--center"
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    onClick: onActionDismiss,
    "data-test": "toast-action",
    theme: "ghost",
    label: actionLabel
  }))), canDismiss && type !== 'progress' && /*#__PURE__*/_react.default.createElement(_FlexItem.default, {
    shrink: true
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "toast-constrainGrowth alignChild--center--center"
  }, isAutoDismiss ? /*#__PURE__*/_react.default.createElement(_CountdownButton.default, {
    onClick: onDismiss,
    duration: dismissDelay,
    label: "Close"
  }) : /*#__PURE__*/_react.default.createElement(_IconButton.default, {
    Icon: _DenyIcon.default,
    onClick: onDismiss,
    radius: "circle",
    label: "Close"
  }))))));
};

var _default = Toast;
exports.default = _default;