@kiwicom/orbit-components/lib/Toast/ToastRoot.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

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

var React = _interopRequireWildcard(require("react"));

var _reactHotToast = require("react-hot-toast");

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _ToastMessage = _interopRequireDefault(require("./ToastMessage"));

var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));

var _rtl = require("../utils/rtl");

const StyledWrapper = _styledComponents.default.div.withConfig({
  displayName: "ToastRoot__StyledWrapper",
  componentId: "sc-1b2ragn-0"
})(["", ""], ({
  theme,
  $top,
  $left,
  $right,
  $bottom
}) => (0, _styledComponents.css)(["position:fixed;z-index:", ";pointer-events:none;top:", "px;bottom:", "px;", ":", "px;", ":", "px;"], theme.orbit.zIndexOnTheTop, $top, $bottom, _rtl.left, $left, _rtl.right, $right)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledWrapper.defaultProps = {
  theme: _defaultTheme.default
};

const ToastRoot = ({
  dataTest,
  topOffset = 8,
  leftOffset = 8,
  rightOffset = 8,
  bottomOffset = 8,
  gutter = 8,
  dismissTimeout = 5000,
  placement = "top-center"
}) => {
  const {
    toasts,
    handlers
  } = (0, _reactHotToast.useToaster)({
    duration: dismissTimeout
  });
  const {
    startPause,
    endPause,
    calculateOffset,
    updateHeight
  } = handlers; // eslint-disable-next-line react-hooks/exhaustive-deps

  const handleUpdateHeight = React.useCallback(updateHeight, []);
  return /*#__PURE__*/React.createElement(StyledWrapper, {
    "data-test": dataTest,
    $top: topOffset,
    $bottom: bottomOffset,
    $left: leftOffset,
    $right: rightOffset
  }, toasts.map(toast => {
    const {
      id,
      message,
      ariaProps,
      visible,
      icon
    } = toast;
    const offset = calculateOffset(toast, {
      gutter
    });
    return /*#__PURE__*/React.createElement(_ToastMessage.default, {
      key: id,
      id: id,
      dismissTimeout: dismissTimeout,
      visible: visible,
      icon: icon,
      offset: offset,
      onUpdateHeight: handleUpdateHeight,
      onMouseEnter: startPause,
      onMouseLeave: endPause,
      placement: placement,
      onDismiss: _reactHotToast.toast.dismiss,
      ariaLive: ariaProps["aria-live"]
    }, message);
  }));
};

var _default = ToastRoot;
exports.default = _default;