@4i/modal-manager 1.0.1 → 1.0.2

package/lib/components/modal-provider.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var __assign = void 0 && (void 0).__assign || function () {
+var __assign = this && this.__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
       s = arguments[i];
@@ -10,13 +10,13 @@ var __assign = void 0 && (void 0).__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
-var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
   if (k2 === undefined) k2 = k;
   var desc = Object.getOwnPropertyDescriptor(m, k);
   if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
     desc = {
       enumerable: true,
-      get: function get() {
+      get: function () {
         return m[k];
       }
     };
@@ -26,7 +26,7 @@ var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? fun
   if (k2 === undefined) k2 = k;
   o[k2] = m[k];
 });
-var __setModuleDefault = void 0 && (void 0).__setModuleDefault || (Object.create ? function (o, v) {
+var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
   Object.defineProperty(o, "default", {
     enumerable: true,
     value: v
@@ -34,14 +34,14 @@ var __setModuleDefault = void 0 && (void 0).__setModuleDefault || (Object.create
 } : function (o, v) {
   o["default"] = v;
 });
-var __importStar = void 0 && (void 0).__importStar || function (mod) {
+var __importStar = this && this.__importStar || function (mod) {
   if (mod && mod.__esModule) return mod;
   var result = {};
   if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
   __setModuleDefault(result, mod);
   return result;
 };
-var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from, pack) {
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
   if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
     if (ar || !(i in from)) {
       if (!ar) ar = Array.prototype.slice.call(from, 0, i);
@@ -50,7 +50,7 @@ var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from, pack
   }
   return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+var __importDefault = this && this.__importDefault || function (mod) {
   return mod && mod.__esModule ? mod : {
     "default": mod
   };
@@ -60,10 +60,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 var react_1 = __importStar(require("react"));
 var ModalManager_1 = __importDefault(require("../utils/service/ModalManager"));
-require("./backdrop.css");
 var ModalManager_2 = __importDefault(require("../utils/service/ModalManager"));
 var modal_list_1 = __importDefault(require("../utils/config/modal-list"));
-var ModalProvider = function ModalProvider(_a) {
+var ModalProvider = function (_a) {
   var CustomComponent = _a.CustomComponent;
   var _b = (0, react_1.useState)([]),
     data = _b[0],
@@ -73,7 +72,7 @@ var ModalProvider = function ModalProvider(_a) {
     setNames = _c[1];
   var modalRef = (0, react_1.useRef)([]);
   (0, react_1.useEffect)(function () {
-    var handleOpenModal = function handleOpenModal(name, data) {
+    var handleOpenModal = function (name, data) {
       setData(function (prev) {
         return __spreadArray(__spreadArray([], prev, true), [data], false);
       });
@@ -81,7 +80,7 @@ var ModalProvider = function ModalProvider(_a) {
         return __spreadArray(__spreadArray([], prev, true), [name], false);
       });
     };
-    var handleClose = function handleClose(position) {
+    var handleClose = function (position) {
       if (position === "all") {
         setData([]);
         setNames([]);
@@ -127,44 +126,44 @@ var ModalProvider = function ModalProvider(_a) {
         });
       });
     };
-    ModalManager_1["default"].addEventListener("change", handleOpenModal);
-    ModalManager_1["default"].addEventListener("close", handleClose);
+    ModalManager_1.default.addEventListener("change", handleOpenModal);
+    ModalManager_1.default.addEventListener("close", handleClose);
     return function () {
-      ModalManager_1["default"].removeEventListener("change", handleOpenModal);
-      ModalManager_1["default"].removeEventListener("close", handleClose);
+      ModalManager_1.default.removeEventListener("change", handleOpenModal);
+      ModalManager_1.default.removeEventListener("close", handleClose);
     };
   }, []);
   var activeModals = names.map(function (name) {
-    var Component = modal_list_1["default"][name] || function () {
-      return react_1["default"].createElement(react_1["default"].Fragment, null);
+    var Component = modal_list_1.default[name] || function () {
+      return react_1.default.createElement(react_1.default.Fragment, null);
     };
     return Component;
   });
-  var handleCloseModal = function handleCloseModal(index, e) {
+  var handleCloseModal = function (index, e) {
     if (modalRef.current[index] && !modalRef.current[index].contains(e.target)) {
-      ModalManager_2["default"].close(index);
+      ModalManager_2.default.close(index);
     }
   };
-  var refReducer = function refReducer(index, value) {
+  var refReducer = function (index, value) {
     modalRef.current[index] = value;
   };
   return activeModals.length !== 0 && activeModals.map(function (Component, i) {
     var Modal = Component;
-    return react_1["default"].createElement(react_1["default"].Fragment, null, CustomComponent ? react_1["default"].createElement(CustomComponent, __assign({
+    return react_1.default.createElement(react_1.default.Fragment, null, CustomComponent ? react_1.default.createElement(CustomComponent, __assign({
       key: i
-    }, data[i])) : react_1["default"].createElement("div", {
+    }, data[i])) : react_1.default.createElement("div", {
       key: i,
       className: "backdrop_modal_manager",
-      onClick: function onClick(e) {
+      onClick: function (e) {
         handleCloseModal(i, e);
       }
-    }, react_1["default"].createElement("div", {
-      ref: function ref(_ref) {
-        refReducer(i, _ref);
+    }, react_1.default.createElement("div", {
+      ref: function (ref) {
+        refReducer(i, ref);
       }
-    }, react_1["default"].createElement(Modal, __assign({
+    }, react_1.default.createElement(Modal, __assign({
       key: i
     }, data[i])))));
   });
 };
-exports["default"] = ModalProvider;
+exports.default = ModalProvider;

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+var __importDefault = this && this.__importDefault || function (mod) {
   return mod && mod.__esModule ? mod : {
     "default": mod
   };
@@ -10,22 +10,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.setModalActions = exports.setModalList = exports.ModalProvider = exports.modal = exports.Manager = void 0;
 var Manager_1 = __importDefault(require("./utils/service/Manager"));
-exports.Manager = Manager_1["default"];
+exports.Manager = Manager_1.default;
 var ModalManager_1 = __importDefault(require("./utils/service/ModalManager"));
-exports.modal = ModalManager_1["default"];
+exports.modal = ModalManager_1.default;
 var modal_provider_1 = __importDefault(require("./components/modal-provider"));
-exports.ModalProvider = modal_provider_1["default"];
+exports.ModalProvider = modal_provider_1.default;
 var modal_list_1 = require("./utils/config/modal-list");
 Object.defineProperty(exports, "setModalList", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return modal_list_1.setModalList;
   }
 });
 var modal_actions_1 = require("./utils/config/modal-actions");
 Object.defineProperty(exports, "setModalActions", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return modal_actions_1.setModalActions;
   }
 });

package/lib/utils/config/modal-actions.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var __assign = void 0 && (void 0).__assign || function () {
+var __assign = this && this.__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
       s = arguments[i];
@@ -15,8 +15,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.setModalActions = void 0;
 var modalActions = {};
-var setModalActions = function setModalActions(actionList) {
+var setModalActions = function (actionList) {
   modalActions = __assign(__assign({}, modalActions), actionList);
 };
 exports.setModalActions = setModalActions;
-exports["default"] = modalActions;
+exports.default = modalActions;

package/lib/utils/config/modal-list.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var __assign = void 0 && (void 0).__assign || function () {
+var __assign = this && this.__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
       s = arguments[i];
@@ -15,8 +15,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.setModalList = void 0;
 var modalList = {};
-var setModalList = function setModalList(_modalList) {
+var setModalList = function (_modalList) {
   modalList = __assign(__assign({}, modalList), _modalList);
 };
 exports.setModalList = setModalList;
-exports["default"] = modalList;
+exports.default = modalList;

package/lib/utils/service/Manager.js

@@ -22,4 +22,4 @@ var Manager = /** @class */function () {
   };
   return Manager;
 }();
-exports["default"] = Manager;
+exports.default = Manager;

package/lib/utils/service/ModalManager.js

@@ -1,26 +1,26 @@
 "use strict";
 
-var __extends = void 0 && (void 0).__extends || function () {
-  var _extendStatics = function extendStatics(d, b) {
-    _extendStatics = Object.setPrototypeOf || {
+var __extends = this && this.__extends || function () {
+  var extendStatics = function (d, b) {
+    extendStatics = Object.setPrototypeOf || {
       __proto__: []
     } instanceof Array && function (d, b) {
       d.__proto__ = b;
     } || function (d, b) {
       for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
     };
-    return _extendStatics(d, b);
+    return extendStatics(d, b);
   };
   return function (d, b) {
     if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-    _extendStatics(d, b);
+    extendStatics(d, b);
     function __() {
       this.constructor = d;
     }
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
   };
 }();
-var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+var __importDefault = this && this.__importDefault || function (mod) {
   return mod && mod.__esModule ? mod : {
     "default": mod
   };
@@ -57,6 +57,6 @@ var ModalManager = /** @class */function (_super) {
     this.emitter.emit(constants.CLOSE, position);
   };
   return ModalManager;
-}(Manager_1["default"]);
+}(Manager_1.default);
 var modal = new ModalManager();
-exports["default"] = modal;
+exports.default = modal;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@4i/modal-manager",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "npm run clean && tsc && babel src --out-dir lib",
+    "build": "npm run clean && tsc && babel src --out-dir lib && cp src/styles.css lib/",
     "clean": "rm -rf lib"
   },
   "repository": {

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

@@ -1,5 +1,4 @@
 import React from "react";
-import "./backdrop.css";
 interface ModalProviderProps {
     CustomComponent?: React.ComponentType;
 }

package/src/components/modal-provider.js

@@ -48,7 +48,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var ModalManager_1 = __importDefault(require("../utils/service/ModalManager"));
-require("./backdrop.css");
 var ModalManager_2 = __importDefault(require("../utils/service/ModalManager"));
 var modal_list_1 = __importDefault(require("../utils/config/modal-list"));
 var ModalProvider = function (_a) {

package/src/components/modal-provider.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
 import manager from "../utils/service/ModalManager";
-import "./backdrop.css";
 import modal from "../utils/service/ModalManager";
 import modalList from "../utils/config/modal-list";
 

package/src/styles.css

@@ -0,0 +1,44 @@
+@keyframes bg_opacity_scale {
+  from {
+    transform: scale(0.8);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes bg_opacity {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.backdrop_modal_manager {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 0;
+  right: 0;
+  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_modal_manager > div {
+  animation: bg_opacity_scale 150ms ease-in-out forwards;
+}
+
+.main_container_modal_manager {
+  opacity: 0;
+  animation: bg_opacity 250ms forwards;
+}