aio-popup 6.3.0 → 6.5.0

package/index.css

@@ -372,6 +372,7 @@
   align-items: center;
   box-sizing: border-box;
   padding: 0 12px;
+  gap:6px;
 }
 
 .aio-popup-time {

package/index.d.ts

@@ -43,6 +43,13 @@ export type AP_alert = {
     closeText?: string;
     animate?: boolean;
     onClose?: boolean | (() => void);
+    actions?: {
+        text: string;
+        callback: any;
+        className?: string;
+        id: string;
+        close?: boolean;
+    }[];
 };
 export type AP_snackebar = {
     id?: string;

package/index.js

@@ -529,7 +529,7 @@ const SnackebarBar = () => {
     return _jsx("div", { className: 'aio-popup-snackebar-bar', style: { transition: `${item.time || 8}s linear` } });
 };
 export function Alert(props) {
-    let { icon, type = '', title = '', text = '', time = 10, className, closeText = 'Close', onClose, rtl } = props;
+    let { icon, type = '', title = '', text = '', time = 10, className, closeText = 'Close', onClose, rtl, actions = [] } = props;
     let $$ = {
         id: '',
         time: 0,
@@ -552,7 +552,11 @@ export function Alert(props) {
             <div class='aio-popup-alert-text' style="text-align:${rtl ? 'right' : 'left'}">${text}</div>
           </div>
           <div class='aio-popup-alert-footer'>
-            <button class='aio-popup-alert-close ${$$.id}'>${closeText}</button>
+            ${onClose !== false ? `<button class='aio-popup-alert-close ${$$.id}'>${closeText}</button>` : ''}
+            ${actions.map((o) => {
+                const { className, id, text } = o;
+                return `<button  data-action='${id}' class='aio-popup-alert-action${className ? ' ' + className : ''}'>${text}</button>`;
+            }).join(' ')}
           </div>
           <div class='aio-popup-time'></div>
         </div>
@@ -565,9 +569,6 @@ export function Alert(props) {
                 if (typeof onClose === 'function') {
                     onClose();
                 }
-                if (onClose === false) {
-                    return;
-                }
                 $('.' + $$.id).remove();
             }, 200);
         },
@@ -583,6 +584,8 @@ export function Alert(props) {
             }[type] || '';
         },
         startTimer() {
+            let timeoutTime = time / 50 * 1000;
+            timeoutTime = timeoutTime > 100000 ? 100000 : timeoutTime;
             setTimeout(() => {
                 if ($$.time >= 100) {
                     $$.time = 100;
@@ -592,7 +595,7 @@ export function Alert(props) {
                 $$.time += 2;
                 $$.updateBarRender();
                 $$.startTimer();
-            }, time / 50 * 1000);
+            }, timeoutTime);
         },
         toggleClass(mount) {
             let dom = $(`.${$$.id}`);
@@ -603,10 +606,24 @@ export function Alert(props) {
                 dom.addClass('not-mounted');
             }
         },
+        callAction(e) {
+            const target = $(e.target);
+            const actionId = target.attr('data-action');
+            const action = actions.find((o) => o.id === actionId);
+            if (!action) {
+                return;
+            }
+            action.callback();
+            if (action.close) {
+                $$.close();
+            }
+        },
         render() {
             $('body').append($$.getRender());
             $('button.' + $$.id).off('click', $$.close);
             $('button.' + $$.id).on('click', $$.close);
+            $('button.aio-popup-alert-action').off('click', $$.callAction);
+            $('button.aio-popup-alert-action').on('click', $$.callAction);
             $$.toggleClass(true);
         }
     };
@@ -731,16 +748,16 @@ function getEasing(highlight) {
     const { easing } = highlight;
     var easingNames = [
         'linear',
-        'easeInQuad',
-        'easeInSine',
-        'easeInCirc',
-        'easeInBack',
-        'easeOutQuad',
-        'easeOutSine',
-        'easeOutCirc',
-        'easeInOutQuad',
-        'easeInOutSine',
-        'easeInOutBack',
+        'easeInQuad', //1
+        'easeInSine', //5
+        'easeInCirc', //7
+        'easeInBack', //8
+        'easeOutQuad', //9
+        'easeOutSine', //13
+        'easeOutCirc', //15
+        'easeInOutQuad', //18
+        'easeInOutSine', //22
+        'easeInOutBack', //25
         'easeOutBounce', //27
     ];
     if (typeof easing === 'number') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aio-popup",
-  "version": "6.3.0",
+  "version": "6.5.0",
   "description": "handle all types of popup and modals in react",
   "main": "index.js",
   "scripts": {