@geist-ui/react/esm/use-toasts/toast-container.js

Modern and minimalist React UI library.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _JSXStyle from "../styled-jsx.es.js";
import React, { useMemo, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import usePortal from '../utils/use-portal';
import useTheme from '../use-theme';
import { useGeistUIContext } from '../utils/use-geist-ui-context';
import ToastItem from './toast-item';

var ToastContainer = function ToastContainer() {
  var portal = usePortal('toast');
  var theme = useTheme();

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      hover = _useState2[0],
      setHover = _useState2[1];

  var timer = useRef();

  var _useGeistUIContext = useGeistUIContext(),
      toasts = _useGeistUIContext.toasts,
      updateToastHoverStatus = _useGeistUIContext.updateToastHoverStatus;

  var toastElements = useMemo(function () {
    return toasts.map(function (t, i) {
      return /*#__PURE__*/React.createElement(ToastItem, {
        index: i,
        total: toasts.length,
        toast: t,
        onHover: hover,
        key: "toast-".concat(i)
      });
    });
  }, [toasts, hover]);

  var hoverHandler = function hoverHandler(onHover) {
    if (onHover) {
      timer.current && clearTimeout(timer.current);
      updateToastHoverStatus(function () {
        return true;
      });
      return setHover(true);
    }

    timer.current = window.setTimeout(function () {
      setHover(false);
      updateToastHoverStatus(function () {
        return false;
      });
      timer.current && clearTimeout(timer.current);
    }, 200);
  };

  if (!portal) return null;
  if (!toasts || toasts.length === 0) return null;
  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
    onMouseEnter: function onMouseEnter() {
      return hoverHandler(true);
    },
    onMouseLeave: function onMouseLeave() {
      return hoverHandler(false);
    },
    className: _JSXStyle.dynamic([["1105427894", [theme.layout.gap, theme.layout.gap]]]) + " " + "toast-container ".concat(hover ? 'hover' : '')
  }, toastElements, /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "1105427894",
    dynamic: [theme.layout.gap, theme.layout.gap]
  }, ".toast-container.__jsx-style-dynamic-selector{position:fixed;width:420px;max-width:90vw;bottom:".concat(theme.layout.gap, ";right:").concat(theme.layout.gap, ";z-index:2000;-webkit-transition:all 400ms ease;transition:all 400ms ease;box-sizing:border-box;}.toast-container.hover.__jsx-style-dynamic-selector{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0);}"))), portal);
};

export default ToastContainer;