aio-popup 2.0.1 → 3.0.0

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 (3) hide show
  1. package/index.css +369 -370
  2. package/index.js +143 -113
  3. package/package.json +1 -1
package/index.css CHANGED
@@ -1,374 +1,373 @@
1
1
  .aio-popup-backdrop {
2
- position: fixed;
3
- display: flex;
4
- width: 100%;
5
- height: 100%;
6
- left: 0;
7
- top: 0;
8
- align-items: center;
9
- justify-content: center;
10
- z-index: 10000;
11
- background:rgba(0,0,0,0.1);
12
- transition:0.3s;
13
- pointer-events: all;
14
- }
15
- .aio-popup.not-mounted{
16
- transition:0.3s;
17
- }
18
- .aio-popup-position-fullscreen > .aio-popup.not-mounted{
19
- transform:scale(0);
20
-
21
- }
22
- .aio-popup-position-popover > .aio-popup.not-mounted{
23
- opacity:0;
24
- }
25
- .aio-popup-position-top > .aio-popup.not-mounted{
26
- top:-500px;
27
- }
28
- .aio-popup-position-bottom > .aio-popup.not-mounted{
29
- bottom:-500px;
30
- opacity:0;
31
- }
32
- .aio-popup-position-right > .aio-popup.not-mounted{
33
- right:-500px;
34
- }
35
- .aio-popup-position-left > .aio-popup.not-mounted{
36
- left:-500px;
37
- }
38
- .aio-popup-position-center > .aio-popup.not-mounted{
39
- transform:translateY(500px);
40
- opacity:0;
41
- }
2
+ position: fixed;
3
+ display: flex;
4
+ width: 100%;
5
+ height: 100%;
6
+ left: 0;
7
+ top: 0;
8
+ align-items: center;
9
+ justify-content: center;
10
+ z-index: 10000;
11
+ background:rgba(0,0,0,0.1);
12
+ transition:0.3s;
13
+ pointer-events: all;
14
+ }
15
+ .aio-popup.not-mounted{
16
+ transition:0.3s;
17
+ }
18
+ .aio-popup-position-fullscreen > .aio-popup.not-mounted{
19
+ transform:scale(0);
42
20
 
43
- .aio-popup-position-fullscreen > .aio-popup{
44
- width:100%;
45
- height:100%;
46
- }
47
- .aio-popup-position-popover{
48
- opacity:1;
49
- }
50
- .aio-popup-position-top{
51
- align-items: flex-start;
52
- }
53
- .aio-popup-position-top > .aio-popup{
21
+ }
22
+ .aio-popup-position-popover > .aio-popup.not-mounted{
23
+ opacity:0;
24
+ }
25
+ .aio-popup-position-top > .aio-popup.not-mounted{
26
+ top:-500px;
27
+ }
28
+ .aio-popup-position-bottom > .aio-popup.not-mounted{
29
+ bottom:-500px;
30
+ opacity:0;
31
+ }
32
+ .aio-popup-position-right > .aio-popup.not-mounted{
33
+ right:-500px;
34
+ }
35
+ .aio-popup-position-left > .aio-popup.not-mounted{
36
+ left:-500px;
37
+ }
38
+ .aio-popup-position-center > .aio-popup.not-mounted{
39
+ transform:translateY(500px);
40
+ opacity:0;
41
+ }
42
+
43
+ .aio-popup-position-fullscreen > .aio-popup{
54
44
  width:100%;
55
- max-height:90vh;
56
- top:0;
57
- }
58
- .aio-popup-position-bottom{
59
- align-items: flex-end;
60
- }
61
- .aio-popup-position-bottom > .aio-popup{
62
- width:100%;
63
- max-height:90vh;
64
- bottom:0;
65
- opacity:1;
66
- }
67
- .aio-popup-backdrop.not-mounted{
68
- background:none !important;
69
- transition:0.3s;
70
- }
71
- .aio-popup-position-right{
72
- justify-content:right;
73
- }
74
- .aio-popup-position-right .aio-popup{
75
- height:100%;
76
- max-width:90vh;
77
- right:0;
78
- }
79
- .aio-popup-position-left{
80
- justify-content:left;
81
- }
82
- .aio-popup-position-left > .aio-popup{
83
45
  height:100%;
84
- max-width:90vh;
85
- left:0;
86
- }
87
- .aio-popup-position-center > .aio-popup{
88
- max-width: 100vw;
89
- width:100%;
90
- opacity:1;
91
- max-height:100vh;
92
- }
93
-
94
- .aio-popup {
95
- background:#fff;
96
- border-radius: 4px;
97
- font-size:14px;
98
- transition:0.3s;
99
- max-width:100vw;
100
- max-height:100vh;
101
- pointer-events: auto;
102
- }
103
-
104
- .aio-popup.rtl {
105
- direction: rtl;
106
- }
107
-
108
- .aio-popup-header {
109
- border-bottom:1px solid #e7e9ec;
110
- color: #323130;
111
- padding:6px 12px;
112
- font-size: 16px;
113
- font-weight: bold;
114
- min-height:48px;
115
- }
116
- .aio-popup-subtitle{
117
- font-size:85%;
118
- opacity:0.5;
119
- }
120
- .aio-popup-body {
121
- flex: 1;
122
- width: 100%;
123
- overflow-y:auto;
124
- }
125
- .aio-popup-footer{
126
- padding:12px;
127
- border-top:1px solid #f2f4f7;
128
- justify-content: flex-end;
129
- }
130
- .aio-popup-header-button{
131
- padding:0 6px;
132
- background:none;
133
- border:none;
134
- cursor:pointer;
135
- }
136
- .aio-popup-header-close-button{
137
- width:36px;
138
- }
139
- .aio-popup-footer-button {
140
- height: 30px;
141
- background: dodgerblue;
142
- border: none;
143
- padding: 0 24px;
144
- color: #fff;
145
- font-family: inherit;
146
- border-radius: 4px;
147
- }
148
- .aio-popup-footer-button:disabled{
149
- opacity:0.7;
150
- background:#ddd;
151
- cursor:not-allowed;
152
- }
153
-
154
- .aio-popup-blur {
155
- filter: blur(5px);
156
- }
157
-
158
-
159
-
160
-
161
-
162
- .aio-popup-alert-container {
163
- position: fixed;
164
- z-index: 1000000000000000000000000000000;
165
- width: 100%;
166
- height: 100%;
167
- background: rgba(0, 0, 0, 0.2);
168
- left: 0;
169
- top: 0;
170
- display: flex;
171
- align-items: center;
172
- justify-content: center;
173
- font-family: inherit;
174
- }
175
-
176
- .aio-popup-alert {
177
- position: relative;
178
- background: #fff;
179
- width: 90%;
180
- max-width: 360px;
181
- border-radius: 4px;
182
- box-shadow: 5px 8px 11px 0 rgb(0 0 0 / 17%);
183
- display:flex;
184
- flex-direction: column;
185
- overflow:hidden;
186
- }
187
- .aio-popup-alert-error .aio-popup-alert-header svg{
188
- fill:red;
189
- }
190
- .aio-popup-alert-warning .aio-popup-alert-header svg{
191
- fill:orange;
192
- }
193
- .aio-popup-alert-info .aio-popup-alert-header svg{
194
- fill:dodgerblue;
195
- }
196
- .aio-popup-alert-success .aio-popup-alert-header svg{
197
- fill:green;
198
- }
199
-
200
- .aio-popup-alert-header {
201
- display: flex;
202
- padding: 12px;
203
- box-sizing: border-box;
204
- align-items: center;
205
- justify-content: center;
206
- }
207
-
208
- .aio-popup-alert-body {
209
- padding: 0 12px;
210
- max-height:400px;
211
- overflow-y:auto;
212
- }
213
-
214
- .aio-popup-alert-text {
215
- display: flex;
216
- align-items: center;
217
- justify-content: center;
218
- font-size: 14px;
219
- font-weight: bold;
220
- margin-bottom: 12px;
221
- }
222
-
223
- .aio-popup-alert-subtext {
224
- font-size: 12px;
225
-
226
- }
227
-
228
- .aio-popup-alert-footer {
229
- height: 48px;
230
- display: flex;
231
- align-items: center;
232
- box-sizing: border-box;
233
- padding: 0 12px;
234
- }
235
-
236
- .aio-popup-time {
237
- position: absolute;
238
- height: 3px;
239
- width: calc(100% - 24px);
240
- left: 12px;
241
- bottom:0;
242
- }
243
-
244
- .aio-popup-time-bar {
245
- position: absolute;
246
- background: red;
247
- height: 100%;
248
- left: 0;
249
- }
250
- .aio-popup-alert-error .aio-popup-time-bar{
251
- background:red;
252
- }
253
- .aio-popup-alert-warning .aio-popup-time-bar{
254
- background:orange;
255
- }
256
- .aio-popup-alert-info .aio-popup-time-bar{
257
- background:dodgerblue;
258
- }
259
- .aio-popup-alert-success .aio-popup-time-bar{
260
- background:green;
261
- }
262
- .aio-popup-alert-footer button {
263
- border: none;
264
- font-family: inherit;
265
- background: dodgerblue;
266
- color: #fff;
267
- font-size: 14px;
268
- box-sizing: border-box;
269
- padding: 3px 12px;
270
- border-radius: 3px;
271
- }
272
-
273
- .aio-popup-snakebar-item-container{
274
- font-size:12px;
275
- height: fit-content;
276
- color: #fff;
277
- width: 100%;
278
- left: 0;
279
- position: fixed;
280
- transition: 0.2s;
281
- padding:0 24px;
282
- display:flex;
283
- align-items: center;
284
- box-sizing: border-box;
285
- justify-content: center;
286
- z-index:1000000;
287
- }
288
- .aio-popup-snakebar-item{
289
- background: rgb(24 28 41 / 95%);
290
- padding:12px;
291
- right:100%;
292
- position: relative;
293
- width:100%;
294
- height: fit-content;
295
- box-sizing: border-box;
296
- display: flex;
297
- align-items: center;
298
- transition: 0.2s;
299
- overflow:hidden;
300
- }
301
- .aio-popup-snakebar-item-container.mounted .aio-popup-snakebar-item{
302
- transition:0.5s;
303
- right:0;
304
- }
305
- .aio-popup-snakebar-item-text{
306
- flex:1;
307
- }
308
- .aio-popup-snakebar-item-subtext{
309
- font-size:85%;
310
- opacity:0.67;
311
- }
312
- .aio-popup-snakebar-item-text svg{
313
- flex:1;
314
- }
315
- .aio-popup-snakebar-item-remove{
316
- display:flex;
317
- align-items:center;
318
- justify-content: center;
319
- border-radius: 100%;
320
- }
321
- .aio-popup-snakebar-item-icon{
322
- display: flex;
323
- align-items: center;
324
- justify-content: center;
325
- margin-inline-end:6px;
326
- border-radius:100%;
327
- padding:3px;
328
- }
329
- .aio-popup-snakebar-item-success .aio-popup-snakebar-item-icon{
330
- color:#5ba427;
331
- }
332
- .aio-popup-snakebar-item-error .aio-popup-snakebar-item-icon{
333
- color:#e83232;
334
- }
335
- .aio-popup-snakebar-item-warning .aio-popup-snakebar-item-icon{
336
- color:#ffb300;
337
- }
338
- .aio-popup-snakebar-item-info .aio-popup-snakebar-item-icon{
339
- color:#00bcff;
340
- }
341
-
342
- .aio-popup-snakebar-item-container .aio-popup-snakebar-bar{
343
- position:absolute;
344
- left:0;
345
- bottom:2px;
346
- width:0%;
347
- height:3px;
348
- }
349
- .aio-popup-snakebar-item-container.mounted .aio-popup-snakebar-bar{
350
- width:100%;
351
- }
352
- /* .aio-popup-snakebar-container.mounted .aio-popup-snakebar-bar{
353
- width:50%;
354
- } */
355
-
356
- .aio-popup-snakebar-item-success .aio-popup-snakebar-bar{
357
- background:#5ba427;
358
- }
359
- .aio-popup-snakebar-item-error .aio-popup-snakebar-bar{
360
- background:#e83232;
361
- }
362
- .aio-popup-snakebar-item-warning .aio-popup-snakebar-bar{
363
- background:#ffb300;
364
- }
365
- .aio-popup-snakebar-item-info .aio-popup-snakebar-bar{
366
- background:#00bcff;
367
- }
368
- .aio-popup-snakebar-item-action{
369
- color:dodgerblue;
370
- border:none;
371
- background:none;
372
- }
373
-
374
-
46
+ }
47
+ .aio-popup-position-popover{
48
+ opacity:1;
49
+ }
50
+ .aio-popup-position-top{
51
+ align-items: flex-start;
52
+ }
53
+ .aio-popup-position-top > .aio-popup{
54
+ width:100%;
55
+ max-height:90vh;
56
+ top:0;
57
+ }
58
+ .aio-popup-position-bottom{
59
+ align-items: flex-end;
60
+ }
61
+ .aio-popup-position-bottom > .aio-popup{
62
+ width:100%;
63
+ max-height:90vh;
64
+ bottom:0;
65
+ opacity:1;
66
+ }
67
+ .aio-popup-backdrop.not-mounted{
68
+ background:none !important;
69
+ transition:0.3s;
70
+ }
71
+ .aio-popup-position-right{
72
+ justify-content:right;
73
+ }
74
+ .aio-popup-position-right .aio-popup{
75
+ height:100%;
76
+ max-width:90vh;
77
+ right:0;
78
+ }
79
+ .aio-popup-position-left{
80
+ justify-content:left;
81
+ }
82
+ .aio-popup-position-left > .aio-popup{
83
+ height:100%;
84
+ max-width:90vh;
85
+ left:0;
86
+ }
87
+ .aio-popup-position-center > .aio-popup{
88
+ max-width: 100vw;
89
+ width:fit-content;
90
+ opacity:1;
91
+ max-height:100vh;
92
+ }
93
+
94
+ .aio-popup {
95
+ background:#fff;
96
+ border-radius: 4px;
97
+ font-size:14px;
98
+ transition:0.3s;
99
+ max-width:100vw;
100
+ max-height:100vh;
101
+ pointer-events: auto;
102
+ }
103
+
104
+ .aio-popup.rtl {
105
+ direction: rtl;
106
+ }
107
+
108
+ .aio-popup-header {
109
+ border-bottom:1px solid #e7e9ec;
110
+ color: #323130;
111
+ padding:6px 12px;
112
+ font-size: 16px;
113
+ font-weight: bold;
114
+ min-height:48px;
115
+ }
116
+ .aio-popup-subtitle{
117
+ font-size:85%;
118
+ opacity:0.5;
119
+ }
120
+ .aio-popup-body {
121
+ flex: 1;
122
+ width: 100%;
123
+ overflow-y:auto;
124
+ }
125
+ .aio-popup-footer{
126
+ padding:12px;
127
+ border-top:1px solid #f2f4f7;
128
+ justify-content: flex-end;
129
+ }
130
+ .aio-popup-header-button{
131
+ padding:0 6px;
132
+ background:none;
133
+ border:none;
134
+ cursor:pointer;
135
+ }
136
+ .aio-popup-header-close-button{
137
+ width:36px;
138
+ }
139
+ .aio-popup-footer-button {
140
+ height: 30px;
141
+ background: dodgerblue;
142
+ border: none;
143
+ padding: 0 24px;
144
+ color: #fff;
145
+ font-family: inherit;
146
+ border-radius: 4px;
147
+ }
148
+ .aio-popup-footer-button:disabled{
149
+ opacity:0.7;
150
+ background:#ddd;
151
+ cursor:not-allowed;
152
+ }
153
+
154
+ .aio-popup-blur {
155
+ filter: blur(5px);
156
+ }
157
+
158
+
159
+
160
+
161
+
162
+ .aio-popup-alert-container {
163
+ position: fixed;
164
+ z-index: 1000000000000000000000000000000;
165
+ width: 100%;
166
+ height: 100%;
167
+ background: rgba(0, 0, 0, 0.2);
168
+ left: 0;
169
+ top: 0;
170
+ display: flex;
171
+ align-items: center;
172
+ justify-content: center;
173
+ font-family: inherit;
174
+ }
175
+
176
+ .aio-popup-alert {
177
+ position: relative;
178
+ background: #fff;
179
+ width: 90%;
180
+ max-width: 360px;
181
+ border-radius: 4px;
182
+ box-shadow: 5px 8px 11px 0 rgb(0 0 0 / 17%);
183
+ display:flex;
184
+ flex-direction: column;
185
+ overflow:hidden;
186
+ }
187
+ .aio-popup-alert-error .aio-popup-alert-header svg{
188
+ fill:red;
189
+ }
190
+ .aio-popup-alert-warning .aio-popup-alert-header svg{
191
+ fill:orange;
192
+ }
193
+ .aio-popup-alert-info .aio-popup-alert-header svg{
194
+ fill:dodgerblue;
195
+ }
196
+ .aio-popup-alert-success .aio-popup-alert-header svg{
197
+ fill:green;
198
+ }
199
+
200
+ .aio-popup-alert-header {
201
+ display: flex;
202
+ padding: 12px;
203
+ box-sizing: border-box;
204
+ align-items: center;
205
+ justify-content: center;
206
+ }
207
+
208
+ .aio-popup-alert-body {
209
+ padding: 0 12px;
210
+ max-height:400px;
211
+ overflow-y:auto;
212
+ }
213
+
214
+ .aio-popup-alert-text {
215
+ display: flex;
216
+ align-items: center;
217
+ justify-content: center;
218
+ font-size: 14px;
219
+ font-weight: bold;
220
+ margin-bottom: 12px;
221
+ }
222
+
223
+ .aio-popup-alert-subtext {
224
+ font-size: 12px;
225
+
226
+ }
227
+
228
+ .aio-popup-alert-footer {
229
+ height: 48px;
230
+ display: flex;
231
+ align-items: center;
232
+ box-sizing: border-box;
233
+ padding: 0 12px;
234
+ }
235
+
236
+ .aio-popup-time {
237
+ position: absolute;
238
+ height: 3px;
239
+ width: calc(100% - 24px);
240
+ left: 12px;
241
+ bottom:0;
242
+ }
243
+
244
+ .aio-popup-time-bar {
245
+ position: absolute;
246
+ background: red;
247
+ height: 100%;
248
+ left: 0;
249
+ }
250
+ .aio-popup-alert-error .aio-popup-time-bar{
251
+ background:red;
252
+ }
253
+ .aio-popup-alert-warning .aio-popup-time-bar{
254
+ background:orange;
255
+ }
256
+ .aio-popup-alert-info .aio-popup-time-bar{
257
+ background:dodgerblue;
258
+ }
259
+ .aio-popup-alert-success .aio-popup-time-bar{
260
+ background:green;
261
+ }
262
+ .aio-popup-alert-footer button {
263
+ border: none;
264
+ font-family: inherit;
265
+ background: dodgerblue;
266
+ color: #fff;
267
+ font-size: 14px;
268
+ box-sizing: border-box;
269
+ padding: 3px 12px;
270
+ border-radius: 3px;
271
+ }
272
+
273
+ .aio-popup-snakebar-item-container{
274
+ font-size:12px;
275
+ height: fit-content;
276
+ color: #fff;
277
+ width: 100%;
278
+ left: 0;
279
+ position: fixed;
280
+ transition: 0.2s;
281
+ padding:0 24px;
282
+ display:flex;
283
+ align-items: center;
284
+ box-sizing: border-box;
285
+ justify-content: center;
286
+ z-index:1000000;
287
+ }
288
+ .aio-popup-snakebar-item{
289
+ background: rgb(24 28 41 / 95%);
290
+ padding:12px;
291
+ right:100%;
292
+ position: relative;
293
+ width:100%;
294
+ height: fit-content;
295
+ box-sizing: border-box;
296
+ display: flex;
297
+ align-items: center;
298
+ transition: 0.2s;
299
+ overflow:hidden;
300
+ }
301
+ .aio-popup-snakebar-item-container.mounted .aio-popup-snakebar-item{
302
+ transition:0.5s;
303
+ right:0;
304
+ }
305
+ .aio-popup-snakebar-item-text{
306
+ flex:1;
307
+ }
308
+ .aio-popup-snakebar-item-subtext{
309
+ font-size:85%;
310
+ opacity:0.67;
311
+ }
312
+ .aio-popup-snakebar-item-text svg{
313
+ flex:1;
314
+ }
315
+ .aio-popup-snakebar-item-remove{
316
+ display:flex;
317
+ align-items:center;
318
+ justify-content: center;
319
+ border-radius: 100%;
320
+ }
321
+ .aio-popup-snakebar-item-icon{
322
+ display: flex;
323
+ align-items: center;
324
+ justify-content: center;
325
+ margin-inline-end:6px;
326
+ border-radius:100%;
327
+ padding:3px;
328
+ }
329
+ .aio-popup-snakebar-item-success .aio-popup-snakebar-item-icon{
330
+ color:#5ba427;
331
+ }
332
+ .aio-popup-snakebar-item-error .aio-popup-snakebar-item-icon{
333
+ color:#e83232;
334
+ }
335
+ .aio-popup-snakebar-item-warning .aio-popup-snakebar-item-icon{
336
+ color:#ffb300;
337
+ }
338
+ .aio-popup-snakebar-item-info .aio-popup-snakebar-item-icon{
339
+ color:#00bcff;
340
+ }
341
+
342
+ .aio-popup-snakebar-item-container .aio-popup-snakebar-bar{
343
+ position:absolute;
344
+ left:0;
345
+ bottom:2px;
346
+ width:0%;
347
+ height:3px;
348
+ }
349
+ .aio-popup-snakebar-item-container.mounted .aio-popup-snakebar-bar{
350
+ width:100%;
351
+ }
352
+ /* .aio-popup-snakebar-container.mounted .aio-popup-snakebar-bar{
353
+ width:50%;
354
+ } */
355
+
356
+ .aio-popup-snakebar-item-success .aio-popup-snakebar-bar{
357
+ background:#5ba427;
358
+ }
359
+ .aio-popup-snakebar-item-error .aio-popup-snakebar-bar{
360
+ background:#e83232;
361
+ }
362
+ .aio-popup-snakebar-item-warning .aio-popup-snakebar-bar{
363
+ background:#ffb300;
364
+ }
365
+ .aio-popup-snakebar-item-info .aio-popup-snakebar-bar{
366
+ background:#00bcff;
367
+ }
368
+ .aio-popup-snakebar-item-action{
369
+ color:dodgerblue;
370
+ border:none;
371
+ background:none;
372
+ }
373
+
package/index.js CHANGED
@@ -1,4 +1,3 @@
1
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
1
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
3
2
  function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
4
3
  function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
@@ -9,28 +8,33 @@ import { mdiClose, mdiChevronRight, mdiChevronLeft } from '@mdi/js';
9
8
  import RVD from 'react-virtual-dom';
10
9
  import $ from 'jquery';
11
10
  import './index.css';
11
+ import { jsx as _jsx } from "react/jsx-runtime";
12
+ import { Fragment as _Fragment } from "react/jsx-runtime";
13
+ import { jsxs as _jsxs } from "react/jsx-runtime";
12
14
  export default class AIOPopup {
13
15
  constructor(_obj = {}) {
14
16
  _defineProperty(this, "render", () => {
15
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popups, {
16
- rtl: this.rtl,
17
- getActions: ({
18
- addModal,
19
- removeModal,
20
- getModals
21
- }) => {
22
- this._addModal = addModal;
23
- this._removeModal = removeModal;
24
- this._getModals = getModals;
25
- }
26
- }), /*#__PURE__*/React.createElement(AIOSnackeBar, {
27
- rtl: this.rtl,
28
- getActions: ({
29
- add
30
- }) => {
31
- this._addSnakebar = add;
32
- }
33
- }));
17
+ return /*#__PURE__*/_jsxs(_Fragment, {
18
+ children: [/*#__PURE__*/_jsx(Popups, {
19
+ rtl: this.rtl,
20
+ getActions: ({
21
+ addModal,
22
+ removeModal,
23
+ getModals
24
+ }) => {
25
+ this._addModal = addModal;
26
+ this._removeModal = removeModal;
27
+ this._getModals = getModals;
28
+ }
29
+ }), /*#__PURE__*/_jsx(AIOSnackeBar, {
30
+ rtl: this.rtl,
31
+ getActions: ({
32
+ add
33
+ }) => {
34
+ this._addSnakebar = add;
35
+ }
36
+ })]
37
+ });
34
38
  });
35
39
  _defineProperty(this, "getModals", () => this._getModals());
36
40
  _defineProperty(this, "addModal", (obj = {}, animate = true) => {
@@ -145,21 +149,22 @@ class Popups extends Component {
145
149
  if (!modals.length) {
146
150
  return;
147
151
  }
152
+ if (arg === 'last') {
153
+ arg = modals[modals.length - 1].id;
154
+ }
148
155
  this.mount(arg, false);
149
156
  setTimeout(() => {
150
- let modal = arg === 'last' ? modals[modals.length - 1] : modals.find(o => o.id === arg);
157
+ let {
158
+ modals
159
+ } = this.state;
160
+ console.log(modals);
161
+ let modal = modals.find(o => o.id === arg);
151
162
  if (modal.onClose) {
152
163
  modal.onClose();
153
164
  }
154
- if (arg === 'last') {
155
- this.change({
156
- modals: modals.slice(0, modals.length - 1)
157
- });
158
- } else {
159
- this.change({
160
- modals: modals.filter(o => o.id !== arg)
161
- });
162
- }
165
+ this.change({
166
+ modals: modals.filter(o => o.id !== arg)
167
+ });
163
168
  }, animate ? 300 : 0);
164
169
  }
165
170
  }
@@ -227,13 +232,15 @@ class Popups extends Component {
227
232
  //use for remove lastModal by esc keyboard
228
233
  onMount: () => this.mount(id, true)
229
234
  };
230
- return /*#__PURE__*/React.createElement(Popup, _extends({
231
- key: id
232
- }, props));
235
+ return /*#__PURE__*/_jsx(Popup, {
236
+ ...props
237
+ }, id);
233
238
  });
234
239
  }
235
240
  render() {
236
- return /*#__PURE__*/React.createElement(React.Fragment, null, this.getModals());
241
+ return /*#__PURE__*/_jsx(_Fragment, {
242
+ children: this.getModals()
243
+ });
237
244
  }
238
245
  }
239
246
  class Popup extends Component {
@@ -316,7 +323,7 @@ class Popup extends Component {
316
323
  return false;
317
324
  }
318
325
  return {
319
- html: /*#__PURE__*/React.createElement(ModalHeader, {
326
+ html: /*#__PURE__*/_jsx(ModalHeader, {
320
327
  rtl: rtl,
321
328
  header: header,
322
329
  handleClose: () => this.onClose()
@@ -329,7 +336,7 @@ class Popup extends Component {
329
336
  } = this.props;
330
337
  return {
331
338
  flex: 1,
332
- html: /*#__PURE__*/React.createElement(ModalBody, {
339
+ html: /*#__PURE__*/_jsx(ModalBody, {
333
340
  body: body,
334
341
  handleClose: this.onClose.bind(this),
335
342
  updatePopoverStyle: () => this.updatePopoverStyle()
@@ -354,7 +361,9 @@ class Popup extends Component {
354
361
  handleClose
355
362
  };
356
363
  return {
357
- html: /*#__PURE__*/React.createElement(ModalFooter, props)
364
+ html: /*#__PURE__*/_jsx(ModalFooter, {
365
+ ...props
366
+ })
358
367
  };
359
368
  }
360
369
  getBackDropClassName() {
@@ -468,25 +477,27 @@ class Popup extends Component {
468
477
  };
469
478
  let className = 'aio-popup' + (rtl ? ' rtl' : ' ltr') + (!mounted ? ' not-mounted' : '') + (attrs.className ? ' ' + attrs.className : '');
470
479
  let ev = "ontouchstart" in document.documentElement ? 'onTouchStart' : 'onMouseDown';
471
- return /*#__PURE__*/React.createElement("div", _extends({}, backdropProps, {
480
+ return /*#__PURE__*/_jsx("div", {
481
+ ...backdropProps,
472
482
  ref: this.backdropDom,
473
483
  onKeyDown: this.keyDown.bind(this),
474
- tabIndex: 0
475
- }), /*#__PURE__*/React.createElement(RVD, {
476
- layout: {
477
- attrs: {
478
- ...attrs,
479
- ref: this.dom,
480
- style: undefined,
481
- className: undefined,
482
- 'data-uniq-id': this.dui,
483
- [ev]: this.mouseDown.bind(this)
484
- },
485
- className,
486
- style,
487
- column: [this.header_layout(), this.body_layout(), this.footer_layout()]
488
- }
489
- }));
484
+ tabIndex: 0,
485
+ children: /*#__PURE__*/_jsx(RVD, {
486
+ layout: {
487
+ attrs: {
488
+ ...attrs,
489
+ ref: this.dom,
490
+ style: undefined,
491
+ className: undefined,
492
+ 'data-uniq-id': this.dui,
493
+ [ev]: this.mouseDown.bind(this)
494
+ },
495
+ className,
496
+ style,
497
+ column: [this.header_layout(), this.body_layout(), this.footer_layout()]
498
+ }
499
+ })
500
+ });
490
501
  }
491
502
  }
492
503
  function ModalHeader({
@@ -529,7 +540,7 @@ function ModalHeader({
529
540
  };
530
541
  }
531
542
  return {
532
- html: /*#__PURE__*/React.createElement(Icon, {
543
+ html: /*#__PURE__*/_jsx(Icon, {
533
544
  path: path,
534
545
  size: 1
535
546
  }),
@@ -580,7 +591,10 @@ function ModalHeader({
580
591
  close: handleClose
581
592
  });
582
593
  return {
583
- html: /*#__PURE__*/React.createElement("button", attrs, text),
594
+ html: /*#__PURE__*/_jsx("button", {
595
+ ...attrs,
596
+ children: text
597
+ }),
584
598
  align: 'vh'
585
599
  };
586
600
  })
@@ -591,7 +605,7 @@ function ModalHeader({
591
605
  return false;
592
606
  }
593
607
  return {
594
- html: /*#__PURE__*/React.createElement(Icon, {
608
+ html: /*#__PURE__*/_jsx(Icon, {
595
609
  path: mdiClose,
596
610
  size: 0.8
597
611
  }),
@@ -602,7 +616,7 @@ function ModalHeader({
602
616
  }
603
617
  let className = 'aio-popup-header' + (attrs.className ? ' ' + attrs.className : '');
604
618
  let style = attrs.style;
605
- return /*#__PURE__*/React.createElement(RVD, {
619
+ return /*#__PURE__*/_jsx(RVD, {
606
620
  layout: {
607
621
  attrs,
608
622
  className,
@@ -627,9 +641,11 @@ function ModalBody(props) {
627
641
  useEffect(() => {
628
642
  updatePopoverStyle();
629
643
  }, [content]);
630
- return /*#__PURE__*/React.createElement("div", _extends({}, attrs, {
631
- className: 'aio-popup-body' + (attrs.className ? ' ' + attrs.className : '')
632
- }), typeof render === 'function' && content);
644
+ return /*#__PURE__*/_jsx("div", {
645
+ ...attrs,
646
+ className: 'aio-popup-body' + (attrs.className ? ' ' + attrs.className : ''),
647
+ children: typeof render === 'function' && content
648
+ });
633
649
  }
634
650
  function ModalFooter({
635
651
  type,
@@ -665,7 +681,10 @@ function ModalFooter({
665
681
  close: handleClose
666
682
  });
667
683
  return {
668
- html: /*#__PURE__*/React.createElement("button", attrs, text),
684
+ html: /*#__PURE__*/_jsx("button", {
685
+ ...attrs,
686
+ children: text
687
+ }),
669
688
  align: 'vh'
670
689
  };
671
690
  })
@@ -673,7 +692,7 @@ function ModalFooter({
673
692
  }
674
693
  let className = 'aio-popup-footer' + (attrs.className ? ' ' + attrs.className : '');
675
694
  let style = attrs.style;
676
- return /*#__PURE__*/React.createElement(RVD, {
695
+ return /*#__PURE__*/_jsx(RVD, {
677
696
  layout: {
678
697
  className,
679
698
  style,
@@ -793,15 +812,16 @@ class AIOSnackeBar extends Component {
793
812
  let {
794
813
  rtl = false
795
814
  } = this.props;
796
- return /*#__PURE__*/React.createElement(React.Fragment, null, items.map((item, i) => {
797
- return /*#__PURE__*/React.createElement(SnackebarItem, _extends({
798
- key: item.id,
799
- rtl: rtl
800
- }, item, {
801
- index: i,
802
- onRemove: id => this.remove(id)
803
- }));
804
- }));
815
+ return /*#__PURE__*/_jsx(_Fragment, {
816
+ children: items.map((item, i) => {
817
+ return /*#__PURE__*/_jsx(SnackebarItem, {
818
+ rtl: rtl,
819
+ ...item,
820
+ index: i,
821
+ onRemove: id => this.remove(id)
822
+ }, item.id);
823
+ })
824
+ });
805
825
  }
806
826
  }
807
827
  class SnackebarItem extends Component {
@@ -833,34 +853,36 @@ class SnackebarItem extends Component {
833
853
  setTimeout(() => onRemove(id), 200);
834
854
  }
835
855
  info_svg() {
836
- return /*#__PURE__*/React.createElement("svg", {
856
+ return /*#__PURE__*/_jsx("svg", {
837
857
  viewBox: "0 0 24 24",
838
858
  role: "presentation",
839
859
  style: {
840
860
  width: '1.2rem',
841
861
  height: '1.2rem'
842
- }
843
- }, /*#__PURE__*/React.createElement("path", {
844
- d: "M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z",
845
- style: {
846
- fill: 'currentcolor'
847
- }
848
- }));
862
+ },
863
+ children: /*#__PURE__*/_jsx("path", {
864
+ d: "M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z",
865
+ style: {
866
+ fill: 'currentcolor'
867
+ }
868
+ })
869
+ });
849
870
  }
850
871
  success_svg() {
851
- return /*#__PURE__*/React.createElement("svg", {
872
+ return /*#__PURE__*/_jsx("svg", {
852
873
  viewBox: "0 0 24 24",
853
874
  role: "presentation",
854
875
  style: {
855
876
  width: '1.2rem',
856
877
  height: '1.2rem'
857
- }
858
- }, /*#__PURE__*/React.createElement("path", {
859
- d: "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z",
860
- style: {
861
- fill: 'currentcolor'
862
- }
863
- }));
878
+ },
879
+ children: /*#__PURE__*/_jsx("path", {
880
+ d: "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z",
881
+ style: {
882
+ fill: 'currentcolor'
883
+ }
884
+ })
885
+ });
864
886
  }
865
887
  getSvg(type) {
866
888
  return type === 'error' || type === 'warning' || type === 'info' ? this.info_svg() : this.success_svg();
@@ -887,36 +909,44 @@ class SnackebarItem extends Component {
887
909
  rtl
888
910
  } = this.props;
889
911
  let bottom = this.getBottom(index);
890
- return /*#__PURE__*/React.createElement("div", {
912
+ return /*#__PURE__*/_jsx("div", {
891
913
  onClick: () => this.remove(),
892
914
  className: 'aio-popup-snakebar-item-container' + (mounted ? ' mounted' : ''),
893
915
  style: {
894
916
  bottom,
895
917
  direction: rtl ? 'rtl' : undefined
896
- }
897
- }, /*#__PURE__*/React.createElement("div", {
898
- className: `aio-popup-snakebar-item aio-popup-snakebar-item-${type}`
899
- }, /*#__PURE__*/React.createElement("div", {
900
- className: `aio-popup-snakebar-item-icon`
901
- }, this.getSvg(type)), /*#__PURE__*/React.createElement("div", {
902
- className: "aio-popup-snakebar-item-text"
903
- }, /*#__PURE__*/React.createElement("div", null, text), !!subtext && /*#__PURE__*/React.createElement("div", {
904
- className: "aio-popup-snakebar-item-subtext"
905
- }, subtext)), !!action.text && /*#__PURE__*/React.createElement("button", {
906
- className: "aio-popup-snakebar-item-action",
907
- onClick: e => {
908
- e.stopPropagation();
909
- action.onClick();
910
- this.remove();
911
- }
912
- }, action.text), /*#__PURE__*/React.createElement("div", {
913
- className: `aio-popup-snakebar-bar`,
914
- style: {
915
- transition: `${time}s linear`,
916
- right: rtl ? 0 : 'unset',
917
- left: rtl ? 'unset' : 0
918
- }
919
- })));
918
+ },
919
+ children: /*#__PURE__*/_jsxs("div", {
920
+ className: `aio-popup-snakebar-item aio-popup-snakebar-item-${type}`,
921
+ children: [/*#__PURE__*/_jsx("div", {
922
+ className: `aio-popup-snakebar-item-icon`,
923
+ children: this.getSvg(type)
924
+ }), /*#__PURE__*/_jsxs("div", {
925
+ className: "aio-popup-snakebar-item-text",
926
+ children: [/*#__PURE__*/_jsx("div", {
927
+ children: text
928
+ }), !!subtext && /*#__PURE__*/_jsx("div", {
929
+ className: "aio-popup-snakebar-item-subtext",
930
+ children: subtext
931
+ })]
932
+ }), !!action.text && /*#__PURE__*/_jsx("button", {
933
+ className: "aio-popup-snakebar-item-action",
934
+ onClick: e => {
935
+ e.stopPropagation();
936
+ action.onClick();
937
+ this.remove();
938
+ },
939
+ children: action.text
940
+ }), /*#__PURE__*/_jsx("div", {
941
+ className: `aio-popup-snakebar-bar`,
942
+ style: {
943
+ transition: `${time}s linear`,
944
+ right: rtl ? 0 : 'unset',
945
+ left: rtl ? 'unset' : 0
946
+ }
947
+ })]
948
+ })
949
+ });
920
950
  }
921
951
  }
922
952
  //id,onClose,backdrop,getTarget,position,fixStyle,attrs,fitHorizontal,pageSelector,rtl,body
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "aio-popup",
3
- "version": "2.0.1",
3
+ "version": "3.0.0",
4
4
  "description": "handle all types of popup and modals in react",
5
5
  "main": "index.js",
6
6
  "scripts": {