@geezee/react-ui/esm/use-messages/message-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 MessageItem from './message-item';

var MessageContainer = function MessageContainer() {
  var portal = usePortal('message');

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

  var messageElements = useMemo(function () {
    return messages.map(function (t) {
      return /*#__PURE__*/React.createElement(MessageItem, _extends({
        key: "message-".concat(t.id)
      }, t));
    });
  }, [messages]);
  if (!portal) return null;
  if (!messages || messages.length === 0) return null;
  return createPortal( /*#__PURE__*/React.createElement("div", {
    className: "jsx-4052022995" + " " + "message-container"
  }, messageElements, /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "4052022995"
  }, ".message-container.jsx-4052022995{position:fixed;min-height:10px;top:20px;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 MessageContainer;