@4i/modal-manager 1.0.51 → 1.0.61

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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/modal-provider.d.ts +2 -1
  3. package/src/components/modal-provider.js +2 -2
  4. package/src/components/modal-provider.tsx +3 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@4i/modal-manager",
3
- "version": "1.0.51",
3
+ "version": "1.0.61",
4
4
  "description": "",
5
5
  "main": "src/index.ts",
6
6
  "scripts": {
package/src/components/modal-provider.d.ts CHANGED
@@ -8,6 +8,7 @@ interface ModalProviderProps {
8
8
  className?: string;
9
9
  isHaveBackdrop?: boolean;
10
10
  isCloseOnBackdropClick?: boolean;
11
+ zIndex?: number;
11
12
  onModalClose?: (modalName: string | string[]) => void;
12
13
  onModalOpen?: (modalName: string) => void;
13
14
  onModalStateChange?: (modalState: boolean, data: TData[], names: string[]) => void;
@@ -15,5 +16,5 @@ interface ModalProviderProps {
15
16
  type TData = {
16
17
  [key: string]: any;
17
18
  };
18
- declare const ModalProvider: ({ modalList, isOverflow, className, onModalStateChange, onModalClose, onModalOpen, isHaveBackdrop, isCloseOnBackdropClick, }: ModalProviderProps) => false | React.JSX.Element[];
19
+ declare const ModalProvider: ({ modalList, isOverflow, className, onModalStateChange, onModalClose, onModalOpen, isHaveBackdrop, isCloseOnBackdropClick, zIndex, }: ModalProviderProps) => false | React.JSX.Element[];
19
20
  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, 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;
53
+ 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;
54
54
  var _d = (0, react_1.useState)([]), data = _d[0], setData = _d[1];
55
55
  var _e = (0, react_1.useState)([]), names = _e[0], setNames = _e[1];
56
56
  var modalRef = (0, react_1.useRef)([]);
@@ -142,7 +142,7 @@ var ModalProvider = function (_a) {
142
142
  return (data.length !== 0 &&
143
143
  data.map(function (item, i) {
144
144
  var Modal = activeModals[i] || (function () { return react_1.default.createElement(react_1.default.Fragment, null); });
145
- return (react_1.default.createElement("div", { key: item.modalId, onMouseDown: function (e) {
145
+ return (react_1.default.createElement("div", { style: { zIndex: zIndex || 1000 + i }, key: item.modalId, onMouseDown: function (e) {
146
146
  isCloseOnBackdropClick && handleCloseModal(i, e);
147
147
  } },
148
148
  react_1.default.createElement("div", { className: "".concat(className, " backdrop_modal_manager ").concat(isHaveBackdrop && isCloseOnBackdropClick && "backdrop") },
package/src/components/modal-provider.tsx CHANGED
@@ -10,6 +10,7 @@ interface ModalProviderProps {
10
10
  className?: string;
11
11
  isHaveBackdrop?: boolean;
12
12
  isCloseOnBackdropClick?: boolean;
13
+ zIndex?: number;
13
14
  onModalClose?: (modalName: string | string[]) => void;
14
15
  onModalOpen?: (modalName: string) => void;
15
16
  onModalStateChange?: (
@@ -30,6 +31,7 @@ const ModalProvider = ({
30
31
  onModalOpen,
31
32
  isHaveBackdrop = true,
32
33
  isCloseOnBackdropClick = true,
34
+ zIndex,
33
35
  }: ModalProviderProps) => {
34
36
  const [data, setData] = useState<TData[]>([]);
35
37
  const [names, setNames] = useState<string[]>([]);
@@ -138,6 +140,7 @@ const ModalProvider = ({
138
140
 
139
141
  return (
140
142
  <div
143
+ style={{ zIndex: zIndex || 1000 + i }}
141
144
  key={item.modalId}
142
145
  onMouseDown={(e) => {
143
146
  isCloseOnBackdropClick && handleCloseModal(i, e);