@4i/modal-manager 1.0.12 → 1.0.14

package/package.json

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

package/readme.md

@@ -17,33 +17,32 @@ npm install @4i/modal-manager
 
 #### Instance methods:
 
-##### .call(action, props)
-
-Call a modal by its action name and pass props to it.
-
-##### .close('all')
-
-Close all modals.
-
-##### .close(-1)
-
-Close last modals.
-
-##### .close(0)
-
-Close first modals.
-
-##### .close() (default)
-
-Close last modals.
-
-##### .addEventListener(event, callback)
-
-Add an event listener to the modal manager.
-
-##### .removeEventListener(event, callback)
-
-Remove an event listener from the modal manager.
+create table with methods
+
+| Method                               | Description                                           |
+| ------------------------------------ | ----------------------------------------------------- |
+| call(action, props)                  | Call a modal by its action name and pass props to it. |
+|                                      |
+| close('all')                         | Close all modals.                                     |
+|                                      |
+| close(-1)                            | Close last modals.                                    |
+|                                      |
+| close(0)                             | Close first modals.                                   |
+|                                      |
+| close()                              | Close last modals. (default)                          |
+|                                      |
+| addEventListener(event, callback)    | Add an event listener to the modal manager.           |
+|                                      |
+| removeEventListener(event, callback) | Remove an event listener from the modal manager.      |
+|                                      |
+
+#### ModalProvider props
+
+| Prop       | Type    | Description                                                                |
+| ---------- | ------- | -------------------------------------------------------------------------- |
+| modalList  | Object  | An object containing modal actions as keys and modal components as values. |
+| className  | string  |                                                                            |
+| isOverflow | boolean | Set "overflow: hidden" on body                                             |
 
 #### Define Modal Actions:
 

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

@@ -4,6 +4,8 @@ export type ModalList = {
 };
 interface ModalProviderProps {
     modalList: any;
+    isOverflow?: boolean;
+    className?: string;
 }
-declare const ModalProvider: ({ modalList }: ModalProviderProps) => false | React.JSX.Element[];
+declare const ModalProvider: ({ modalList, isOverflow, className, }: 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;
+    var modalList = _a.modalList, isOverflow = _a.isOverflow, className = _a.className;
     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 modalRef = (0, react_1.useRef)([]);
@@ -58,8 +58,18 @@ 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 (isOverflow) {
+                if (typeof document === "undefined")
+                    return;
+                document.body.style.overflow = "hidden";
+            }
         };
         var handleClose = function (position) {
+            if (isOverflow) {
+                if (typeof document !== "undefined") {
+                    document.body.style.overflow = "";
+                }
+            }
             if (position === "all") {
                 setData([]);
                 setNames([]);
@@ -101,7 +111,6 @@ var ModalProvider = function (_a) {
         return Component;
     });
     var handleCloseModal = function (index, e) {
-        console.log(index);
         if (modalRef.current[index] &&
             !modalRef.current[index].contains(e.target)) {
             ModalManager_2.default.close(index);
@@ -116,7 +125,7 @@ var ModalProvider = function (_a) {
             return (react_1.default.createElement("div", { key: item.modalId, onClick: function (e) {
                     handleCloseModal(i, e);
                 } },
-                react_1.default.createElement("div", { className: "backdrop_modal_manager" },
+                react_1.default.createElement("div", { className: "".concat(className, " backdrop_modal_manager") },
                     react_1.default.createElement("div", { ref: function (ref) {
                             refReducer(i, ref);
                         } },

package/src/components/modal-provider.tsx

@@ -6,11 +6,17 @@ export type ModalList = { [key: string]: React.ComponentType };
 
 interface ModalProviderProps {
   modalList: any;
+  isOverflow?: boolean;
+  className?: string;
 }
 
 type TData = { [key: string]: any };
 
-const ModalProvider = ({ modalList }: ModalProviderProps) => {
+const ModalProvider = ({
+  modalList,
+  isOverflow,
+  className,
+}: ModalProviderProps) => {
   const [data, setData] = useState<TData[]>([]);
   const [names, setNames] = useState<string[]>([]);
   const modalRef = useRef<any[]>([]);
@@ -19,9 +25,20 @@ const ModalProvider = ({ modalList }: ModalProviderProps) => {
     const handleOpenModal = (name: string, data: TData) => {
       setData((prev: TData[]) => [...prev, data]);
       setNames((prev: string[]) => [...prev, name]);
+
+      if (isOverflow) {
+        if (typeof document === "undefined") return;
+        document.body.style.overflow = "hidden";
+      }
     };
 
     const handleClose = (position: number | string) => {
+      if (isOverflow) {
+        if (typeof document !== "undefined") {
+          document.body.style.overflow = "";
+        }
+      }
+
       if (position === "all") {
         setData([]);
         setNames([]);
@@ -69,7 +86,6 @@ const ModalProvider = ({ modalList }: ModalProviderProps) => {
   });
 
   const handleCloseModal = (index: number, e: any) => {
-    console.log(index);
     if (
       modalRef.current[index] &&
       !modalRef.current[index].contains(e.target)
@@ -94,7 +110,7 @@ const ModalProvider = ({ modalList }: ModalProviderProps) => {
             handleCloseModal(i, e);
           }}
         >
-          <div className="backdrop_modal_manager">
+          <div className={`${className} backdrop_modal_manager`}>
             <div
               ref={(ref) => {
                 refReducer(i, ref);

package/src/utils/ModalManager.js

@@ -29,7 +29,11 @@ var constants = {
 var ModalManager = /** @class */ (function (_super) {
     __extends(ModalManager, _super);
     function ModalManager() {
-        return _super.call(this) || this;
+        var _this = _super.call(this) || this;
+        _this.create = _this.create.bind(_this);
+        _this.call = _this.call.bind(_this);
+        _this.close = _this.close.bind(_this);
+        return _this;
     }
     ModalManager.prototype.create = function (name, payload) {
         this.name = name;

package/src/utils/ModalManager.ts

@@ -12,6 +12,9 @@ const constants = {
 class ModalManager extends Manager {
   constructor() {
     super();
+    this.create = this.create.bind(this);
+    this.call = this.call.bind(this);
+    this.close = this.close.bind(this);
   }
 
   create<T>(name: string, payload: { modalId: number; data?: T }) {