mtfscrolllist
Version:
Virtualized infinite scrolling list 虚拟化无限滚动 下拉刷新列表
2 lines (1 loc) • 11 kB
JavaScript
!(function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd){define([],t);console.log(t)}else{var n=t();for(var o in n)("object"==typeof exports?exports:e)[o]=n[o]}}(self,(function(){return(()=>{"use strict";var e={97:(e,t,n)=>{function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function r(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}n.r(t),n.d(t,{MtfScrollList:()=>u,ReactMtfScrollList:()=>w});var l=function(e,t,n){var o=null;return function(){for(var i=this,r=arguments.length,l=new Array(r),a=0;a<r;a++)l[a]=arguments[a];n&&o&&(clearTimeout(o)||(o=null)),!o&&(o=setTimeout((function(){e.apply(i,l),o=null}),t))}},a=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(e){window.setTimeout(e,1e3/60)},s=function(){function e(){o(this,e),this.stack=[],this.height=0}return r(e,[{key:"isEmpty",value:function(){return 0===this.stack.length}},{key:"push",value:function(e){var t=e.ele,n=e.height;return this.height+=n||0,this.stack.push({ele:t,height:n})}},{key:"front",value:function(){return this.stack[this.stack.length-1]}},{key:"pop",value:function(){var e=this.stack.pop();return this.height-=e.height||0,e}},{key:"clear",value:function(){this.height=this.stack.length=0}}]),e}(),c=function(){function e(t){var n=t.self;o(this,e),this.self=n,this.firstChild=null,this.lastChild=null,this.cache={top:new s,bottom:new s}}return r(e,[{key:"paddingTop",value:function(e){return e&&(this.self.G.ele.style.paddingTop=e+"px"),0===e?this.self.G.ele.style.removeProperty("padding-top"):e||parseInt(this.self.G.ele.style.paddingTop)||0}},{key:"firstChildPaddingTop",value:function(e){this.firstChild.style.paddingTop=e+"px"}},{key:"lastChildPaddingBottom",value:function(e){this.lastChild.style.paddingBottom=e+"px"}},{key:"height",value:function(e){var t=e.currentStyle||window.getComputedStyle(e);return e.offsetHeight+parseInt(0|t.marginTop)+parseInt(0|t.marginBottom)}},{key:"prepend",value:function(e){var t=this,n=this.firstChild.nextSibling,o=document.createDocumentFragment();e.forEach((function(e){return o.appendChild(t.self.G.render({data:e,index:t.self.G.startIndex++}))})),this.self.G.ele.insertBefore(o,n)}},{key:"prependFromCache",value:function(){var e=this.cache.top.pop();if(e){var t=this.firstChild.nextSibling,n=document.createDocumentFragment();e.ele.forEach((function(e){return n.appendChild(e)})),this.self.G.ele.insertBefore(n,t),this.firstChildPaddingTop(this.cache.top.height)}}},{key:"append",value:function(e){var t=this,n=document.createDocumentFragment();e.forEach((function(e){return n.appendChild(t.self.G.render({data:e,index:t.self.G.startIndex++}))})),this.self.G.ele.insertBefore(n,this.lastChild)}},{key:"appendFromCache",value:function(){var e=this.cache.bottom.pop();if(e){var t=document.createDocumentFragment();e.ele.forEach((function(e){return t.appendChild(e)})),this.self.G.ele.insertBefore(t,this.lastChild),this.lastChildPaddingBottom(this.cache.bottom.height)}}},{key:"clearTop",value:function(){if(this.self.G.ele.children.length-2>this.self.G.perPage){for(var e=Array(this.self.G.perPage),t=-1,n=0;++t<this.self.G.perPage;)n+=this.height(e[t]=this.self.G.ele.children[1]),this.self.G.ele.removeChild(e[t]);this.cache.top.push({ele:e,height:n}),this.firstChildPaddingTop(this.cache.top.height)}}},{key:"clearBottom",value:function(){var e=this.self.G.ele.children.length-2-this.self.G.perPage;if(e>0){for(var t=Array(e),n=0;e--;)n+=this.height(t[e]=this.self.G.ele.children[this.self.G.ele.children.length-2]),this.self.G.ele.removeChild(t[e]);this.cache.bottom.push({ele:t,height:n}),this.lastChildPaddingBottom(this.cache.bottom.height)}}},{key:"init",value:function(){this.self.G.ele.innerHTML="",this.firstChild=document.createElement("div"),this.lastChild=document.createElement("div"),this.firstChild.style.height=this.lastChild.style.height="1px",this.self.G.ele.appendChild(this.firstChild),this.self.G.ele.appendChild(this.lastChild)}},{key:"clear",value:function(){for(var e=this.self.G.ele.children.length-1;e-- >1;)this.self.G.ele.removeChild(this.self.G.ele.children[this.self.G.ele.children.length-2]);this.firstChildPaddingTop(0),this.lastChildPaddingBottom(0),this.cache.top.clear(),this.cache.bottom.clear()}}]),e}(),u=function(){function e(){o(this,e),this.G=Object.create(null),this.Dom=new c({self:this})}return r(e,[{key:"init",value:function(e){var t=e.ele,n=void 0===t?null:t,o=e.data,i=void 0===o?[]:o,r=e.render,l=void 0===r?function(){return document.createElement("div")}:r,a=e.perPage,s=void 0===a?i.length:a,c=e.onTop,u=void 0===c?function(){}:c,h=e.onBottom,f=void 0===h?function(){}:h,d=e.onPullDownStart,p=void 0===d?function(){}:d,m=e.onPullDownMove,v=void 0===m?function(){}:m,g=e.onPullDownEnd,y=void 0===g?function(){}:g;this.G={ele:n,render:l,startIndex:0,perPage:s,onTop:u,onBottom:f,onPullDownStart:p,onPullDownMove:v,onPullDownEnd:y},this.Dom.init(),this.refresh({data:i}),this.scrollListener(),this.pullDownListener()}},{key:"scrollListener",value:function(){var e=this,t=function(){var t=e;if(e.Dom.cache.top.isEmpty()){if(e.G.startIndex%e.G.perPage>0)return;e.G.onTop({cb:function(e){e&&(t.Dom.clearBottom(),t.Dom.prepend(e))},page:e.G.startIndex/e.G.perPage+1})}else e.Dom.clearBottom(),e.Dom.prependFromCache()},n=function(){var t=e;if(e.Dom.cache.bottom.isEmpty()){if(e.G.startIndex%e.G.perPage>0)return;e.G.onBottom({cb:function(e){e&&(t.Dom.clearTop(),t.Dom.append(e))},page:e.G.startIndex/e.G.perPage+1})}else e.Dom.clearTop(),e.Dom.appendFromCache()},o=function(){var o=e.G.ele.getBoundingClientRect(),i=e.Dom.firstChild.getBoundingClientRect(),r=e.Dom.lastChild.getBoundingClientRect();i.bottom>o.top&&t(),r.top<o.bottom&&n()};if("undefined"==typeof IntersectionObserver)this.G.ele.addEventListener("scroll",l(o,1e3/60));else{var i=new window.IntersectionObserver((function(o){1===o.length&&o[0].isIntersecting&&(o[0].target===e.Dom.firstChild?t():n())}),{root:this.G.ele,threshold:0});i.observe(this.Dom.firstChild),i.observe(this.Dom.lastChild)}this.G.ele.addEventListener("scroll",l((function t(){var n=e.Dom.firstChild.offsetHeight,i=e.Dom.lastChild.offsetTop+1;(n>1&&e.G.ele.scrollTop<n||i>1&&i>e.G.ele.offsetHeight&&e.G.ele.scrollTop+e.G.ele.offsetHeight>i)&&(o(),t())}),150,!0))}},{key:"refresh",value:function(e){var t=e.data,n=e.perPage;this.G.startIndex=0,this.Dom.clear(),n&&(this.G.perPage=n),t&&this.Dom.append(t)}},{key:"pullDownListener",value:function(){var e=this,t=function(e){return e.targetTouches?e.targetTouches[0].clientY:e.clientY},n="ontouchend"in document,o=!1,i=0,r=function(n){var r=t(n)-i;r>0&&(!1===o&&(e.G.onPullDownStart({startY:i}),o=!0),void 0===e.G.onPullDownMove({paddingTop:r})&&e.Dom.paddingTop(r))},l=function t(){var i=e;e.G.ele.removeEventListener(n?"touchmove":"mousemove",r),document.removeEventListener(n?"touchend":"mouseup",t);var l=e.Dom.paddingTop();e.G.onPullDownEnd({paddingTop:l,cb:function(e){i.refresh({data:e})}}),a((function t(){var n=Math.max(5,l/10);l>n?(e.Dom.paddingTop(l-=n),a(t)):(e.Dom.paddingTop(0),o=!1)}))};this.G.ele.addEventListener(n?"touchstart":"mousedown",(function(o){e.G.ele.scrollTop||(i=t(o),e.G.ele.addEventListener(n?"touchmove":"mousemove",r),document.addEventListener(n?"touchend":"mouseup",l))}))}}]),e}();const h=require("react");var f=n.n(h);const d=require("react-dom");var p=n.n(d);function m(e){return(m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function v(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function g(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function y(e,t){return(y=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function b(e,t){return!t||"object"!==m(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function G(e){return(G=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var w=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&y(e,t)}(l,e);var t,n,o,i,r=(o=l,i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}(),function(){var e,t=G(o);if(i){var n=G(this).constructor;e=Reflect.construct(t,arguments,n)}else e=t.apply(this,arguments);return b(this,e)});function l(){return v(this,l),r.apply(this,arguments)}return t=l,(n=[{key:"componentDidMount",value:function(){var e=this,t=function(t,n){if(e.props[t])return e.props[t](n)},n=this;this.mtfScrollList=new u,this.mtfScrollList.init({ele:this.el,data:[],perPage:this.props.perPage,style:{height:"90%"},render:function(e){var t=e.data,o=e.index,i=document.createElement("div");return i.setAttribute("index",o),n.props.render&&p().render(n.props.render({data:t,index:o}),i),i},onTop:function(e){var n=e.cb,o=e.page;return t("onTop",{cb:n,page:o})},onBottom:function(e){var n=e.cb,o=e.page;return t("onBottom",{cb:n,page:o})},onPullDownStart:function(e){var n=e.startY;return t("onPullDownStart",{startY:n})},onPullDownMove:function(e){var n=e.paddingTop;return t("onPullDownMove",{paddingTop:n})},onPullDownEnd:function(e){var n=e.paddingTop,o=e.cb;return t("onPullDownEnd",{paddingTop:n,cb:o})}})}},{key:"componentDidUpdate",value:function(e){var t={data:this.props.data,perPage:this.props.perPage},n={data:e.data,perPage:e.perPage};JSON.stringify(t)!==JSON.stringify(n)&&this.mtfScrollList.refresh(t)}},{key:"render",value:function(){var e=this;return f().createElement("div",{className:this.props.className,ref:function(t){return e.el=t}})}}])&&g(t.prototype,n),l}(h.Component)}},t={};function n(o){if(t[o])return t[o].exports;var i=t[o]={exports:{}};return e[o](i,i.exports,n),i.exports}return n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n(97)})()})));