aio-popup 4.2.2 → 4.2.3

package/index.js

@@ -1,5 +1,5 @@
 import t,{Component as e,createRef as i,useEffect as o,useState as r,createContext as n,useContext as a,useRef as l,forwardRef as d,useImperativeHandle as s,createElement as p}from"react";import*as c from"react-dom/server";import{Icon as h}from"@mdi/react";import{mdiClose as u}from"@mdi/js";import $ from"jquery";import"./index.css";import{AddToAttrs as _}from"aio-utils";import m from"animejs/lib/anime.es.js";import{jsx as f,Fragment as g,jsxs as v}from"react/jsx-runtime";function _defineProperty(t,e,i){return(e=_toPropertyKey(e))in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function _toPropertyKey(t){var e=_toPrimitive(t,"string");return"symbol"==typeof e?e:e+""}function _toPrimitive(t,e){if("object"!=typeof t||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var o=i.call(t,e||"default");if("object"!=typeof o)return o;throw TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}export default class b{constructor(t){_defineProperty(this,"rtl",void 0),_defineProperty(this,"render",void 0),_defineProperty(this,"addModal",void 0),_defineProperty(this,"addHighlight",void 0),_defineProperty(this,"removeHighlight",void 0),_defineProperty(this,"addAlert",void 0),_defineProperty(this,"removeModal",void 0),_defineProperty(this,"addSnackebar",void 0),_defineProperty(this,"getModals",void 0),_defineProperty(this,"addConfirm",void 0),_defineProperty(this,"addPrompt",void 0),_defineProperty(this,"popupId",void 0),_defineProperty(this,"popupsRef",void 0),_defineProperty(this,"highlightRef",void 0);let{rtl:e=!1}=t||{};this.rtl=e,this.addSnackebar=()=>{},this.popupsRef=i(),this.highlightRef=i(),this.getModals=()=>{let t=this.popupsRef.current;return null===t?[]:t.getModals()||[]},this.addModal=t=>{let e=this.popupsRef.current;null!==e&&e.addModal(t)},this.addHighlight=t=>{let e=this.highlightRef.current;null!==e&&e.addHighlight(t)},this.removeModal=t=>{let e=this.popupsRef.current;null!==e&&e.removeModal(t)},this.removeHighlight=()=>{let t=this.highlightRef.current;null!==t&&t.removeHighlight()},this.render=()=>{let t={rtl:e,getActions:({add:t})=>this.addSnackebar=t};return v(g,{children:[f(Popups,{rtl:e,ref:this.popupsRef}),f(Snackebar,{...t}),f(Highlight,{ref:this.highlightRef})]})},this.addAlert=t=>Alert(t),this.addConfirm=t=>{let{title:e,subtitle:i,text:o,submitText:r="Yes",canselText:n="No",onSubmit:a,onCansel:l=()=>{},setAttrs:d=()=>({})}=t,s={position:"center",setAttrs(t){let e=d(t);return"modal"===t?_(e,{className:"aio-popup-confirm"}):e},header:{title:e,subtitle:i},body:()=>o,footer:()=>v(g,{children:[f("button",{type:"button",onClick:()=>{l(),this.removeModal()},children:n}),f("button",{type:"button",className:"active",onClick:async()=>{if(a)!1!==await a()&&this.removeModal()},children:r})]})};this.addModal(s)},this.addPrompt=t=>{let{title:e,subtitle:i,text:o,submitText:r="Submit",canselText:n="close",onSubmit:a,onCansel:l=()=>{},setAttrs:d=()=>({})}=t,s={position:"center",setAttrs(t){let e=d(t);return"modal"===t?_(e,{className:"aio-popup-prompt"}):e},state:{temp:""},header:{title:e,subtitle:i},body:({state:t,setState:e})=>f("textarea",{placeholder:o,value:t.temp,onChange(t){e&&e({temp:t.target.value})}}),footer:({state:t,setState:e})=>v(g,{children:[f("button",{type:"button",onClick:()=>{l(),this.removeModal()},children:n}),f("button",{type:"button",className:"active",onClick:async()=>{if(a)!1!==await a(t.temp)?this.removeModal():e({temp:""})},disabled:!t.temp,children:r})]})};this.addModal(s)}}};let Popups=d((t,e)=>{let[i,o]=r([]),n=l(i);n.current=i;let{rtl:a}=t;function d(t){void 0===t.id&&(t.id="popup"+Math.round(1e6*Math.random()));let e=t;o(i=>[...i.filter(({id:e})=>e!==t.id),e])}async function p(t="last"){if("all"===t){o([]);return}if(!n.current.length)return;"last"===t&&(t=n.current[n.current.length-1].id);let e=n.current.find(e=>e.id===t);e&&($(`[data-id=${t}]`).addClass("not-mounted"),setTimeout(()=>{"function"==typeof e.onClose&&e.onClose(),o(e=>e.filter(e=>e.id!==t))},300))}function c(){return n.current.map((t,e)=>f(Popup,{modal:t,rtl:a,isLast:e===n.current.length-1,onClose:()=>p(t.id)},t.id))}s(e,()=>({addModal:d,removeModal:p,getModals:()=>n.current}));let h=c();return h.length?f(g,{children:h}):null}),CTX=n({});function Popup(t){let{modal:e,rtl:n,onClose:a,isLast:d}=t,{setAttrs:s=()=>({}),id:p,position:c="fullscreen",body:h,getTarget:u,maxHeight:m,fixStyle:g=t=>t,fitTo:b}=e,[y]=r({dom:i(),backdropDom:i(),dui:void 0,isDown:!1}),[k,C]=r({}),[L,w]=r(e.state),M=s("modal")||{},N=s("backdrop")||{},x=l(!1);async function H(){a()}function P(t){if(!y.dui)return;let e=$(t.target);"popover"===c&&e.attr("data-id")!==y.dui&&!e.parents(`[data-id=${y.dui}]`).length&&H()}o(()=>()=>{$(window).unbind("click",P)}),o(()=>{let t="popover"===c?function t(){if(!u)return{};let i=u();if(!i||!i.length)return{};let o={dom:$(y.dom.current),target:i,fitHorizontal:e.fitHorizontal,fixStyle:g,pageSelector:e.pageSelector,limitTo:e.limitTo,fitTo:b,attrs:M,rtl:n},r={...Align(o),position:"absolute"};return m&&(r.maxHeight=m),r}():{};if(console.log("updatedStyle.top",t.top),C(t),u){y.dui="a"+Math.round(1e7*Math.random());u().attr("data-id",y.dui)}setTimeout(()=>{let t=$(y.dom.current);t.removeClass("not-mounted"),$(y.backdropDom.current).removeClass("not-mounted"),t.focus()},0),$(window).unbind("click",P),$(window).bind("click",P)},[]);function S(t){if(d)27===t.keyCode&&a()}function A(){setTimeout(()=>y.isDown=!1,0)}let T,B,R,I;return f(CTX.Provider,{value:{close:H,state:L,setState:w},children:f("div",{...(T="aio-popup-backdrop",T+=` aio-popup-position-${c}`,T+=n?" rtl":" ltr",x&&(T+=" not-mounted"),_(N,{className:T,attrs:{ref:y.backdropDom,onKeyDown:S,tabIndex:0,"data-id":p,onClick:N.onClick?N.onClick:function t(e){if(!y.isDown){e.stopPropagation();$(e.target).hasClass("aio-popup-backdrop")&&H()}}}})),children:v("div",{...(B={...k,...M.style},R="ontouchstart"in document.documentElement?"onTouchStart":"onMouseDown",{...M,ref:y.dom,"data-id":e.id,tabIndex:0,onKeyDown:S,[R]:function t(e){$(window).unbind("mouseup",A),$(window).bind("mouseup",A),y.isDown=!0},className:(I="aio-popup",I+=n?" rtl":" ltr",x&&(I+=" not-mounted"),M.className&&(I+=" "+M.className),I),style:{...B}}),children:[!!e.header&&f(ModalHeader,{modal:e}),f(ModalBody,{modal:e}),!!e.footer&&f("div",{..._(s("footer"),{className:"aio-popup-footer"}),children:e.footer({state:L,setState:w,close:H})})]})})})}let ModalHeader=t=>{let e=a(CTX),{modal:i}=t,{state:o,setState:r}=e,{setAttrs:n=()=>({})}=i,l=n("header")||{};if("function"==typeof i.header)return i.header({close:e.close,state:o,setState:r});if("object"!=typeof i.header)return null;let d="aio-popup-header",{title:s,subtitle:p,onClose:c,before:$,after:m}=i.header;function g(t){t.stopPropagation(),t.preventDefault(),"function"==typeof c?c({state:o,setState:r}):e.close()}function b(){return p?v("div",{className:`${d}-text`,children:[f("div",{className:`${d}-title`,children:s}),f("div",{className:`${d}-subtitle`,children:p})]}):f("div",{className:`${d}-title`,style:{display:"flex",alignItems:"center",flex:1},children:s})}return v("div",{..._(l,{className:d}),children:[void 0!==$&&f("div",{className:`${d}-before`,onClick:t=>g(t),children:$}),!!s&&b(),void 0!==m&&f("div",{className:`${d}-after`,onClick:t=>g(t),children:m}),!1!==c&&f("div",{className:`${d}-close-button`,onClick:t=>g(t),children:f(h,{path:u,size:.8})})]})},ModalBody=t=>{let{state:e,setState:i,close:o}=a(CTX),{modal:r}=t,{body:n=()=>null,setAttrs:l=()=>({})}=r,d=l("body")||{},s=n({close:o,state:e,setState:i});return s&&null!==s?f("div",{..._(d,{className:"aio-popup-body aio-popup-scroll"}),children:s}):null};function Alert(t){let{icon:e,type:i="",text:o="",subtext:r="",time:n=10,className:a,closeText:l="بستن",position:d="center",onClose:s}=t,p={id:"",time:0,getId:()=>"aa"+Math.round(1e8*Math.random()),getBarRender:()=>`<div class='aio-popup-time-bar' style="width:${p.time}%;"></div>`,updateBarRender(){$(`.aio-popup-alert-container.${p.id} .aio-popup-time`).html(p.getBarRender())},getRender:()=>`
-      <div class='aio-popup-alert-container not-mounted ${p.id} aio-popup-alert-container-${d}'>
+      <div class='aio-popup-alert-container not-mounted ${p.id} aio-popup-alert-container-${d}${a?` ${a}`:""}'>
         <div class='aio-popup-alert aio-popup-alert-${i}'>
           <div class='aio-popup-alert-header'>${p.getIcon()}</div>
           <div class='aio-popup-alert-body aio-popup-scroll'>

package/package.json

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