aio-popup 3.0.1 → 3.0.3

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 +1 -1
  2. package/index.js +8 -1076
  3. package/package.json +1 -1
package/index.css CHANGED
@@ -71,7 +71,7 @@
71
71
  .aio-popup-position-right{
72
72
  justify-content:right;
73
73
  }
74
- .aio-popup-position-right .aio-popup{
74
+ .aio-popup-position-right > .aio-popup{
75
75
  height:100%;
76
76
  max-width:90vh;
77
77
  right:0;
package/index.js CHANGED
@@ -1,1083 +1,15 @@
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; }
2
- function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
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); }
4
- import React, { Component, createRef, useEffect } from 'react';
5
- import * as ReactDOMServer from 'react-dom/server';
6
- import { Icon } from '@mdi/react';
7
- import { mdiClose, mdiChevronRight, mdiChevronLeft } from '@mdi/js';
8
- import RVD from 'react-virtual-dom';
9
- import $ from 'jquery';
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";
14
- export default class AIOPopup {
15
- constructor(_obj = {}) {
16
- _defineProperty(this, "render", () => {
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
- });
38
- });
39
- _defineProperty(this, "getModals", () => this._getModals());
40
- _defineProperty(this, "addModal", (obj = {}, animate = true) => {
41
- if (obj.id === undefined) {
42
- obj.id = 'popup' + Math.round(Math.random() * 1000000);
43
- }
44
- this._addModal(obj, animate);
45
- });
46
- _defineProperty(this, "removeModal", (arg, animate = true) => this._removeModal(arg, animate));
47
- _defineProperty(this, "addAlert", (obj = {}) => {
48
- let {
49
- icon,
50
- type = '',
51
- text = '',
52
- subtext = '',
53
- time = 10,
54
- className,
55
- closeText = 'بستن'
56
- } = obj;
57
- Alert({
58
- icon,
59
- type,
60
- text,
61
- subtext,
62
- time,
63
- className,
64
- closeText
65
- });
66
- });
67
- _defineProperty(this, "addSnakebar", (obj = {}) => {
68
- let {
69
- text,
70
- index,
71
- type,
72
- subtext,
73
- action = {},
74
- time = 6,
75
- rtl
76
- } = obj;
77
- this._addSnakebar({
78
- text,
79
- index,
80
- type,
81
- subtext,
82
- action,
83
- time,
84
- rtl
85
- });
86
- });
87
- this.rtl = _obj.rtl;
88
- }
89
- }
90
- class Popups extends Component {
91
- constructor(props) {
92
- super(props);
93
- this.dom = /*#__PURE__*/createRef();
94
- let {
95
- getActions = () => {}
96
- } = props;
97
- this.state = {
98
- modals: []
99
- };
100
- getActions({
101
- removeModal: this.removeModal.bind(this),
102
- addModal: this.addModal.bind(this),
103
- getModals: () => [...this.state.modals]
104
- });
105
- }
106
- change(obj) {
107
- let {
108
- onChange = () => {}
109
- } = this.props;
110
- for (let prop in obj) {
111
- this.state[prop] = obj[prop];
112
- }
113
- this.setState(obj, () => onChange({
114
- ...this.state
115
- }));
116
- }
117
- addModal(o, animate = true) {
118
- if (typeof o !== 'object') {
119
- console.error('aio-popup => addModal modal parameter to add is not an object');
120
- return;
121
- }
122
- if (o.id === undefined) {
123
- console.error('aio-popup => addModal missing modal id property');
124
- return;
125
- }
126
- let {
127
- modals
128
- } = this.state;
129
- let newModals = modals.filter(({
130
- id
131
- }) => id !== o.id);
132
- newModals.push({
133
- ...o,
134
- mounted: o.position === 'popover' ? false : !animate
135
- });
136
- this.change({
137
- modals: newModals
138
- });
139
- }
140
- async removeModal(arg = 'last', animate = true) {
141
- if (arg === 'all') {
142
- this.change({
143
- modals: []
144
- });
145
- } else {
146
- let {
147
- modals
148
- } = this.state;
149
- if (!modals.length) {
150
- return;
151
- }
152
- if (arg === 'last') {
153
- arg = modals[modals.length - 1].id;
154
- }
155
- this.mount(arg, false);
156
- setTimeout(() => {
157
- let {
158
- modals
159
- } = this.state;
160
- let modal = modals.find(o => o.id === arg);
161
- if (!modal) {
162
- return;
163
- }
164
- if (modal.onClose) {
165
- modal.onClose();
166
- }
167
- this.change({
168
- modals: modals.filter(o => o.id !== arg)
169
- });
170
- }, animate ? 300 : 0);
171
- }
172
- }
173
- mount(id = 'last', state) {
174
- try {
175
- let {
176
- modals
177
- } = this.state;
178
- if (id === 'last') {
179
- id = modals[modals.length - 1].id;
180
- }
181
- let newModals = modals.map(o => o.id === id ? {
182
- ...o,
183
- mounted: state
184
- } : o);
185
- this.change({
186
- modals: newModals
187
- });
188
- } catch {
189
- return;
190
- }
191
- }
192
- getModals() {
193
- let {
194
- modals
195
- } = this.state;
196
- if (!modals.length) {
197
- return null;
198
- }
199
- return modals.map((modal, i) => {
200
- let {
201
- popover,
202
- position,
203
- text,
204
- onSubmit,
205
- rtl = this.props.rtl,
206
- attrs = {},
207
- onClose,
208
- backdrop,
209
- header,
210
- footer,
211
- closeType,
212
- body,
213
- id,
214
- mounted
215
- } = modal;
216
- let props = {
217
- id,
218
- backdrop,
219
- footer,
220
- text,
221
- onSubmit,
222
- header,
223
- popover,
224
- position,
225
- rtl,
226
- attrs,
227
- closeType,
228
- body,
229
- index: i,
230
- isLast: i === modals.length - 1,
231
- mounted,
232
- onClose: () => this.removeModal(id),
233
- removeModal: this.removeModal.bind(this),
234
- //use for remove lastModal by esc keyboard
235
- onMount: () => this.mount(id, true)
236
- };
237
- return /*#__PURE__*/_jsx(Popup, {
238
- ...props
239
- }, id);
240
- });
241
- }
242
- render() {
243
- return /*#__PURE__*/_jsx(_Fragment, {
244
- children: this.getModals()
245
- });
246
- }
247
- }
248
- class Popup extends Component {
249
- constructor(props) {
250
- super(props);
251
- this.dom = /*#__PURE__*/createRef();
252
- this.backdropDom = /*#__PURE__*/createRef();
253
- this.state = {
254
- popoverStyle: undefined
255
- };
256
- }
257
- async onClose() {
258
- let {
259
- onClose
260
- } = this.props;
261
- onClose();
262
- }
263
- componentWillUnmount() {
264
- $(window).unbind('click', this.handleBackClick);
265
- }
266
- updatePopoverStyle() {
267
- let {
268
- position
269
- } = this.props;
270
- if (position === 'popover') {
271
- let popoverStyle = this.getPopoverStyle();
272
- if (JSON.stringify(popoverStyle) !== JSON.stringify(this.state.popoverStyle)) {
273
- this.setState({
274
- popoverStyle
275
- });
276
- }
277
- }
278
- }
279
- componentDidMount() {
280
- let {
281
- popover = {},
282
- position
283
- } = this.props;
284
- setTimeout(() => {
285
- let {
286
- mounted,
287
- onMount
288
- } = this.props;
289
- this.setState({
290
- popoverStyle: position === 'popover' ? this.getPopoverStyle() : {}
291
- });
292
- if (!mounted) {
293
- onMount();
294
- }
295
- }, 0);
296
- if (popover.getTarget) {
297
- this.dui = 'a' + Math.round(Math.random() * 10000000);
298
- let target = popover.getTarget();
299
- target.attr('data-uniq-id', this.dui);
300
- }
301
- //$(this.backdropDom.current).focus();
302
- $(window).unbind('click', this.handleBackClick);
303
- $(window).bind('click', $.proxy(this.handleBackClick, this));
304
- }
305
- handleBackClick(e) {
306
- //در مود پاپاور اگر هر جایی غیر از اینپوت و پاپاور کلیک شد پاپاپ رو ببند
307
- if (!this.dui) {
308
- return;
309
- }
310
- let {
311
- position = 'fullscreen'
312
- } = this.props;
313
- let target = $(e.target);
314
- if (position !== 'popover' || target.attr('data-uniq-id') === this.dui || target.parents(`[data-uniq-id=${this.dui}]`).length) {
315
- return;
316
- }
317
- this.onClose();
318
- }
319
- header_layout() {
320
- let {
321
- rtl,
322
- header
323
- } = this.props;
324
- if (typeof header !== 'object') {
325
- return false;
326
- }
327
- return {
328
- html: /*#__PURE__*/_jsx(ModalHeader, {
329
- rtl: rtl,
330
- header: header,
331
- handleClose: () => this.onClose()
332
- })
333
- };
334
- }
335
- body_layout() {
336
- let {
337
- body = {}
338
- } = this.props;
339
- return {
340
- flex: 1,
341
- html: /*#__PURE__*/_jsx(ModalBody, {
342
- body: body,
343
- handleClose: this.onClose.bind(this),
344
- updatePopoverStyle: () => this.updatePopoverStyle()
345
- })
346
- };
347
- }
348
- footer_layout() {
349
- let {
350
- closeText,
351
- submitText,
352
- onSubmit,
353
- footer,
354
- type
355
- } = this.props;
356
- let handleClose = this.onClose.bind(this);
357
- let props = {
358
- closeText,
359
- submitText,
360
- onSubmit,
361
- footer,
362
- type,
363
- handleClose
364
- };
365
- return {
366
- html: /*#__PURE__*/_jsx(ModalFooter, {
367
- ...props
368
- })
369
- };
370
- }
371
- getBackDropClassName() {
372
- let {
373
- rtl,
374
- position = 'fullscreen',
375
- backdrop,
376
- mounted
377
- } = this.props;
378
- let className = 'aio-popup-backdrop';
379
- if (backdrop && backdrop.attrs && backdrop.attrs.className) {
380
- className += ' ' + backdrop.attrs.className;
381
- }
382
- className += ` aio-popup-position-${position}`;
383
- className += rtl ? ' rtl' : ' ltr';
384
- if (!mounted) {
385
- className += ' not-mounted';
386
- }
387
- return className;
388
- }
389
- backClick(e) {
390
- if (this.isDown) {
391
- return;
392
- }
393
- e.stopPropagation();
394
- let target = $(e.target);
395
- let {
396
- backdrop = {}
397
- } = this.props;
398
- if (backdrop.close === false) {
399
- return;
400
- }
401
- if (!target.hasClass('aio-popup-backdrop')) {
402
- return;
403
- }
404
- this.onClose();
405
- }
406
- getPopoverStyle() {
407
- let {
408
- popover = {},
409
- rtl,
410
- attrs = {}
411
- } = this.props;
412
- let {
413
- getTarget,
414
- pageSelector,
415
- fitHorizontal,
416
- fixStyle = o => o
417
- } = popover;
418
- if (!getTarget) {
419
- return {};
420
- }
421
- let target = getTarget();
422
- if (!target || !target.length) {
423
- return {};
424
- }
425
- let popup = $(this.dom.current);
426
- let style = Align(popup, target, {
427
- fixStyle: fixStyle,
428
- pageSelector,
429
- fitHorizontal,
430
- style: attrs.style,
431
- rtl
432
- });
433
- return {
434
- ...style,
435
- position: 'absolute'
436
- };
437
- }
438
- keyDown(e) {
439
- let {
440
- isLast,
441
- removeModal
442
- } = this.props;
443
- if (!isLast) {
444
- return;
445
- }
446
- let code = e.keyCode;
447
- if (code === 27) {
448
- removeModal();
449
- }
450
- }
451
- mouseUp() {
452
- setTimeout(() => this.isDown = false, 0);
453
- }
454
- mouseDown(e) {
455
- $(window).unbind('mouseup', this.mouseUp);
456
- $(window).bind('mouseup', $.proxy(this.mouseUp, this));
457
- this.isDown = true;
458
- }
459
- render() {
460
- let {
461
- rtl,
462
- attrs = {},
463
- backdrop = {},
464
- mounted
465
- } = this.props;
466
- let {
467
- popoverStyle
468
- } = this.state;
469
- let backdropAttrs = backdrop ? backdrop.attrs : {};
470
- let backdropProps = {
471
- ...backdropAttrs,
472
- className: this.getBackDropClassName(),
473
- onClick: backdrop === false ? undefined : e => this.backClick(e)
474
- };
475
- let style = {
476
- ...popoverStyle,
477
- ...attrs.style,
478
- flex: 'none'
479
- };
480
- let className = 'aio-popup' + (rtl ? ' rtl' : ' ltr') + (!mounted ? ' not-mounted' : '') + (attrs.className ? ' ' + attrs.className : '');
481
- let ev = "ontouchstart" in document.documentElement ? 'onTouchStart' : 'onMouseDown';
482
- return /*#__PURE__*/_jsx("div", {
483
- ...backdropProps,
484
- ref: this.backdropDom,
485
- onKeyDown: this.keyDown.bind(this),
486
- tabIndex: 0,
487
- children: /*#__PURE__*/_jsx(RVD, {
488
- layout: {
489
- attrs: {
490
- ...attrs,
491
- ref: this.dom,
492
- style: undefined,
493
- className: undefined,
494
- 'data-uniq-id': this.dui,
495
- [ev]: this.mouseDown.bind(this)
496
- },
497
- className,
498
- style,
499
- column: [this.header_layout(), this.body_layout(), this.footer_layout()]
500
- }
501
- })
502
- });
503
- }
504
- }
505
- function ModalHeader({
506
- rtl,
507
- header,
508
- handleClose
509
- }) {
510
- if (typeof header !== 'object') {
511
- return null;
512
- }
513
- let {
514
- title,
515
- subtitle,
516
- buttons = [],
517
- onClose,
518
- backButton,
519
- attrs = {}
520
- } = header;
521
- function close(e) {
522
- if (onClose) {
523
- onClose(e);
524
- } else {
525
- handleClose();
526
- }
527
- }
528
- function backButton_layout() {
529
- if (!backButton || onClose === false) {
530
- return false;
531
- }
532
- let path, style;
533
- if (rtl) {
534
- path = mdiChevronRight;
535
- style = {
536
- marginLeft: 12
537
- };
538
- } else {
539
- path = mdiChevronLeft;
540
- style = {
541
- marginRight: 12
542
- };
543
- }
544
- return {
545
- html: /*#__PURE__*/_jsx(Icon, {
546
- path: path,
547
- size: 1
548
- }),
549
- align: 'vh',
550
- onClick: () => onClose(),
551
- style
552
- };
553
- }
554
- function title_layout() {
555
- if (!title) {
556
- return false;
557
- }
558
- if (!subtitle) {
559
- return {
560
- flex: 1,
561
- align: 'v',
562
- html: title,
563
- className: 'aio-popup-title'
564
- };
565
- } else {
566
- return {
567
- flex: 1,
568
- align: 'v',
569
- column: [{
570
- html: title,
571
- className: 'aio-popup-title'
572
- }, {
573
- html: subtitle,
574
- className: 'aio-popup-subtitle'
575
- }]
576
- };
577
- }
578
- }
579
- function buttons_layout() {
580
- if (!buttons.length) {
581
- return false;
582
- }
583
- return {
584
- gap: 6,
585
- align: 'vh',
586
- row: () => buttons.map(([text, attrs = {}]) => {
587
- let {
588
- onClick = () => {},
589
- className
590
- } = attrs;
591
- attrs.className = 'aio-popup-header-button' + (className ? ' ' + className : '');
592
- attrs.onClick = () => onClick({
593
- close: handleClose
594
- });
595
- return {
596
- html: /*#__PURE__*/_jsx("button", {
597
- ...attrs,
598
- children: text
599
- }),
600
- align: 'vh'
601
- };
602
- })
603
- };
604
- }
605
- function close_layout() {
606
- if (backButton || onClose === false) {
607
- return false;
608
- }
609
- return {
610
- html: /*#__PURE__*/_jsx(Icon, {
611
- path: mdiClose,
612
- size: 0.8
613
- }),
614
- align: 'vh',
615
- onClick: e => close(e),
616
- className: 'aio-popup-header-close-button'
617
- };
618
- }
619
- let className = 'aio-popup-header' + (attrs.className ? ' ' + attrs.className : '');
620
- let style = attrs.style;
621
- return /*#__PURE__*/_jsx(RVD, {
622
- layout: {
623
- attrs,
624
- className,
625
- style,
626
- row: [backButton_layout(), title_layout(), buttons_layout(), close_layout()]
627
- }
628
- });
629
- }
630
- function ModalBody(props) {
631
- let {
632
- handleClose,
633
- body,
634
- updatePopoverStyle
635
- } = props;
636
- let {
637
- render,
638
- attrs = {}
639
- } = body;
640
- let content = typeof render === 'function' ? render({
641
- close: handleClose
642
- }) : render;
643
- useEffect(() => {
644
- updatePopoverStyle();
645
- }, [content]);
646
- return /*#__PURE__*/_jsx("div", {
647
- ...attrs,
648
- className: 'aio-popup-body' + (attrs.className ? ' ' + attrs.className : ''),
649
- children: typeof render === 'function' && content
650
- });
651
- }
652
- function ModalFooter({
653
- type,
654
- closeText = 'Close',
655
- submitText = 'Submit',
656
- footer,
657
- handleClose,
658
- onSubmit
659
- }) {
660
- if (typeof footer !== 'object') {
661
- return null;
662
- }
663
- let {
664
- attrs = {}
665
- } = footer;
666
- let {
667
- buttons = []
668
- } = footer;
669
- function buttons_layout() {
670
- if (!buttons.length) {
671
- return false;
672
- }
673
- return {
674
- gap: 6,
675
- align: 'vh',
676
- row: () => buttons.map(([text, attrs = {}]) => {
677
- let {
678
- onClick = () => {},
679
- className
680
- } = attrs;
681
- attrs.className = 'aio-popup-footer-button' + (className ? ' ' + className : '');
682
- attrs.onClick = () => onClick({
683
- close: handleClose
684
- });
685
- return {
686
- html: /*#__PURE__*/_jsx("button", {
687
- ...attrs,
688
- children: text
689
- }),
690
- align: 'vh'
691
- };
692
- })
693
- };
694
- }
695
- let className = 'aio-popup-footer' + (attrs.className ? ' ' + attrs.className : '');
696
- let style = attrs.style;
697
- return /*#__PURE__*/_jsx(RVD, {
698
- layout: {
699
- className,
700
- style,
701
- ...buttons_layout()
702
- }
703
- });
704
- }
705
- function Alert(obj = {}) {
706
- let {
707
- icon,
708
- type,
709
- text,
710
- subtext,
711
- time,
712
- className,
713
- closeText
714
- } = obj;
715
- let $$ = {
716
- time: 0,
717
- getId() {
718
- return 'aa' + Math.round(Math.random() * 100000000);
719
- },
720
- getBarRender() {
721
- return `<div class='aio-popup-time-bar' style="width:${$$.time}%;"></div>`;
722
- },
723
- updateBarRender() {
724
- $(`.aio-popup-alert-container.${$$.id} .aio-popup-time`).html($$.getBarRender());
725
- },
726
- getRender() {
727
- return `
728
- <div class='aio-popup-alert-container ${$$.id}${className ? 'aio-popup' + className : ''}'>
729
- <div class='aio-popup-alert aio-popup-alert-${type}'>
730
- <div class='aio-popup-alert-header'>${$$.getIcon()}</div>
1
+ function _defineProperty(t,e,o){return(e=_toPropertyKey(e))in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function _toPropertyKey(t){var e=_toPrimitive(t,"string");return"symbol"==typeof e?e:String(e)}function _toPrimitive(t,e){if("object"!=typeof t||null===t)return t;var o=t[Symbol.toPrimitive];if(void 0!==o){var i=o.call(t,e||"default");if("object"!=typeof i)return i;throw TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}import t,{Component as e,createRef as o,useEffect as i}from"react";import*as r from"react-dom/server";import{Icon as s}from"@mdi/react";import{mdiClose as a,mdiChevronRight as l,mdiChevronLeft as n}from"@mdi/js";import p from"react-virtual-dom";import d from"jquery";import"./index.css";import{jsx as h}from"react/jsx-runtime";import{Fragment as u}from"react/jsx-runtime";import{jsxs as _}from"react/jsx-runtime";export default class m{constructor(t={}){_defineProperty(this,"render",()=>_(u,{children:[h(Popups,{rtl:this.rtl,getActions:({addModal:t,removeModal:e,getModals:o})=>{this._addModal=t,this._removeModal=e,this._getModals=o}}),h(AIOSnackeBar,{rtl:this.rtl,getActions:({add:t})=>{this._addSnakebar=t}})]})),_defineProperty(this,"getModals",()=>this._getModals()),_defineProperty(this,"addModal",(t={},e=!0)=>{void 0===t.id&&(t.id="popup"+Math.round(1e6*Math.random())),this._addModal(t,e)}),_defineProperty(this,"removeModal",(t,e=!0)=>this._removeModal(t,e)),_defineProperty(this,"addAlert",(t={})=>{let{icon:e,type:o="",text:i="",subtext:r="",time:s=10,className:a,closeText:l="بستن"}=t;Alert({icon:e,type:o,text:i,subtext:r,time:s,className:a,closeText:l})}),_defineProperty(this,"addSnakebar",(t={})=>{let{text:e,index:o,type:i,subtext:r,action:s={},time:a=6,rtl:l}=t;this._addSnakebar({text:e,index:o,type:i,subtext:r,action:s,time:a,rtl:l})}),this.rtl=t.rtl}};class Popups extends e{constructor(t){super(t),this.dom=o();let{getActions:e=()=>{}}=t;this.state={modals:[]},e({removeModal:this.removeModal.bind(this),addModal:this.addModal.bind(this),getModals:()=>[...this.state.modals]})}change(t){let{onChange:e=()=>{}}=this.props;for(let o in t)this.state[o]=t[o];this.setState(t,()=>e({...this.state}))}addModal(t,e=!0){if("object"!=typeof t){console.error("aio-popup => addModal modal parameter to add is not an object");return}if(void 0===t.id){console.error("aio-popup => addModal missing modal id property");return}let{modals:o}=this.state,i=o.filter(({id:e})=>e!==t.id);i.push({...t,mounted:"popover"!==t.position&&!e}),this.change({modals:i})}async removeModal(t="last",e=!0){if("all"===t)this.change({modals:[]});else{let{modals:o}=this.state;if(!o.length)return;"last"===t&&(t=o[o.length-1].id),this.mount(t,!1),setTimeout(()=>{let{modals:e}=this.state,o=e.find(e=>e.id===t);o&&(o.onClose&&o.onClose(),this.change({modals:e.filter(e=>e.id!==t)}))},e?300:0)}}mount(t="last",e){try{let{modals:o}=this.state;"last"===t&&(t=o[o.length-1].id);let i=o.map(o=>o.id===t?{...o,mounted:e}:o);this.change({modals:i})}catch{return}}getModals(){let{modals:t}=this.state;return t.length?t.map((e,o)=>{let{popover:i,position:r,text:s,onSubmit:a,rtl:l=this.props.rtl,attrs:n={},onClose:p,backdrop:d,header:u,footer:_,closeType:m,body:c,id:$,mounted:g}=e;return h(Popup,{id:$,backdrop:d,footer:_,text:s,onSubmit:a,header:u,popover:i,position:r,rtl:l,attrs:n,closeType:m,body:c,index:o,isLast:o===t.length-1,mounted:g,onClose:()=>this.removeModal($),removeModal:this.removeModal.bind(this),onMount:()=>this.mount($,!0)},$)}):null}render(){return h(u,{children:this.getModals()})}}class Popup extends e{constructor(t){super(t),this.dom=o(),this.backdropDom=o(),this.state={popoverStyle:void 0}}async onClose(){let{onClose:t}=this.props;t()}componentWillUnmount(){d(window).unbind("click",this.handleBackClick)}updatePopoverStyle(){let{position:t}=this.props;if("popover"===t){let e=this.getPopoverStyle();JSON.stringify(e)!==JSON.stringify(this.state.popoverStyle)&&this.setState({popoverStyle:e})}}componentDidMount(){let{popover:t={},position:e}=this.props;if(setTimeout(()=>{let{mounted:t,onMount:o}=this.props;this.setState({popoverStyle:"popover"===e?this.getPopoverStyle():{}}),t||o()},0),t.getTarget){this.dui="a"+Math.round(1e7*Math.random());t.getTarget().attr("data-uniq-id",this.dui)}d(window).unbind("click",this.handleBackClick),d(window).bind("click",d.proxy(this.handleBackClick,this))}handleBackClick(t){if(!this.dui)return;let{position:e="fullscreen"}=this.props,o=d(t.target);"popover"===e&&o.attr("data-uniq-id")!==this.dui&&!o.parents(`[data-uniq-id=${this.dui}]`).length&&this.onClose()}header_layout(){let{rtl:t,header:e}=this.props;return"object"==typeof e&&{html:h(ModalHeader,{rtl:t,header:e,handleClose:()=>this.onClose()}),className:"of-visible"}}body_layout(){let{body:t={}}=this.props;return{flex:1,html:h(ModalBody,{body:t,handleClose:this.onClose.bind(this),updatePopoverStyle:()=>this.updatePopoverStyle()})}}footer_layout(){let{closeText:t,submitText:e,onSubmit:o,footer:i,type:r}=this.props,s=this.onClose.bind(this);return{html:h(ModalFooter,{closeText:t,submitText:e,onSubmit:o,footer:i,type:r,handleClose:s})}}getBackDropClassName(){let{rtl:t,position:e="fullscreen",backdrop:o,mounted:i}=this.props,r="aio-popup-backdrop";return o&&o.attrs&&o.attrs.className&&(r+=" "+o.attrs.className),r+=` aio-popup-position-${e}`,r+=t?" rtl":" ltr",i||(r+=" not-mounted"),r}backClick(t){if(this.isDown)return;t.stopPropagation();let e=d(t.target),{backdrop:o={}}=this.props;!1!==o.close&&e.hasClass("aio-popup-backdrop")&&this.onClose()}getPopoverStyle(){let{popover:t={},rtl:e,attrs:o={}}=this.props,{getTarget:i,pageSelector:r,fitHorizontal:s,fixStyle:a=t=>t}=t;if(!i)return{};let l=i();if(!l||!l.length)return{};let n=d(this.dom.current);return{...Align(n,l,{fixStyle:a,pageSelector:r,fitHorizontal:s,style:o.style,rtl:e}),position:"absolute"}}keyDown(t){let{isLast:e,removeModal:o}=this.props;if(e)27===t.keyCode&&o()}mouseUp(){setTimeout(()=>this.isDown=!1,0)}mouseDown(t){d(window).unbind("mouseup",this.mouseUp),d(window).bind("mouseup",d.proxy(this.mouseUp,this)),this.isDown=!0}render(){let{rtl:t,attrs:e={},backdrop:o={},mounted:i}=this.props,{popoverStyle:r}=this.state,s={...o?o.attrs:{},className:this.getBackDropClassName(),onClick:!1===o?void 0:t=>this.backClick(t)},a={...r,...e.style,flex:"none"},l="aio-popup"+(t?" rtl":" ltr")+(i?"":" not-mounted")+(e.className?" "+e.className:""),n="ontouchstart"in document.documentElement?"onTouchStart":"onMouseDown";return h("div",{...s,ref:this.backdropDom,onKeyDown:this.keyDown.bind(this),tabIndex:0,children:h(p,{layout:{attrs:{...e,ref:this.dom,style:void 0,className:void 0,"data-uniq-id":this.dui,[n]:this.mouseDown.bind(this)},className:l,style:a,column:[this.header_layout(),this.body_layout(),this.footer_layout()]}})})}}function ModalHeader({rtl:t,header:e,handleClose:o}){if("object"!=typeof e)return null;let{title:i,subtitle:r,buttons:d=[],onClose:u,backButton:_,attrs:m={}}=e,c="aio-popup-header"+(m.className?" "+m.className:""),$=m.style;return h(p,{layout:{attrs:m,className:c,style:$,row:[function e(){if(!_||!1===u)return!1;let o,i;return t?(o=l,i={marginLeft:12}):(o=n,i={marginRight:12}),{html:h(s,{path:o,size:1}),align:"vh",onClick:()=>u(),style:i}}(),!!i&&(r?{flex:1,align:"v",column:[{html:i,className:"aio-popup-title"},{html:r,className:"aio-popup-subtitle"}]}:{flex:1,align:"v",html:i,className:"aio-popup-title"}),!!d.length&&{gap:6,align:"vh",row:()=>d.map(([t,e={}])=>{let{onClick:i=()=>{},className:r}=e;return e.className="aio-popup-header-button"+(r?" "+r:""),e.onClick=()=>i({close:o}),{html:h("button",{...e,children:t}),align:"vh"}})},!_&&!1!==u&&{html:h(s,{path:a,size:.8}),align:"vh",onClick(t){var e;return e=t,void(u?u(e):o())},className:"aio-popup-header-close-button"}]}})}function ModalBody(t){let{handleClose:e,body:o,updatePopoverStyle:r}=t,{render:s,attrs:a={}}=o,l="function"==typeof s?s({close:e}):s;return i(()=>{r()},[l]),h("div",{...a,className:"aio-popup-body"+(a.className?" "+a.className:""),children:"function"==typeof s&&l})}function ModalFooter({type:t,closeText:e="Close",submitText:o="Submit",footer:i,handleClose:r,onSubmit:s}){if("object"!=typeof i)return null;let{attrs:a={}}=i,{buttons:l=[]}=i,n="aio-popup-footer"+(a.className?" "+a.className:""),d=a.style;return h(p,{layout:{className:n,style:d,...!!l.length&&{gap:6,align:"vh",row:()=>l.map(([t,e={}])=>{let{onClick:o=()=>{},className:i}=e;return e.className="aio-popup-footer-button"+(i?" "+i:""),e.onClick=()=>o({close:r}),{html:h("button",{...e,children:t}),align:"vh"}})}}})}function Alert(t={}){let{icon:e,type:o,text:i,subtext:s,time:a,className:l,closeText:n}=t,p={time:0,getId:()=>"aa"+Math.round(1e8*Math.random()),getBarRender:()=>`<div class='aio-popup-time-bar' style="width:${p.time}%;"></div>`,updateBarRender(){d(`.aio-popup-alert-container.${p.id} .aio-popup-time`).html(p.getBarRender())},getRender:()=>`
2
+ <div class='aio-popup-alert-container ${p.id}${l?"aio-popup"+l:""}'>
3
+ <div class='aio-popup-alert aio-popup-alert-${o}'>
4
+ <div class='aio-popup-alert-header'>${p.getIcon()}</div>
731
5
  <div class='aio-popup-alert-body'>
732
- <div class='aio-popup-alert-text'>${ReactDOMServer.renderToStaticMarkup(text)}</div>
733
- <div class='aio-popup-alert-subtext'>${subtext}</div>
6
+ <div class='aio-popup-alert-text'>${r.renderToStaticMarkup(i)}</div>
7
+ <div class='aio-popup-alert-subtext'>${s}</div>
734
8
  </div>
735
9
  <div class='aio-popup-alert-footer'>
736
- <button class='aio-popup-alert-close ${$$.id}'>${closeText}</button>
10
+ <button class='aio-popup-alert-close ${p.id}'>${n}</button>
737
11
  </div>
738
12
  <div class='aio-popup-time'></div>
739
13
  </div>
740
14
  </div>
741
- `;
742
- },
743
- close() {
744
- $('.' + $$.id).remove();
745
- },
746
- getIcon() {
747
- if (icon === false) {
748
- return '';
749
- }
750
- return icon || {
751
- error: `<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg>`,
752
- warning: `<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"></path></svg>`,
753
- info: `<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path 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"></path></svg>`,
754
- success: `<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path 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"></path></svg>`
755
- }[type] || '';
756
- },
757
- startTimer() {
758
- setTimeout(() => {
759
- if ($$.time >= 100) {
760
- $$.time = 100;
761
- $$.close();
762
- return;
763
- }
764
- $$.time += 2;
765
- $$.updateBarRender();
766
- $$.startTimer();
767
- }, time / 50 * 1000);
768
- },
769
- render() {
770
- $('body').append($$.getRender());
771
- $('button.' + $$.id).off('click', $$.close);
772
- $('button.' + $$.id).on('click', $$.close);
773
- }
774
- };
775
- $$.id = $$.getId();
776
- $$.render();
777
- if (time) {
778
- $$.startTimer();
779
- }
780
- }
781
- class AIOSnackeBar extends Component {
782
- constructor(props) {
783
- super(props);
784
- this.state = {
785
- items: []
786
- };
787
- props.getActions({
788
- add: this.add.bind(this)
789
- });
790
- }
791
- add(item) {
792
- let {
793
- items
794
- } = this.state;
795
- this.setState({
796
- items: items.concat({
797
- ...item,
798
- id: 'a' + Math.round(Math.random() * 1000000000)
799
- })
800
- });
801
- }
802
- remove(id) {
803
- let {
804
- items
805
- } = this.state;
806
- this.setState({
807
- items: items.filter((o, i) => o.id !== id)
808
- });
809
- }
810
- render() {
811
- let {
812
- items
813
- } = this.state;
814
- let {
815
- rtl = false
816
- } = this.props;
817
- return /*#__PURE__*/_jsx(_Fragment, {
818
- children: items.map((item, i) => {
819
- return /*#__PURE__*/_jsx(SnackebarItem, {
820
- rtl: rtl,
821
- ...item,
822
- index: i,
823
- onRemove: id => this.remove(id)
824
- }, item.id);
825
- })
826
- });
827
- }
828
- }
829
- class SnackebarItem extends Component {
830
- constructor(props) {
831
- super(props);
832
- this.state = {
833
- mounted: false,
834
- timer: 0,
835
- bottom: 0
836
- };
837
- }
838
- componentDidMount() {
839
- let {
840
- time = 8
841
- } = this.props;
842
- setTimeout(() => this.setState({
843
- mounted: true
844
- }), 0);
845
- setTimeout(() => this.remove(), time * 1000);
846
- }
847
- remove() {
848
- let {
849
- onRemove,
850
- id
851
- } = this.props;
852
- this.setState({
853
- mounted: false
854
- });
855
- setTimeout(() => onRemove(id), 200);
856
- }
857
- info_svg() {
858
- return /*#__PURE__*/_jsx("svg", {
859
- viewBox: "0 0 24 24",
860
- role: "presentation",
861
- style: {
862
- width: '1.2rem',
863
- height: '1.2rem'
864
- },
865
- children: /*#__PURE__*/_jsx("path", {
866
- 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",
867
- style: {
868
- fill: 'currentcolor'
869
- }
870
- })
871
- });
872
- }
873
- success_svg() {
874
- return /*#__PURE__*/_jsx("svg", {
875
- viewBox: "0 0 24 24",
876
- role: "presentation",
877
- style: {
878
- width: '1.2rem',
879
- height: '1.2rem'
880
- },
881
- children: /*#__PURE__*/_jsx("path", {
882
- 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",
883
- style: {
884
- fill: 'currentcolor'
885
- }
886
- })
887
- });
888
- }
889
- getSvg(type) {
890
- return type === 'error' || type === 'warning' || type === 'info' ? this.info_svg() : this.success_svg();
891
- }
892
- getBottom(index) {
893
- let els = $('.aio-popup-snakebar-item-container'),
894
- sum = 12;
895
- for (let i = 0; i < index; i++) {
896
- sum += els.eq(i).height() + 6;
897
- }
898
- return sum;
899
- }
900
- render() {
901
- let {
902
- mounted
903
- } = this.state;
904
- let {
905
- text,
906
- index,
907
- type,
908
- subtext,
909
- action,
910
- time,
911
- rtl
912
- } = this.props;
913
- let bottom = this.getBottom(index);
914
- return /*#__PURE__*/_jsx("div", {
915
- onClick: () => this.remove(),
916
- className: 'aio-popup-snakebar-item-container' + (mounted ? ' mounted' : ''),
917
- style: {
918
- bottom,
919
- direction: rtl ? 'rtl' : undefined
920
- },
921
- children: /*#__PURE__*/_jsxs("div", {
922
- className: `aio-popup-snakebar-item aio-popup-snakebar-item-${type}`,
923
- children: [/*#__PURE__*/_jsx("div", {
924
- className: `aio-popup-snakebar-item-icon`,
925
- children: this.getSvg(type)
926
- }), /*#__PURE__*/_jsxs("div", {
927
- className: "aio-popup-snakebar-item-text",
928
- children: [/*#__PURE__*/_jsx("div", {
929
- children: text
930
- }), !!subtext && /*#__PURE__*/_jsx("div", {
931
- className: "aio-popup-snakebar-item-subtext",
932
- children: subtext
933
- })]
934
- }), !!action.text && /*#__PURE__*/_jsx("button", {
935
- className: "aio-popup-snakebar-item-action",
936
- onClick: e => {
937
- e.stopPropagation();
938
- action.onClick();
939
- this.remove();
940
- },
941
- children: action.text
942
- }), /*#__PURE__*/_jsx("div", {
943
- className: `aio-popup-snakebar-bar`,
944
- style: {
945
- transition: `${time}s linear`,
946
- right: rtl ? 0 : 'unset',
947
- left: rtl ? 'unset' : 0
948
- }
949
- })]
950
- })
951
- });
952
- }
953
- }
954
- //id,onClose,backdrop,getTarget,position,fixStyle,attrs,fitHorizontal,pageSelector,rtl,body
955
- function Align(dom, target, config = {}) {
956
- let {
957
- fitHorizontal,
958
- style,
959
- fixStyle = o => o,
960
- pageSelector,
961
- rtl
962
- } = config;
963
- let $$ = {
964
- getDomLimit(dom, type) {
965
- let offset = dom.offset();
966
- let left = offset.left - window.pageXOffset;
967
- let top = offset.top - window.pageYOffset;
968
- if (pageSelector && type !== 'page') {
969
- let page = $(pageSelector);
970
- try {
971
- let {
972
- left: l,
973
- top: t
974
- } = page.offset();
975
- left -= l;
976
- top -= t;
977
- } catch {}
978
- }
979
- let width = dom.outerWidth();
980
- let height = dom.outerHeight();
981
- let right = left + width;
982
- let bottom = top + height;
983
- return {
984
- left,
985
- top,
986
- right,
987
- bottom,
988
- width,
989
- height
990
- };
991
- },
992
- getPageLimit(dom) {
993
- let page = pageSelector ? $(pageSelector) : undefined;
994
- page = Array.isArray(page) && page.length === 0 ? undefined : page;
995
- let bodyWidth = window.innerWidth;
996
- let bodyHeight = window.innerHeight;
997
- let pageLimit = page ? $$.getDomLimit(page, 'page') : {
998
- left: 0,
999
- top: 0,
1000
- right: bodyWidth,
1001
- bottom: bodyHeight
1002
- };
1003
- if (pageLimit.left < 0) {
1004
- pageLimit.left = 0;
1005
- }
1006
- if (pageLimit.right > bodyWidth) {
1007
- pageLimit.right = bodyWidth;
1008
- }
1009
- if (pageLimit.top < 0) {
1010
- pageLimit.top = 0;
1011
- }
1012
- if (pageLimit.bottom > bodyHeight) {
1013
- pageLimit.bottom = bodyHeight;
1014
- }
1015
- return pageLimit;
1016
- },
1017
- align() {
1018
- let pageLimit = $$.getPageLimit(dom);
1019
- let targetLimit = $$.getDomLimit(target, 'target');
1020
- let domLimit = $$.getDomLimit(dom, 'popover');
1021
- domLimit.top = targetLimit.bottom;
1022
- domLimit.bottom = domLimit.top + domLimit.height;
1023
- if (fitHorizontal) {
1024
- domLimit.width = targetLimit.width;
1025
- domLimit.left = targetLimit.left;
1026
- domLimit.right = targetLimit.left + targetLimit.width;
1027
- } else {
1028
- //اگر راست به چپ باید باشد
1029
- if (rtl) {
1030
- //راست المان را با راست هدف ست کن
1031
- domLimit.right = targetLimit.right;
1032
- //چپ المان را بروز رسانی کن
1033
- domLimit.left = domLimit.right - domLimit.width;
1034
- //اگر المان از سمت چپ از صفحه بیرون زد سمت چپ المان را با سمت چپ صفحه ست کن
1035
- if (domLimit.left < pageLimit.left) {
1036
- domLimit.left = pageLimit.left;
1037
- }
1038
- }
1039
- //اگر چپ به راست باید باشد
1040
- else {
1041
- //چپ المان را با چپ هدف ست کن
1042
- domLimit.left = targetLimit.left;
1043
- //راست المان را بروز رسانی کن
1044
- domLimit.right = domLimit.left + domLimit.width;
1045
- //اگر المان از سمت راست صفحه بیرون زد سمت چپ المان را با پهنای المان ست کن
1046
- if (domLimit.right > pageLimit.right) {
1047
- domLimit.left = pageLimit.right - domLimit.width;
1048
- }
1049
- }
1050
- }
1051
-
1052
- //اگر المان از سمت پایین صفحه بیرون زد
1053
- if (domLimit.bottom > pageLimit.bottom) {
1054
- if (domLimit.height > targetLimit.top - pageLimit.top) {
1055
- domLimit.top = pageLimit.bottom - domLimit.height;
1056
- } else {
1057
- domLimit.top = targetLimit.top - domLimit.height;
1058
- }
1059
- } else {
1060
- domLimit.top = targetLimit.bottom;
1061
- }
1062
- let overflowY;
1063
- if (domLimit.height > pageLimit.bottom - pageLimit.top) {
1064
- domLimit.top = 6;
1065
- domLimit.bottom = undefined;
1066
- domLimit.height = pageLimit.bottom - pageLimit.top - 12;
1067
- overflowY = 'auto';
1068
- }
1069
- let finalStyle = {
1070
- left: domLimit.left,
1071
- top: domLimit.top,
1072
- width: domLimit.width,
1073
- overflowY,
1074
- ...style
1075
- };
1076
- return fixStyle(finalStyle, {
1077
- targetLimit,
1078
- pageLimit
1079
- });
1080
- }
1081
- };
1082
- return $$.align();
1083
- }
15
+ `,close(){d("."+p.id).remove()},getIcon:()=>!1===e?"":e||({error:'<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg>',warning:'<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"></path></svg>',info:'<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path 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"></path></svg>',success:'<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path 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"></path></svg>'})[o]||"",startTimer(){setTimeout(()=>{if(p.time>=100){p.time=100,p.close();return}p.time+=2,p.updateBarRender(),p.startTimer()},a/50*1e3)},render(){d("body").append(p.getRender()),d("button."+p.id).off("click",p.close),d("button."+p.id).on("click",p.close)}};p.id=p.getId(),p.render(),a&&p.startTimer()}class AIOSnackeBar extends e{constructor(t){super(t),this.state={items:[]},t.getActions({add:this.add.bind(this)})}add(t){let{items:e}=this.state;this.setState({items:e.concat({...t,id:"a"+Math.round(1e9*Math.random())})})}remove(t){let{items:e}=this.state;this.setState({items:e.filter((e,o)=>e.id!==t)})}render(){let{items:t}=this.state,{rtl:e=!1}=this.props;return h(u,{children:t.map((t,o)=>h(SnackebarItem,{rtl:e,...t,index:o,onRemove:t=>this.remove(t)},t.id))})}}class SnackebarItem extends e{constructor(t){super(t),this.state={mounted:!1,timer:0,bottom:0}}componentDidMount(){let{time:t=8}=this.props;setTimeout(()=>this.setState({mounted:!0}),0),setTimeout(()=>this.remove(),1e3*t)}remove(){let{onRemove:t,id:e}=this.props;this.setState({mounted:!1}),setTimeout(()=>t(e),200)}info_svg(){return h("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:h("path",{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",style:{fill:"currentcolor"}})})}success_svg(){return h("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:h("path",{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",style:{fill:"currentcolor"}})})}getSvg(t){return"error"===t||"warning"===t||"info"===t?this.info_svg():this.success_svg()}getBottom(t){let e=d(".aio-popup-snakebar-item-container"),o=12;for(let i=0;i<t;i++)o+=e.eq(i).height()+6;return o}render(){let{mounted:t}=this.state,{text:e,index:o,type:i,subtext:r,action:s,time:a,rtl:l}=this.props,n=this.getBottom(o);return h("div",{onClick:()=>this.remove(),className:"aio-popup-snakebar-item-container"+(t?" mounted":""),style:{bottom:n,direction:l?"rtl":void 0},children:_("div",{className:`aio-popup-snakebar-item aio-popup-snakebar-item-${i}`,children:[h("div",{className:"aio-popup-snakebar-item-icon",children:this.getSvg(i)}),_("div",{className:"aio-popup-snakebar-item-text",children:[h("div",{children:e}),!!r&&h("div",{className:"aio-popup-snakebar-item-subtext",children:r})]}),!!s.text&&h("button",{className:"aio-popup-snakebar-item-action",onClick:t=>{t.stopPropagation(),s.onClick(),this.remove()},children:s.text}),h("div",{className:"aio-popup-snakebar-bar",style:{transition:`${a}s linear`,right:l?0:"unset",left:l?"unset":0}})]})})}}function Align(t,e,o={}){let{fitHorizontal:i,style:r,fixStyle:s=t=>t,pageSelector:a,rtl:l}=o,n={getDomLimit(t,e){let o=t.offset(),i=o.left-window.pageXOffset,r=o.top-window.pageYOffset;if(a&&"page"!==e){let s=d(a);try{let{left:l,top:n}=s.offset();i-=l,r-=n}catch{}}let p=t.outerWidth(),h=t.outerHeight(),u=i+p,_=r+h;return{left:i,top:r,right:u,bottom:_,width:p,height:h}},getPageLimit(t){let e=a?d(a):void 0;e=Array.isArray(e)&&0===e.length?void 0:e;let o=window.innerWidth,i=window.innerHeight,r=e?n.getDomLimit(e,"page"):{left:0,top:0,right:o,bottom:i};return r.left<0&&(r.left=0),r.right>o&&(r.right=o),r.top<0&&(r.top=0),r.bottom>i&&(r.bottom=i),r},align(){let o=n.getPageLimit(t),a=n.getDomLimit(e,"target"),p=n.getDomLimit(t,"popover");p.top=a.bottom,p.bottom=p.top+p.height,i?(p.width=a.width,p.left=a.left,p.right=a.left+a.width):l?(p.right=a.right,p.left=p.right-p.width,p.left<o.left&&(p.left=o.left)):(p.left=a.left,p.right=p.left+p.width,p.right>o.right&&(p.left=o.right-p.width)),p.bottom>o.bottom?p.height>a.top-o.top?p.top=o.bottom-p.height:p.top=a.top-p.height:p.top=a.bottom;let d;p.height>o.bottom-o.top&&(p.top=6,p.bottom=void 0,p.height=o.bottom-o.top-12,d="auto");let h={left:p.left,top:p.top,width:p.width,overflowY:d,...r};return s(h,{targetLimit:a,pageLimit:o})}};return n.align()}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "aio-popup",
3
- "version": "3.0.1",
3
+ "version": "3.0.3",
4
4
  "description": "handle all types of popup and modals in react",
5
5
  "main": "index.js",
6
6
  "scripts": {