@4i/modal-manager 1.0.14 → 1.0.20

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 (5) hide show
  1. package/package.json +1 -1
  2. package/readme.md +6 -5
  3. package/src/components/modal-provider.d.ts +5 -1
  4. package/src/components/modal-provider.js +7 -1
  5. package/src/components/modal-provider.tsx +12 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@4i/modal-manager",
3
- "version": "1.0.14",
3
+ "version": "1.0.20",
4
4
  "description": "",
5
5
  "main": "src/index.ts",
6
6
  "scripts": {
package/readme.md CHANGED
@@ -38,11 +38,12 @@ create table with methods
38
38
 
39
39
  #### ModalProvider props
40
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 |
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 |
46
+ | onModalStateChange | function | Callback function that is called when modal state changes. |
46
47
 
47
48
  #### Define Modal Actions:
48
49
 
package/src/components/modal-provider.d.ts CHANGED
@@ -6,6 +6,10 @@ interface ModalProviderProps {
6
6
  modalList: any;
7
7
  isOverflow?: boolean;
8
8
  className?: string;
9
+ onModalStateChange?: (modalState: boolean, data: TData[], names: string[]) => void;
9
10
  }
10
- declare const ModalProvider: ({ modalList, isOverflow, className, }: ModalProviderProps) => false | React.JSX.Element[];
11
+ type TData = {
12
+ [key: string]: any;
13
+ };
14
+ declare const ModalProvider: ({ modalList, isOverflow, className, onModalStateChange, }: ModalProviderProps) => false | React.JSX.Element[];
11
15
  export default ModalProvider;
package/src/components/modal-provider.js CHANGED
@@ -50,10 +50,16 @@ 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, isOverflow = _a.isOverflow, className = _a.className;
53
+ var modalList = _a.modalList, isOverflow = _a.isOverflow, className = _a.className, onModalStateChange = _a.onModalStateChange;
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)([]);
57
+ (0, react_1.useEffect)(function () {
58
+ if (!onModalStateChange)
59
+ return;
60
+ var modalState = data.length !== 0;
61
+ onModalStateChange(modalState, data, names);
62
+ }, [data, names]);
57
63
  (0, react_1.useEffect)(function () {
58
64
  var handleOpenModal = function (name, data) {
59
65
  setData(function (prev) { return __spreadArray(__spreadArray([], prev, true), [data], false); });
package/src/components/modal-provider.tsx CHANGED
@@ -8,6 +8,11 @@ interface ModalProviderProps {
8
8
  modalList: any;
9
9
  isOverflow?: boolean;
10
10
  className?: string;
11
+ onModalStateChange?: (
12
+ modalState: boolean,
13
+ data: TData[],
14
+ names: string[]
15
+ ) => void;
11
16
  }
12
17
 
13
18
  type TData = { [key: string]: any };
@@ -16,11 +21,18 @@ const ModalProvider = ({
16
21
  modalList,
17
22
  isOverflow,
18
23
  className,
24
+ onModalStateChange,
19
25
  }: ModalProviderProps) => {
20
26
  const [data, setData] = useState<TData[]>([]);
21
27
  const [names, setNames] = useState<string[]>([]);
22
28
  const modalRef = useRef<any[]>([]);
23
29
 
30
+ useEffect(() => {
31
+ if (!onModalStateChange) return;
32
+ const modalState = data.length !== 0;
33
+ onModalStateChange(modalState, data, names);
34
+ }, [data, names]);
35
+
24
36
  useEffect(() => {
25
37
  const handleOpenModal = (name: string, data: TData) => {
26
38
  setData((prev: TData[]) => [...prev, data]);