aio-popup 8.1.0 → 8.2.1

package/index.css

@@ -20,6 +20,10 @@
   flex-shrink: 0;
 }
 
+.aio-popup-backdrop.rtl {
+  direction: rtl;
+}
+
 .aio-popup {
   border-radius: 4px;
   transition: .3s;
@@ -31,7 +35,7 @@
   outline: none;
   z-index: 10;
   position: absolute;
-  border:1px solid #ddd;
+  border: 1px solid #ddd;
 }
 
 .aio-popup.rtl {
@@ -41,7 +45,9 @@
 .aio-popup.not-mounted {
   transition: .3s;
 }
-
+.aio-popup-popover{
+  overflow:hidden;
+}
 /**********position (fullscreen)*******/
 .aio-popup-position-fullscreen>.aio-popup.not-mounted {
   transform: scale(0);
@@ -192,6 +198,9 @@
   overflow-y: auto;
   box-sizing: border-box;
 }
+.aio-popup-modal .aio-popup-body {
+  background: #fff;
+}
 
 .aio-popup-body * {
   box-sizing: border-box;
@@ -370,7 +379,7 @@
   align-items: center;
   box-sizing: border-box;
   padding: 0 12px;
-  gap:6px;
+  gap: 6px;
 }
 
 .aio-popup-time {
@@ -812,72 +821,72 @@
     border-radius:6px;
     border:1px solid #eee;
   } */
-  .aio-loading {
-    z-index: 100000000000000000000000000000;
-    position: fixed;
-    direction: ltr;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    align-items: center;
-    justify-content: center;
+.aio-loading {
+  z-index: 100000000000000000000000000000;
+  position: fixed;
+  direction: ltr;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  align-items: center;
+  justify-content: center;
 }
 
 .aio-loading-container-0 {
-    border-radius: 12px;
-    height: 72px;
-    width: 72px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0, 0, 0, 0.7);
-    opacity: 1;
-    animation-name: aioloadingopacity;
-    animation-duration: 2s;
-    animation-fill-mode: forwards;
+  border-radius: 12px;
+  height: 72px;
+  width: 72px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.7);
+  opacity: 1;
+  animation-name: aioloadingopacity;
+  animation-duration: 2s;
+  animation-fill-mode: forwards;
 }
 
 .aio-loading-0 {
-    width: 60px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .aio-loading-item-0 {
-    width: 4px;
-    height: 36px;
-    background: rgb(255, 255, 255);
-    margin: 0px 1.5px;
-    border-radius: 0px;
+  width: 4px;
+  height: 36px;
+  background: rgb(255, 255, 255);
+  margin: 0px 1.5px;
+  border-radius: 0px;
 }
 
 @keyframes aioloading0 {
 
-    0%,
-    40%,
-    100% {
-        transform: scaleY(0.4);
-    }
+  0%,
+  40%,
+  100% {
+    transform: scaleY(0.4);
+  }
 
-    20% {
-        transform: scaleY(1.0);
-    }
+  20% {
+    transform: scaleY(1.0);
+  }
 }
 
 @keyframes aioloadingopacity {
-    0% {
-        opacity: 0;
-    }
+  0% {
+    opacity: 0;
+  }
 
-    50% {
-        opacity: 0;
-    }
+  50% {
+    opacity: 0;
+  }
 
-    100% {
-        opacity: 1;
-    }
+  100% {
+    opacity: 1;
+  }
 }

package/index.d.ts

@@ -38,6 +38,8 @@ export type AP_modal = {
     pageSelector?: string;
     focus?: boolean;
     backdropClose?: boolean;
+    ref?: any;
+    isPopover?: boolean;
 };
 export type AP_alert = {
     rtl?: boolean;
@@ -116,45 +118,23 @@ export type AP_prompt = {
     headerAttrs?: any;
     footerAttrs?: any;
 };
-type AP_removeModal = (arg?: string) => void;
-type AP_addAlert = (p: AP_alert) => void;
-type AP_addSnackebar = (item: AP_snackebar) => void;
-type AP_addModal = (o: AP_modal) => void;
-type AP_addHighlight = (highlight: AP_highlight) => void;
-type AP_removeHighlight = () => void;
-type AP_getModals = () => AP_modal[];
-type AP_addConfirm = (item: AP_confirm) => void;
-type AP_addPrompt = (item: AP_prompt) => void;
-type AP_render = (caller?: string) => ReactNode;
-export type AP_usePopup = {
-    addAlert: AP_addAlert;
-    addSnackebar: AP_addSnackebar;
-    removeModal: AP_removeModal;
-    addModal: AP_addModal;
-    getModals: AP_getModals;
-    addHighlight: AP_addHighlight;
-    removeHighlight: AP_removeHighlight;
-    render: AP_render;
-    addConfirm: AP_addConfirm;
-    addPrompt: AP_addPrompt;
-};
-export type I_usePopup = {
-    addAlert: AP_addAlert;
-    addSnackebar: AP_addSnackebar;
-    removeModal: AP_removeModal;
-    addModal: AP_addModal;
-    getModals: AP_getModals;
-    addHighlight: AP_addHighlight;
-    removeHighlight: AP_removeHighlight;
-    render: AP_render;
-    addConfirm: AP_addConfirm;
-    addPrompt: AP_addPrompt;
-    portal: () => void;
-};
+export type I_usePopup = ReturnType<typeof usePopup>;
 declare const usePopup: (props?: {
     rtl?: boolean;
     id?: string;
-}) => I_usePopup;
+}) => {
+    addAlert: (obj: AP_alert) => void;
+    addSnackebar: (item: AP_snackebar) => void;
+    removeModal: (arg?: string) => Promise<void>;
+    addModal: (o: AP_modal) => void;
+    getModals: () => AP_modal[];
+    addHighlight: (highlight: AP_highlight) => void;
+    removeHighlight: () => void;
+    render: (caller?: string) => import("react/jsx-runtime").JSX.Element;
+    addConfirm: (obj: AP_confirm) => void;
+    addPrompt: (obj: AP_prompt) => void;
+    portal: () => any;
+};
 export default usePopup;
 export type AP_SnackebarItem = {
     item: AP_snackebar;

package/index.js

@@ -8,12 +8,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { createRef, useEffect, useState, createContext, useContext, useRef } from 'react';
+import { createRef, useEffect, useState, createContext, useContext, useRef, useMemo } from 'react';
 import * as ReactDOMServer from 'react-dom/server';
 import ReactDOM from 'react-dom';
 import { $, anime } from 'aio-deps';
 import './index.css';
-const CTX = createContext({});
 function Align(p) {
     let { modal, target, fitHorizontal, rtl, limitTo, pageSelector } = p;
     const page = modal.parents('.aio-popup-backdrop');
@@ -97,6 +96,11 @@ function AddToAttrs(attrs, p) {
     let newStyle = Object.assign(Object.assign({}, attrs.style), style);
     return Object.assign(Object.assign(Object.assign({}, attrs), { className: newClassName, style: newStyle }), p.attrs);
 }
+const MainContext = createContext({});
+const MainProvider = ({ value, children }) => {
+    return _jsx(MainContext, { value: value, children: children });
+};
+const useMainProvider = () => useContext(MainContext);
 const usePopup = (props) => {
     let [modals, setModals] = useState([]);
     const promptTexts = useRef({});
@@ -111,7 +115,7 @@ const usePopup = (props) => {
         if (o.id === undefined) {
             o.id = 'popup' + Math.round(Math.random() * 1000000);
         }
-        let newModal = o;
+        let newModal = Object.assign(Object.assign({}, o), { rtl: o.rtl === true || (props === null || props === void 0 ? void 0 : props.rtl) === true });
         setModals(prevModals => {
             let newModals = prevModals.filter(({ id }) => id !== o.id);
             return [...newModals, newModal];
@@ -235,19 +239,15 @@ const usePopup = (props) => {
         };
         addModal(config);
     };
-    const getContext = () => {
-        return {
-            rtl: !!props && !!props.rtl,
-            snackebarItems: snackebarItemsRef.current,
-            removeSnackebar, removeModal
-        };
-    };
+    const mainContext = useMemo(() => ({ rtl: !!(props === null || props === void 0 ? void 0 : props.rtl), snackebarItems, removeSnackebar, removeModal, id: props === null || props === void 0 ? void 0 : props.id }), [props === null || props === void 0 ? void 0 : props.rtl, snackebarItems]);
     const render = (caller) => {
-        return (_jsxs(CTX.Provider, { value: getContext(), children: [modalsRef.current.map((modal, i) => {
-                    return (_jsx(Popup, { modal: modal, isLast: i === modalsRef.current.length - 1, renderCaller: caller }, modal.id));
+        return (_jsxs(MainProvider, { value: mainContext, children: [modalsRef.current.map((modal, i) => {
+                    return (_jsx("div", { style: { display: 'content' }, ref: modal.ref, children: _jsx(Popup, { modal: modal, isLast: i === modalsRef.current.length - 1, renderCaller: caller }, modal.id) }));
                 }), snackebarItems.map((item, i) => _jsx(SnackebarItem, { item: item, index: i }, item.id)), !!highlight && _jsx(Highlight, { highlight: highlight })] }));
     };
-    const portal = () => ReactDOM.createPortal(render(), document.body);
+    const portal = useMemo(() => {
+        return () => ReactDOM.createPortal(render(), document.body);
+    }, [modals, snackebarItems, highlight]);
     return { addAlert, addSnackebar, removeModal, addModal, getModals, addHighlight, removeHighlight, render, addConfirm, addPrompt, portal };
 };
 export default usePopup;
@@ -257,7 +257,7 @@ const Prompt = ({ change, placeholder, text = '' }) => {
 };
 const POPUPCTX = createContext({});
 const Popup = ({ modal, isLast }) => {
-    const mainContext = useContext(CTX);
+    const mainContext = useMainProvider();
     let { modalAttrs = {}, position = 'fullscreen', getTarget } = modal;
     let [temp] = useState({ dom: createRef(), backdropDom: createRef(), dui: undefined });
     let [popoverStyle, setPopoverStyle] = useState({});
@@ -335,6 +335,12 @@ const Popup = ({ modal, isLast }) => {
     }
     function getClassName() {
         let className = 'aio-popup';
+        if (modal.isPopover) {
+            className += ' aio-popup-popover';
+        }
+        else {
+            className += ' aio-popup-modal';
+        }
         className += mainContext.rtl ? ' rtl' : ' ltr';
         if (firstMount) {
             className += ' not-mounted';
@@ -345,10 +351,12 @@ const Popup = ({ modal, isLast }) => {
         return className;
     }
     const getContext = () => ({ modal, isLast, state, setState, onKeyDown });
+    console.log(mainContext.id);
     return (_jsx(POPUPCTX.Provider, { value: getContext(), children: _jsx(ModalBackdrop, { firstMount: !!firstMount, backdropDom: temp.backdropDom, isModalMouseDown: isModalMouseDown, children: _jsxs("div", Object.assign({}, getModalProps(), { children: [_jsx(ModalHeader, {}), _jsx(ModalBody, {}, modal.id), _jsx(ModalFooter, {})] }), modal.id) }, modal.id) }));
 };
 const ModalBackdrop = ({ children, firstMount, backdropDom, isModalMouseDown }) => {
-    const { removeModal, rtl } = useContext(CTX);
+    const { removeModal, rtl, id: containerId } = useMainProvider();
+    console.log(containerId);
     let { modal, onKeyDown } = useContext(POPUPCTX);
     let { backdropAttrs = {}, id, position = 'fullscreen' } = modal;
     function backClick(e) {
@@ -371,7 +379,7 @@ const ModalBackdrop = ({ children, firstMount, backdropDom, isModalMouseDown })
     return _jsx("div", Object.assign({}, AddToAttrs(backdropAttrs, { className, attrs }), { children: children }));
 };
 const ModalHeader = () => {
-    const { removeModal } = useContext(CTX);
+    const { removeModal } = useMainProvider();
     let { modal, state, setState } = useContext(POPUPCTX);
     if (!modal.header) {
         return null;
@@ -396,7 +404,7 @@ const ModalHeaderElement = ({ type }) => {
     return _jsx("div", { className: `aio-popup-header-${type}`, "data-subtitle": type === 'title' ? header.subtitle : undefined, children: header[type] });
 };
 const ModalClose = () => {
-    const { removeModal } = useContext(CTX);
+    const { removeModal } = useMainProvider();
     let { modal, state, setState } = useContext(POPUPCTX), { header } = modal;
     if (typeof header === 'function' || !header) {
         return null;
@@ -433,7 +441,7 @@ const ModalFooter = () => {
 };
 const SBCTX = createContext({});
 const SnackebarItem = (props) => {
-    const mainContext = useContext(CTX);
+    const mainContext = useMainProvider();
     let { item } = props;
     let { time = 8, id, align = ['right', 'top'] } = item;
     if (align[1] !== 'top' && align[1] !== 'bottom') {
@@ -537,24 +545,24 @@ export function Alert(props) {
             $(`.aio-popup-alert-container.${$$.id} .aio-popup-time`).html($$.getBarRender());
         },
         getRender() {
-            return (`
-      <div class='aio-popup-alert-container not-mounted ${$$.id} aio-popup-alert-container-center${!!className ? ` ${className}` : ''}'>
-        <div class='aio-popup-alert aio-popup-alert-${type}'>
-          <div class='aio-popup-alert-header'>${$$.getIcon()}</div>
-          <div class='aio-popup-alert-body aio-popup-scroll'>
-            <div class='aio-popup-alert-title'>${ReactDOMServer.renderToStaticMarkup(title)}</div>
-            <div class='aio-popup-alert-text' style="text-align:${rtl ? 'right' : 'left'}">${text}</div>
-          </div>
-          <div class='aio-popup-alert-footer'>
-            ${onClose !== false ? `<button class='aio-popup-alert-close ${$$.id}'>${closeText}</button>` : ''}
+            return (`
+      <div class='aio-popup-alert-container not-mounted ${$$.id} aio-popup-alert-container-center${!!className ? ` ${className}` : ''}'>
+        <div class='aio-popup-alert aio-popup-alert-${type}'>
+          <div class='aio-popup-alert-header'>${$$.getIcon()}</div>
+          <div class='aio-popup-alert-body aio-popup-scroll'>
+            <div class='aio-popup-alert-title'>${ReactDOMServer.renderToStaticMarkup(title)}</div>
+            <div class='aio-popup-alert-text' style="text-align:${rtl ? 'right' : 'left'}">${text}</div>
+          </div>
+          <div class='aio-popup-alert-footer'>
+            ${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>
-      </div>
+            }).join(' ')}
+          </div>
+          <div class='aio-popup-time'></div>
+        </div>
+      </div>
     `);
         },
         close() {
@@ -742,16 +750,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') {
@@ -781,15 +789,15 @@ export class Loading {
     constructor(loader) {
         this.loader = '0';
         this.getLoader_0 = () => {
-            return (`
-            <div class="aio-loading-container-0">
-                <div class="aio-loading-0">
+            return (`
+            <div class="aio-loading-container-0">
+                <div class="aio-loading-0">
                     ${new Array(5).fill(0).map((o, i) => {
                 if (o) { }
                 return this.getLoaderItem_0(`0.${i}`);
-            }).join(' ')}
-                </div>
-            </div>
+            }).join(' ')}
+                </div>
+            </div>
         `);
         };
         this.getLoaderItem_0 = (ease) => {

package/package.json

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

package/alert1.css

@@ -1,68 +0,0 @@
-.aio-popup-alert {
-    overflow: unset !important;
-  }
-  
-  .aio-popup-alert svg {
-    transform: translateY(-24px);
-    fill: #fff !important;
-    border-radius: 100%;
-    padding: 12px;
-  }
-  .aio-popup-alert-error svg {
-    background: #f14747;
-  }
-  .aio-popup-alert-error .aio-popup-time-bar {
-    background: #f14747;
-  }
-  .aio-popup-alert-error .aio-popup-alert-footer button{
-    background: #f14747;
-  }
-  .aio-popup-alert-success svg {
-    background: #6EBC3D;
-  }
-  .aio-popup-alert-success .aio-popup-time-bar {
-    background: #6EBC3D;
-  }
-  .aio-popup-alert-success .aio-popup-alert-footer button{
-    background: #6EBC3D;
-  }
-  .aio-popup-alert-warning svg {
-    background: #ff7800;
-  }
-  .aio-popup-alert-warning .aio-popup-time-bar {
-    background: #ff7800;
-  }
-  .aio-popup-alert-warning .aio-popup-alert-footer button{
-    background: #ff7800;
-  }
-  .aio-popup-alert-info svg {
-    background: #0069ff;
-  }
-  .aio-popup-alert-info .aio-popup-time-bar {
-    background: #0069ff;
-  }
-  .aio-popup-alert-info .aio-popup-alert-footer button{
-    background: #0069ff;
-  }
-  .aio-popup-alert-header {
-    height:48px;
-  }
-  .aio-popup-alert-text {
-    color:#888;
-    font-size:14px;
-  }
-  .aio-popup-alert-subtext {
-    color:#444;
-    font-size:14px;
-    justify-content: center;
-    display:flex;
-  }
-  .aio-popup-alert-footer {
-    justify-content: center;
-    padding:16px;
-    height:unset;
-  }
-  .aio-popup-alert-footer button{
-    width:100%;
-    height:36px;
-  }

package/alert2.css

@@ -1,70 +0,0 @@
-.aio-popup-alert {
-    overflow: hidden !important;
-    border-radius:8px;
-  }
-  
-  .aio-popup-alert svg {
-    fill: #fff !important;
-    border-radius: 100%;
-    padding: 12px;
-  }
-  .aio-popup-alert-error .aio-popup-alert-header {
-    background: #f14747;
-  }
-  .aio-popup-alert-error .aio-popup-time-bar {
-    background: #f14747;
-  }
-  .aio-popup-alert-error .aio-popup-alert-footer button{
-    background: #f14747;
-  }
-  .aio-popup-alert-success .aio-popup-alert-header {
-    background: #6EBC3D;
-  }
-  .aio-popup-alert-success .aio-popup-time-bar {
-    background: #6EBC3D;
-  }
-  .aio-popup-alert-success .aio-popup-alert-footer button{
-    background: #6EBC3D;
-  }
-  .aio-popup-alert-warning .aio-popup-alert-header {
-    background: #ff7800;
-  }
-  .aio-popup-alert-warning .aio-popup-time-bar {
-    background: #ff7800;
-  }
-  .aio-popup-alert-warning .aio-popup-alert-footer button{
-    background: #ff7800;
-  }
-  .aio-popup-alert-info .aio-popup-alert-header {
-    background: #0069ff;
-  }
-  .aio-popup-alert-info .aio-popup-time-bar {
-    background: #0069ff;
-  }
-  .aio-popup-alert-info .aio-popup-alert-footer button{
-    background: #0069ff;
-  }
-  .aio-popup-alert-header {
-    height:144px;
-  }
-  .aio-popup-alert-text {
-    color:#000;
-    font-size:18px;
-    padding:16px;
-  }
-  .aio-popup-alert-subtext {
-    color:#444;
-    font-size:14px;
-    justify-content: center;
-    display:flex;
-  }
-  .aio-popup-alert-footer {
-    justify-content: center;
-    padding:36px;
-    height:unset;
-  }
-  .aio-popup-alert-footer button{
-    width:100%;
-    height:36px;
-    border-radius:24px;
-  }