Merge pull request #383 from ebs-integrator/development

Development

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ebs-design",
-  "version": "0.0.1-beta.125",
+  "version": "0.0.1-beta.126",
   "description": "EBS Design System React UI elements.",
   "author": "EBS Integrator <[email protected]> (https://ebs-integrator.com/)",
   "maintainers": [

src/components/organisms/Modal/Modal.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import cn from 'classnames';
-import { usePortal, useScrollToggler } from 'hooks';
+import { usePopupClose, usePortal, useScrollToggler } from 'hooks';
 import { Mask, Button } from 'components/atoms';
 import { ModalContent } from './ModalContent';
 import { ModalFooter } from './ModalFooter';
@@ -38,6 +38,14 @@ const Modal: React.FC<ModalProps> = ({
   const createPortal = usePortal('modal-portal');
   useScrollToggler(open);
 
+  const overlayRef = React.useRef<HTMLDivElement>(null);
+  usePopupClose(overlayRef, () => {
+    if (closeOnClickOutside) {
+      props.onClose?.();
+      setOpen(false);
+    }
+  });
+
   React.useEffect(() => setOpen(isOpen), [isOpen]);
 
   React.useEffect(() => {
@@ -54,18 +62,6 @@ const Modal: React.FC<ModalProps> = ({
     };
   }, []);
 
-  const onClickOutside = (ev: React.MouseEvent<HTMLDivElement, MouseEvent>): void => {
-    const target = ev.target as HTMLDivElement;
-
-    if (target && target.classList.contains('ebs-modal__wrapper')) {
-      if (props.onClose !== undefined) {
-        props.onClose();
-      }
-
-      setOpen(false);
-    }
-  };
-
   const showHeader = React.useMemo(() => header || title, [header, title]);
 
   return (
@@ -75,10 +71,7 @@ const Modal: React.FC<ModalProps> = ({
           <>
             <Mask />
 
-            <div
-              className={cn(`ebs-modal__wrapper`, className)}
-              {...(mask ? { ...props, onClick: closeOnClickOutside ? onClickOutside : undefined } : props)}
-            >
+            <div className={cn(`ebs-modal__wrapper`, className)} ref={overlayRef} {...props}>
               <div className={cn(`ebs-modal`, `ebs-modal__size--${size}`, { 'hide-header': !showHeader })}>
                 {showHeader ? (
                   <div className="ebs-modal__header">

src/hooks/index.ts

@@ -3,3 +3,4 @@ export * from './useScrollToggler';
 export * from './useNotify';
 export * from './usePortal';
 export * from './useTheme';
+export * from './usePopupClose';

src/hooks/usePopupClose.tsx

@@ -0,0 +1,26 @@
+import React, { useRef } from 'react';
+
+export function usePopupClose(overlayRef: React.RefObject<Element>, callback: () => void): void {
+  // Need a ref to callback so it calls the up to date argument
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+
+  React.useEffect(() => {
+    let mousedownTarget: EventTarget | null = null;
+
+    const mouseDownListener = (e: Event): void => {
+      mousedownTarget = e.target;
+    };
+    const mouseUpListener = (e: Event): void => {
+      if (e.target === overlayRef.current && mousedownTarget === e.target) callbackRef.current();
+      mousedownTarget = null;
+    };
+    document.addEventListener('mousedown', mouseDownListener);
+    document.addEventListener('mouseup', mouseUpListener);
+
+    return () => {
+      document.removeEventListener('mousedown', mouseDownListener);
+      document.removeEventListener('mouseup', mouseUpListener);
+    };
+  }, []);
+}