aio-popup 6.4.0 → 6.6.0

package/index.d.ts

@@ -31,6 +31,7 @@ export type AP_modal = {
     animate?: boolean;
     fitHorizontal?: boolean;
     setAttrs?: AP_setAttrs;
+    pageSelector?: string;
 };
 export type AP_alert = {
     rtl?: boolean;
@@ -48,6 +49,7 @@ export type AP_alert = {
         callback: any;
         className?: string;
         id: string;
+        close?: boolean;
     }[];
 };
 export type AP_snackebar = {

package/index.js

@@ -16,9 +16,15 @@ import $ from 'jquery';
 import './index.css';
 const CTX = createContext({});
 function Align(p) {
-    let { modal, target, fitHorizontal, rtl, limitTo } = p;
+    let { modal, target, fitHorizontal, rtl, limitTo, pageSelector } = p;
     const bodyWidth = window.innerWidth, bodyHeight = window.innerHeight;
     let pageLimit = { left: 0, top: 0, bottom: bodyHeight, right: bodyWidth, width: bodyWidth, height: bodyHeight };
+    if (pageSelector) {
+        let page = modal.parents(pageSelector);
+        if (page.length) {
+            pageLimit = getBound(page[0]);
+        }
+    }
     let targetLimit = getBound(target[0]);
     let domLimit = getBound(modal[0]);
     targetLimit = Object.assign({}, targetLimit);
@@ -149,7 +155,7 @@ const usePopup = (props) => {
         if (!item || item.onClose === false) {
             return;
         }
-        let newItems = items.filter((o, i) => o.id !== id);
+        let newItems = items.filter((o) => o.id !== id);
         setSnackebarItems(newItems);
         if (typeof item.onClose === 'function') {
             item.onClose();
@@ -253,9 +259,9 @@ const Prompt = ({ change, placeholder }) => {
     return (_jsx("textarea", { placeholder: placeholder, value: text, onChange: (e) => { const value = e.target.value; setText(value); change(value); } }));
 };
 const POPUPCTX = createContext({});
-const Popup = ({ modal, isLast, renderCaller }) => {
+const Popup = ({ modal, isLast }) => {
     const mainContext = useContext(CTX);
-    let { setAttrs = () => { return {}; }, id, position = 'fullscreen', getTarget } = modal;
+    let { setAttrs = () => { return {}; }, position = 'fullscreen', getTarget } = modal;
     let [temp] = useState({ dom: createRef(), backdropDom: createRef(), dui: undefined });
     let [popoverStyle, setPopoverStyle] = useState({});
     let modalMouseDown = useRef(false);
@@ -307,7 +313,7 @@ const Popup = ({ modal, isLast, renderCaller }) => {
         if (!target || !target.length) {
             return {};
         }
-        let p = { modal: $(temp.dom.current), target, fitHorizontal: modal.fitHorizontal, limitTo: modal.limitTo, attrs, rtl: mainContext.rtl };
+        let p = { modal: $(temp.dom.current), target, fitHorizontal: modal.fitHorizontal, limitTo: modal.limitTo, attrs, rtl: mainContext.rtl, pageSelector: modal.pageSelector };
         let style = Align(p);
         let res = Object.assign(Object.assign({}, style), { position: 'absolute' });
         return res;
@@ -324,7 +330,7 @@ const Popup = ({ modal, isLast, renderCaller }) => {
     function mouseUp() {
         setTimeout(() => modalMouseDown.current = false, 0);
     }
-    function mouseDown(e) {
+    function mouseDown() {
         modalMouseDown.current = true;
         $(window).unbind('mouseup', mouseUp);
         $(window).bind('mouseup', mouseUp);
@@ -552,7 +558,7 @@ 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>`;
@@ -569,9 +575,6 @@ export function Alert(props) {
                 if (typeof onClose === 'function') {
                     onClose();
                 }
-                if (onClose === false) {
-                    return;
-                }
                 $('.' + $$.id).remove();
             }, 200);
         },
@@ -587,6 +590,8 @@ export function Alert(props) {
             }[type] || '';
         },
         startTimer() {
+            let timeoutTime = time / 50 * 1000;
+            timeoutTime = timeoutTime > 100000 ? 100000 : timeoutTime;
             setTimeout(() => {
                 if ($$.time >= 100) {
                     $$.time = 100;
@@ -596,7 +601,7 @@ export function Alert(props) {
                 $$.time += 2;
                 $$.updateBarRender();
                 $$.startTimer();
-            }, time / 50 * 1000);
+            }, timeoutTime);
         },
         toggleClass(mount) {
             let dom = $(`.${$$.id}`);
@@ -615,6 +620,9 @@ export function Alert(props) {
                 return;
             }
             action.callback();
+            if (action.close) {
+                $$.close();
+            }
         },
         render() {
             $('body').append($$.getRender());
@@ -746,16 +754,16 @@ function getEasing(highlight) {
     const { easing } = highlight;
     var easingNames = [
         'linear',
-        'easeInQuad', //1
-        'easeInSine', //5
-        'easeInCirc', //7
-        'easeInBack', //8
-        'easeOutQuad', //9
-        'easeOutSine', //13
-        'easeOutCirc', //15
-        'easeInOutQuad', //18
-        'easeInOutSine', //22
-        'easeInOutBack', //25
+        'easeInQuad',
+        'easeInSine',
+        'easeInCirc',
+        'easeInBack',
+        'easeOutQuad',
+        'easeOutSine',
+        'easeOutCirc',
+        'easeInOutQuad',
+        'easeInOutSine',
+        'easeInOutBack',
         'easeOutBounce', //27
     ];
     if (typeof easing === 'number') {
@@ -788,7 +796,10 @@ export class Loading {
             return (`
             <div class="aio-loading-container-0">
                 <div class="aio-loading-0">
-                    ${new Array(5).fill(0).map((o, i) => this.getLoaderItem_0(`0.${i}`)).join(' ')}
+                    ${new Array(5).fill(0).map((o, i) => {
+                if (o) { }
+                return this.getLoaderItem_0(`0.${i}`);
+            }).join(' ')}
                 </div>
             </div>
         `);

package/package.json

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