react-portal-dialog/dist/react-portal-dialog.esm.js

React Portal Dialog is an Awesome Customizable and Draggable Modal.

import React, { useRef, useState, useCallback, useEffect } from 'react';
import ReactDOM from 'react-dom';

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

var ReactPortalDialog__Overlay = {
  position: 'fixed',
  inset: '0',
  zIndex: '1000'
};
var ReactPortalDialog__Body = {
  position: 'fixed',
  top: '50%',
  left: '50%',
  maxHeight: '200px',
  width: '400px',
  backgroundColor: 'rgb(223, 221, 221)',
  zIndex: '1000',
  transform: 'translate(-50%, -50%)'
};
var ReactPortalDialog__Move = {
  backgroundColor: 'salmon',
  textAlign: 'center',
  padding: '5px',
  cursor: 'move'
};

var Draggable = function Draggable(_ref) {
  var children = _ref.children,
      bodyStyle = _ref.bodyStyle;
  var boxRef = useRef(null);
  var dragRef = useRef(null);

  var _useState = useState(false),
      isDragActive = _useState[0],
      setIsDragActive = _useState[1];

  var initialPosition = useRef({
    x: 0,
    y: 0
  });
  var dragStartHandler = useCallback(function (event) {
    if (dragRef.current === event.target) {
      setIsDragActive(true);
      initialPosition.current = {
        x: event.x,
        y: event.y
      };
    }
  }, []);
  var draggingHandler = useCallback(function (event) {
    if (isDragActive) {
      var _initialPosition$curr = initialPosition.current,
          x = _initialPosition$curr.x,
          y = _initialPosition$curr.y;

      if (boxRef.current) {
        var _boxRef$current = boxRef.current,
            offsetLeft = _boxRef$current.offsetLeft,
            offsetTop = _boxRef$current.offsetTop;
        boxRef.current.style.left = offsetLeft - (x - event.x) + "px";
        boxRef.current.style.top = offsetTop - (y - event.y) + "px";
      }

      initialPosition.current = {
        x: event.x,
        y: event.y
      };
    }
  }, [isDragActive]);
  var dragEndHandler = useCallback(function () {
    setIsDragActive(false);
    window.removeEventListener('mousemove', draggingHandler);
    window.removeEventListener('mouseup', dragEndHandler);
  }, [draggingHandler]);
  useEffect(function () {
    var _dragRef$current;

    (_dragRef$current = dragRef.current) == null ? void 0 : _dragRef$current.addEventListener('mousedown', dragStartHandler);
    window.addEventListener('mousemove', draggingHandler);
    window.addEventListener('mouseup', dragEndHandler);
  }, [dragEndHandler, dragStartHandler, draggingHandler]);
  return React.createElement("div", {
    ref: boxRef,
    style: bodyStyle,
    className: "ReactPortalDialog__Body"
  }, React.createElement("div", {
    ref: dragRef,
    style: ReactPortalDialog__Move,
    className: "ReactPortalDialog__Move"
  }, "Move Here"), children);
};

var Modal = function Modal(_ref) {
  var children = _ref.children,
      isOpen = _ref.isOpen,
      onClose = _ref.onClose,
      customStyles = _ref.customStyles,
      _ref$isOverlay = _ref.isOverlay,
      isOverlay = _ref$isOverlay === void 0 ? true : _ref$isOverlay,
      _ref$isDraggable = _ref.isDraggable,
      isDraggable = _ref$isDraggable === void 0 ? false : _ref$isDraggable;
  var bodyRef = useRef(null);
  var divRef = useRef(null);

  var _useState = useState(false),
      divCreated = _useState[0],
      setDivCreated = _useState[1];

  useEffect(function () {
    if (isOpen) {
      var _bodyRef$current;

      bodyRef.current = document.querySelector('body');
      divRef.current = document.createElement('div');
      divRef.current.classList.add('ReactPortalDialog');
      (_bodyRef$current = bodyRef.current) == null ? void 0 : _bodyRef$current.append(divRef.current);
      setDivCreated(true);
    }

    return function () {
      var _divRef$current;

      (_divRef$current = divRef.current) == null ? void 0 : _divRef$current.remove();
      setDivCreated(false);
    };
  }, [isOpen]);

  var closeHandler = function closeHandler() {
    var _divRef$current2;

    onClose();
    (_divRef$current2 = divRef.current) == null ? void 0 : _divRef$current2.remove();
  };

  var overlayStyle = _extends({}, ReactPortalDialog__Overlay, {
    backgroundColor: isOverlay ? 'rgba(0, 0, 0, 0.5)' : 'transparent'
  });

  var bodyStyle = customStyles || ReactPortalDialog__Body;
  return divCreated && divRef.current ? ReactDOM.createPortal(React.createElement(React.Fragment, null, React.createElement("div", {
    style: overlayStyle,
    className: "ReactPortalDialog__Overlay",
    onClick: closeHandler
  }), isDraggable ? React.createElement(Draggable, {
    bodyStyle: bodyStyle
  }, children) : React.createElement("div", {
    style: bodyStyle,
    className: "ReactPortalDialog__Body"
  }, children)), divRef.current) : null;
};

export default Modal;
//# sourceMappingURL=react-portal-dialog.esm.js.map