aio-popup 3.3.0 → 4.0.1

package/index.css

@@ -1,127 +1,66 @@
+.aio-popup-backdrop.not-mounted {
+  background: none !important;
+  transition: .3s;
+}
+
 .aio-popup-backdrop {
   position: fixed;
   display: flex;
   width: 100%;
   height: 100%;
-  left: 0;
-  top: 0;
+  left: 0 !important;
+  top: 0 !important;
   align-items: center;
   justify-content: center;
   z-index: 10000;
   background: rgba(0, 0, 0, 0.1);
-  transition: 0.3s;
+  transition: .3s;
   pointer-events: all;
+  outline:none;
+  flex-shrink:0;
 }
-
-.aio-popup.not-mounted {
-  transition: 0.3s;
-}
-
-.aio-popup-position-fullscreen>.aio-popup.not-mounted {
-  transform: scale(0);
-
-}
-
-.aio-popup-position-popover>.aio-popup.not-mounted {
-  opacity: 0;
-}
-
-.aio-popup-position-top>.aio-popup.not-mounted {
-  top: -500px;
-}
-
-.aio-popup-position-bottom>.aio-popup.not-mounted {
-  bottom: -500px;
-  opacity: 0;
-}
-
-.aio-popup-position-right>.aio-popup.not-mounted {
-  right: -500px;
-}
-
-.aio-popup-position-left>.aio-popup.not-mounted {
-  left: -500px;
-}
-
-.aio-popup-position-center>.aio-popup.not-mounted {
-  transform: translateY(500px);
-  opacity: 0;
-}
-
-.aio-popup-position-fullscreen>.aio-popup {
-  width: 100%;
-  height: 100%;
-}
-
-.aio-popup-position-popover {
-  opacity: 1;
-}
-
-.aio-popup-position-top {
-  align-items: flex-start;
-}
-
-.aio-popup-position-top>.aio-popup {
-  width: 100%;
-  max-height: 90vh;
-  top: 0;
-}
-
-.aio-popup-position-bottom {
-  align-items: flex-end;
-}
-
-.aio-popup-position-bottom>.aio-popup {
-  width: 100%;
-  max-height: 90vh;
-  bottom: 0;
-  opacity: 1;
-}
-
-.aio-popup-backdrop.not-mounted {
-  background: none !important;
-  transition: 0.3s;
-}
-
-.aio-popup-position-right {
-  justify-content: right;
-}
-
-.aio-popup-position-right .aio-popup {
-  height: 100%;
-  max-width: 90vh;
-  right: 0;
-}
-
-.aio-popup-position-left {
-  justify-content: left;
-}
-
-.aio-popup-position-left>.aio-popup {
-  height: 100%;
-  max-width: 90vh;
-  left: 0;
-}
-
-.aio-popup-position-center>.aio-popup {
-  max-width: 100vw;
-  width: fit-content;
-  opacity: 1;
-  max-height: 100vh;
-}
-
 .aio-popup {
   border-radius: 4px;
   font-size: 14px;
-  transition: 0.3s;
+  transition: .3s;
   max-width: 100vw;
   max-height: 100vh;
   pointer-events: auto;
-}
-
-.aio-popup.rtl {
-  direction: rtl;
-}
+  display:flex;
+  flex-direction: column;
+  outline:none;
+  z-index:10;
+  position:absolute;
+}
+.aio-popup.rtl {direction: rtl;}
+.aio-popup.not-mounted {transition: .3s;}
+/**********position (fullscreen)*******/
+.aio-popup-position-fullscreen>.aio-popup.not-mounted {transform: scale(0);}
+.aio-popup-position-fullscreen>.aio-popup {width: 100%;height: 100%;}
+/**********position (top)**************/
+.aio-popup-position-top {align-items: flex-start;}
+.aio-popup-position-top > .aio-popup.not-mounted {transform: translateY(-500px);}
+.aio-popup-position-top > .aio-popup {width: 100%;max-height: 90vh;transform: translateY(0px);}
+/**********position (bottom)***********/
+.aio-popup-position-bottom {align-items: flex-end;}
+.aio-popup-position-bottom>.aio-popup.not-mounted {opacity: 0; bottom:-500px; transform: scaleY(0);}
+.aio-popup-position-bottom>.aio-popup {width: 100%; bottom: 0; opacity: 1; transform: scaleY(1); }
+
+/**********position (left)*************/
+.aio-popup-position-left {justify-content: left;}
+.aio-popup-position-left > .aio-popup.not-mounted {transform: translateX(-500px);}
+.aio-popup-position-left > .aio-popup {height: 100%;max-width: 90vh;transform: translateX(0px);}
+/**********position (right)************/
+.aio-popup-position-right {justify-content: right;}
+.aio-popup-position-right > .aio-popup.not-mounted {transform: translateX(500px) scaleX(0);}
+.aio-popup-position-right > .aio-popup {height: 100%;max-width: 90vh;transform: translateX(0px) scaleX(1);;}
+/**********position (popover)************/
+.aio-popup-position-popover {opacity: 1;}
+.aio-popup-position-popover>.aio-popup.not-mounted {opacity: 0;}
+/**********position (center)***********/
+.aio-popup-position-center>.aio-popup.not-mounted {transform: translateY(-500px);opacity: 0;}
+.aio-popup-position-center>.aio-popup {max-width: 100vw;width: fit-content;opacity: 1;max-height: 100vh;transform: translateY(0px); transform-origin:top;}
+/**************************************/
 
 .aio-popup-header {
   display:flex;
@@ -132,18 +71,29 @@
   font-size: 16px;
   font-weight: bold;
   min-height: 48px;
+  gap:12px;
 }
 
-.aio-popup-subtitle {
+.aio-popup-header-subtitle {
   font-size: 85%;
   opacity: 0.5;
 }
-
+.aio-popup-header-before{
+  display:flex;
+  align-items: center;
+  justify-content: center;
+}
+.aio-popup-header-after{
+  display:flex;
+  align-items: center;
+  justify-content: center;
+}
 .aio-popup-body {
   background: #fff;
   flex: 1;
   width: 100%;
   overflow-y: auto;
+  box-sizing:border-box;
 }
 .aio-popup-body *{
   box-sizing: border-box;
@@ -157,6 +107,7 @@
   display: flex;
   border-top: 1px solid #f2f4f7;
   justify-content: flex-end;
+  box-sizing: border-box;
 }
 .aio-popup-header-buttons{
   display:flex;
@@ -176,7 +127,11 @@
   justify-content: center;
   width: 36px;
 }
-
+.aio-popup-header-after{
+  display:flex;
+  align-items: center;
+  height:100%;
+}
 .aio-popup-footer-button {
   height: 30px;
   background: dodgerblue;

package/index.d.ts

@@ -1,41 +1,42 @@
-import React from 'react';
+import React, { FC } from 'react';
 import './index.css';
 export type AP_props = {
     rtl?: boolean;
     id?: string;
 };
 export type AP_position = 'fullscreen' | 'center' | 'popover' | 'left' | 'right' | 'top' | 'bottom';
-export type AP_header = {
+export type AP_attrsKey = 'backdrop' | 'modal' | 'header' | 'body' | 'footer';
+export type AP_header = ((p: {
+    close: () => void;
+    state: any;
+    setState: any;
+}) => React.ReactNode) | {
     title?: string;
     subtitle?: string;
-    buttons?: AP_modal_button[];
+    before?: React.ReactNode;
+    after?: React.ReactNode;
     onClose?: boolean | ((p: {
         state: any;
         setState: (state: any) => void;
     }) => void);
-    backButton?: () => void;
-    attrs?: any;
-};
-export type AP_backdrop = false | {
-    attrs?: any;
-    close?: boolean;
-};
-export type AP_body = {
-    render?: (p: {
-        close: () => void;
-        state?: any;
-        setState?: (state: any) => void;
-    }) => React.ReactNode;
     attrs?: any;
 };
-export type AP_footer = React.ReactNode | {
-    attrs?: any;
-    buttons?: AP_modal_button[];
-};
+export type AP_body = (p: {
+    close: () => void;
+    state?: any;
+    setState?: (state: any) => void;
+}) => React.ReactNode;
+export type AP_footer = (p: {
+    state: any;
+    setState: (v: any) => void;
+    close: () => void;
+}) => React.ReactNode;
+type AP_setAttrs = (mode: AP_attrsKey) => any;
 export type AP_modal = {
     getTarget?: () => any;
     pageSelector?: string;
-    openRelatedTo?: string;
+    limitTo?: string;
+    maxHeight?: number | 'string';
     fixStyle?: (o: any, p: {
         targetLimit: any;
         pageLimit: any;
@@ -45,14 +46,13 @@ export type AP_modal = {
     id?: string;
     onClose?: boolean | (() => void);
     position?: AP_position;
-    attrs?: any;
-    backdrop?: AP_backdrop;
     header?: AP_header;
     state?: any;
     footer?: AP_footer;
     body?: AP_body;
     animate?: boolean;
     fitHorizontal?: boolean;
+    setAttrs?: AP_setAttrs;
 };
 export type AP_alert = {
     icon?: false | React.ReactNode;
@@ -64,6 +64,7 @@ export type AP_alert = {
     className?: string;
     closeText?: string;
     animate?: boolean;
+    onClose?: boolean | (() => void);
 };
 export type AP_snackebar = {
     id?: string;
@@ -78,7 +79,7 @@ export type AP_snackebar = {
     type: 'success' | 'error' | 'warning' | 'info';
     verticalAlign?: 'start' | 'end';
     horizontalAlign?: 'start' | 'center' | 'end';
-    onClose?: false;
+    onClose?: boolean | (() => void);
     attrs?: any;
 };
 export type AP_confirm = {
@@ -89,7 +90,7 @@ export type AP_confirm = {
     canselText?: string;
     onSubmit?: () => Promise<boolean>;
     onCansel?: () => void;
-    attrs?: any;
+    setAttrs?: AP_setAttrs;
 };
 export type AP_prompt = {
     title?: string;
@@ -99,42 +100,7 @@ export type AP_prompt = {
     canselText?: string;
     onSubmit?: (text: string) => Promise<boolean>;
     onCansel?: () => void;
-    attrs?: any;
-};
-export type AP_modal_button = [text: React.ReactNode, attrs?: any | ((p: {
-    state: any;
-    setState: (v: any) => void;
-}) => any)];
-export type AP_Popups = {
-    getActions: (p: {
-        removeModal: (p?: string, animate?: boolean) => void;
-        addModal: (p: AP_modal) => void;
-        getModals: () => AP_modal[];
-    }) => void;
-    rtl: boolean;
-    id?: string;
-};
-export type AP_Popup = {
-    modal: AP_modal;
-    rtl: boolean;
-    index: number;
-    isLast: boolean;
-    onClose: () => void;
-    removeModal: (p?: string, animate?: boolean) => void;
-};
-export type AP_ModalHeader = {
-    rtl: boolean;
-    header: AP_header;
-    handleClose: () => void;
-    state: any;
-    setState: (state: any) => void;
-};
-export type AP_ModalBody = {
-    body?: AP_body;
-    handleClose: () => void;
-    updatePopoverStyle: () => void;
-    state: any;
-    setState: (state: any) => void;
+    setAttrs?: AP_setAttrs;
 };
 export type AP_Snackebar = {
     getActions: (p: {
@@ -153,14 +119,18 @@ export default class AIOPopup {
     render: () => React.ReactNode;
     addModal: (p: AP_modal) => void;
     addAlert: (p: AP_alert) => void;
-    removeModal: (arg?: string, animate?: boolean) => void;
-    _removeModal: (arg?: string, animate?: boolean) => void;
+    removeModal: (arg?: string) => void;
     addSnackebar: (p: AP_snackebar) => void;
     getModals: () => AP_modal[];
-    _getModals: () => AP_modal[];
     addConfirm: (p: AP_confirm) => void;
     addPrompt: (p: AP_prompt) => void;
     popupId?: string;
-    isRenderCalled: boolean;
+    popupsRef: React.RefObject<typeof Popups>;
     constructor(obj?: AP_props);
 }
+type AP_Popups = {
+    ref: any;
+    rtl: boolean;
+};
+declare const Popups: FC<AP_Popups>;
+export {};