aio-popup 4.5.0 → 4.5.2
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.js +8 -8
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),ReactDOMServer=_interopRequireWildcard(require("react-dom/server")),_jquery=_interopRequireDefault(require("jquery"));require("./index.css");var _aioUtils=require("aio-utils"),_animeEs=_interopRequireDefault(require("animejs/lib/anime.es.js")),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,i=new WeakMap;return(_getRequireWildcardCache=function(e){return e?i:t})(e)}function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var i=_getRequireWildcardCache(t);if(i&&i.has(e))return i.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var n in e)if("default"!==n&&({}).hasOwnProperty.call(e,n)){var a=o?Object.getOwnPropertyDescriptor(e,n):null;a&&(a.get||a.set)?Object.defineProperty(r,n,a):r[n]=e[n]}return r.default=e,i&&i.set(e,r),r}function _defineProperty(e,t,i){return(t=_toPropertyKey(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function _toPropertyKey(e){var t=_toPrimitive(e,"string");return"symbol"==typeof t?t:t+""}function _toPrimitive(e,t){if("object"!=typeof e||!e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var r=i.call(e,t||"default");if("object"!=typeof r)return r;throw TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}class AIOPopup{constructor(e){_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:t=!1}=e||{};this.rtl=t,this.addSnackebar=()=>{},this.popupsRef=(0,_react.createRef)(),this.highlightRef=(0,_react.createRef)(),this.getModals=()=>{let e=this.popupsRef.current;return null===e?[]:e.getModals()||[]},this.addModal=e=>{let t=this.popupsRef.current;null!==t&&t.addModal(e)},this.addHighlight=e=>{let t=this.highlightRef.current;null!==t&&t.addHighlight(e)},this.removeModal=e=>{let t=this.popupsRef.current;null!==t&&t.removeModal(e)},this.removeHighlight=()=>{let e=this.highlightRef.current;null!==e&&e.removeHighlight()},this.render=()=>{let e={rtl:t,getActions:({add:e})=>this.addSnackebar=e};return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(Popups,{rtl:t,ref:this.popupsRef}),(0,_jsxRuntime.jsx)(Snackebar,{...e}),(0,_jsxRuntime.jsx)(Highlight,{ref:this.highlightRef})]})},this.addAlert=e=>Alert(e),this.addConfirm=e=>{let{title:t,subtitle:i,text:r,submitText:o="Yes",canselText:n="No",onSubmit:a,onCansel:s=()=>{},setAttrs:l=()=>({})}=e,u={position:"center",setAttrs(e){let t=l(e);return"modal"===e?(0,_aioUtils.AddToAttrs)(t,{className:"aio-popup-confirm"}):t},header:{title:t,subtitle:i},body:()=>r,footer:()=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)("button",{type:"button",onClick:()=>{s(),this.removeModal()},children:n}),(0,_jsxRuntime.jsx)("button",{type:"button",className:"active",onClick:async()=>{if(a)!1!==await a()&&this.removeModal()},children:o})]})};this.addModal(u)},this.addPrompt=e=>{let{title:t,subtitle:i,text:r,submitText:o="Submit",canselText:n="close",onSubmit:a,onCansel:s=()=>{},setAttrs:l=()=>({})}=e,u={position:"center",setAttrs(e){let t=l(e);return"modal"===e?(0,_aioUtils.AddToAttrs)(t,{className:"aio-popup-prompt"}):t},state:{temp:""},header:{title:t,subtitle:i},body:({state:e,setState:t})=>(0,_jsxRuntime.jsx)("textarea",{placeholder:r,value:e.temp,onChange(e){t&&t({temp:e.target.value})}}),footer:({state:e,setState:t})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)("button",{type:"button",onClick:()=>{s(),this.removeModal()},children:n}),(0,_jsxRuntime.jsx)("button",{type:"button",className:"active",onClick:async()=>{if(a)!1!==await a(e.temp)?this.removeModal():t({temp:""})},disabled:!e.temp,children:o})]})};this.addModal(u)}}}exports.default=AIOPopup;const Popups=(0,_react.forwardRef)((e,t)=>{let[i,r]=(0,_react.useState)([]),o=(0,_react.useRef)(i);o.current=i;let{rtl:n}=e;function a(e){void 0===e.id&&(e.id="popup"+Math.round(1e6*Math.random()));let t=e;r(i=>[...i.filter(({id:t})=>t!==e.id),t])}async function s(e="last"){if("all"===e){r([]);return}if(!o.current.length)return;"last"===e&&(e=o.current[o.current.length-1].id);let t=o.current.find(t=>t.id===e);t&&((0,_jquery.default)(`[data-id=${e}]`).addClass("not-mounted"),setTimeout(()=>{t&&"function"==typeof t.onClose&&t.onClose(),r(t=>t.filter(t=>t.id!==e))},300))}function l(){return o.current.map((e,t)=>(0,_jsxRuntime.jsx)(Popup,{modal:e,rtl:n,isLast:t===o.current.length-1,onClose:()=>s(e.id)},e.id))}(0,_react.useImperativeHandle)(t,()=>({addModal:a,removeModal:s,getModals:()=>o.current}));let u=l();return u.length?(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:u}):null}),CTX=(0,_react.createContext)({});function Popup(e){let{modal:t,rtl:i,onClose:r,isLast:o}=e,{setAttrs:n=()=>({}),id:a,position:s="fullscreen",getTarget:l,maxHeight:u,fixStyle:d=e=>e}=t,[c]=(0,_react.useState)({dom:(0,_react.createRef)(),backdropDom:(0,_react.createRef)(),dui:void 0,isDown:!1}),[p,$]=(0,_react.useState)({}),[h,m]=(0,_react.useState)(t.state),_=n("modal")||{},f=n("backdrop")||{},g=(0,_react.useRef)(!1);async function x(){r()}function j(e){if(!c.dui)return;let t=(0,_jquery.default)(e.target);"popover"===s&&t.attr("data-id")!==c.dui&&!t.parents(`[data-id=${c.dui}]`).length&&x()}(0,_react.useEffect)(()=>()=>{(0,_jquery.default)(window).unbind("click",j)}),(0,_react.useEffect)(()=>{let e="popover"===s?function e(){if(!l)return{};let r=l();if(!r||!r.length)return{};let o={dom:(0,_jquery.default)(c.dom.current),target:r,fitHorizontal:t.fitHorizontal,fixStyle:d,pageSelector:t.pageSelector,limitTo:t.limitTo,attrs:_,rtl:i},n={...Align(o),position:"absolute"};return u&&(n.maxHeight=u),n}():{};if(console.log("updatedStyle.top",e.top),$(e),l){c.dui="a"+Math.round(1e7*Math.random());l().attr("data-id",c.dui)}setTimeout(()=>{let e=(0,_jquery.default)(c.dom.current);e.removeClass("not-mounted"),(0,_jquery.default)(c.backdropDom.current).removeClass("not-mounted"),e.focus()},0),(0,_jquery.default)(window).unbind("click",j),(0,_jquery.default)(window).bind("click",j)},[]);function v(e){if(o)27===e.keyCode&&r()}function y(){setTimeout(()=>c.isDown=!1,0)}let R,b,C,L;return(0,_jsxRuntime.jsx)(CTX.Provider,{value:{close:x,state:h,setState:m},children:(0,_jsxRuntime.jsx)("div",{...(R="aio-popup-backdrop",R+=` aio-popup-position-${s}`,R+=i?" rtl":" ltr",g&&(R+=" not-mounted"),(0,_aioUtils.AddToAttrs)(f,{className:R,attrs:{ref:c.backdropDom,onKeyDown:v,tabIndex:0,"data-id":a,onClick:f.onClick?f.onClick:function e(t){if(!c.isDown){t.stopPropagation();(0,_jquery.default)(t.target).hasClass("aio-popup-backdrop")&&x()}}}})),children:(0,_jsxRuntime.jsxs)("div",{...(b={...p,..._.style},C="ontouchstart"in document.documentElement?"onTouchStart":"onMouseDown",{..._,ref:c.dom,"data-id":t.id,tabIndex:0,onKeyDown:v,[C]:function e(t){(0,_jquery.default)(window).unbind("mouseup",y),(0,_jquery.default)(window).bind("mouseup",y),c.isDown=!0},className:(L="aio-popup",L+=i?" rtl":" ltr",g&&(L+=" not-mounted"),_.className&&(L+=" "+_.className),L),style:{...b}}),children:[!!t.header&&(0,_jsxRuntime.jsx)(ModalHeader,{modal:t}),(0,_jsxRuntime.jsx)(ModalBody,{modal:t}),!!t.footer&&(0,_jsxRuntime.jsx)("div",{...(0,_aioUtils.AddToAttrs)(n("footer"),{className:"aio-popup-footer"}),children:t.footer({state:h,setState:m,close:x})})]})})})}const ModalHeader=e=>{let t=(0,_react.useContext)(CTX),{modal:i}=e,{state:r,setState:o}=t,{setAttrs:n=()=>({})}=i,a=n("header")||{};if("function"==typeof i.header)return i.header({close:t.close,state:r,setState:o});if("object"!=typeof i.header)return null;let s="aio-popup-header",{title:l,subtitle:u,onClose:d,before:c,after:p}=i.header;function $(e){e.stopPropagation(),e.preventDefault(),"function"==typeof d?d({state:r,setState:o}):t.close()}function h(){return u?(0,_jsxRuntime.jsxs)("div",{className:`${s}-text`,children:[(0,_jsxRuntime.jsx)("div",{className:`${s}-title`,children:l}),(0,_jsxRuntime.jsx)("div",{className:`${s}-subtitle`,children:u})]}):(0,_jsxRuntime.jsx)("div",{className:`${s}-title`,style:{display:"flex",alignItems:"center",flex:1},children:l})}return(0,_jsxRuntime.jsxs)("div",{...(0,_aioUtils.AddToAttrs)(a,{className:s}),children:[void 0!==c&&(0,_jsxRuntime.jsx)("div",{className:`${s}-before`,onClick:e=>$(e),children:c}),!!l&&h(),void 0!==p&&(0,_jsxRuntime.jsx)("div",{className:`${s}-after`,onClick:e=>$(e),children:p}),!1!==d&&(0,_jsxRuntime.jsx)("div",{className:`${s}-close-button`,onClick:e=>$(e),children:(0,_jsxRuntime.jsx)(CloseIcon,{})})]})},ModalBody=e=>{let{state:t,setState:i,close:r}=(0,_react.useContext)(CTX),{modal:o}=e,{body:n=()=>null,setAttrs:a=()=>({})}=o,s=a("body")||{},l={close:r,state:t,setState:i},u=n(l);return u&&null!==u?(0,_jsxRuntime.jsx)("div",{...(0,_aioUtils.AddToAttrs)(s,{className:"aio-popup-body aio-popup-scroll"}),children:u}):null};function Alert(e){let{icon:t,type:i="",text:r="",subtext:o="",time:n=10,className:a,closeText:s="بستن",position:l="center",onClose:u}=e,d={id:"",time:0,getId:()=>"aa"+Math.round(1e8*Math.random()),getBarRender:()=>`<div class='aio-popup-time-bar' style="width:${d.time}%;"></div>`,updateBarRender(){(0,_jquery.default)(`.aio-popup-alert-container.${d.id} .aio-popup-time`).html(d.getBarRender())},getRender:()=>`
|
|
2
|
-
<div class='aio-popup-alert-container not-mounted ${
|
|
1
|
+
import t,{Component as e,createRef as i,useEffect as o,useState as r,createContext as a,useContext as n,useRef as l,forwardRef as s,useImperativeHandle as d,createElement as p}from"react";import*as c from"react-dom/server";import h from"jquery";import"./index.css";import u from"animejs/lib/anime.es.js";import{jsx as _,Fragment as $,jsxs as m}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 f{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 m($,{children:[_(Popups,{rtl:e,ref:this.popupsRef}),_(Snackebar,{...t}),_(Highlight,{ref:this.highlightRef})]})},this.addAlert=t=>Alert(t),this.addConfirm=t=>{let{title:e,subtitle:i,text:o,submitText:r="Yes",canselText:a="No",onSubmit:n,onCansel:l=()=>{},setAttrs:s=()=>({})}=t,d={position:"center",setAttrs(t){let e=s(t);return"modal"===t?AddToAttrs(e,{className:"aio-popup-confirm"}):e},header:{title:e,subtitle:i},body:()=>o,footer:()=>m($,{children:[_("button",{type:"button",onClick:()=>{l(),this.removeModal()},children:a}),_("button",{type:"button",className:"active",onClick:async()=>{if(n)!1!==await n()&&this.removeModal()},children:r})]})};this.addModal(d)},this.addPrompt=t=>{let{title:e,subtitle:i,text:o,submitText:r="Submit",canselText:a="close",onSubmit:n,onCansel:l=()=>{},setAttrs:s=()=>({})}=t,d={position:"center",setAttrs(t){let e=s(t);return"modal"===t?AddToAttrs(e,{className:"aio-popup-prompt"}):e},state:{temp:""},header:{title:e,subtitle:i},body:({state:t,setState:e})=>_("textarea",{placeholder:o,value:t.temp,onChange(t){e&&e({temp:t.target.value})}}),footer:({state:t,setState:e})=>m($,{children:[_("button",{type:"button",onClick:()=>{l(),this.removeModal()},children:a}),_("button",{type:"button",className:"active",onClick:async()=>{if(n)!1!==await n(t.temp)?this.removeModal():e({temp:""})},disabled:!t.temp,children:r})]})};this.addModal(d)}}};let Popups=s((t,e)=>{let[i,o]=r([]),a=l(i);a.current=i;let{rtl:n}=t;function s(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(!a.current.length)return;"last"===t&&(t=a.current[a.current.length-1].id);let e=a.current.find(e=>e.id===t);e&&(h(`[data-id=${t}]`).addClass("not-mounted"),setTimeout(()=>{e&&"function"==typeof e.onClose&&e.onClose(),o(e=>e.filter(e=>e.id!==t))},300))}function c(){return a.current.map((t,e)=>_(Popup,{modal:t,rtl:n,isLast:e===a.current.length-1,onClose:()=>p(t.id)},t.id))}d(e,()=>({addModal:s,removeModal:p,getModals:()=>a.current}));let u=c();return u.length?_($,{children:u}):null}),CTX=a({});function Popup(t){let{modal:e,rtl:a,onClose:n,isLast:s}=t,{setAttrs:d=()=>({}),id:p,position:c="fullscreen",getTarget:u,maxHeight:$,fixStyle:f=t=>t}=e,[g]=r({dom:i(),backdropDom:i(),dui:void 0,isDown:!1}),[v,b]=r({}),[y,L]=r(e.state),k=d("modal")||{},C=d("backdrop")||{},w=l(!1);async function M(){n()}function N(t){if(!g.dui)return;let e=h(t.target);"popover"===c&&e.attr("data-id")!==g.dui&&!e.parents(`[data-id=${g.dui}]`).length&&M()}o(()=>()=>{h(window).unbind("click",N)}),o(()=>{let t="popover"===c?function t(){if(!u)return{};let i=u();if(!i||!i.length)return{};let o={dom:h(g.dom.current),target:i,fitHorizontal:e.fitHorizontal,fixStyle:f,pageSelector:e.pageSelector,limitTo:e.limitTo,attrs:k,rtl:a},r={...Align(o),position:"absolute"};return $&&(r.maxHeight=$),r}():{};if(console.log("updatedStyle.top",t.top),b(t),u){g.dui="a"+Math.round(1e7*Math.random());u().attr("data-id",g.dui)}setTimeout(()=>{let t=h(g.dom.current);t.removeClass("not-mounted"),h(g.backdropDom.current).removeClass("not-mounted"),t.focus()},0),h(window).unbind("click",N),h(window).bind("click",N)},[]);function A(t){if(s)27===t.keyCode&&n()}function x(){setTimeout(()=>g.isDown=!1,0)}let H,P,S,T;return _(CTX.Provider,{value:{close:M,state:y,setState:L},children:_("div",{...(H="aio-popup-backdrop",H+=` aio-popup-position-${c}`,H+=a?" rtl":" ltr",w&&(H+=" not-mounted"),AddToAttrs(C,{className:H,attrs:{ref:g.backdropDom,onKeyDown:A,tabIndex:0,"data-id":p,onClick:C.onClick?C.onClick:function t(e){if(!g.isDown){e.stopPropagation();h(e.target).hasClass("aio-popup-backdrop")&&M()}}}})),children:m("div",{...(P={...v,...k.style},S="ontouchstart"in document.documentElement?"onTouchStart":"onMouseDown",{...k,ref:g.dom,"data-id":e.id,tabIndex:0,onKeyDown:A,[S]:function t(e){h(window).unbind("mouseup",x),h(window).bind("mouseup",x),g.isDown=!0},className:(T="aio-popup",T+=a?" rtl":" ltr",w&&(T+=" not-mounted"),k.className&&(T+=" "+k.className),T),style:{...P}}),children:[!!e.header&&_(ModalHeader,{modal:e}),_(ModalBody,{modal:e}),!!e.footer&&_("div",{...AddToAttrs(d("footer"),{className:"aio-popup-footer"}),children:e.footer({state:y,setState:L,close:M})})]})})})}let ModalHeader=t=>{let e=n(CTX),{modal:i}=t,{state:o,setState:r}=e,{setAttrs:a=()=>({})}=i,l=a("header")||{};if("function"==typeof i.header)return i.header({close:e.close,state:o,setState:r});if("object"!=typeof i.header)return null;let s="aio-popup-header",{title:d,subtitle:p,onClose:c,before:h,after:u}=i.header;function $(t){t.stopPropagation(),t.preventDefault(),"function"==typeof c?c({state:o,setState:r}):e.close()}function f(){return p?m("div",{className:`${s}-text`,children:[_("div",{className:`${s}-title`,children:d}),_("div",{className:`${s}-subtitle`,children:p})]}):_("div",{className:`${s}-title`,style:{display:"flex",alignItems:"center",flex:1},children:d})}return m("div",{...AddToAttrs(l,{className:s}),children:[void 0!==h&&_("div",{className:`${s}-before`,onClick:t=>$(t),children:h}),!!d&&f(),void 0!==u&&_("div",{className:`${s}-after`,onClick:t=>$(t),children:u}),!1!==c&&_("div",{className:`${s}-close-button`,onClick:t=>$(t),children:_(CloseIcon,{})})]})},ModalBody=t=>{let{state:e,setState:i,close:o}=n(CTX),{modal:r}=t,{body:a=()=>null,setAttrs:l=()=>({})}=r,s=l("body")||{},d={close:o,state:e,setState:i},p=a(d);return p&&null!==p?_("div",{...AddToAttrs(s,{className:"aio-popup-body aio-popup-scroll"}),children:p}):null};function Alert(t){let{icon:e,type:i="",text:o="",subtext:r="",time:a=10,className:n,closeText:l="بستن",position:s="center",onClose:d}=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(){h(`.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-${s}${n?` ${n}`:""}'>
|
|
3
3
|
<div class='aio-popup-alert aio-popup-alert-${i}'>
|
|
4
|
-
<div class='aio-popup-alert-header'>${
|
|
4
|
+
<div class='aio-popup-alert-header'>${p.getIcon()}</div>
|
|
5
5
|
<div class='aio-popup-alert-body aio-popup-scroll'>
|
|
6
|
-
<div class='aio-popup-alert-text'>${
|
|
7
|
-
<div class='aio-popup-alert-subtext'>${
|
|
6
|
+
<div class='aio-popup-alert-text'>${c.renderToStaticMarkup(o)}</div>
|
|
7
|
+
<div class='aio-popup-alert-subtext'>${r}</div>
|
|
8
8
|
</div>
|
|
9
9
|
<div class='aio-popup-alert-footer'>
|
|
10
|
-
<button class='aio-popup-alert-close ${
|
|
10
|
+
<button class='aio-popup-alert-close ${p.id}'>${l}</button>
|
|
11
11
|
</div>
|
|
12
12
|
<div class='aio-popup-time'></div>
|
|
13
13
|
</div>
|
|
14
14
|
</div>
|
|
15
|
-
`,close(){
|
|
15
|
+
`,close(){p.toggleClass(!1),setTimeout(()=>{"function"==typeof d&&d(),!1!==d&&h("."+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()},a/50*1e3)},toggleClass(t){let e=h(`.${p.id}`);t?setTimeout(()=>e.removeClass("not-mounted"),0):e.addClass("not-mounted")},render(){h("body").append(p.getRender()),h("button."+p.id).off("click",p.close),h("button."+p.id).on("click",p.close),p.toggleClass(!0)}};p.id=p.getId(),p.render(),a&&p.startTimer()}class Snackebar extends e{constructor(t){super(t),this.state={items:[]},t.getActions({add:this.add.bind(this)})}add(t){let{items:e}=this.state,i=[...e,{...t,id:"a"+Math.round(1e9*Math.random())}];this.setState({items:i})}remove(t,e){if(!1===e)return;let{items:i}=this.state,o=i.filter((e,i)=>e.id!==t);this.setState({items:o}),"function"==typeof e&&e()}render(){let{items:t}=this.state,{rtl:e}=this.props;return _($,{children:t.map((t,i)=>p(SnackebarItem,{rtl:e,item:t,index:i,onRemove:e=>this.remove(e,t.onClose),key:t.id}))})}}function SnackebarItem(t){var e;let{item:i,onRemove:a,index:n,rtl:l}=t,{time:s=8,id:d,text:p,type:c,subtext:u,action:$,onClose:f,verticalAlign:g="end",horizontalAlign:v="center",icon:b,attrs:y={}}=i;"start"!==g&&"end"!==g&&(g="end",console.error('aio-popup error => snackebar item .verticalAlign should be "start" or "end"')),"start"!==v&&"end"!==v&&"center"!==v&&(v="center",console.error('aio-popup error => snackebar item .horizontalAlign should be "start" or "end" or "center"'));let[L,k]=r(!1);function C(){k(!1),setTimeout(()=>{a(d)},200)}o(()=>{setTimeout(()=>k(!0),0),setTimeout(()=>C(),1e3*s)},[]);let w,M,N,A;return w="aio-popup-snackebar-item-container",w+=` aio-popup-snackebar-item-container-horizontal-align-${v}`,L&&(w+=" mounted"),l&&(w+=" rtl"),M=function t(e){let i=h(".aio-popup-snackebar-item-container"),o={start:12,end:12};for(let r=0;r<e;r++){let a=i.eq(r),n=a.height()+6,l=a.attr("data-vertical-align");o[l]+=n}return{["start"===g?"top":"bottom"]:o[g]}}(n),N={"data-vertical-align":g,className:w,style:M,onClick:!1===f?void 0:()=>C()},_("div",{...N,children:(A="aio-popup-snackebar-item",A+=` aio-popup-snackebar-item-${c}`,y.className&&(A+=` ${y.className}`),m("div",{...{...y,className:A,style:y.style},children:[_("div",{className:"aio-popup-snackebar-item-icon",children:b||("error"===(e=c)||"warning"===e||"info"===e?_("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:_("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"}})}):_("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:_("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"}})}))})," ",m("div",{className:"aio-popup-snackebar-item-text",children:[_("div",{className:"aio-popup-snackebar-item-uptext",children:p}),!!u&&_("div",{className:"aio-popup-snackebar-item-subtext",children:u})]})," ",$&&$.text?_("button",{className:"aio-popup-snackebar-item-action",onClick(t){t.stopPropagation(),$&&$.onClick(),C()},children:$.text}):null," ",_("div",{className:"aio-popup-snackebar-bar",style:{transition:`${s}s linear`}})," "]}))})}function Align(t){let{dom:e,target:i,fitHorizontal:o,fixStyle:r=t=>t,attrs:a={},pageSelector:n,rtl:l,limitTo:s}=t,d={getDomLimit(t,e){let i=t.offset(),o=i.left-window.pageXOffset,r=i.top-window.pageYOffset;if(n&&"page"!==e){let a=h(n);try{let{left:l,top:s}=a.offset()||{left:0,top:0};l-=window.scrollX,s-=window.scrollY,o-=l,r-=s}catch{}}let d=t.outerWidth(),p=t.outerHeight(),c=o+d,u=r+p;return{left:o,top:r,right:c,bottom:u,width:d,height:p}},getPageLimit(){let t=n?h(n):void 0;t=Array.isArray(t)&&0===t.length?void 0:t;let e=window.innerWidth,i=window.innerHeight,o=t?d.getDomLimit(t,"page"):{left:0,top:0,right:e,bottom:i};return o.left<0&&(o.left=0),o.right>e&&(o.right=e),o.top<0&&(o.top=0),o.bottom>i&&(o.bottom=i),o},getRelatedToLmit(){if(!s)return;let t=e.parents(s);if(!t.length)return;let i=t.offset(),o=i.left-window.pageXOffset,r=i.top-window.pageYOffset,a=t.outerWidth(),n=t.outerHeight();return{left:o,top:r,right:o+a,bottom:r+n,width:a,height:n}},align(){let t=d.getPageLimit(),n=d.getDomLimit(i,"target"),s=d.getDomLimit(e,"popover"),p;if(s.top=n.bottom,s.bottom=s.top+s.height,o)s.width=n.width,s.left=n.left,s.right=n.left+n.width;else{let c=d.getRelatedToLmit()||t;l?(s.right=n.right,s.left=s.right-s.width,s.left<c.left&&(s.left=c.left)):(s.left=n.left,s.right=s.left+s.width,s.right>c.right&&(s.left=c.right-s.width))}return s.bottom>t.bottom?s.height>n.top-t.top?s.top=t.bottom-s.height:s.top=n.top-s.height:s.top=n.bottom,s.height>t.bottom-t.top&&(s.top=6,s.bottom=void 0,s.height=t.bottom-t.top-12,p="auto"),r({left:s.left,top:s.top,width:s.width,overflowY:p,...a.style},{targetLimit:n,pageLimit:t})}};return d.align()}let Highlight=s((t,e)=>{let[i,o]=r(!1),[a,n]=r({Left:0,Top:0,Width:0,Height:0,TopSpace:0,BottomSpace:0}),s=l(),p=s.current,c=l(a);function h(t){let e=k("padding",6),i=t.offset(),o=i.left-window.pageXOffset,r=i.top-window.pageYOffset,a=window.innerHeight,n=t.outerWidth(),l=t.outerHeight();return{Left:o-1*e,Top:r-1*e,Width:n+2*e,Height:l+2*e,TopSpace:r,BottomSpace:a-(r+l)}}function f(){let t=k("easing",void 0);var e=["linear","easeInQuad","easeInSine","easeInCirc","easeInBack","easeOutQuad","easeOutSine","easeOutCirc","easeInOutQuad","easeInOutSine","easeInOutBack","easeOutBounce"];return"number"==typeof t?e[t]||e[0]:t}function g(){n({Left:0,Top:0,Width:0,Height:0,TopSpace:0,BottomSpace:0}),o(!1)}function v(t){let{dom:e}=t;s.current=t,o(!0),setTimeout(()=>{try{let t=k("duration",1200);e[0].scrollIntoView();let i=h(e),o=f(),r={...i,targets:[{...c.current}],duration:t,update(t){let{animatables:e}=t;n({...e[0].target})}};o&&(r.easing=o),u(r)}catch{alert(`
|
|
16
16
|
aio-highlighter error => connot find dom
|
|
17
|
-
`)}},0)}function
|
|
17
|
+
`)}},0)}function b(t){return _("svg",{version:"1.1",id:"Layer_1",xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",viewBox:"0 0 512 512",...t,children:m("g",{children:[_("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 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"}),_("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 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 y(t,e,i){return _("div",{className:"aio-popup-highlight-arrow",children:b({width:24,height:24,style:{position:"absolute",height:24,width:24,left:e+i/2-12},className:`aio-popup-highlight-arrow-${t}`})})}function L(t){if(!p||!p.html)return"";let e,i=p.html||"",o=_("div",{className:"aio-popup-highlight-space"}),r=_("div",{className:"aio-popup-highlight-html",children:i}),a=y(t,c.current.Left,c.current.Width);return e="top"===t?m($,{children:[o,r,a]}):m($,{children:[a,r,o]}),_("div",{className:"aio-popup-highlight-html-container",children:e})}function k(t,e){if(!p||null===p)return e;let i=p[t];return void 0===i?e:i}function C(){!k("mouseAccess",!1)&&null!=p&&p.onClick&&p.onClick()}function w(t){let e="",i=0,o="aio-popup-highlight-mask",r=c.current;return"top"===t?(i=r.Top,r.TopSpace>r.BottomSpace&&(e=L("top"))):"bottom"===t?(o+=" aio-popup-highlight-mask-flex",r.TopSpace<=r.BottomSpace&&(e=L("bottom"))):"left"===t?i=r.Left:o+=" aio-popup-highlight-mask-flex",_("div",{className:o,style:{["top"===t||"bottom"===t?"height":"width"]:i},onClick:()=>C(),children:e})}function M(){let t=k("mouseAccess",!1);return _("div",{style:{width:a.Width},className:"aio-popup-highlight-focus-container",onClick:t?void 0:()=>C(),children:_("div",{className:"aio-popup-highlight-focus"})})}function N(){return m("div",{className:"aio-popup-highlight-main",style:{height:a.Height},children:[w("left"),M(),w("right")]})}if(c.current=a,d(e,()=>({addHighlight:v,removeHighlight:g})),!i)return null;function A(){let t=k("mouseAccess",!1);return{pointerEvents:t?"none":"all"}}let x=AddToAttrs(k("attrs",{}),{className:"aio-popup-highlight",style:A()});return m("div",{...x,children:[w("top"),N(),w("bottom")]})}),CloseIcon=()=>_("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:_("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)],a=r.length?r.join(" "):void 0,n={...t.style,...i};return{...t,className:a,style:n,...e.attrs}}
|