aio-popup 6.6.2 → 7.0.0

package/index.css

@@ -32,6 +32,7 @@
   outline: none;
   z-index: 10;
   position: absolute;
+  border:1px solid #ddd;
 }
 
 .aio-popup.rtl {
@@ -149,7 +150,6 @@
   color: #323130;
   padding: 6px 12px;
   font-size: 14px;
-  font-weight: bold;
   min-height: 36px;
   gap: 12px;
   align-items: center;
@@ -193,6 +193,7 @@
   width: 100%;
   overflow-y: auto;
   box-sizing: border-box;
+  border-radius:6px;
 }
 
 .aio-popup-body * {

package/index.d.ts

@@ -17,7 +17,6 @@ export type AP_header = {
         setState: (state: any) => void;
     }) => void);
 };
-type AP_setAttrs = (mode: AP_attrsKey) => any;
 export type AP_modal = {
     getTarget?: () => any;
     limitTo?: string;
@@ -31,9 +30,14 @@ export type AP_modal = {
     body: ReactNode;
     animate?: boolean;
     fitHorizontal?: boolean;
-    setAttrs?: AP_setAttrs;
+    backdropAttrs?: any;
+    modalAttrs?: any;
+    bodyAttrs?: any;
+    headerAttrs?: any;
+    footerAttrs?: any;
     pageSelector?: string;
     focus?: boolean;
+    backdropClose?: boolean;
 };
 export type AP_alert = {
     rtl?: boolean;
@@ -89,7 +93,11 @@ export type AP_confirm = {
     onCansel?: () => void;
     submitAttrs?: any;
     canselAttrs?: any;
-    setAttrs?: AP_setAttrs;
+    backdropAttrs?: any;
+    modalAttrs?: any;
+    bodyAttrs?: any;
+    headerAttrs?: any;
+    footerAttrs?: any;
 };
 export type AP_prompt = {
     title?: string;
@@ -101,7 +109,11 @@ export type AP_prompt = {
     onCansel?: () => void;
     submitAttrs?: any;
     canselAttrs?: any;
-    setAttrs?: AP_setAttrs;
+    backdropAttrs?: any;
+    modalAttrs?: any;
+    bodyAttrs?: any;
+    headerAttrs?: any;
+    footerAttrs?: any;
 };
 type AP_removeModal = (arg?: string) => void;
 type AP_addAlert = (p: AP_alert) => void;

package/index.js

@@ -11,8 +11,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { createRef, useEffect, useState, createContext, useContext, useRef } from 'react';
 import * as ReactDOMServer from 'react-dom/server';
 import ReactDOM from 'react-dom';
-import anime from "animejs/lib/anime.es.js";
-import $ from 'jquery';
+import { $, anime } from 'aio-depencencies';
 import './index.css';
 const CTX = createContext({});
 function Align(p) {
@@ -165,7 +164,7 @@ const usePopup = (props) => {
     const addHighlight = (highlight) => setHighlight(highlight);
     const removeHighlight = () => setHighlight(undefined);
     const addConfirm = (obj) => {
-        let { title, subtitle, text, submitText = 'Yes', canselText = 'No', onSubmit, onCansel = () => { }, setAttrs = () => { return {}; } } = obj;
+        let { title, subtitle, text, submitText = 'Yes', canselText = 'No', onSubmit, onCansel = () => { }, modalAttrs, backdropAttrs, headerAttrs, footerAttrs, bodyAttrs } = obj;
         const submitAttrs = AddToAttrs(obj.submitAttrs, {
             className: 'active', attrs: {
                 onClick: () => __awaiter(void 0, void 0, void 0, function* () {
@@ -188,17 +187,15 @@ const usePopup = (props) => {
         });
         let config = {
             position: 'center', header: { title, subtitle }, body: _jsx(_Fragment, { children: text }),
-            setAttrs: (key) => {
-                let attrs = setAttrs(key);
-                return key === 'modal' ? AddToAttrs(attrs, { className: 'aio-popup-confirm' }) : attrs;
-            },
+            modalAttrs: AddToAttrs(modalAttrs, { className: 'aio-popup-confirm' }),
+            backdropAttrs, headerAttrs, footerAttrs, bodyAttrs,
             footer: (_jsxs(_Fragment, { children: [_jsx("button", Object.assign({}, canselAttrs, { children: canselText })), _jsx("button", Object.assign({}, submitAttrs, { children: submitText }))] }))
         };
         addModal(config);
     };
     const addPrompt = (obj) => {
         const id = 'a' + (Math.round(Math.random() * 100000));
-        let { title, text = '', subtitle, submitText = 'Submit', canselText = 'close', onSubmit, onCansel = () => { }, setAttrs = () => { return {}; } } = obj;
+        let { title, text = '', subtitle, submitText = 'Submit', canselText = 'close', onSubmit, onCansel = () => { }, modalAttrs, backdropAttrs, headerAttrs, footerAttrs, bodyAttrs } = obj;
         const submitAttrs = AddToAttrs(obj.submitAttrs, {
             className: 'active', attrs: {
                 onClick: () => __awaiter(void 0, void 0, void 0, function* () {
@@ -223,16 +220,16 @@ const usePopup = (props) => {
                 type: 'button'
             }
         });
-        const canselAttrs = AddToAttrs(obj.canselAttrs, { attrs: {
+        const canselAttrs = AddToAttrs(obj.canselAttrs, {
+            attrs: {
                 onClick: () => { onCansel(); removeModal(); },
                 type: 'button'
-            } });
+            }
+        });
         let config = {
             position: 'center', header: { title, subtitle },
-            setAttrs: (key) => {
-                let attrs = setAttrs(key);
-                return key === 'modal' ? AddToAttrs(attrs, { className: 'aio-popup-prompt' }) : attrs;
-            },
+            modalAttrs: AddToAttrs(modalAttrs, { className: 'aio-popup-prompt' }),
+            backdropAttrs, headerAttrs, footerAttrs, bodyAttrs,
             body: _jsx(Prompt, { change: (value) => promptTexts.current = Object.assign(Object.assign({}, promptTexts.current), { [id]: value }), placeholder: text }),
             footer: (_jsxs(_Fragment, { children: [_jsx("button", Object.assign({}, canselAttrs, { children: canselText })), _jsx("button", Object.assign({}, submitAttrs, { children: submitText }))] }))
         };
@@ -261,14 +258,13 @@ const Prompt = ({ change, placeholder }) => {
 const POPUPCTX = createContext({});
 const Popup = ({ modal, isLast }) => {
     const mainContext = useContext(CTX);
-    let { setAttrs = () => { return {}; }, position = 'fullscreen', getTarget } = modal;
+    let { modalAttrs = {}, position = 'fullscreen', getTarget } = modal;
     let [temp] = useState({ dom: createRef(), backdropDom: createRef(), dui: undefined });
     let [popoverStyle, setPopoverStyle] = useState({});
     let modalMouseDown = useRef(false);
     //bar taraf kardane moshkele mozakhrafe click rooye backdrop ke az har ja mouse ro roosh vel mikoni modal baste mishe
     const isModalMouseDown = () => modalMouseDown.current;
     let [state, setState] = useState(modal.state);
-    let attrs = setAttrs('modal') || {};
     const firstMount = useRef(false);
     useEffect(() => () => { $(window).unbind('click', handleBackClick); });
     useEffect(() => {
@@ -303,9 +299,9 @@ const Popup = ({ modal, isLast }) => {
         mainContext.removeModal();
     }
     function getModalProps() {
-        let style = Object.assign(Object.assign({}, popoverStyle), attrs.style);
+        let style = Object.assign(Object.assign({}, popoverStyle), modalAttrs.style);
         let ev = "ontouchstart" in document.documentElement ? 'onTouchStart' : 'onMouseDown';
-        return Object.assign(Object.assign({}, attrs), { ref: temp.dom, "data-id": modal.id, tabIndex: 0, onKeyDown, [ev]: mouseDown, className: getClassName(), style: Object.assign({}, style), onClick: (e) => { e.stopPropagation(); } });
+        return Object.assign(Object.assign({}, modalAttrs), { ref: temp.dom, "data-id": modal.id, tabIndex: 0, onKeyDown, [ev]: mouseDown, className: getClassName(), style: Object.assign({}, style), onClick: (e) => { e.stopPropagation(); } });
     }
     function getPopoverStyle() {
         if (!getTarget) {
@@ -315,7 +311,7 @@ const Popup = ({ modal, isLast }) => {
         if (!target || !target.length) {
             return {};
         }
-        let p = { modal: $(temp.dom.current), target, fitHorizontal: modal.fitHorizontal, limitTo: modal.limitTo, attrs, rtl: mainContext.rtl, pageSelector: modal.pageSelector };
+        let p = { modal: $(temp.dom.current), target, fitHorizontal: modal.fitHorizontal, limitTo: modal.limitTo, attrs: modalAttrs, rtl: mainContext.rtl, pageSelector: modal.pageSelector };
         let style = Align(p);
         let res = Object.assign(Object.assign({}, style), { position: 'absolute' });
         return res;
@@ -343,8 +339,8 @@ const Popup = ({ modal, isLast }) => {
         if (firstMount) {
             className += ' not-mounted';
         }
-        if (attrs.className) {
-            className += ' ' + attrs.className;
+        if (modalAttrs.className) {
+            className += ' ' + modalAttrs.className;
         }
         return className;
     }
@@ -354,8 +350,7 @@ const Popup = ({ modal, isLast }) => {
 const ModalBackdrop = ({ children, firstMount, backdropDom, isModalMouseDown }) => {
     const { removeModal, rtl } = useContext(CTX);
     let { modal, onKeyDown } = useContext(POPUPCTX);
-    let { setAttrs = () => { return {}; }, id, position = 'fullscreen' } = modal;
-    const [attrs] = useState(setAttrs('backdrop') || {});
+    let { backdropAttrs = {}, id, position = 'fullscreen' } = modal;
     function backClick(e) {
         if (isModalMouseDown()) {
             return;
@@ -367,18 +362,13 @@ const ModalBackdrop = ({ children, firstMount, backdropDom, isModalMouseDown })
         if (!target.hasClass('aio-popup-backdrop')) {
             return;
         }
-        removeModal();
-    }
-    function getProps() {
-        let className = 'aio-popup-backdrop';
-        className += ` aio-popup-position-${position}`;
-        className += rtl ? ' rtl' : ' ltr';
-        if (firstMount) {
-            className += ' not-mounted';
+        if (modal.backdropClose !== false) {
+            removeModal();
         }
-        return AddToAttrs(attrs, { className, attrs: { ref: backdropDom, onKeyDown, tabIndex: 0, ['data-id']: id, onClick: attrs.onClick ? attrs.onClick : backClick } });
     }
-    return _jsx("div", Object.assign({}, getProps(), { children: children }));
+    const className = ['aio-popup-backdrop', `aio-popup-position-${position}`, rtl ? 'rtl' : 'ltr', firstMount ? 'not-mounted' : undefined];
+    const attrs = { ref: backdropDom, onKeyDown, tabIndex: 0, ['data-id']: id, onClick: backdropAttrs.onClick ? backdropAttrs.onClick : backClick };
+    return _jsx("div", Object.assign({}, AddToAttrs(backdropAttrs, { className, attrs }), { children: children }));
 };
 const ModalHeader = () => {
     const { removeModal } = useContext(CTX);
@@ -386,15 +376,14 @@ const ModalHeader = () => {
     if (!modal.header) {
         return null;
     }
-    let { setAttrs = () => { return {}; } } = modal;
-    let attrs = setAttrs('header') || {};
+    let { headerAttrs = {} } = modal;
     if (modal.header && modal.header.html) {
         return modal.header.html({ removeModal: removeModal, state, setState });
     }
     if (typeof modal.header !== 'object') {
         return null;
     }
-    return (_jsxs("div", Object.assign({}, AddToAttrs(attrs, { className: 'aio-popup-header' }), { children: [_jsx(ModalHeaderElement, { type: 'before' }, 'before'), _jsx(ModalHeaderElement, { type: 'title' }, 'title'), _jsx(ModalHeaderElement, { type: 'after' }, 'after'), _jsx(ModalClose, {})] })));
+    return (_jsxs("div", Object.assign({}, AddToAttrs(headerAttrs, { className: 'aio-popup-header' }), { children: [_jsx(ModalHeaderElement, { type: 'before' }, 'before'), _jsx(ModalHeaderElement, { type: 'title' }, 'title'), _jsx(ModalHeaderElement, { type: 'after' }, 'after'), _jsx(ModalClose, {})] })));
 };
 const ModalHeaderElement = ({ type }) => {
     let { modal } = useContext(POPUPCTX), { header } = modal;
@@ -428,22 +417,19 @@ const ModalClose = () => {
 };
 const ModalBody = () => {
     const { modal } = useContext(POPUPCTX);
-    let { body, setAttrs = () => { return {}; } } = modal;
-    let attrs = setAttrs('body') || {};
+    let { body, bodyAttrs = {} } = modal;
     if (!body || body === null) {
         return null;
     }
-    return (_jsx("div", Object.assign({}, AddToAttrs(attrs, { className: 'aio-popup-body aio-popup-scroll' }), { children: body })));
+    return (_jsx("div", Object.assign({}, AddToAttrs(bodyAttrs, { className: 'aio-popup-body aio-popup-scroll' }), { children: body })));
 };
 const ModalFooter = () => {
     const { modal } = useContext(POPUPCTX);
-    let { setAttrs = () => { return {}; }, footer } = modal;
+    let { footerAttrs = {}, footer } = modal;
     if (!footer) {
         return null;
     }
-    let Attrs = setAttrs('footer') || {};
-    const attrs = AddToAttrs(Attrs, { className: 'aio-popup-footer' });
-    return _jsx("div", Object.assign({}, attrs, { children: footer }));
+    return _jsx("div", Object.assign({}, AddToAttrs(footerAttrs, { className: 'aio-popup-footer' }), { children: footer }));
 };
 const SBCTX = createContext({});
 const SnackebarItem = (props) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aio-popup",
-  "version": "6.6.2",
+  "version": "7.0.0",
   "description": "handle all types of popup and modals in react",
   "main": "index.js",
   "scripts": {
@@ -12,8 +12,7 @@
     "url": "git+https://github.com/mohammadFeiz/aio-popup.git"
   },
   "dependencies": {
-    "jquery": "^3.6.1",
-    "animejs": "^3.2.1"
+    "aio-depencencies": "latest"
   },
   "keywords": [
     "popup",