@geezee/react-ui/esm/use-notifications/notification-container.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _JSXStyle from "styled-jsx/style";
import React, { useMemo } from 'react';
import { createPortal } from 'react-dom';
import usePortal from '../utils/use-portal';
import { useCfxUIContext } from '../utils/use-cfx-ui-context';
import NotificationItem from './notification-item';
import useTheme from '../styles/use-theme';

var NotificationContainer = function NotificationContainer() {
  var portal = usePortal('notification');
  var theme = useTheme();

  var _useCfxUIContext = useCfxUIContext(),
      notifications = _useCfxUIContext.notifications;

  var notificationElements = useMemo(function () {
    return notifications.map(function (t) {
      return /*#__PURE__*/React.createElement(NotificationItem, _extends({
        key: "notification-".concat(t.id)
      }, t));
    });
  }, [notifications]);
  if (!portal) return null;
  if (!notifications || notifications.length === 0) return null;
  return createPortal( /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["2899355234", [theme.layout.gap]]]) + " " + "notification-container"
  }, notificationElements, /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "2899355234",
    dynamic: [theme.layout.gap]
  }, ".notification-container.__jsx-style-dynamic-selector{position:fixed;min-height:0.7143rem;top:calc(".concat(theme.layout.gap, " * 1.25);left:0;right:0;z-index:2000;box-sizing:border-box;overflow:visible;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:0;visibility:visible;}"))), portal);
};

export default NotificationContainer;