tdesign-miniprogram/miniprogram_dist/popover/popover.js

TDesign Component for miniprogram

import{__awaiter,__decorate,__rest}from"tslib";import{getWindowInfo}from"../common/wechat";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{debounce}from"../common/utils";import transition from"../mixins/transition";import pageScrollMixin from"../mixins/page-scroll";delete props.visible;const{prefix:prefix}=config,name=`${prefix}-popover`;let Popover=class extends SuperComponent{constructor(){super(...arguments),this.behaviors=[transition(),pageScrollMixin()],this.externalClasses=[`${prefix}-class`,`${prefix}-class-content`,`${prefix}-class-trigger`],this.options={multipleSlots:!0},this.properties=props,this.data={prefix:prefix,classPrefix:name,_placement:"top",contentStyle:"",arrowStyle:""},this.controlledProps=[{key:"visible",event:"visible-change"}],this.observers={visible(t){null!=t&&this.updateVisible(t)},"placement, realVisible"(t){t&&this.computePosition()}},this.methods={onScroll(){this.data.realVisible&&debounce(()=>this.computePosition(),100)},updateVisible(t){t!==this.data.visible&&this.setData({visible:t},()=>{this._trigger("visible-change",{visible:t})})},onOverlayTap(){this.properties.closeOnClickOutside&&this.updateVisible(!1)},getToward(t){const e=["top","bottom"],i=["left","right"];return{isHorizontal:e.find(e=>t.includes(e)),isVertical:i.find(e=>t.includes(e)),isBase:[...e,...i].find(e=>e===t),isEnd:t.includes("end")}},calcArrowStyle(t,e,i){const{isHorizontal:o,isVertical:s,isBase:r,isEnd:n}=this.getToward(t);if(r)return"";const{width:l,left:a}=e,{width:c,height:p}=i,{windowWidth:h}=getWindowInfo();if(o){const t=n?Math.min(l+a,c):Math.min(h-a,c);return n?`left:${t-28}px;`:`right:${t-28}px;`}if(s){const t=p-28;return n?`top:${t}px;`:`bottom:${t}px;top:unset;`}return""},calcContentPosition(t,e,i){let o=0,s=0;const r=t.startsWith("top"),n=t.startsWith("bottom"),l=t.startsWith("left"),a=t.startsWith("right");r?o=e.top-i.height:n?o=e.top+e.height:l?s=e.left-i.width:a?s=e.left+e.width:o=e.top-i.height;const c=t.includes("start"),p=t.includes("end");let h;return h=c?"start":p?"end":"center",(r||n)&&(s=this.alignCrossAxis(e.left,e.width,i.width,h)),(l||a)&&(o=this.alignCrossAxis(e.top,e.height,i.height,h)),{top:o,left:s}},alignCrossAxis:(t,e,i,o)=>"start"===o?t:"end"===o?t+e-i:t+e/2-i/2,calcPlacement(t,e,i){const{isHorizontal:o,isVertical:s}=this.getToward(t),{width:r,height:n}=i,{left:l,top:a,right:c,bottom:p}=e;let h=!0;const{windowWidth:m,windowHeight:d}=getWindowInfo();let f=t;o?t.startsWith("top")?h=a-n>=0:t.startsWith("bottom")&&(h=p+n<=d):s&&(t.startsWith("left")?h=l-r>=0:t.startsWith("right")&&(h=c+r<=m)),h||(o?f=t.startsWith("top")?t.replace("top","bottom"):t.replace("bottom","top"):s&&(f=t.startsWith("left")?t.replace("left","right"):t.replace("right","left")));const g=this.calcContentPosition(f,e,i);return Object.assign({placement:f},g)},computePosition(){return __awaiter(this,void 0,void 0,function*(){const{placement:t}=this.data,e=t.replace(/-(left|top)$/,"-start").replace(/-(right|bottom)$/,"-end");this.setData({_placement:e});const i=this.createSelectorQuery();i.select(`#${name}-wrapper`).boundingClientRect(),i.select(`#${name}-content`).boundingClientRect(),i.selectViewport().scrollOffset(),i.exec(t=>{const[i,o,s]=t;if(!i||!o)return;const r=this.calcPlacement(e,i,o),{placement:n}=r,l=__rest(r,["placement"]);this.setData({_placement:n});const{scrollTop:a=0,scrollLeft:c=0}=s,p=l.top+a,h=l.left+c,m=`top:${Math.max(p,0)}px;left:${Math.max(h,0)}px;`,d=this.calcArrowStyle(e,i,o);this.setData({contentStyle:m,arrowStyle:d})})})}}}};Popover=__decorate([wxComponent()],Popover);export default Popover;