@4i/modal-manager 1.0.70 → 1.0.73

package/package.json

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

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

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

package/src/components/modal-provider.js

@@ -50,7 +50,7 @@ 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, onModalClose = _a.onModalClose, onModalOpen = _a.onModalOpen, _b = _a.isHaveBackdrop, isHaveBackdrop = _b === void 0 ? true : _b, _c = _a.isCloseOnBackdropClick, isCloseOnBackdropClick = _c === void 0 ? true : _c, zIndex = _a.zIndex;
+    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, zIndex = _a.zIndex, ignoreClickClassName = _a.ignoreClickClassName;
     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)([]);
@@ -129,8 +129,12 @@ var ModalProvider = function (_a) {
         return Component;
     });
     var handleCloseModal = function (index, e) {
+        e.stopPropagation();
         if (!isCloseOnBackdropClick)
             return;
+        var element = document.querySelector(".".concat(ignoreClickClassName));
+        if (element && element.contains(e.target))
+            return;
         if (modalRef.current[index] &&
             !modalRef.current[index].contains(e.target)) {
             ModalManager_2.default.close(index);

package/src/components/modal-provider.tsx

@@ -18,7 +18,7 @@ interface ModalProviderProps {
     data: TData[],
     names: string[]
   ) => void;
-  ignoreClickElement?: Element;
+  ignoreClickClassName?: string;
 }
 
 type TData = { [key: string]: any };
@@ -33,7 +33,7 @@ const ModalProvider = ({
   isHaveBackdrop = true,
   isCloseOnBackdropClick = true,
   zIndex,
-  ignoreClickElement,
+  ignoreClickClassName,
 }: ModalProviderProps) => {
   const [data, setData] = useState<TData[]>([]);
   const [names, setNames] = useState<string[]>([]);
@@ -122,8 +122,12 @@ const ModalProvider = ({
   });
 
   const handleCloseModal = (index: number, e: any) => {
+    e.stopPropagation();
     if (!isCloseOnBackdropClick) return;
-    if (ignoreClickElement && ignoreClickElement.contains(e.target)) return;
+
+    const element = document.querySelector(`.${ignoreClickClassName}`);
+    if (element && element.contains(e.target)) return;
+
     if (
       modalRef.current[index] &&
       !modalRef.current[index].contains(e.target)