@4i/modal-manager 1.0.42 → 1.0.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4i/modal-manager",
-  "version": "1.0.42",
+  "version": "1.0.50",
   "description": "",
   "main": "src/index.ts",
   "scripts": {

package/src/components/modal-provider.d.ts

@@ -6,10 +6,14 @@ interface ModalProviderProps {
     modalList: any;
     isOverflow?: boolean;
     className?: string;
+    isHaveBackdrop?: boolean;
+    isCloseOnBackdropClick?: boolean;
+    onModalClose?: (modalName: string | string[]) => void;
+    onModalOpen?: (modalName: string) => void;
     onModalStateChange?: (modalState: boolean, data: TData[], names: string[]) => void;
 }
 type TData = {
     [key: string]: any;
 };
-declare const ModalProvider: ({ modalList, isOverflow, className, onModalStateChange, }: ModalProviderProps) => false | React.JSX.Element[];
+declare const ModalProvider: ({ modalList, isOverflow, className, onModalStateChange, onModalClose, onModalOpen, isHaveBackdrop, isCloseOnBackdropClick, }: ModalProviderProps) => false | React.JSX.Element[];
 export default ModalProvider;

package/src/components/modal-provider.js

@@ -50,9 +50,9 @@ var react_1 = __importStar(require("react"));
 var ModalManager_1 = __importDefault(require("../utils/ModalManager"));
 var ModalManager_2 = __importDefault(require("../utils/ModalManager"));
 var ModalProvider = function (_a) {
-    var modalList = _a.modalList, isOverflow = _a.isOverflow, className = _a.className, onModalStateChange = _a.onModalStateChange;
-    var _b = (0, react_1.useState)([]), data = _b[0], setData = _b[1];
-    var _c = (0, react_1.useState)([]), names = _c[0], setNames = _c[1];
+    var modalList = _a.modalList, isOverflow = _a.isOverflow, className = _a.className, onModalStateChange = _a.onModalStateChange, onModalClose = _a.onModalClose, onModalOpen = _a.onModalOpen, _b = _a.isHaveBackdrop, isHaveBackdrop = _b === void 0 ? true : _b, _c = _a.isCloseOnBackdropClick, isCloseOnBackdropClick = _c === void 0 ? true : _c;
+    var _d = (0, react_1.useState)([]), data = _d[0], setData = _d[1];
+    var _e = (0, react_1.useState)([]), names = _e[0], setNames = _e[1];
     var modalRef = (0, react_1.useRef)([]);
     (0, react_1.useEffect)(function () {
         if (!onModalStateChange)
@@ -64,6 +64,9 @@ var ModalProvider = function (_a) {
         var handleOpenModal = function (name, data) {
             setData(function (prev) { return __spreadArray(__spreadArray([], prev, true), [data], false); });
             setNames(function (prev) { return __spreadArray(__spreadArray([], prev, true), [name], false); });
+            if (onModalOpen) {
+                onModalOpen(name);
+            }
             if (isOverflow) {
                 if (typeof document === "undefined")
                     return;
@@ -77,12 +80,18 @@ var ModalProvider = function (_a) {
                 }
             }
             if (position === "all") {
+                if (onModalClose) {
+                    onModalClose("all");
+                }
                 setData([]);
                 setNames([]);
                 return;
             }
             if (position === -1) {
                 // remove last
+                if (onModalClose) {
+                    onModalClose(names[names.length - 1]);
+                }
                 setData(function (prev) {
                     return prev.filter(function (_, index) { return index !== prev.length - 1; });
                 });
@@ -93,6 +102,9 @@ var ModalProvider = function (_a) {
             }
             if (position === 0) {
                 // remove first
+                if (onModalClose) {
+                    onModalClose(names[0]);
+                }
                 setData(function (prev) { return prev.filter(function (_, index) { return index !== 0; }); });
                 setNames(function (prev) { return prev.filter(function (_, index) { return index !== 0; }); });
                 return;
@@ -117,6 +129,8 @@ var ModalProvider = function (_a) {
         return Component;
     });
     var handleCloseModal = function (index, e) {
+        if (!isCloseOnBackdropClick)
+            return;
         if (modalRef.current[index] &&
             !modalRef.current[index].contains(e.target)) {
             ModalManager_2.default.close(index);
@@ -128,10 +142,10 @@ var ModalProvider = function (_a) {
     return (data.length !== 0 &&
         data.map(function (item, i) {
             var Modal = activeModals[i] || (function () { return react_1.default.createElement(react_1.default.Fragment, null); });
-            return (react_1.default.createElement("div", { key: item.modalId, onMouseUp: function (e) {
-                    handleCloseModal(i, e);
+            return (react_1.default.createElement("div", { key: item.modalId, onMouseDown: function (e) {
+                    isCloseOnBackdropClick && handleCloseModal(i, e);
                 } },
-                react_1.default.createElement("div", { className: "".concat(className, " backdrop_modal_manager") },
+                react_1.default.createElement("div", { className: "".concat(className, " backdrop_modal_manager ").concat(isHaveBackdrop && isCloseOnBackdropClick && "backdrop") },
                     react_1.default.createElement("div", { ref: function (ref) {
                             refReducer(i, ref);
                         } },

package/src/components/modal-provider.tsx

@@ -8,6 +8,10 @@ interface ModalProviderProps {
   modalList: any;
   isOverflow?: boolean;
   className?: string;
+  isHaveBackdrop?: boolean;
+  isCloseOnBackdropClick?: boolean;
+  onModalClose?: (modalName: string | string[]) => void;
+  onModalOpen?: (modalName: string) => void;
   onModalStateChange?: (
     modalState: boolean,
     data: TData[],
@@ -22,6 +26,10 @@ const ModalProvider = ({
   isOverflow,
   className,
   onModalStateChange,
+  onModalClose,
+  onModalOpen,
+  isHaveBackdrop = true,
+  isCloseOnBackdropClick = true,
 }: ModalProviderProps) => {
   const [data, setData] = useState<TData[]>([]);
   const [names, setNames] = useState<string[]>([]);
@@ -37,6 +45,9 @@ const ModalProvider = ({
     const handleOpenModal = (name: string, data: TData) => {
       setData((prev: TData[]) => [...prev, data]);
       setNames((prev: string[]) => [...prev, name]);
+      if (onModalOpen) {
+        onModalOpen(name);
+      }
 
       if (isOverflow) {
         if (typeof document === "undefined") return;
@@ -52,6 +63,9 @@ const ModalProvider = ({
       }
 
       if (position === "all") {
+        if (onModalClose) {
+          onModalClose("all");
+        }
         setData([]);
         setNames([]);
         return;
@@ -59,6 +73,9 @@ const ModalProvider = ({
 
       if (position === -1) {
         // remove last
+        if (onModalClose) {
+          onModalClose(names[names.length - 1]);
+        }
         setData((prev: TData[]) =>
           prev.filter((_, index) => index !== prev.length - 1)
         );
@@ -70,6 +87,9 @@ const ModalProvider = ({
 
       if (position === 0) {
         // remove first
+        if (onModalClose) {
+          onModalClose(names[0]);
+        }
         setData((prev: TData[]) => prev.filter((_, index) => index !== 0));
         setNames((prev: string[]) => prev.filter((_, index) => index !== 0));
         return;
@@ -98,6 +118,7 @@ const ModalProvider = ({
   });
 
   const handleCloseModal = (index: number, e: any) => {
+    if (!isCloseOnBackdropClick) return;
     if (
       modalRef.current[index] &&
       !modalRef.current[index].contains(e.target)
@@ -118,11 +139,15 @@ const ModalProvider = ({
       return (
         <div
           key={item.modalId}
-          onMouseUp={(e) => {
-            handleCloseModal(i, e);
+          onMouseDown={(e) => {
+            isCloseOnBackdropClick && handleCloseModal(i, e);
           }}
         >
-          <div className={`${className} backdrop_modal_manager`}>
+          <div
+            className={`${className} backdrop_modal_manager ${
+              isHaveBackdrop && isCloseOnBackdropClick && "backdrop"
+            }`}
+          >
             <div
               ref={(ref) => {
                 refReducer(i, ref);

package/src/styles.css

@@ -27,13 +27,16 @@
   bottom: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
   position: fixed;
   z-index: 1000;
-  opacity: 0;
   animation: bg_opacity 150ms ease-in-out forwards;
 }
 
+.backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+}
+
 .backdrop_modal_manager > div {
   animation: bg_opacity_scale 150ms ease-in-out forwards;
 }