Merge pull request #88 from kucher-mx/close-update

update close logic

README.md

@@ -68,7 +68,7 @@ You can drag a modal window
 
 #### onClose: `Function`
 
-Handle modal closing. Should return true if you allow closing
+Handle modal closing. Should change isOpen to false
 
 #### className: `string`
 
@@ -100,6 +100,7 @@ Creates React.Portal
 
 ## Changelog (latest on top)
 
+- Removed double calling onClose on popup closing and unmount. onClose will be called only on: close button, backdrop, esc click
 - Drag and drop
 - fix bug in firefox and safari with modal position
 - set width as atribute

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-pure-modal",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "React modal",
   "main": "dist/react-pure-modal.min.js",
   "types": "dist/react-pure-modal.d.ts",

src/react-pure-modal.tsx

@@ -1,11 +1,15 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 
+// components
 import PureModalContent from './pure-modal-content';
-import './react-pure-modal.css';
 
+// types
 import type { MouseOrTouch } from './types';
 
+// styles
+import './react-pure-modal.css';
+
 type Props = {
   children: JSX.Element;
   replace?: boolean;
@@ -38,14 +42,39 @@ function PureModal(props: Props) {
     document.body.classList.remove('body-modal-fix');
   }, []);
 
+  /**
+   * useEffect to setup popup OR perform a cleanup after popup was closed
+   */
   useEffect(() => {
+    /**
+     * if popup was opened:
+     *  - add esc event listener
+     *  - add overflow fix class to body
+     *  - remove focus from focused element (e.g. remove focus from btn after click, cuz popup was opened)
+     */
     if (isOpen) {
-      open();
+      document.addEventListener('keydown', handleEsc);
+      if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
+      document.body.classList.add('body-modal-fix');
     }
 
     return () => {
-      const openModal = document.querySelector('.pure-modal');
-      !openModal && close();
+      /**
+       * if popup was closed:
+       *  - remove esc event listener
+       *  - remove overflow fix class from body
+       *  - reset popup states
+       */
+      if (!document.querySelector('.pure-modal')) {
+        document.removeEventListener('keydown', handleEsc);
+        removeClassBody();
+        setX(null);
+        setY(null);
+        setDeltaX(0);
+        setDeltaY(0);
+        setMouseOffsetX(0);
+        setMouseOffsetY(0);
+      }
     };
   }, [isOpen]);
 
@@ -63,51 +92,18 @@ function PureModal(props: Props) {
     return null;
   }
 
-  function setModalContext() {
-    document.addEventListener('keydown', handleEsc);
-    if (document.activeElement instanceof HTMLElement) {
-      document.activeElement.blur();
-    }
-    document.body.classList.add('body-modal-fix');
-  }
-
-  function unsetModalContext() {
-    document.removeEventListener('keydown', handleEsc);
-    removeClassBody();
-    setX(null);
-    setY(null);
-    setDeltaX(0);
-    setDeltaY(0);
-    setMouseOffsetX(0);
-    setMouseOffsetY(0);
-  }
-
-  function open(event?: MouseOrTouch) {
-    if (event) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
-
-    setModalContext();
-  }
-
+  /**
+   * method that will be called when some of the closing elements are beeing interacted with
+   *
+   * click on close btn, click on backdrop, press on esc
+   */
   function close(event?: MouseOrTouch) {
     if (event) {
       event.stopPropagation();
       event.preventDefault();
     }
 
-    if (onClose) {
-      event
-        ? onClose({
-            isPassive: true,
-          })
-        : onClose({
-            isPassive: false,
-          });
-    }
-
-    unsetModalContext();
+    onClose?.({ isPassive: Boolean(event) });
   }
 
   function getCoords(e: MouseOrTouch) {