@robotical/sensors-dashboard/dist/components/Modal/index.js

A dashboard tool for depicting Marty data by Robotical

"use strict";

require("core-js/modules/es.weak-map.js");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _Logo = _interopRequireDefault(require("../Logo"));
var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function Modal(_ref) {
  let {
    children,
    title,
    shouldCloseModal,
    withLogo,
    modalResetter
  } = _ref;
  const [isBrowser, setIsBrowser] = (0, _react.useState)(false);
  const [closing, setClosing] = (0, _react.useState)(false);
  const [showModal, setShowModal] = (0, _react.useState)(true);
  (0, _react.useEffect)(() => {
    setIsBrowser(true);
    if (showModal) {
      window.scrollTo({
        top: 0
      });
      document.getElementsByTagName("body")[0].setAttribute("style", "overflow: hidden");
    }
  }, [showModal]);
  (0, _react.useEffect)(() => {
    if (shouldCloseModal) {
      closeModalHandler();
    }
  }, [shouldCloseModal]);
  const closeModalHandler = () => {
    setClosing(true);
    const timer = setTimeout(() => {
      document.getElementsByTagName("body")[0].setAttribute("style", "overflow: auto");
      setShowModal(false);
      modalResetter();
      clearTimeout(timer);
    }, 700);
  };
  const modalStyleInModalState = {}; //!!mv2Dashboard.isModal ? { width: "100%", height: "100%"} : { };

  const modalContent = showModal ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: _stylesModule.default.styledModalOverlay,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: [_stylesModule.default.styledModal, closing ? _stylesModule.default.styleModalLeaveToTop : _stylesModule.default.styleModalComeInFromTop].join(" "),
      style: modalStyleInModalState,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: _stylesModule.default.styledModalHeader
      }), withLogo && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: _stylesModule.default.modalLogoContainer,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Logo.default, {})
      }), title && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
        className: _stylesModule.default.styledTitle,
        children: title
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: _stylesModule.default.styledModalBody,
        children: children
      })]
    })
  }) : null;
  if (isBrowser && showModal) {
    return /*#__PURE__*/_reactDom.default.createPortal(modalContent, document.getElementById("sensors-dashboard-modal-main-container"));
  } else {
    return null;
  }
}
var _default = exports.default = Modal;