aio-popup 6.3.0 → 6.4.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,12 @@ export type AP_alert = {
     closeText?: string;
     animate?: boolean;
     onClose?: boolean | (() => void);
+    actions?: {
+        text: string;
+        callback: any;
+        className?: string;
+        id: string;
+    }[];
 };
 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,
@@ -553,6 +553,10 @@ export function Alert(props) {
           </div>
           <div class='aio-popup-alert-footer'>
             <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>
@@ -603,10 +607,21 @@ 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();
+        },
         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 +746,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.4.0",
   "description": "handle all types of popup and modals in react",
   "main": "index.js",
   "scripts": {