quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 6.73 kB
JavaScript
import{_ as n,a as t}from"../typeof.js";import{_ as e,a as i,b as o,c as a,P as r,H as s,d as c,N as l,B as h}from"../index2.js";import{_ as d}from"../defineProperty.js";import{d as u,e as f,c as p}from"../bodyScrollLock.esm.js";import{Local as v}from"../locale/index.js";function m(n){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(n){return!1}}();return function(){var o,a=e(n);if(t){var r=e(this).constructor;o=Reflect.construct(a,arguments,r)}else o=a.apply(this,arguments);return i(this,o)}}var k=function(e){o(c,s);var i=m(c);function c(){var t;n(this,c);for(var e=arguments.length,o=new Array(e),l=0;l<e;l++)o[l]=arguments[l];return t=i.call.apply(i,[this].concat(o)),d(a(t),"open",!1),d(a(t),"wrap",r()),d(a(t),"options",[]),d(a(t),"titleColor",void 0),d(a(t),"titleFontSize",void 0),d(a(t),"cancelColor",void 0),d(a(t),"cancelFontSize",void 0),d(a(t),"zIndex",999),d(a(t),"select",(function(){})),d(a(t),"cancel",(function(){})),d(a(t),"close",(function(){})),d(a(t),"handleClick",(function(){t.open=!1})),d(a(t),"handleActionClick",(function(n,e){t.handleClick(),t.select&&"function"==typeof t.select&&t.select(n,e)})),d(a(t),"handleCancelClick",(function(){t.handleClick(),t.cancel&&"function"==typeof t.cancel&&t.cancel()})),d(a(t),"renderOptions",(function(){var n=t.getMargin();if(!t.options||t.options.length<=0)return null;var e=t.options.length;return t.options.map((function(i,o){return s.h("div",{class:"quark-sharesheet-item",part:"item",style:{marginLeft:n,marginTop:e>4&&o>3?8:void 0},onClick:function(){t.handleActionClick(o,i)}},s.h("img",{src:i.icon,class:"quark-sharesheet-item-icon",part:"icon"}),s.h("div",{class:"quark-sharesheet-item-text",part:"text"},i.name))}))})),d(a(t),"getMargin",(function(){var n=document.body.clientWidth;return t.options.length<=4?(n-60*t.options.length)/(t.options.length+1):(n-240)/5})),t}return t(c,[{key:"componentDidMount",value:function(){this.zIndex&&(this.style.zIndex="".concat(this.zIndex)),this.addEventListener("transitionend",this.handleTransitionend),this.addEventListener("click",this.handleHostClick)}},{key:"shouldComponentUpdate",value:function(n,t,e){if("open"===n&&this.wrap&&this.wrap.current){var i=this.wrap.current;e?i.classList.remove("leave"):t&&!e&&i.classList.add("leave")}return!0}},{key:"componentDidUpdate",value:function(n,t,e){if("open"===n&&this.wrap&&this.wrap.current){var i=this.wrap.current;e?u(i):f(i)}}},{key:"componentWillUnmount",value:function(){p(),this.removeEventListener("transitionend",this.handleTransitionend),this.removeEventListener("click",this.handleHostClick)}},{key:"handleHostClick",value:function(){this.handleClick(),this.close&&"function"==typeof this.close&&this.close()}},{key:"handleTransitionend",value:function(n){"opacity"!==n.propertyName||this.open||document.body.removeChild(this)}},{key:"handleContainerClick",value:function(n){n.stopPropagation()}},{key:"render",value:function(){return s.h("div",{class:"quark-sharesheet",ref:this.wrap,onClick:this.handleContainerClick,part:"root"},s.h("div",{class:"quark-sharesheet-title",part:"title",style:{color:this.titleColor?this.titleColor:void 0,fontSize:this.titleFontSize?this.titleFontSize:void 0}},v.current.actionSheet.shareTitle),s.h("div",{class:"quark-sharesheet-action",part:"action"},this.renderOptions()),s.h("div",{class:"quark-sharesheet-cancel",part:"cancel"},s.h("div",{class:"quark-sharesheet-cancel-gap",part:"gap"}),s.h("div",{class:"quark-sharesheet-cancel-text",part:"cancel-text",style:{color:this.cancelColor?this.cancelColor:void 0,fontSize:this.cancelFontSize?this.cancelFontSize:void 0},onClick:this.handleCancelClick},v.current.cancel)))}}]),c}();function y(n){var t=document.createElement("quark-sharesheet"),e=n.options,i=n.titleColor,o=n.titleFontSize,a=n.cancelColor,r=n.cancelFontSize,s=n.select,c=n.cancel,l=n.close,h=n.zIndex;return t.options=e,t.titleColor=i,t.titleFontSize=o,t.cancelColor=a,t.cancelFontSize=r,t.select=s,t.cancel=c,t.close=l,t.zIndex=h,document.body.appendChild(t),setTimeout((function(){t.open=!0}),10),t}c([l({type:Boolean})],k.prototype,"open",void 0),k=c([h({tag:"quark-sharesheet",style:":host {\n position: fixed;\n display: flex;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: -1;\n background: rgba(0, 0, 0, 0.7);\n visibility: hidden;\n opacity: 0;\n transition: .3s;\n}\n\n:host([open]) {\n opacity: 1;\n z-index: 999;\n visibility: visible;\n}\n\n:host .quark-sharesheet {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n box-sizing: border-box;\n background-color: #fff;\n position: fixed;\n width: 100%;\n max-height: 90%;\n bottom: 0;\n left: 0;\n overflow: hidden;\n padding-bottom: constant(safe-area-inset-bottom);\n padding-bottom: env(safe-area-inset-bottom);\n border-top-left-radius: 4.26667vw;\n border-top-right-radius: 4.26667vw;\n transition: transform .3s;\n transition-timing-function: ease-out;\n transform: translate(0, 100%);\n}\n\n:host .quark-sharesheet-leave {\n transition: transform .25s;\n transition-timing-function: ease-in;\n}\n\n:host .quark-sharesheet-title {\n color: #969799;\n font-size: 3.73333vw;\n display: flex;\n height: 13.86667vw;\n width: 100%;\n justify-content: center;\n align-items: center;\n text-align: center;\n}\n\n:host .quark-sharesheet-action {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n flex-wrap: wrap;\n width: 100%;\n}\n\n:host .quark-sharesheet-cancel {\n display: flex;\n width: 100%;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host .quark-sharesheet-item {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin-top: 4.26667vw;\n margin-bottom: 4.26667vw;\n width: 16vw;\n}\n\n:host .quark-sharesheet-item-text {\n color: #666;\n font-size: 3.2vw;\n line-height: 4.53333vw;\n margin-top: 2.13333vw;\n}\n\n:host .quark-sharesheet-item-icon {\n width: 13.33333vw;\n height: 13.33333vw;\n}\n\n:host .quark-sharesheet-cancel-text {\n box-sizing: border-box;\n color: #242729;\n font-size: 4.26667vw;\n display: flex;\n width: 100%;\n justify-content: center;\n align-items: center;\n height: 13.33333vw;\n cursor: pointer;\n}\n\n:host .quark-sharesheet-cancel-gap {\n display: block;\n height: 2.4vw;\n background-color: #f7f8fa;\n width: 100%;\n}\n\n:host([open]) .quark-sharesheet {\n transform: translate(0, 0%);\n}\n"})],k);export{y as default};