aio-popup 5.1.0 → 6.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.css +2 -3
- package/index.d.ts +6 -17
- package/index.js +21 -21
- package/package.json +1 -1
package/index.css
CHANGED
|
@@ -353,7 +353,7 @@
|
|
|
353
353
|
overflow-y: auto;
|
|
354
354
|
}
|
|
355
355
|
|
|
356
|
-
.aio-popup-alert-
|
|
356
|
+
.aio-popup-alert-title {
|
|
357
357
|
display: flex;
|
|
358
358
|
align-items: center;
|
|
359
359
|
justify-content: center;
|
|
@@ -362,9 +362,8 @@
|
|
|
362
362
|
margin-bottom: 12px;
|
|
363
363
|
}
|
|
364
364
|
|
|
365
|
-
.aio-popup-alert-
|
|
365
|
+
.aio-popup-alert-text {
|
|
366
366
|
font-size: 12px;
|
|
367
|
-
|
|
368
367
|
}
|
|
369
368
|
|
|
370
369
|
.aio-popup-alert-footer {
|
package/index.d.ts
CHANGED
|
@@ -16,16 +16,6 @@ export type AP_header = ((p: {
|
|
|
16
16
|
setState: (state: any) => void;
|
|
17
17
|
}) => void);
|
|
18
18
|
};
|
|
19
|
-
export type AP_body = (p: {
|
|
20
|
-
removeModal: () => void;
|
|
21
|
-
state: any;
|
|
22
|
-
setState: (state: any) => void;
|
|
23
|
-
}) => ReactNode;
|
|
24
|
-
export type AP_footer = (p: {
|
|
25
|
-
state: any;
|
|
26
|
-
setState: (v: any) => void;
|
|
27
|
-
removeModal: () => void;
|
|
28
|
-
}) => ReactNode;
|
|
29
19
|
type AP_setAttrs = (mode: AP_attrsKey) => any;
|
|
30
20
|
export type AP_modal = {
|
|
31
21
|
getTarget?: () => any;
|
|
@@ -36,17 +26,18 @@ export type AP_modal = {
|
|
|
36
26
|
position?: AP_position;
|
|
37
27
|
header?: AP_header;
|
|
38
28
|
state?: any;
|
|
39
|
-
footer?:
|
|
40
|
-
body
|
|
29
|
+
footer?: ReactNode;
|
|
30
|
+
body: ReactNode;
|
|
41
31
|
animate?: boolean;
|
|
42
32
|
fitHorizontal?: boolean;
|
|
43
33
|
setAttrs?: AP_setAttrs;
|
|
44
34
|
};
|
|
45
35
|
export type AP_alert = {
|
|
36
|
+
align?: 'left' | 'right' | 'center';
|
|
46
37
|
icon?: false | ReactNode;
|
|
47
38
|
type: 'success' | 'error' | 'warning' | 'info';
|
|
48
|
-
|
|
49
|
-
|
|
39
|
+
title?: ReactNode;
|
|
40
|
+
text: string;
|
|
50
41
|
time?: number;
|
|
51
42
|
className?: string;
|
|
52
43
|
closeText?: string;
|
|
@@ -81,7 +72,6 @@ export type AP_highlight = {
|
|
|
81
72
|
export type AP_confirm = {
|
|
82
73
|
title?: string;
|
|
83
74
|
subtitle?: string;
|
|
84
|
-
text?: ReactNode;
|
|
85
75
|
submitText?: string;
|
|
86
76
|
canselText?: string;
|
|
87
77
|
onSubmit?: () => Promise<boolean>;
|
|
@@ -91,7 +81,6 @@ export type AP_confirm = {
|
|
|
91
81
|
export type AP_prompt = {
|
|
92
82
|
title?: string;
|
|
93
83
|
subtitle?: string;
|
|
94
|
-
text?: string;
|
|
95
84
|
submitText?: string;
|
|
96
85
|
canselText?: string;
|
|
97
86
|
onSubmit?: (text: string) => Promise<boolean>;
|
|
@@ -107,7 +96,7 @@ type AP_removeHighlight = () => void;
|
|
|
107
96
|
type AP_getModals = () => AP_modal[];
|
|
108
97
|
type AP_addConfirm = (item: AP_confirm) => void;
|
|
109
98
|
type AP_addPrompt = (item: AP_prompt) => void;
|
|
110
|
-
type AP_render = () => ReactNode;
|
|
99
|
+
type AP_render = (caller?: string) => ReactNode;
|
|
111
100
|
export type AP_usePopup = {
|
|
112
101
|
addAlert: AP_addAlert;
|
|
113
102
|
addSnackebar: AP_addSnackebar;
|
package/index.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import{createRef as t,useEffect as e,useState as o,createContext as i,useContext as r,useRef as a}from"react";import*as n from"react-dom/server";import l from"react-dom";import d from"animejs/lib/anime.es.js";import s from"jquery";import"./index.css";import{jsx as p}from"react/jsx-runtime";import{Fragment as c}from"react/jsx-runtime";import{jsxs as u}from"react/jsx-runtime";function _defineProperty(t,e,o){return(e=_toPropertyKey(e))in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function _toPropertyKey(t){var e=_toPrimitive(t,"string");return"symbol"==typeof e?e:String(e)}function _toPrimitive(t,e){if("object"!=typeof t||null===t)return t;var o=t[Symbol.toPrimitive];if(void 0!==o){var i=o.call(t,e||"default");if("object"!=typeof i)return i;throw TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}let CTX=i({});function Align(t){let{modal:e,target:o,fitHorizontal:i,rtl:r,limitTo:a}=t,n=window.innerWidth,l=window.innerHeight,d={left:0,top:0,bottom:l,right:n,width:n,height:l},s=getBound(o[0]),p=getBound(e[0]);s={...s};let c;if((p={...p}).top=s.bottom,p.bottom=p.top+p.height,i)p.width=s.width,p.left=s.left,p.right=s.left+s.width;else{if(a){let u=e.parents(a);u.length&&(d=getBound(u[0]))}r?(p.right=s.right,p.left=p.right-p.width,p.left<d.left&&(p.left=d.left)):(p.left=s.left,p.right=p.left+p.width,p.right>d.right&&(p.left=d.right-p.width))}return p.bottom>d.bottom?p.height>s.top-d.top?p.top=d.bottom-p.height:p.top=s.top-p.height:p.top=s.bottom,p.height>d.height&&(p.top=d.top,p.height=d.height,c="auto"),{left:p.left,top:p.top,width:p.width,overflowY:c,maxWidth:d.width}}let CloseIcon=()=>p("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:p("path",{d:"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z",style:{fill:"currentcolor"}})});function AddToAttrs(t,e){let{style:o}=e,i,r=[...(t=t||{}).className?t.className.split(" "):[],...(e.className?Array.isArray(e.className)?e.className:e.className.split(" "):[]).filter(t=>!!t)],a=r.length?r.join(" "):void 0,n={...t.style,...o};return{...t,className:a,style:n,...e.attrs}}let usePopup=t=>{let[e,i]=o([]),r=a(e);r.current=e;let[n,d]=o([]),_=a(n);_.current=n;let[h,$]=o(),m=t=>{void 0===t.id&&(t.id="popup"+Math.round(1e6*Math.random()));let e=t;i(o=>[...o.filter(({id:e})=>e!==t.id),e])},g=async t=>{if("string"!=typeof t&&(t="last"),"all"===t){i([]);return}if(!r.current.length)return;"last"===t&&(t=r.current[r.current.length-1].id);let e=r.current.find(e=>e.id===t);e&&(s(`[data-id=${t}]`).addClass("not-mounted"),setTimeout(()=>{e&&"function"==typeof e.onClose&&e.onClose(),i(e=>e.filter(e=>e.id!==t))},300))},f=t=>{d([..._.current,{...t,id:"a"+Math.round(1e9*Math.random())}])},v=t=>{let e=_.current,o=e.find(e=>e.id===t);if(o&&!1!==o.onClose)d(e.filter((e,o)=>e.id!==t)),"function"==typeof o.onClose&&o.onClose()},b=t=>Alert(t),y=t=>$(t),C=()=>$(void 0),L=t=>{let{title:e,subtitle:o,text:i,submitText:r="Yes",canselText:a="No",onSubmit:n,onCansel:l=()=>{},setAttrs:d=()=>({})}=t,s={position:"center",setAttrs(t){let e=d(t);return"modal"===t?AddToAttrs(e,{className:"aio-popup-confirm"}):e},header:{title:e,subtitle:o},body:()=>i,footer:()=>u(c,{children:[p("button",{type:"button",onClick(){l(),g()},children:a}),p("button",{type:"button",className:"active",async onClick(){if(n)!1!==await n()&&g()},children:r})]})};m(s)},k=t=>{let{title:e,subtitle:o,text:i,submitText:r="Submit",canselText:a="close",onSubmit:n,onCansel:l=()=>{},setAttrs:d=()=>({})}=t,s={position:"center",setAttrs(t){let e=d(t);return"modal"===t?AddToAttrs(e,{className:"aio-popup-prompt"}):e},state:{temp:""},header:{title:e,subtitle:o},body:({state:t,setState:e})=>p("textarea",{placeholder:i,value:t.temp,onChange(t){e&&e({temp:t.target.value})}}),footer:({state:t,setState:e})=>u(c,{children:[p("button",{type:"button",onClick(){l(),g()},children:a}),p("button",{type:"button",className:"active",async onClick(){if(n)!1!==await n(t.temp)?g():e({temp:""})},disabled:!t.temp,children:r})]})};m(s)},M=()=>({rtl:!!t&&!!t.rtl,snackebarItems:_.current,removeSnackebar:v,removeModal:g}),S=()=>u(CTX.Provider,{value:M(),children:[r.current.map((t,e)=>p(Popup,{modal:t,isLast:e===r.current.length-1},t.id)),n.map((t,e)=>p(SnackebarItem,{item:t,index:e},t.id)),!!h&&p(Highlight,{highlight:h})]}),P=()=>l.createPortal(S(),document.body);return{addAlert:b,addSnackebar:f,removeModal:g,addModal:m,getModals:()=>r.current,addHighlight:y,removeHighlight:C,render:S,addConfirm:L,addPrompt:k,portal:P}};export default usePopup;let POPUPCTX=i({}),Popup=({modal:i,isLast:n})=>{let l=r(CTX),{setAttrs:d=()=>({}),id:c,position:_="fullscreen",getTarget:h}=i,[$]=o({dom:t(),backdropDom:t(),dui:void 0}),[m,g]=o({}),[f,v]=o(i.state),b=d("modal")||{},y=a(!1);function C(t){if(!$.dui)return;let e=s(t.target);"popover"===_&&e.attr("data-id")!==$.dui&&!e.parents(`[data-id=${$.dui}]`).length&&l.removeModal()}function L(){let t={...m,...b.style},e="ontouchstart"in document.documentElement?"onTouchStart":"onMouseDown";return{...b,ref:$.dom,"data-id":i.id,tabIndex:0,onKeyDown:M,[e]:P,className:w(),style:{...t}}}function k(){if(!h)return{};let t=h();if(!t||!t.length)return{};let e={modal:s($.dom.current),target:t,fitHorizontal:i.fitHorizontal,limitTo:i.limitTo,attrs:b,rtl:l.rtl};return{...Align(e),position:"absolute"}}function M(t){if(n)27===t.keyCode&&l.removeModal()}function S(){}function P(t){s(window).unbind("mouseup",S),s(window).bind("mouseup",S)}function w(){let t="aio-popup";return t+=l.rtl?" rtl":" ltr",y&&(t+=" not-mounted"),b.className&&(t+=" "+b.className),t}e(()=>()=>{s(window).unbind("click",C)}),e(()=>{let t="popover"===_?k():{};if(console.log("updatedStyle.top",t.top),g(t),h){$.dui="a"+Math.round(1e7*Math.random());h().attr("data-id",$.dui)}setTimeout(()=>{let t=s($.dom.current);t.removeClass("not-mounted"),s($.backdropDom.current).removeClass("not-mounted"),t.focus()},0),s(window).unbind("click",C),s(window).bind("click",C)},[]);let T=()=>({mainContext:l,modal:i,isLast:n,state:f,setState:v,onKeyDown:M});return p(POPUPCTX.Provider,{value:T(),children:p(ModalBackdrop,{content:u("div",{...L(),children:[p(ModalHeader,{}),p(ModalBody,{}),p(ModalFooter,{})]}),firstMount:!!y,ref:$.backdropDom})})},ModalBackdrop=({content:t,firstMount:e,ref:i})=>{let{mainContext:a,modal:n,onKeyDown:l}=r(POPUPCTX),{setAttrs:d=()=>({}),id:c,position:u="fullscreen"}=n,[_]=o(d("backdrop")||{});function h(t){if(t.target===t.currentTarget){t.stopPropagation();s(t.target).hasClass("aio-popup-backdrop")&&a.removeModal()}}function $(){let t="aio-popup-backdrop";return t+=` aio-popup-position-${u}`,t+=a.rtl?" rtl":" ltr",e&&(t+=" not-mounted"),AddToAttrs(_,{className:t,attrs:{ref:i,onKeyDown:l,tabIndex:0,"data-id":c,onClick:_.onClick?_.onClick:h}})}return p("div",{...$(),children:t})},ModalHeader=()=>{let{mainContext:t,modal:e,state:o,setState:i}=r(POPUPCTX);if(!e.header)return null;let{setAttrs:a=()=>({})}=e,n=a("header")||{};return"function"==typeof e.header?e.header({removeModal:t.removeModal,state:o,setState:i}):"object"!=typeof e.header?null:u("div",{...AddToAttrs(n,{className:"aio-popup-header"}),children:[p(ModalHeaderElement,{type:"before"},"before"),p(ModalHeaderElement,{type:"title"},"title"),p(ModalHeaderElement,{type:"after"},"after"),p(ModalClose,{})]})},ModalHeaderElement=({type:t})=>{let{modal:e}=r(POPUPCTX),{header:o}=e;return"function"!=typeof o&&o&&o[t]?p("div",{className:`aio-popup-header-${t}`,"data-subtitle":"title"===t?o.subtitle:void 0,children:o[t]}):null},ModalClose=()=>{let{modal:t,state:e,setState:o,mainContext:i}=r(POPUPCTX),{header:a}=t;return"function"!=typeof a&&a&&!1!==a.onClose?p("div",{className:"aio-popup-header-close",onClick(r){r.stopPropagation(),r.preventDefault(),"function"==typeof a.onClose?a.onClose({state:e,setState:o}):i.removeModal(t.id)},children:p(CloseIcon,{})}):null},ModalBody=()=>{let{mainContext:t,state:e,setState:o,modal:i}=r(POPUPCTX),{body:a=()=>null,setAttrs:n=()=>({})}=i,l=n("body")||{},d={removeModal:t.removeModal,state:e,setState:o},s=a(d);return s&&null!==s?p("div",{...AddToAttrs(l,{className:"aio-popup-body aio-popup-scroll"}),children:s}):null},ModalFooter=()=>{let{mainContext:t,modal:e,state:o,setState:i}=r(POPUPCTX),{setAttrs:a=()=>({}),footer:n}=e;if(!n)return null;let l=a("footer")||{},d=AddToAttrs(l,{className:"aio-popup-footer"});return p("div",{...d,children:n({state:o,setState:i,removeModal:t.removeModal})})},SBCTX=i({}),SnackebarItem=t=>{let i=r(CTX),{item:a}=t,{time:n=8,id:l,align:d=["right","top"]}=a;"top"!==d[1]&&"bottom"!==d[1]&&(d[1]="top"),"left"!==d[0]&&"right"!==d[0]&&"center"!==d[0]&&(d[0]="right");let[s,c]=o(!1);function u(){c(!1),setTimeout(()=>i.removeSnackebar(l),200)}e(()=>{setTimeout(()=>c(!0),0),setTimeout(()=>u(),1e3*n)},[]);let _=t=>"error"===t||"warning"===t||"info"===t?p(InfoSvg,{}):p(SuccessSvg,{}),h=()=>({mainContext:i,remove:u,item:{...t.item,time:n,align:d},index:t.index,mounted:s,getSvg:_});return p(SBCTX.Provider,{value:h(),children:p(SnackebarContainer,{})})},SnackebarContainer=()=>{let{mainContext:t,mounted:e,index:o,item:i,remove:a}=r(SBCTX),{rtl:n}=t,{onClose:l,align:d=["right","top"]}=i;function c(t){let e=s(".aio-popup-snackebar-item-container"),o={top:12,bottom:12};for(let i=0;i<t;i++){let r=e.eq(i),a=r.height()+6,n=r.attr("data-vertical-align");o[n]+=a}return{["top"===d[1]?"top":"bottom"]:o[d[1]]}}let u="aio-popup-snackebar-item-container";u+=` aio-popup-snackebar-item-container-horizontal-align-${d[0]}`,e&&(u+=" mounted"),n&&(u+=" rtl");let _=c(o),h={"data-vertical-align":d[1],className:u,style:_,onClick:!1===l?void 0:()=>a()};return p("div",{...h,children:p(SnackebarCard,{})})},SnackebarCard=()=>{let{item:t}=r(SBCTX),{type:e,attrs:o={}}=t,i="aio-popup-snackebar-item";return i+=` aio-popup-snackebar-item-${e}`,o.className&&(i+=` ${o.className}`),u("div",{...{...o,className:i,style:o.style},children:[p(SnackebarIcon,{}),p(SnackebarText,{}),p(SnackebarAction,{}),p(SnackebarBar,{})]})},SnackebarIcon=()=>{let{getSvg:t,item:e}=r(SBCTX);return p("div",{className:"aio-popup-snackebar-item-icon",children:e.icon?e.icon:t(e.type)})},SnackebarText=()=>{let{item:t}=r(SBCTX);return u("div",{className:"aio-popup-snackebar-item-text",children:[p("div",{className:"aio-popup-snackebar-item-uptext",children:t.text}),!!t.subtext&&p("div",{className:"aio-popup-snackebar-item-subtext",children:t.subtext})]})},SnackebarAction=()=>{let{item:t,remove:e}=r(SBCTX),{action:o}=t;return o&&o.text?p("button",{className:"aio-popup-snackebar-item-action",onClick(t){t.stopPropagation(),o&&o.onClick(),e()},children:o.text}):null},SnackebarBar=()=>{let{item:t}=r(SBCTX);return p("div",{className:"aio-popup-snackebar-bar",style:{transition:`${t.time||8}s linear`}})};export function Alert(t){let{icon:e,type:o="",text:i="",subtext:r="",time:a=10,className:l,closeText:d="Close",onClose:p}=t,c={id:"",time:0,getId:()=>"aa"+Math.round(1e8*Math.random()),getBarRender:()=>`<div class='aio-popup-time-bar' style="width:${c.time}%;"></div>`,updateBarRender(){s(`.aio-popup-alert-container.${c.id} .aio-popup-time`).html(c.getBarRender())},getRender:()=>`
|
|
2
|
-
<div class='aio-popup-alert-container not-mounted ${
|
|
3
|
-
<div class='aio-popup-alert aio-popup-alert-${
|
|
4
|
-
<div class='aio-popup-alert-header'>${
|
|
5
|
-
<div class='aio-popup-alert-body aio-popup-scroll'>
|
|
6
|
-
<div class='aio-popup-alert-
|
|
7
|
-
<div class='aio-popup-alert-
|
|
8
|
-
</div>
|
|
9
|
-
<div class='aio-popup-alert-footer'>
|
|
10
|
-
<button class='aio-popup-alert-close ${
|
|
11
|
-
</div>
|
|
12
|
-
<div class='aio-popup-time'></div>
|
|
13
|
-
</div>
|
|
14
|
-
</div>
|
|
15
|
-
`,close(){
|
|
16
|
-
<div class="aio-loading-container-0">
|
|
17
|
-
<div class="aio-loading-0">
|
|
18
|
-
${[,,,,,].fill(0).map((t,e)=>this.getLoaderItem_0(`0.${e}`)).join(" ")}
|
|
19
|
-
</div>
|
|
20
|
-
</div>
|
|
21
|
-
|
|
1
|
+
var __awaiter=this&&this.__awaiter||function(t,e,i,o){return new(i||(i=Promise))(function(r,n){function a(t){try{s(o.next(t))}catch(e){n(e)}}function l(t){try{s(o.throw(t))}catch(e){n(e)}}function s(t){var e;t.done?r(t.value):((e=t.value)instanceof i?e:new i(function(t){t(e)})).then(a,l)}s((o=o.apply(t,e||[])).next())})};import{jsx as t,Fragment as e,jsxs as i}from"react/jsx-runtime";import{createRef as o,useEffect as r,useState as n,createContext as a,useContext as l,useRef as s}from"react";import*as d from"react-dom/server";import c from"react-dom";import p from"animejs/lib/anime.es.js";import u from"jquery";import"./index.css";let CTX=a({});function Align(t){let{modal:e,target:i,fitHorizontal:o,rtl:r,limitTo:n}=t,a=window.innerWidth,l=window.innerHeight,s={left:0,top:0,bottom:l,right:a,width:a,height:l},d=getBound(i[0]),c=getBound(e[0]);d=Object.assign({},d);let p;if((c=Object.assign({},c)).top=d.bottom,c.bottom=c.top+c.height,o)c.width=d.width,c.left=d.left,c.right=d.left+d.width;else{if(n){let u=e.parents(n);u.length&&(s=getBound(u[0]))}r?(c.right=d.right,c.left=c.right-c.width,c.left<s.left&&(c.left=s.left)):(c.left=d.left,c.right=c.left+c.width,c.right>s.right&&(c.left=s.right-c.width))}return c.bottom>s.bottom?c.height>d.top-s.top?c.top=s.bottom-c.height:c.top=d.top-c.height:c.top=d.bottom,c.height>s.height&&(c.top=s.top,c.height=s.height,p="auto"),{left:c.left,top:c.top,width:c.width,overflowY:p,maxWidth:s.width}}let CloseIcon=()=>t("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:t("path",{d:"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z",style:{fill:"currentcolor"}})});function AddToAttrs(t,e){let{style:i}=e,o,r=[...(t=t||{}).className?t.className.split(" "):[],...(e.className?Array.isArray(e.className)?e.className:e.className.split(" "):[]).filter(t=>!!t)],n=r.length?r.join(" "):void 0,a=Object.assign(Object.assign({},t.style),i);return Object.assign(Object.assign(Object.assign({},t),{className:n,style:a}),e.attrs)}let usePopup=o=>{let[r,a]=n([]),l=s({}),d=s(r);d.current=r;let[p,_]=n([]),h=s(p);h.current=p;let[$,g]=n(),m=t=>{void 0===t.id&&(t.id="popup"+Math.round(1e6*Math.random()));let e=t;a(i=>[...i.filter(({id:e})=>e!==t.id),e])},f=t=>__awaiter(void 0,void 0,void 0,function*(){if("string"!=typeof t&&(t="last"),"all"===t){a([]);return}if(!d.current.length)return;"last"===t&&(t=d.current[d.current.length-1].id);let e=d.current.find(e=>e.id===t);e&&(u(`[data-id=${t}]`).addClass("not-mounted"),setTimeout(()=>{e&&"function"==typeof e.onClose&&e.onClose(),a(e=>e.filter(e=>e.id!==t))},300))}),v=t=>{_([...h.current,Object.assign(Object.assign({},t),{id:"a"+Math.round(1e9*Math.random())})])},b=t=>{let e=h.current,i=e.find(e=>e.id===t);if(i&&!1!==i.onClose)_(e.filter((e,i)=>e.id!==t)),"function"==typeof i.onClose&&i.onClose()},C=t=>Alert(t),y=t=>g(t),k=()=>g(void 0),L=o=>{let{title:r,subtitle:n,submitText:a="Yes",canselText:l="No",onSubmit:s,onCansel:d=()=>{},setAttrs:c=()=>({})}=o,p={position:"center",setAttrs(t){let e=c(t);return"modal"===t?AddToAttrs(e,{className:"aio-popup-confirm"}):e},header:{title:r,subtitle:n},body:t(e,{children:"text"}),footer:i(e,{children:[t("button",{type:"button",onClick(){d(),f()},children:l}),t("button",{type:"button",className:"active",onClick:()=>__awaiter(void 0,void 0,void 0,function*(){if(s)!1!==(yield s())&&f()}),children:a})]})};m(p)},w=o=>{let r="a"+Math.round(1e5*Math.random()),{title:n,subtitle:a,submitText:s="Submit",canselText:d="close",onSubmit:c,onCansel:p=()=>{},setAttrs:u=()=>({})}=o,_={position:"center",setAttrs(t){let e=u(t);return"modal"===t?AddToAttrs(e,{className:"aio-popup-prompt"}):e},header:{title:n,subtitle:a},body:t(Prompt,{change:t=>l.current=Object.assign(Object.assign({},l.current),{[r]:t})}),footer:i(e,{children:[t("button",{type:"button",onClick(){p(),f()},children:d}),t("button",{type:"button",className:"active",onClick:()=>__awaiter(void 0,void 0,void 0,function*(){if(!c)return;let t=l.current[r];if(!1!==(yield c(t)))f();else{let e={};for(let i in l.current)i!==r&&(e[i]=l.current[i]);l.current=e}}),disabled:!l.current[r],children:s})]})};m(_)},S=()=>({rtl:!!o&&!!o.rtl,snackebarItems:h.current,removeSnackebar:b,removeModal:f}),T=e=>i(CTX.Provider,{value:S(),children:[d.current.map((i,o)=>t(Popup,{modal:i,isLast:o===d.current.length-1,renderCaller:e},i.id)),p.map((e,i)=>t(SnackebarItem,{item:e,index:i},e.id)),!!$&&t(Highlight,{highlight:$})]}),M=()=>c.createPortal(T(),document.body);return{addAlert:C,addSnackebar:v,removeModal:f,addModal:m,getModals:()=>d.current,addHighlight:y,removeHighlight:k,render:T,addConfirm:L,addPrompt:w,portal:M}};export default usePopup;let Prompt=({change:e})=>{let[i,o]=n("");return t("textarea",{placeholder:i,value:i,onChange(t){let i=t.target.value;o(i),e(i)}})},POPUPCTX=a({}),Popup=({modal:e,isLast:a,renderCaller:d})=>{let c=l(CTX),{setAttrs:p=()=>({}),id:_,position:h="fullscreen",getTarget:$}=e,[g]=n({dom:o(),backdropDom:o(),dui:void 0}),[m,f]=n({}),v=s(!1),[b,C]=n(e.state),y=p("modal")||{},k=s(!1);function L(t){if(!g.dui)return;let e=u(t.target);"popover"===h&&e.attr("data-id")!==g.dui&&!e.parents(`[data-id=${g.dui}]`).length&&c.removeModal()}function w(){let t=Object.assign(Object.assign({},m),y.style),i="ontouchstart"in document.documentElement?"onTouchStart":"onMouseDown";return Object.assign(Object.assign({},y),{ref:g.dom,"data-id":e.id,tabIndex:0,onKeyDown:T,[i]:x,className:B(),style:Object.assign({},t),onClick(t){t.stopPropagation()}})}function S(){if(!$)return{};let t=$();if(!t||!t.length)return{};let i={modal:u(g.dom.current),target:t,fitHorizontal:e.fitHorizontal,limitTo:e.limitTo,attrs:y,rtl:c.rtl};return Object.assign(Object.assign({},Align(i)),{position:"absolute"})}function T(t){if(a)27===t.keyCode&&c.removeModal()}function M(){setTimeout(()=>v.current=!1,0)}function x(t){v.current=!0,u(window).unbind("mouseup",M),u(window).bind("mouseup",M)}function B(){let t="aio-popup";return t+=c.rtl?" rtl":" ltr",k&&(t+=" not-mounted"),y.className&&(t+=" "+y.className),t}r(()=>()=>{u(window).unbind("click",L)}),r(()=>{if("popover"===h&&f(S()),$){g.dui="a"+Math.round(1e7*Math.random());$().attr("data-id",g.dui)}setTimeout(()=>{let t=u(g.dom.current);t.removeClass("not-mounted"),u(g.backdropDom.current).removeClass("not-mounted"),t.focus()},0),u(window).unbind("click",L),u(window).bind("click",L)},[]);let N=()=>({modal:e,isLast:a,state:b,setState:C,onKeyDown:T});return t(POPUPCTX.Provider,{value:N(),children:t(ModalBackdrop,{firstMount:!!k,backdropDom:g.backdropDom,isModalMouseDown:()=>v.current,children:i("div",Object.assign({},w(),{children:[t(ModalHeader,{}),t(ModalBody,{},e.id),t(ModalFooter,{})]}),e.id)},e.id)})},ModalBackdrop=({children:e,firstMount:i,backdropDom:o,isModalMouseDown:r})=>{let{removeModal:a,rtl:s}=l(CTX),{modal:d,onKeyDown:c}=l(POPUPCTX),{setAttrs:p=()=>({}),id:_,position:h="fullscreen"}=d,[$]=n(p("backdrop")||{});function g(t){if(!r()&&t.target===t.currentTarget)u(t.target).hasClass("aio-popup-backdrop")&&a()}function m(){let t="aio-popup-backdrop";return t+=` aio-popup-position-${h}`,t+=s?" rtl":" ltr",i&&(t+=" not-mounted"),AddToAttrs($,{className:t,attrs:{ref:o,onKeyDown:c,tabIndex:0,"data-id":_,onClick:$.onClick?$.onClick:g}})}return t("div",Object.assign({},m(),{children:e}))},ModalHeader=()=>{let{removeModal:e}=l(CTX),{modal:o,state:r,setState:n}=l(POPUPCTX);if(!o.header)return null;let{setAttrs:a=()=>({})}=o,s=a("header")||{};return"function"==typeof o.header?o.header({removeModal:e,state:r,setState:n}):"object"!=typeof o.header?null:i("div",Object.assign({},AddToAttrs(s,{className:"aio-popup-header"}),{children:[t(ModalHeaderElement,{type:"before"},"before"),t(ModalHeaderElement,{type:"title"},"title"),t(ModalHeaderElement,{type:"after"},"after"),t(ModalClose,{})]}))},ModalHeaderElement=({type:e})=>{let{modal:i}=l(POPUPCTX),{header:o}=i;return"function"!=typeof o&&o&&o[e]?t("div",{className:`aio-popup-header-${e}`,"data-subtitle":"title"===e?o.subtitle:void 0,children:o[e]}):null},ModalClose=()=>{let{removeModal:e}=l(CTX),{modal:i,state:o,setState:r}=l(POPUPCTX),{header:n}=i;return"function"!=typeof n&&n&&!1!==n.onClose?t("div",{className:"aio-popup-header-close",onClick(t){t.stopPropagation(),t.preventDefault(),"function"==typeof n.onClose?n.onClose({state:o,setState:r}):e(i.id)},children:t(CloseIcon,{})}):null},ModalBody=()=>{let{modal:e}=l(POPUPCTX),{body:i,setAttrs:o=()=>({})}=e,r=o("body")||{};return i&&null!==i?t("div",Object.assign({},AddToAttrs(r,{className:"aio-popup-body aio-popup-scroll"}),{children:i})):null},ModalFooter=()=>{let{modal:e}=l(POPUPCTX),{setAttrs:i=()=>({}),footer:o}=e;if(!o)return null;let r=i("footer")||{},n=AddToAttrs(r,{className:"aio-popup-footer"});return t("div",Object.assign({},n,{children:o}))},SBCTX=a({}),SnackebarItem=e=>{let i=l(CTX),{item:o}=e,{time:a=8,id:s,align:d=["right","top"]}=o;"top"!==d[1]&&"bottom"!==d[1]&&(d[1]="top"),"left"!==d[0]&&"right"!==d[0]&&"center"!==d[0]&&(d[0]="right");let[c,p]=n(!1);function u(){p(!1),setTimeout(()=>i.removeSnackebar(s),200)}r(()=>{setTimeout(()=>p(!0),0),setTimeout(()=>u(),1e3*a)},[]);let _=e=>"error"===e||"warning"===e||"info"===e?t(InfoSvg,{}):t(SuccessSvg,{}),h=()=>({mainContext:i,remove:u,item:Object.assign(Object.assign({},e.item),{time:a,align:d}),index:e.index,mounted:c,getSvg:_});return t(SBCTX.Provider,{value:h(),children:t(SnackebarContainer,{})})},SnackebarContainer=()=>{let{mainContext:e,mounted:i,index:o,item:r,remove:n}=l(SBCTX),{rtl:a}=e,{onClose:s,align:d=["right","top"]}=r;function c(t){let e=u(".aio-popup-snackebar-item-container"),i={top:12,bottom:12};for(let o=0;o<t;o++){let r=e.eq(o),n=r.height()+6,a=r.attr("data-vertical-align");i[a]+=n}return{["top"===d[1]?"top":"bottom"]:i[d[1]]}}let p="aio-popup-snackebar-item-container";p+=` aio-popup-snackebar-item-container-horizontal-align-${d[0]}`,i&&(p+=" mounted"),a&&(p+=" rtl");let _=c(o),h={"data-vertical-align":d[1],className:p,style:_,onClick:!1===s?void 0:()=>n()};return t("div",Object.assign({},h,{children:t(SnackebarCard,{})}))},SnackebarCard=()=>{let{item:e}=l(SBCTX),{type:o,attrs:r={}}=e,n="aio-popup-snackebar-item";return n+=` aio-popup-snackebar-item-${o}`,r.className&&(n+=` ${r.className}`),i("div",Object.assign({},Object.assign(Object.assign({},r),{className:n,style:r.style}),{children:[t(SnackebarIcon,{}),t(SnackebarText,{}),t(SnackebarAction,{}),t(SnackebarBar,{})]}))},SnackebarIcon=()=>{let{getSvg:e,item:i}=l(SBCTX);return t("div",{className:"aio-popup-snackebar-item-icon",children:i.icon?i.icon:e(i.type)})},SnackebarText=()=>{let{item:e}=l(SBCTX);return i("div",{className:"aio-popup-snackebar-item-text",children:[t("div",{className:"aio-popup-snackebar-item-uptext",children:e.text}),!!e.subtext&&t("div",{className:"aio-popup-snackebar-item-subtext",children:e.subtext})]})},SnackebarAction=()=>{let{item:e,remove:i}=l(SBCTX),{action:o}=e;return o&&o.text?t("button",Object.assign({},{className:"aio-popup-snackebar-item-action",onClick(t){t.stopPropagation(),o&&o.onClick(),i()}},{children:o.text})):null},SnackebarBar=()=>{let{item:e}=l(SBCTX);return t("div",{className:"aio-popup-snackebar-bar",style:{transition:`${e.time||8}s linear`}})};export function Alert(t){let{icon:e,type:i="",title:o="",text:r="",time:n=10,className:a,closeText:l="Close",onClose:s,align:c="left"}=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(){u(`.aio-popup-alert-container.${p.id} .aio-popup-time`).html(p.getBarRender())},getRender:()=>`
|
|
2
|
+
<div class='aio-popup-alert-container not-mounted ${p.id} aio-popup-alert-container-center${a?` ${a}`:""}'>
|
|
3
|
+
<div class='aio-popup-alert aio-popup-alert-${i}'>
|
|
4
|
+
<div class='aio-popup-alert-header'>${p.getIcon()}</div>
|
|
5
|
+
<div class='aio-popup-alert-body aio-popup-scroll'>
|
|
6
|
+
<div class='aio-popup-alert-title'>${d.renderToStaticMarkup(o)}</div>
|
|
7
|
+
<div class='aio-popup-alert-text' style="text-align:${c}">${r}</div>
|
|
8
|
+
</div>
|
|
9
|
+
<div class='aio-popup-alert-footer'>
|
|
10
|
+
<button class='aio-popup-alert-close ${p.id}'>${l}</button>
|
|
11
|
+
</div>
|
|
12
|
+
<div class='aio-popup-time'></div>
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
`,close(){p.toggleClass(!1),setTimeout(()=>{"function"==typeof s&&s(),!1!==s&&u("."+p.id).remove()},200)},getIcon:()=>!1===e?"":e||({error:'<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg>',warning:'<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"></path></svg>',info:'<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"></path></svg>',success:'<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"></path></svg>'})[i]||"",startTimer(){setTimeout(()=>{if(p.time>=100){p.time=100,p.close();return}p.time+=2,p.updateBarRender(),p.startTimer()},n/50*1e3)},toggleClass(t){let e=u(`.${p.id}`);t?setTimeout(()=>e.removeClass("not-mounted"),0):e.addClass("not-mounted")},render(){u("body").append(p.getRender()),u("button."+p.id).off("click",p.close),u("button."+p.id).on("click",p.close),p.toggleClass(!0)}};p.id=p.getId(),p.render(),n&&p.startTimer()}let Highlight=({highlight:o})=>{let[a,l]=n({Left:0,Top:0,Width:0,Height:0,TopSpace:0,BottomSpace:0}),d=s(a);function c(e){return t("svg",Object.assign({version:"1.1",id:"Layer_1",xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",viewBox:"0 0 512 512"},e,{children:i("g",{children:[t("path",{d:"M242.1,45.2c7.7-7.7,20.2-7.7,27.8-0.1l0.1,0.1l236.3,236.3c7.7,7.7,7.7,20.2,0,27.9c-7.7,7.7-20.2,7.7-27.9,0\r\n L256,86.9L33.7,309.3c-7.7,7.7-20.2,7.7-27.9,0c-7.7-7.7-7.7-20.2,0-27.9L242.1,45.2z"}),t("path",{d:"M242.1,202.7c7.7-7.7,20.2-7.7,27.8-0.1l0.1,0.1L506.2,439c7.7,7.7,7.7,20.2,0,27.9c-7.7,7.7-20.2,7.7-27.9,0\r\n L256,244.5L33.7,466.9c-7.7,7.7-20.2,7.7-27.9,0c-7.7-7.7-7.7-20.2,0-27.9L242.1,202.7z"})]})}))}function u(e,i,o){return t("div",{className:"aio-popup-highlight-arrow",children:c({width:24,height:24,style:{position:"absolute",height:24,width:24,left:i+o/2-12},className:`aio-popup-highlight-arrow-${e}`})})}function _(r){if(!o.html)return"";let n,a=o.html||"",l=t("div",{className:"aio-popup-highlight-space"}),s=t("div",{className:"aio-popup-highlight-html",children:a}),c=u(r,d.current.Left,d.current.Width);return n="top"===r?i(e,{children:[l,s,c]}):i(e,{children:[c,s,l]}),t("div",{className:"aio-popup-highlight-html-container",children:n})}function h(){!o.mouseAccess&&o.onClick&&o.onClick()}function $(e){let i="",o=0,r="aio-popup-highlight-mask",n=d.current;return"top"===e?(o=n.Top,n.TopSpace>n.BottomSpace&&(i=_("top"))):"bottom"===e?(r+=" aio-popup-highlight-mask-flex",n.TopSpace<=n.BottomSpace&&(i=_("bottom"))):"left"===e?o=n.Left:r+=" aio-popup-highlight-mask-flex",t("div",{className:r,style:{["top"===e||"bottom"===e?"height":"width"]:o},onClick:()=>h(),children:i})}function g(){return t("div",{style:{width:a.Width},className:"aio-popup-highlight-focus-container",onClick:h,children:t("div",{className:"aio-popup-highlight-focus"})})}function m(){return i("div",{className:"aio-popup-highlight-main",style:{height:a.Height},children:[$("left"),g(),$("right")]})}function f(){return{pointerEvents:o.mouseAccess?"none":"all"}}d.current=a,r(()=>{setTimeout(()=>{try{let{dom:t,duration:e=1200}=o;t[0].scrollIntoView();let i=getHLLimit(o),r=getEasing(o),n=Object.assign(Object.assign({},i),{targets:[Object.assign({},d.current)],duration:e,update(t){let{animatables:e}=t;l(Object.assign({},e[0].target))}});r&&(n.easing=r),p(n)}catch(a){alert("aio-highlighter error => connot find dom")}},0)});let v=AddToAttrs(o.attrs,{className:"aio-popup-highlight",style:f()});return i("div",Object.assign({},v,{children:[$("top"),m(),$("bottom")]}))};function getHLLimit(t){let{padding:e=6,dom:i}=t,o=i.offset(),r=o.left-window.pageXOffset,n=o.top-window.pageYOffset,a=window.innerHeight,l=i.outerWidth(),s=i.outerHeight();return{Left:r-1*e,Top:n-1*e,Width:l+2*e,Height:s+2*e,TopSpace:n,BottomSpace:a-(n+s)}}function getEasing(t){let{easing:e}=t;var i=["linear","easeInQuad","easeInSine","easeInCirc","easeInBack","easeOutQuad","easeOutSine","easeOutCirc","easeInOutQuad","easeInOutSine","easeInOutBack","easeOutBounce"];return"number"==typeof e?i[e]||i[0]:e}let InfoSvg=()=>t("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:t("path",{d:"M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z",style:{fill:"currentcolor"}})}),SuccessSvg=()=>t("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:t("path",{d:"M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z",style:{fill:"currentcolor"}})});function getBound(t){try{let e=t.getBoundingClientRect();return{width:e.width,height:e.height,left:e.left,top:e.top,bottom:e.bottom,right:e.right}}catch(i){return{width:0,height:0,left:0,top:0,bottom:0,right:0}}}export class Loading{constructor(t){this.loader="0",this.getLoader_0=()=>`
|
|
16
|
+
<div class="aio-loading-container-0">
|
|
17
|
+
<div class="aio-loading-0">
|
|
18
|
+
${[,,,,,].fill(0).map((t,e)=>this.getLoaderItem_0(`0.${e}`)).join(" ")}
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
`,this.getLoaderItem_0=t=>`<div class="aio-loading-item-0" style="animation: 1s ease-in-out ${t}s infinite normal none running aioloading0;"></div>`,this.getLoader=t=>{let e="";return"0"===this.loader?e=this.getLoader_0():"string"==typeof this.loader&&(e=this.loader),`<div class="aio-loading" id="aio-loading-${t}">${e}</div>`},this.show=(t,e)=>{e=e||"body";let i=this.getLoader(t),o=document.querySelector(e);o&&o.insertAdjacentHTML("beforeend",i)},this.hide=t=>{let e=document.getElementById("aio-loading-"+t);e||(e=document.querySelector(".aio-loading")),e&&e.remove()},"string"==typeof t&&(this.loader=t)}}
|