@muriukialex/react-modal-popup/dist/react-modal-popup.cjs.development.js

A package to create modal pop ups for a React application

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var reactDom = require('react-dom');

function _extends() {
  return _extends = Object.assign ? Object.assign.bind() : function (n) {
    for (var e = 1; e < arguments.length; e++) {
      var t = arguments[e];
      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
    }
    return n;
  }, _extends.apply(null, arguments);
}

var generateUniqueId = function generateUniqueId() {
  return "modal-" + Math.random().toString(36).substring(2, 9);
};
var Modal = function Modal(_ref) {
  var title = _ref.title,
    showModal = _ref.showModal,
    onClose = _ref.onClose,
    children = _ref.children,
    _ref$customContainerS = _ref.customContainerStyles,
    customContainerStyles = _ref$customContainerS === void 0 ? {} : _ref$customContainerS,
    _ref$customContentSty = _ref.customContentStyles,
    customContentStyles = _ref$customContentSty === void 0 ? {} : _ref$customContentSty,
    _ref$customModalButto = _ref.customModalButtonStyles,
    customModalButtonStyles = _ref$customModalButto === void 0 ? {} : _ref$customModalButto;
  var _useState = React.useState(null),
    root = _useState[0],
    setRoot = _useState[1];
  var id = generateUniqueId();
  React.useEffect(function () {
    var createModalRoot = function createModalRoot() {
      var modalRoot = document.createElement('div');
      modalRoot.setAttribute('id', id);
      document.body.appendChild(modalRoot);
      setRoot(modalRoot);
    };
    createModalRoot(); // Call the function to create the modal-root div
    return function () {
      var modalRoot = document.getElementById(id);
      if (modalRoot) {
        modalRoot.remove();
      }
    };
    // Disable the eslint rule for the following line
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  if (root === null) return null;
  var containerStyles = _extends({
    position: 'absolute',
    top: '0',
    bottom: '0',
    left: '0',
    right: '0',
    display: 'grid',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.3)',
    transition: 'background-color 0.3s'
  }, customContainerStyles);
  var contentStyles = _extends({
    padding: 20,
    background: '#fff',
    borderRadius: '2px',
    display: 'inline-block',
    minHeight: '300px',
    margin: '1rem',
    position: 'relative',
    minWidth: '300px',
    boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
    justifySelf: 'center',
    opacity: 1,
    transition: 'opacity 0.3s'
  }, customContentStyles);
  var buttonStyles = _extends({
    position: 'absolute',
    bottom: '10px',
    right: '14px'
  }, customModalButtonStyles);
  return reactDom.createPortal(showModal ? React__default.createElement("div", {
    style: containerStyles,
    onClick: onClose
  }, React__default.createElement("div", {
    style: contentStyles
  }, title, React__default.createElement("hr", null), children, React__default.createElement("button", {
    style: buttonStyles,
    onClick: onClose
  }, "Close"))) : null, root);
};

exports.default = Modal;
//# sourceMappingURL=react-modal-popup.cjs.development.js.map