@4i/modal-manager 1.0.12 → 1.0.13

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 (7) hide show
  1. package/package.json +1 -1
  2. package/readme.md +26 -27
  3. package/src/components/modal-provider.d.ts +3 -1
  4. package/src/components/modal-provider.js +7 -3
  5. package/src/components/modal-provider.tsx +13 -3
  6. package/src/utils/ModalManager.js +5 -1
  7. package/src/utils/ModalManager.ts +3 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@4i/modal-manager",
3
- "version": "1.0.12",
3
+ "version": "1.0.13",
4
4
  "description": "",
5
5
  "main": "src/index.ts",
6
6
  "scripts": {
package/readme.md CHANGED
@@ -17,33 +17,32 @@ npm install @4i/modal-manager
17
17
 
18
18
  #### Instance methods:
19
19
 
20
- ##### .call(action, props)
21
-
22
- Call a modal by its action name and pass props to it.
23
-
24
- ##### .close('all')
25
-
26
- Close all modals.
27
-
28
- ##### .close(-1)
29
-
30
- Close last modals.
31
-
32
- ##### .close(0)
33
-
34
- Close first modals.
35
-
36
- ##### .close() (default)
37
-
38
- Close last modals.
39
-
40
- ##### .addEventListener(event, callback)
41
-
42
- Add an event listener to the modal manager.
43
-
44
- ##### .removeEventListener(event, callback)
45
-
46
- Remove an event listener from the modal manager.
20
+ create table with methods
21
+
22
+ | Method | Description |
23
+ | ------------------------------------ | ----------------------------------------------------- |
24
+ | call(action, props) | Call a modal by its action name and pass props to it. |
25
+ | |
26
+ | close('all') | Close all modals. |
27
+ | |
28
+ | close(-1) | Close last modals. |
29
+ | |
30
+ | close(0) | Close first modals. |
31
+ | |
32
+ | close() | Close last modals. (default) |
33
+ | |
34
+ | addEventListener(event, callback) | Add an event listener to the modal manager. |
35
+ | |
36
+ | removeEventListener(event, callback) | Remove an event listener from the modal manager. |
37
+ | |
38
+
39
+ #### ModalProvider props
40
+
41
+ | Prop | Type | Description |
42
+ | ---------- | ------- | -------------------------------------------------------------------------- |
43
+ | modalList | Object | An object containing modal actions as keys and modal components as values. |
44
+ | className | string | |
45
+ | isOverflow | boolean | Set "overflow: hidden" on body |
47
46
 
48
47
  #### Define Modal Actions:
49
48
 
package/src/components/modal-provider.d.ts CHANGED
@@ -4,6 +4,8 @@ export type ModalList = {
4
4
  };
5
5
  interface ModalProviderProps {
6
6
  modalList: any;
7
+ isOverflow?: boolean;
8
+ className?: string;
7
9
  }
8
- declare const ModalProvider: ({ modalList }: ModalProviderProps) => false | React.JSX.Element[];
10
+ declare const ModalProvider: ({ modalList, isOverflow, className, }: ModalProviderProps) => false | React.JSX.Element[];
9
11
  export default ModalProvider;
package/src/components/modal-provider.js CHANGED
@@ -50,7 +50,7 @@ var react_1 = __importStar(require("react"));
50
50
  var ModalManager_1 = __importDefault(require("../utils/ModalManager"));
51
51
  var ModalManager_2 = __importDefault(require("../utils/ModalManager"));
52
52
  var ModalProvider = function (_a) {
53
- var modalList = _a.modalList;
53
+ var modalList = _a.modalList, isOverflow = _a.isOverflow, className = _a.className;
54
54
  var _b = (0, react_1.useState)([]), data = _b[0], setData = _b[1];
55
55
  var _c = (0, react_1.useState)([]), names = _c[0], setNames = _c[1];
56
56
  var modalRef = (0, react_1.useRef)([]);
@@ -58,6 +58,11 @@ var ModalProvider = function (_a) {
58
58
  var handleOpenModal = function (name, data) {
59
59
  setData(function (prev) { return __spreadArray(__spreadArray([], prev, true), [data], false); });
60
60
  setNames(function (prev) { return __spreadArray(__spreadArray([], prev, true), [name], false); });
61
+ if (isOverflow) {
62
+ if (typeof document === "undefined")
63
+ return;
64
+ document.body.style.overflow = "hidden";
65
+ }
61
66
  };
62
67
  var handleClose = function (position) {
63
68
  if (position === "all") {
@@ -101,7 +106,6 @@ var ModalProvider = function (_a) {
101
106
  return Component;
102
107
  });
103
108
  var handleCloseModal = function (index, e) {
104
- console.log(index);
105
109
  if (modalRef.current[index] &&
106
110
  !modalRef.current[index].contains(e.target)) {
107
111
  ModalManager_2.default.close(index);
@@ -116,7 +120,7 @@ var ModalProvider = function (_a) {
116
120
  return (react_1.default.createElement("div", { key: item.modalId, onClick: function (e) {
117
121
  handleCloseModal(i, e);
118
122
  } },
119
- react_1.default.createElement("div", { className: "backdrop_modal_manager" },
123
+ react_1.default.createElement("div", { className: "".concat(className, " backdrop_modal_manager") },
120
124
  react_1.default.createElement("div", { ref: function (ref) {
121
125
  refReducer(i, ref);
122
126
  } },
package/src/components/modal-provider.tsx CHANGED
@@ -6,11 +6,17 @@ export type ModalList = { [key: string]: React.ComponentType };
6
6
 
7
7
  interface ModalProviderProps {
8
8
  modalList: any;
9
+ isOverflow?: boolean;
10
+ className?: string;
9
11
  }
10
12
 
11
13
  type TData = { [key: string]: any };
12
14
 
13
- const ModalProvider = ({ modalList }: ModalProviderProps) => {
15
+ const ModalProvider = ({
16
+ modalList,
17
+ isOverflow,
18
+ className,
19
+ }: ModalProviderProps) => {
14
20
  const [data, setData] = useState<TData[]>([]);
15
21
  const [names, setNames] = useState<string[]>([]);
16
22
  const modalRef = useRef<any[]>([]);
@@ -19,6 +25,11 @@ const ModalProvider = ({ modalList }: ModalProviderProps) => {
19
25
  const handleOpenModal = (name: string, data: TData) => {
20
26
  setData((prev: TData[]) => [...prev, data]);
21
27
  setNames((prev: string[]) => [...prev, name]);
28
+
29
+ if (isOverflow) {
30
+ if (typeof document === "undefined") return;
31
+ document.body.style.overflow = "hidden";
32
+ }
22
33
  };
23
34
 
24
35
  const handleClose = (position: number | string) => {
@@ -69,7 +80,6 @@ const ModalProvider = ({ modalList }: ModalProviderProps) => {
69
80
  });
70
81
 
71
82
  const handleCloseModal = (index: number, e: any) => {
72
- console.log(index);
73
83
  if (
74
84
  modalRef.current[index] &&
75
85
  !modalRef.current[index].contains(e.target)
@@ -94,7 +104,7 @@ const ModalProvider = ({ modalList }: ModalProviderProps) => {
94
104
  handleCloseModal(i, e);
95
105
  }}
96
106
  >
97
- <div className="backdrop_modal_manager">
107
+ <div className={`${className} backdrop_modal_manager`}>
98
108
  <div
99
109
  ref={(ref) => {
100
110
  refReducer(i, ref);
package/src/utils/ModalManager.js CHANGED
@@ -29,7 +29,11 @@ var constants = {
29
29
  var ModalManager = /** @class */ (function (_super) {
30
30
  __extends(ModalManager, _super);
31
31
  function ModalManager() {
32
- return _super.call(this) || this;
32
+ var _this = _super.call(this) || this;
33
+ _this.create = _this.create.bind(_this);
34
+ _this.call = _this.call.bind(_this);
35
+ _this.close = _this.close.bind(_this);
36
+ return _this;
33
37
  }
34
38
  ModalManager.prototype.create = function (name, payload) {
35
39
  this.name = name;
package/src/utils/ModalManager.ts CHANGED
@@ -12,6 +12,9 @@ const constants = {
12
12
  class ModalManager extends Manager {
13
13
  constructor() {
14
14
  super();
15
+ this.create = this.create.bind(this);
16
+ this.call = this.call.bind(this);
17
+ this.close = this.close.bind(this);
15
18
  }
16
19
 
17
20
  create<T>(name: string, payload: { modalId: number; data?: T }) {