quarkd/lib/virtuallist/index.js

Mobile UI Components built on Web Components.

import{_ as t,a as e}from"../typeof.js";import{_ as i,a as r,b as n,c as a,P as o,H as s,d as l,N as u,O as c,B as h}from"../index2.js";import{_ as f}from"../defineProperty.js";import"../loading/index.js";function v(t){var e=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(t){return!1}}();return function(){var n,a=i(t);if(e){var o=i(this).constructor;n=Reflect.construct(a,arguments,o)}else n=a.apply(this,arguments);return r(this,n)}}var p=function(i){n(l,s);var r=v(l);function l(){var e;t(this,l);for(var i=arguments.length,n=new Array(i),s=0;s<i;s++)n[s]=arguments[s];return e=r.call.apply(r,[this].concat(n)),f(a(e),"itemheight",50),f(a(e),"containerheight",document.documentElement.clientHeight||document.body.clientHeight||667),f(a(e),"listData",[]),f(a(e),"visibleData",[]),f(a(e),"renderItem",(function(){return null})),f(a(e),"startOffset",0),f(a(e),"prevStart",0),f(a(e),"prevEnd",0),f(a(e),"virtualListRef",o()),f(a(e),"containerRef",o()),f(a(e),"updateVisibleData",(function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,i=Math.floor(t/e.itemheight),r=Math.ceil(e.containerheight/e.itemheight),n=Math.min(i+r,e.listData.length)+1;e.prevStart===i&&e.prevEnd===n||(e.visibleData=e.listData.slice(i,n),e.prevStart=i,e.prevEnd=n,e.startOffset=i*e.itemheight),i+r>=e.listData.length&&e.$emit("load")})),f(a(e),"handleListScroll",(function(){var t=e.virtualListRef.current;if(t){var i=t.scrollTop;e.updateVisibleData(i)}else console.warn("virtualListRef not find")})),f(a(e),"componentDidMount",(function(){e.updateVisibleData()})),f(a(e),"renderList",(function(){var t=e.visibleData.map((function(t){return e.renderItem(t)}));e.containerRef.current&&(e.containerRef.current.innerHTML=t.join("\n"))})),e}return e(l,[{key:"setListData",value:function(t){this.listData=t,this.updateVisibleData()}},{key:"setRenderItem",value:function(t){this.renderItem=t}},{key:"render",value:function(){return s.h("div",{ref:this.virtualListRef,class:"quark-virtual-list",style:{height:this.containerheight},onScroll:this.handleListScroll,part:"root"},s.h("div",{class:"quark-virtual-list-phantom",part:"phantom",style:{height:this.listData.length*this.itemheight}}),s.h("div",{ref:this.containerRef,class:"quark-virtual-list-container",part:"container",style:{transform:"translate3d(0, ".concat(this.startOffset,"px, 0)")}},this.renderList()))}}]),l}();l([u({type:Number})],p.prototype,"itemheight",void 0),l([u({type:Number})],p.prototype,"containerheight",void 0),l([c()],p.prototype,"listData",void 0),l([c()],p.prototype,"visibleData",void 0),l([c()],p.prototype,"renderItem",void 0),l([c()],p.prototype,"startOffset",void 0);var d=p=l([h({tag:"quark-virtuallist",style:":host {\n  width: 100%;\n}\n\n:host .quark-virtual-list {\n  width: var(--virtual-list-width, 100%);\n  background-color: var(--virtual-list-background-color, #fff);\n  overflow-y: auto;\n  position: relative;\n}\n\n:host .quark-virtual-list-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n}\n"})],p);export{d as default};