aio-popup 3.2.0 → 3.3.0

package/index.css

@@ -1,4 +1,3 @@
-/*version 3.2.0*/
 .aio-popup-backdrop {
   position: fixed;
   display: flex;
@@ -125,6 +124,7 @@
 }
 
 .aio-popup-header {
+  display:flex;
   border-bottom: 1px solid #e7e9ec;
   background: #fff;
   color: #323130;
@@ -145,6 +145,9 @@
   width: 100%;
   overflow-y: auto;
 }
+.aio-popup-body *{
+  box-sizing: border-box;
+}
 
 .aio-popup-footer {
   background: #fff;
@@ -155,15 +158,22 @@
   border-top: 1px solid #f2f4f7;
   justify-content: flex-end;
 }
-
+.aio-popup-header-buttons{
+  display:flex;
+  align-items: center;
+  justify-content: center;
+  gap:6px;
+}
 .aio-popup-header-button {
   padding: 0 6px;
   background: none;
   border: none;
   cursor: pointer;
 }
-
 .aio-popup-header-close-button {
+  display:flex;
+  align-items: center;
+  justify-content: center;
   width: 36px;
 }
 
@@ -203,6 +213,12 @@
   align-items: center;
   justify-content: center;
   font-family: inherit;
+  transition:0.2s;
+}
+
+.aio-popup-alert-container.not-mounted{
+  background: rgba(0, 0, 0, 0);
+  transition:0.2;
 }
 
 .aio-popup-alert {
@@ -217,6 +233,31 @@
   overflow: hidden;
 }
 
+.aio-popup-alert-container-center .aio-popup-alert{
+  transform:scale(1);
+  transition:0.2s;
+}
+.aio-popup-alert-container-center.not-mounted .aio-popup-alert {
+  transform:scale(0);
+  transition:0.2s;
+}
+.aio-popup-alert-container-top .aio-popup-alert{
+  transform:translateY(0vh);
+  transition:0.2s;
+}
+.aio-popup-alert-container-top.not-mounted .aio-popup-alert {
+  transform:translateY(-100vh);
+  transition:0.2s;
+}
+.aio-popup-alert-container-bottom .aio-popup-alert{
+  transform:translateY(0vh);
+  transition:0.2s;
+}
+.aio-popup-alert-container-bottom.not-mounted .aio-popup-alert {
+  transform:translateY(100vh);
+  transition:0.2s;
+}
+
 .aio-popup-alert-error .aio-popup-alert-header svg {
   fill: red;
 }
@@ -271,9 +312,9 @@
 
 .aio-popup-time {
   position: absolute;
-  height: 3px;
-  width: calc(100% - 24px);
-  left: 12px;
+  height: 4px;
+  width: 100%;
+  left: 0;
   bottom: 0;
 }
 
@@ -311,8 +352,8 @@
   border-radius: 3px;
 }
 
-.aio-popup-snakebar-item-container {
-  font-size: 12px;
+.aio-popup-snackebar-item-container {
+  font-size: 14px;
   height: fit-content;
   color: #fff;
   width: 100%;
@@ -326,8 +367,25 @@
   justify-content: center;
   z-index: 1000000;
 }
-
-.aio-popup-snakebar-item {
+.aio-popup-snackebar-item-container.aio-popup-snackebar-item-container-horizontal-align-start {
+  justify-content: flex-start;
+}
+.aio-popup-snackebar-item-container.aio-popup-snackebar-item-container-horizontal-align-end {
+  justify-content: flex-end;
+}
+.aio-popup-snackebar-item-container.aio-popup-snackebar-item-container-horizontal-align-center {
+  justify-content: center;
+}
+.aio-popup-snackebar-item-container.rtl {
+  direction:rtl;
+}
+.aio-popup-snackebar-item-container .aio-popup-snackebar-item-uptext{
+  text-align:left;
+}
+.aio-popup-snackebar-item-container.rtl .aio-popup-snackebar-item-uptext{
+  text-align:right;
+}
+.aio-popup-snackebar-item {
   background: rgb(24 28 41 / 95%);
   padding: 12px;
   right: 100%;
@@ -339,34 +397,35 @@
   align-items: center;
   transition: 0.2s;
   overflow: hidden;
+  box-shadow:1px 1px 10px 0 rgba(0,0,0,0.2);
 }
 
-.aio-popup-snakebar-item-container.mounted .aio-popup-snakebar-item {
+.aio-popup-snackebar-item-container.mounted .aio-popup-snackebar-item {
   transition: 0.5s;
   right: 0;
 }
 
-.aio-popup-snakebar-item-text {
+.aio-popup-snackebar-item-text {
   flex: 1;
 }
 
-.aio-popup-snakebar-item-subtext {
+.aio-popup-snackebar-item-subtext {
   font-size: 85%;
   opacity: 0.67;
 }
 
-.aio-popup-snakebar-item-text svg {
+.aio-popup-snackebar-item-text svg {
   flex: 1;
 }
 
-.aio-popup-snakebar-item-remove {
+.aio-popup-snackebar-item-remove {
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 100%;
 }
 
-.aio-popup-snakebar-item-icon {
+.aio-popup-snackebar-item-icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -375,56 +434,90 @@
   padding: 3px;
 }
 
-.aio-popup-snakebar-item-success .aio-popup-snakebar-item-icon {
+.aio-popup-snackebar-item-success .aio-popup-snackebar-item-icon {
   color: #5ba427;
 }
 
-.aio-popup-snakebar-item-error .aio-popup-snakebar-item-icon {
+.aio-popup-snackebar-item-error .aio-popup-snackebar-item-icon {
   color: #e83232;
 }
 
-.aio-popup-snakebar-item-warning .aio-popup-snakebar-item-icon {
+.aio-popup-snackebar-item-warning .aio-popup-snackebar-item-icon {
   color: #ffb300;
 }
 
-.aio-popup-snakebar-item-info .aio-popup-snakebar-item-icon {
+.aio-popup-snackebar-item-info .aio-popup-snackebar-item-icon {
   color: #00bcff;
 }
 
-.aio-popup-snakebar-item-container .aio-popup-snakebar-bar {
+.aio-popup-snackebar-item-container .aio-popup-snackebar-bar {
   position: absolute;
   left: 0;
-  bottom: 2px;
+  bottom: 0px;
   width: 0%;
-  height: 3px;
+  height: 4px;
+}
+.aio-popup-snackebar-item-container.rtl .aio-popup-snackebar-bar {
+  left: unset;
+  right:0;
 }
 
-.aio-popup-snakebar-item-container.mounted .aio-popup-snakebar-bar {
+.aio-popup-snackebar-item-container.mounted .aio-popup-snackebar-bar {
   width: 100%;
 }
 
-/* .aio-popup-snakebar-container.mounted .aio-popup-snakebar-bar{
+/* .aio-popup-snackebar-container.mounted .aio-popup-snackebar-bar{
   width:50%;
 } */
 
-.aio-popup-snakebar-item-success .aio-popup-snakebar-bar {
+.aio-popup-snackebar-item-success .aio-popup-snackebar-bar {
   background: #5ba427;
 }
 
-.aio-popup-snakebar-item-error .aio-popup-snakebar-bar {
+.aio-popup-snackebar-item-error .aio-popup-snackebar-bar {
   background: #e83232;
 }
 
-.aio-popup-snakebar-item-warning .aio-popup-snakebar-bar {
+.aio-popup-snackebar-item-warning .aio-popup-snackebar-bar {
   background: #ffb300;
 }
 
-.aio-popup-snakebar-item-info .aio-popup-snakebar-bar {
+.aio-popup-snackebar-item-info .aio-popup-snackebar-bar {
   background: #00bcff;
 }
 
-.aio-popup-snakebar-item-action {
+.aio-popup-snackebar-item-action {
   color: dodgerblue;
   border: none;
   background: none;
+}
+
+.aio-popup-confirm .aio-popup-body{
+  padding:12px;
+}
+
+
+
+.aio-popup-scroll::-webkit-scrollbar {
+  width: 10px !important;
+  height: 10px !important;
+}
+
+.aio-popup-scroll::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+.aio-popup-scroll::-webkit-scrollbar-thumb {
+  background-color: #cdd4e0;
+  border-radius: 20px;
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+
+.aio-popup-scroll::-webkit-scrollbar-thumb {
+  background-color: #b1b9ca;
+}
+
+.aio-popup-scroll::-webkit-scrollbar-thumb:hover {
+  background-color: #6f7888;
 }

package/index.d.ts

@@ -0,0 +1,166 @@
+import React 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 = {
+    title?: string;
+    subtitle?: string;
+    buttons?: AP_modal_button[];
+    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_modal = {
+    getTarget?: () => any;
+    pageSelector?: string;
+    openRelatedTo?: string;
+    fixStyle?: (o: any, p: {
+        targetLimit: any;
+        pageLimit: any;
+    }) => any;
+    fitTo?: string;
+    rtl?: boolean;
+    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;
+};
+export type AP_alert = {
+    icon?: false | React.ReactNode;
+    position?: AP_position;
+    type: 'success' | 'error' | 'warning' | 'info';
+    text?: React.ReactNode;
+    subtext?: string;
+    time?: number;
+    className?: string;
+    closeText?: string;
+    animate?: boolean;
+};
+export type AP_snackebar = {
+    id?: string;
+    text: string;
+    subtext?: string;
+    icon?: React.ReactNode;
+    time?: number;
+    action?: {
+        text: string;
+        onClick: () => void;
+    };
+    type: 'success' | 'error' | 'warning' | 'info';
+    verticalAlign?: 'start' | 'end';
+    horizontalAlign?: 'start' | 'center' | 'end';
+    onClose?: false;
+    attrs?: any;
+};
+export type AP_confirm = {
+    title?: string;
+    subtitle?: string;
+    text?: React.ReactNode;
+    submitText?: string;
+    canselText?: string;
+    onSubmit?: () => Promise<boolean>;
+    onCansel?: () => void;
+    attrs?: any;
+};
+export type AP_prompt = {
+    title?: string;
+    subtitle?: string;
+    text?: string;
+    submitText?: string;
+    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;
+};
+export type AP_Snackebar = {
+    getActions: (p: {
+        add: (item: AP_snackebar) => void;
+    }) => void;
+    rtl: boolean;
+};
+export type AP_SnackebarItem = {
+    item: AP_snackebar;
+    onRemove: (id: string) => void;
+    index: number;
+    rtl: boolean;
+};
+export default class AIOPopup {
+    rtl?: boolean;
+    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;
+    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;
+    constructor(obj?: AP_props);
+}