ui-layout-manager-dev 0.0.27-dev → 0.0.28-dev

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/cjs/index.js +2 -2
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/esm/index.js +3 -3
  4. package/dist/esm/index.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/LayoutManager/Providers/ModalProvider.js +20 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ui-layout-manager-dev",
3
- "version": "0.0.27-dev",
3
+ "version": "0.0.28-dev",
4
4
  "description": "A react component to manage layout and themes in single page applications.",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/components/LayoutManager/Providers/ModalProvider.js CHANGED
@@ -5,6 +5,7 @@ import React, {
5
5
  useContext,
6
6
  useMemo,
7
7
  useState,
8
+ useRef
8
9
  } from "react";
9
10
 
10
11
  import { createPortal } from "react-dom";
@@ -19,6 +20,7 @@ const ModalContext = createContext(null);
19
20
  */
20
21
  export function ModalProvider({ children }) {
21
22
  const [modal, setModal] = useState(null);
23
+ const downOnContentRef = useRef(false);
22
24
 
23
25
  // Open a modal with the given content and title. Returns a function to close the modal.
24
26
  const openModal = useCallback(( args ) => {
@@ -43,6 +45,22 @@ export function ModalProvider({ children }) {
43
45
  setModal(null);
44
46
  }, []);
45
47
 
48
+
49
+ // Prevent close when mouse down first happens on content
50
+ // and then dragged onto backdrop
51
+ const clickedBackdrop = (e) => {
52
+ e.stopPropagation()
53
+ if (!downOnContentRef.current) {
54
+ closeModal();
55
+ }
56
+ downOnContentRef.current = false;
57
+ }
58
+
59
+ const downOnContent = (e) => {
60
+ e.stopPropagation()
61
+ downOnContentRef.current = true;
62
+ }
63
+
46
64
  // Render the modal portal
47
65
  // TODO: Add support for different sizes
48
66
  const getPortal = () => {
@@ -50,8 +68,8 @@ export function ModalProvider({ children }) {
50
68
  <>
51
69
  {modal && (
52
70
  <React.Fragment key={modal.id}>
53
- <div className="modal-backdrop" onClick={modal.close}>
54
- <div className="modal-content" onClick={(e) => e.stopPropagation()}>
71
+ <div className="modal-backdrop" onClick={clickedBackdrop}>
72
+ <div className="modal-content" onMouseDown={downOnContent}>
55
73
  <div className="modal-header">
56
74
  <span className="title">{modal.title}</span>
57
75
  <XLg className="close-button" onClick={modal.close} />