@dashadmin/dash-modal 1.3.25 → 1.3.26
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.
- package/dist/index.cjs +309 -0
- package/dist/index.js +228 -112
- package/package.json +138 -134
- package/dist/DASHModal.js +0 -1
- package/dist/DASHModal.stories.js +0 -1
- package/dist/assets/error.mp3 +0 -0
- package/dist/dash-modal.css +0 -1
- package/dist/styles/modal.less +0 -261
- /package/dist/{assets/modalError.mp3 → modalError-AYCR6YR6.mp3} +0 -0
- /package/dist/{assets/modalInfo.mp3 → modalInfo-WZTTQWHY.mp3} +0 -0
- /package/dist/{assets/success.mp3 → success-4YU5VXNR.mp3} +0 -0
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,309 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
10
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
11
|
+
var __spreadValues = (a, b) => {
|
|
12
|
+
for (var prop in b || (b = {}))
|
|
13
|
+
if (__hasOwnProp.call(b, prop))
|
|
14
|
+
__defNormalProp(a, prop, b[prop]);
|
|
15
|
+
if (__getOwnPropSymbols)
|
|
16
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
17
|
+
if (__propIsEnum.call(b, prop))
|
|
18
|
+
__defNormalProp(a, prop, b[prop]);
|
|
19
|
+
}
|
|
20
|
+
return a;
|
|
21
|
+
};
|
|
22
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
23
|
+
var __objRest = (source, exclude) => {
|
|
24
|
+
var target = {};
|
|
25
|
+
for (var prop in source)
|
|
26
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
27
|
+
target[prop] = source[prop];
|
|
28
|
+
if (source != null && __getOwnPropSymbols)
|
|
29
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
30
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
31
|
+
target[prop] = source[prop];
|
|
32
|
+
}
|
|
33
|
+
return target;
|
|
34
|
+
};
|
|
35
|
+
var __export = (target, all) => {
|
|
36
|
+
for (var name in all)
|
|
37
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
38
|
+
};
|
|
39
|
+
var __copyProps = (to, from, except, desc) => {
|
|
40
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
41
|
+
for (let key of __getOwnPropNames(from))
|
|
42
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
43
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
44
|
+
}
|
|
45
|
+
return to;
|
|
46
|
+
};
|
|
47
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
48
|
+
|
|
49
|
+
// src/index.tsx
|
|
50
|
+
var index_exports = {};
|
|
51
|
+
__export(index_exports, {
|
|
52
|
+
default: () => index_default
|
|
53
|
+
});
|
|
54
|
+
module.exports = __toCommonJS(index_exports);
|
|
55
|
+
|
|
56
|
+
// src/DASHModal.tsx
|
|
57
|
+
var import_material = require("@mui/material");
|
|
58
|
+
var import_react = require("react");
|
|
59
|
+
|
|
60
|
+
// ../../node_modules/@mui/icons-material/esm/utils/createSvgIcon.js
|
|
61
|
+
var import_utils = require("@mui/material/utils");
|
|
62
|
+
|
|
63
|
+
// ../../node_modules/@mui/icons-material/esm/Info.js
|
|
64
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
65
|
+
var Info_default = (0, import_utils.createSvgIcon)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
|
|
66
|
+
d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
|
|
67
|
+
}), "Info");
|
|
68
|
+
|
|
69
|
+
// ../../node_modules/@mui/icons-material/esm/CheckCircle.js
|
|
70
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
71
|
+
var CheckCircle_default = (0, import_utils.createSvgIcon)(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", {
|
|
72
|
+
d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z"
|
|
73
|
+
}), "CheckCircle");
|
|
74
|
+
|
|
75
|
+
// ../../node_modules/@mui/icons-material/esm/Error.js
|
|
76
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
77
|
+
var Error_default = (0, import_utils.createSvgIcon)(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", {
|
|
78
|
+
d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z"
|
|
79
|
+
}), "Error");
|
|
80
|
+
|
|
81
|
+
// ../../node_modules/@mui/icons-material/esm/Close.js
|
|
82
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
83
|
+
var Close_default = (0, import_utils.createSvgIcon)(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", {
|
|
84
|
+
d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
|
|
85
|
+
}), "Close");
|
|
86
|
+
|
|
87
|
+
// src/assets/modalError.mp3
|
|
88
|
+
var modalError_default = "./modalError-AYCR6YR6.mp3";
|
|
89
|
+
|
|
90
|
+
// src/assets/success.mp3
|
|
91
|
+
var success_default = "./success-4YU5VXNR.mp3";
|
|
92
|
+
|
|
93
|
+
// src/assets/modalInfo.mp3
|
|
94
|
+
var modalInfo_default = "./modalInfo-WZTTQWHY.mp3";
|
|
95
|
+
|
|
96
|
+
// src/DASHModal.tsx
|
|
97
|
+
var import_react_admin = require("react-admin");
|
|
98
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
99
|
+
var Icon = (props) => {
|
|
100
|
+
const { children, variant } = props;
|
|
101
|
+
switch (variant) {
|
|
102
|
+
case "success":
|
|
103
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
104
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `dash-modal-img dash-modal-img-${variant}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckCircle_default, {}) }),
|
|
105
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "dash-modal-title", children })
|
|
106
|
+
] });
|
|
107
|
+
case "danger":
|
|
108
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
109
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `dash-modal-img dash-modal-img-${variant}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Error_default, {}) }),
|
|
110
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "dash-modal-title", children })
|
|
111
|
+
] });
|
|
112
|
+
case "info":
|
|
113
|
+
case "default":
|
|
114
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
115
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `dash-modal-img dash-modal-img-${variant}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Info_default, {}) }),
|
|
116
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "dash-modal-title", children })
|
|
117
|
+
] });
|
|
118
|
+
default:
|
|
119
|
+
return children ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "dash-modal-title", children }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {});
|
|
120
|
+
}
|
|
121
|
+
};
|
|
122
|
+
var DASHModal = (props) => {
|
|
123
|
+
const translate = (0, import_react_admin.useTranslate)();
|
|
124
|
+
const _a = props, {
|
|
125
|
+
variant = "default",
|
|
126
|
+
onClose,
|
|
127
|
+
onCancel,
|
|
128
|
+
onConfirm,
|
|
129
|
+
open: open = false,
|
|
130
|
+
confirmText: confirmText = translate("dash.action.continue"),
|
|
131
|
+
cancelText = translate("dash.action.cancel"),
|
|
132
|
+
closeText = null,
|
|
133
|
+
title,
|
|
134
|
+
content = null,
|
|
135
|
+
className,
|
|
136
|
+
showCloseButton = true,
|
|
137
|
+
showCancelButton = void 0,
|
|
138
|
+
showConfirmButton = true,
|
|
139
|
+
dialogActions,
|
|
140
|
+
sound = true,
|
|
141
|
+
children
|
|
142
|
+
} = _a, rest = __objRest(_a, [
|
|
143
|
+
"variant",
|
|
144
|
+
"onClose",
|
|
145
|
+
"onCancel",
|
|
146
|
+
"onConfirm",
|
|
147
|
+
//onSubmit,
|
|
148
|
+
"open",
|
|
149
|
+
//closeText = null,
|
|
150
|
+
"confirmText",
|
|
151
|
+
"cancelText",
|
|
152
|
+
"closeText",
|
|
153
|
+
"title",
|
|
154
|
+
"content",
|
|
155
|
+
"className",
|
|
156
|
+
"showCloseButton",
|
|
157
|
+
"showCancelButton",
|
|
158
|
+
"showConfirmButton",
|
|
159
|
+
"dialogActions",
|
|
160
|
+
"sound",
|
|
161
|
+
"children"
|
|
162
|
+
]);
|
|
163
|
+
const effectiveShowCancelButton = typeof showCancelButton === "boolean" ? showCancelButton : !!cancelText;
|
|
164
|
+
const [isModalOpen, setIsModalOpen] = (0, import_react.useState)(open);
|
|
165
|
+
(0, import_react.useEffect)(() => {
|
|
166
|
+
setIsModalOpen(open);
|
|
167
|
+
}, [open]);
|
|
168
|
+
const handleOnCancel = (_e) => {
|
|
169
|
+
setIsModalOpen(false);
|
|
170
|
+
if (onCancel) {
|
|
171
|
+
onCancel();
|
|
172
|
+
}
|
|
173
|
+
};
|
|
174
|
+
const handleOnClose = (_e, _r) => {
|
|
175
|
+
setIsModalOpen(false);
|
|
176
|
+
if (onClose) {
|
|
177
|
+
onClose();
|
|
178
|
+
}
|
|
179
|
+
};
|
|
180
|
+
const handleOnConfirm = (_e) => {
|
|
181
|
+
setIsModalOpen(false);
|
|
182
|
+
if (onConfirm) {
|
|
183
|
+
onConfirm();
|
|
184
|
+
}
|
|
185
|
+
};
|
|
186
|
+
const playSuccess = () => {
|
|
187
|
+
try {
|
|
188
|
+
if (sound) {
|
|
189
|
+
const audio = new Audio(success_default);
|
|
190
|
+
audio.load();
|
|
191
|
+
audio.play();
|
|
192
|
+
}
|
|
193
|
+
} catch (e) {
|
|
194
|
+
console.error(e);
|
|
195
|
+
}
|
|
196
|
+
};
|
|
197
|
+
const playInfo = () => {
|
|
198
|
+
try {
|
|
199
|
+
if (sound) {
|
|
200
|
+
const audio = new Audio(modalInfo_default);
|
|
201
|
+
audio.load();
|
|
202
|
+
audio.play();
|
|
203
|
+
}
|
|
204
|
+
} catch (e) {
|
|
205
|
+
console.error(e);
|
|
206
|
+
}
|
|
207
|
+
};
|
|
208
|
+
const playError = () => {
|
|
209
|
+
try {
|
|
210
|
+
if (sound) {
|
|
211
|
+
const audio = new Audio(modalError_default);
|
|
212
|
+
audio.load();
|
|
213
|
+
audio.play();
|
|
214
|
+
}
|
|
215
|
+
} catch (e) {
|
|
216
|
+
console.error(e);
|
|
217
|
+
}
|
|
218
|
+
};
|
|
219
|
+
(0, import_react.useEffect)(() => {
|
|
220
|
+
if (isModalOpen === true && variant === "danger") {
|
|
221
|
+
playError();
|
|
222
|
+
return;
|
|
223
|
+
}
|
|
224
|
+
if (isModalOpen === true && variant === "success") {
|
|
225
|
+
playSuccess();
|
|
226
|
+
return;
|
|
227
|
+
}
|
|
228
|
+
if (isModalOpen === true) {
|
|
229
|
+
playInfo();
|
|
230
|
+
return;
|
|
231
|
+
}
|
|
232
|
+
}, [isModalOpen, variant]);
|
|
233
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
234
|
+
import_material.Dialog,
|
|
235
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
236
|
+
onClose: handleOnClose,
|
|
237
|
+
className: `${className ? className + " " : ""}dash-modal-${variant}`,
|
|
238
|
+
open: isModalOpen,
|
|
239
|
+
children: [
|
|
240
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.DialogTitle, { id: "alert-dialog-title", children: [
|
|
241
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { variant }),
|
|
242
|
+
showCloseButton && !closeText && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
243
|
+
import_material.IconButton,
|
|
244
|
+
{
|
|
245
|
+
"aria-label": "close",
|
|
246
|
+
size: "small",
|
|
247
|
+
onClick: (e) => handleOnClose(e, "backdropClick"),
|
|
248
|
+
sx: {
|
|
249
|
+
position: "absolute",
|
|
250
|
+
right: 5,
|
|
251
|
+
top: 20,
|
|
252
|
+
color: "white",
|
|
253
|
+
bgcolor: "error.main",
|
|
254
|
+
"&:hover": {
|
|
255
|
+
bgcolor: "error.dark"
|
|
256
|
+
},
|
|
257
|
+
borderRadius: "50%",
|
|
258
|
+
padding: "8px"
|
|
259
|
+
},
|
|
260
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Close_default, {})
|
|
261
|
+
}
|
|
262
|
+
)
|
|
263
|
+
] }),
|
|
264
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.DialogContent, { children: [
|
|
265
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "dash-modal-title", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { children: title }) }),
|
|
266
|
+
children || content
|
|
267
|
+
] }),
|
|
268
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.DialogActions, { children: [
|
|
269
|
+
dialogActions || /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {}),
|
|
270
|
+
effectiveShowCancelButton ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
271
|
+
import_material.Button,
|
|
272
|
+
{
|
|
273
|
+
variant: "contained",
|
|
274
|
+
className: "btn-width-md",
|
|
275
|
+
color: "primary",
|
|
276
|
+
onClick: handleOnCancel,
|
|
277
|
+
children: cancelText
|
|
278
|
+
}
|
|
279
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {}),
|
|
280
|
+
showConfirmButton === true ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
281
|
+
import_material.Button,
|
|
282
|
+
{
|
|
283
|
+
variant: "contained",
|
|
284
|
+
className: "btn-width-md",
|
|
285
|
+
color: "primary",
|
|
286
|
+
onClick: handleOnConfirm,
|
|
287
|
+
autoFocus: true,
|
|
288
|
+
children: confirmText
|
|
289
|
+
}
|
|
290
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {}),
|
|
291
|
+
showCloseButton === true && closeText ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
292
|
+
import_material.Button,
|
|
293
|
+
{
|
|
294
|
+
variant: "contained",
|
|
295
|
+
className: "btn-width-md",
|
|
296
|
+
color: "primary",
|
|
297
|
+
onClick: (e) => handleOnClose(e, "backdropClick"),
|
|
298
|
+
children: closeText
|
|
299
|
+
}
|
|
300
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {})
|
|
301
|
+
] })
|
|
302
|
+
]
|
|
303
|
+
})
|
|
304
|
+
);
|
|
305
|
+
};
|
|
306
|
+
var DASHModal_default = DASHModal;
|
|
307
|
+
|
|
308
|
+
// src/index.tsx
|
|
309
|
+
var index_default = DASHModal_default;
|