tdesign-miniprogram/miniprogram_dist/guide/guide.js

TDesign Component for miniprogram

import{__awaiter,__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import props from"./props";import config from"../common/config";import{isFunction,isNumeric}from"../common/validator";import{debounce,getRect,rpx2px,styles,unitConvert,nextTick,systemInfo}from"../common/utils";import usingConfig from"../mixins/using-config";const{prefix:prefix}=config,componentName="guide";let Guide=class extends SuperComponent{constructor(){super(...arguments),this.behaviors=[usingConfig({componentName:"guide"})],this.externalClasses=[`${prefix}-class`,`${prefix}-class-reference`,`${prefix}-class-popover`,`${prefix}-class-tooltip`,`${prefix}-class-title`,`${prefix}-class-body`,`${prefix}-class-footer`,`${prefix}-class-skip`,`${prefix}-class-next`,`${prefix}-class-back`,`${prefix}-class-finish`],this.properties=props,this.options={pureDataPattern:/^_/,multipleSlots:!0},this.data={prefix:prefix,classPrefix:`${prefix}-guide`,visible:!1,_current:-1,_steps:[],buttonProps:{},referenceStyle:"",popoverStyle:"",title:"",body:"",nonOverlay:!1,modeType:""},this.controlledProps=[{key:"current",event:"change"}],this.observers={"steps, current, showOverlay"(){return __awaiter(this,void 0,void 0,function*(){this._init()})}},this.lifetimes={created(){this._init=debounce(()=>this.init(),20),this._getPlacement=this.getPlacement()},attached(){this._init()}},this.methods={init(){var t,e,i,s,o,n,a;return __awaiter(this,void 0,void 0,function*(){const{steps:r,current:p}=this.properties,{_steps:l,_current:h}=this.data,c=r[p];if(!c)return this.setData({visible:!1});const u="dialog"===(null!==(t=c.mode)&&void 0!==t?t:this.data.mode)?"dialog":"popover",x=null!==(e=c.showOverlay)&&void 0!==e?e:this.data.showOverlay;if(this.setData({nonOverlay:!x,modeType:u}),r!==l||p!==h)if("popover"===u){const t=yield c.element();if(!t)return;const e=rpx2px(null!==(i=c.highlightPadding)&&void 0!==i?i:this.data.highlightPadding),n={top:`${t.top-e}px`,right:`${systemInfo.windowWidth-t.right-e}px`,left:`${t.left-e}px`,width:`${t.width+2*e}px`,height:`${t.height+2*e}px`};this.setData({_steps:this.data.steps,_current:this.data.current,visible:!0,referenceStyle:styles(n),title:null!==(s=c.title)&&void 0!==s?s:"",body:null!==(o=c.body)&&void 0!==o?o:"",buttonProps:this.buttonProps(c,"popover")});const a=yield this.placementOffset(c,n);this.setData({popoverStyle:a})}else this.setData({_steps:this.data.steps,_current:this.data.current,visible:!0,title:null!==(n=c.title)&&void 0!==n?n:"",body:null!==(a=c.body)&&void 0!==a?a:"",buttonProps:this.buttonProps(c,"dialog")})})},placementOffset({placement:t,offset:e},i){var s,o;return __awaiter(this,void 0,void 0,function*(){const{classPrefix:n}=this.data;yield nextTick();const a=yield getRect(this,`.${n}__container`),r=null===(o=(s=this._getPlacement)[t])||void 0===o?void 0:o.call(s,a,i,e);return styles(Object.assign({position:"absolute"},r))})},buttonProps(t,e){var i,s,o,n;const{classPrefix:a,globalConfig:r}=this.data;let p=null!==(i=t.skipButtonProps)&&void 0!==i?i:this.data.skipButtonProps;const l="popover"===e?"extra-small":"medium";p=Object.assign(Object.assign({theme:"light",content:r.skip,size:l},p),{tClass:`${prefix}-class-skip ${a}__button ${(null==p?void 0:p.class)||""}`,type:"skip"});let h=null!==(s=t.nextButtonProps)&&void 0!==s?s:this.data.nextButtonProps;h=Object.assign(Object.assign({theme:"primary",content:r.next,size:l},h),{tClass:`${prefix}-class-next ${a}__button ${(null==h?void 0:h.class)||""}`,type:"next"}),h=Object.assign(Object.assign({},h),{content:this.buttonContent(h)});let c=null!==(o=t.backButtonProps)&&void 0!==o?o:this.data.backButtonProps;c=Object.assign(Object.assign({theme:"light",content:r.back,size:l},c),{tClass:`${prefix}-class-back ${a}__button ${(null==c?void 0:c.class)||""}`,type:"back"});let u=null!==(n=t.finishButtonProps)&&void 0!==n?n:this.data.finishButtonProps;return u=Object.assign(Object.assign({theme:"primary",content:r.finish,size:l},u),{tClass:`${prefix}-class-finish ${a}__button ${(null==u?void 0:u.class)||""}`,type:"finish"}),u=Object.assign(Object.assign({},u),{content:this.buttonContent(u)}),{skipButton:p,nextButton:h,backButton:c,finishButton:u}},renderCounter(){const{steps:t,current:e,counter:i}=this.data,s=t.length,o=e+1,n=isFunction(i)?i({total:s,current:o}):i;return i?n:`(${o}/${s})`},buttonContent(t){const{hideCounter:e}=this.data;return`${t.content.replace(/ \(.*?\)/,"")} ${e?"":this.renderCounter()}`},onTplButtonTap(t){const{type:e}=t.target.dataset,i={e:t,current:this.data.current,total:this.data.steps.length};switch(e){case"next":this.triggerEvent("next-step-click",Object.assign({next:this.data.current+1},i)),this.setData({current:this.data.current+1});break;case"skip":this.triggerEvent("skip",i),this.setData({current:-1});break;case"back":this.triggerEvent("back",i),this.setData({current:0});break;case"finish":this.triggerEvent("finish",i),this.setData({current:-1})}this.triggerEvent("change",{current:this.data.current})},getPlacement(){const t=rpx2px(32),e=t=>unitConvert(isNumeric(null==t?void 0:t[0])?`${null==t?void 0:t[0]}rpx`:(null==t?void 0:t[0])||0),i=t=>unitConvert(isNumeric(null==t?void 0:t[1])?`${null==t?void 0:t[1]}rpx`:(null==t?void 0:t[1])||0),s=t=>parseFloat(t.left),o=t=>parseFloat(t.right),n=t=>parseFloat(t.top),a=t=>parseFloat(t.height),r=t=>parseFloat(t.width);return{center:(o,p,l)=>({top:`${Math.max(a(p)+n(p)+t+i(l),1)}px`,left:`${Math.max(r(p)/2+s(p)-o.width/2+e(l),1)}px`}),bottom:(o,p,l)=>({top:`${Math.max(a(p)+n(p)+t+i(l),1)}px`,left:`${Math.max(r(p)/2+s(p)-o.width/2+e(l),1)}px`}),"bottom-left":(o,r,p)=>({top:`${Math.max(a(r)+n(r)+t+i(p),1)}px`,left:`${Math.max(s(r)+e(p),1)}px`}),"bottom-right":(s,r,p)=>({top:`${Math.max(a(r)+n(r)+t+i(p),1)}px`,right:`${Math.max(o(r)-e(p),1)}px`}),left:(s,p,l)=>({top:`${Math.max(a(p)/2+n(p)-s.height/2+i(l),1)}px`,right:`${Math.max(r(p)+o(p)+t-e(l),1)}px`}),"left-top":(s,a,p)=>({top:`${Math.max(n(a)+i(p),1)}px`,right:`${Math.max(r(a)+o(a)+t-e(p),1)}px`}),"left-bottom":(s,p,l)=>({top:`${Math.max(n(p)+a(p)-s.height-i(l),1)}px`,right:`${Math.max(r(p)+o(p)+t-e(l),1)}px`}),right:(o,p,l)=>({top:`${Math.max(a(p)/2+n(p)-o.height/2+i(l),1)}px`,left:`${Math.max(s(p)+r(p)+t+e(l),1)}px`}),"right-top":(o,a,p)=>({top:`${Math.max(n(a)+i(p),1)}px`,left:`${Math.max(s(a)+r(a)+t+e(p),1)}px`}),"right-bottom":(o,p,l)=>({top:`${Math.max(n(p)+a(p)-o.height-i(l),1)}px`,left:`${Math.max(s(p)+r(p)+t+e(l),1)}px`}),top:(o,a,p)=>({top:`${Math.max(n(a)-o.height-t+i(p),1)}px`,left:`${Math.max(r(a)/2+s(a)-o.width/2+e(p),1)}px`}),"top-left":(o,a,r)=>({top:`${Math.max(n(a)-o.height-t+i(r),1)}px`,left:`${Math.max(s(a)+e(r),1)}px`}),"top-right":(s,a,r)=>({top:`${Math.max(n(a)-s.height-t+i(r),1)}px`,right:`${Math.max(o(a)-e(r),1)}px`})}}}}};Guide=__decorate([wxComponent()],Guide);export default Guide;