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

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

import * as React from "react";
import { useToaster, toast as notify } from "react-hot-toast";
import styled, { css } from "styled-components";
import ToastMessage from "./ToastMessage";
import defaultTheme from "../defaultTheme";
import { left, right } from "../utils/rtl";
const StyledWrapper = styled.div.withConfig({
  displayName: "ToastRoot__StyledWrapper",
  componentId: "sc-1b2ragn-0"
})(["", ""], ({
  theme,
  $top,
  $left,
  $right,
  $bottom
}) => css(["position:fixed;z-index:", ";pointer-events:none;top:", "px;bottom:", "px;", ":", "px;", ":", "px;"], theme.orbit.zIndexOnTheTop, $top, $bottom, left, $left, right, $right)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledWrapper.defaultProps = {
  theme: defaultTheme
};

const ToastRoot = ({
  dataTest,
  id: wrapperId,
  topOffset = 8,
  leftOffset = 8,
  rightOffset = 8,
  bottomOffset = 8,
  gutter = 8,
  dismissTimeout = 5000,
  placement = "top-center"
}) => {
  const {
    toasts,
    handlers
  } = 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,
    id: wrapperId,
    $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, {
      key: id,
      id: id,
      dismissTimeout: dismissTimeout,
      visible: visible,
      icon: icon,
      offset: offset,
      onUpdateHeight: handleUpdateHeight,
      onMouseEnter: startPause,
      onMouseLeave: endPause,
      placement: placement,
      onDismiss: notify.dismiss,
      ariaLive: ariaProps["aria-live"]
    }, message);
  }));
};

export default ToastRoot;