ng-cdk-table-virtual-scroll
Version:
Virtual scroll for for Angular Cdk Table
16 lines (14 loc) • 9.08 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("rxjs/operators"),require("rxjs"),require("@angular/cdk/scrolling"),require("@angular/cdk/table")):"function"==typeof define&&define.amd?define("ng-cdk-table-virtual-scroll",["exports","@angular/core","rxjs/operators","rxjs","@angular/cdk/scrolling","@angular/cdk/table"],e):e((t=t||self)["ng-cdk-table-virtual-scroll"]={},t.ng.core,t.rxjs.operators,t.rxjs,t.ng.cdk.scrolling,t.ng.cdk.table)}(this,(function(t,e,i,r,n,o){"use strict";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */var a=function(t,e){return(a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])})(t,e)};function s(t,e,i,r){var n,o=arguments.length,a=o<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,r);else for(var s=t.length-1;s>=0;s--)(n=t[s])&&(a=(o<3?n(a):o>3?n(e,i,a):n(e,i))||a);return o>3&&a&&Object.defineProperty(e,i,a),a}var c=function(t){function e(e){void 0===e&&(e=[]);var i=t.call(this)||this;return i._renderData=new r.BehaviorSubject([]),i._renderChangesSubscription=null,i._data=new r.BehaviorSubject(e),i.updateChangeSubscription(),i}return function(t,e){function i(){this.constructor=t}a(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}(e,t),Object.defineProperty(e.prototype,"data",{get:function(){return this._data.value},set:function(t){this._data.next(t)},enumerable:!0,configurable:!0}),e.prototype.updateChangeSubscription=function(){var t=this;this.initStreams(),this._renderChangesSubscription=new r.Subscription,this._renderChangesSubscription.add(this._data.subscribe((function(e){return t.dataToRender$.next(e)}))),this._renderChangesSubscription.add(this.dataOfRange$.subscribe((function(e){return t._renderData.next(e)})))},e.prototype.initStreams=function(){this.streamsReady||(this.dataToRender$=new r.ReplaySubject(1),this.dataOfRange$=new r.ReplaySubject(1),this.streamsReady=!0)},e.prototype.connect=function(){return this._renderChangesSubscription||this.updateChangeSubscription(),this._renderData},e.prototype.disconnect=function(){this._renderChangesSubscription&&this._renderChangesSubscription.unsubscribe(),this._renderChangesSubscription=null},e}(o.DataSource),h=function(){function t(){this.indexChange=new r.Subject,this.stickyChange=new r.Subject,this.renderedRangeStream=new r.BehaviorSubject({start:0,end:0}),this.scrolledIndexChange=this.indexChange.pipe(i.distinctUntilChanged()),this._dataLength=0}return Object.defineProperty(t.prototype,"dataLength",{get:function(){return this._dataLength},set:function(t){this._dataLength=t,this.onDataLengthChanged()},enumerable:!0,configurable:!0}),t.prototype.attach=function(t){this.viewport=t,this.viewport.renderedRangeStream.subscribe(this.renderedRangeStream),this.onDataLengthChanged()},t.prototype.detach=function(){this.indexChange.complete(),this.stickyChange.complete(),this.renderedRangeStream.complete()},t.prototype.onContentScrolled=function(){this.updateContent()},t.prototype.onDataLengthChanged=function(){this.viewport&&this.viewport.setTotalContentSize(this.dataLength*this.rowHeight+this.headerHeight+this.footerHeight),this.updateContent()},t.prototype.onContentRendered=function(){},t.prototype.onRenderedOffsetChanged=function(){},t.prototype.scrollToIndex=function(t,e){this.viewport&&this.rowHeight&&this.viewport.scrollToOffset((t-1)*this.rowHeight+this.headerHeight)},t.prototype.setConfig=function(t){var e=t.rowHeight,i=t.headerHeight,r=t.footerHeight,n=t.bufferMultiplier;this.rowHeight===e&&this.headerHeight===i&&this.footerHeight===r&&this.bufferMultiplier===n||(this.rowHeight=e,this.headerHeight=i,this.footerHeight=r,this.bufferMultiplier=n,this.onDataLengthChanged())},t.prototype.updateContent=function(){if(this.viewport&&this.rowHeight){var t=this.viewport.measureScrollOffset(),e=Math.ceil(this.viewport.getViewportSize()/this.rowHeight),i=Math.max(t-this.headerHeight,0),r=Math.ceil(e*this.bufferMultiplier),n=Math.round(i/this.rowHeight),o=Math.max(0,n),a=Math.max(0,o-r),s=Math.min(this.dataLength,o+e+r),c=a*this.rowHeight;this.viewport.setRenderedContentOffset(c),this.viewport.setRenderedRange({start:a,end:s}),this.indexChange.next(o),this.stickyChange.next(c)}},t=s([e.Injectable()],t)}();function u(t){return t.scrollStrategy}var l=48,p=56,d=!0,f=48,g=!1,y=.7,b=function(){function t(t){this.zone=t,this.alive=!0,this.rowHeight=l,this.headerEnabled=d,this.headerHeight=p,this.footerEnabled=g,this.footerHeight=f,this.bufferMultiplier=y,this.scrollStrategy=new h,this.dataSourceChanges=new r.Subject}var a;return a=t,t.prototype.ngOnDestroy=function(){this.alive=!1,this.dataSourceChanges.complete()},t.prototype.isAlive=function(){var t=this;return function(){return t.alive}},t.prototype.isStickyEnabled=function(){return!!this.scrollStrategy.viewport&&this.table._headerRowDefs.map((function(t){return t.sticky})).reduce((function(t,e){return t&&e}),!0)},t.prototype.ngAfterContentInit=function(){var t=this,e=this.table._switchDataSource;this.table._switchDataSource=function(i){e.call(t.table,i),t.connectDataSource(i)},this.connectDataSource(this.table.dataSource),this.scrollStrategy.stickyChange.pipe(i.filter((function(){return t.isStickyEnabled()})),i.tap((function(){t.stickyPositions||t.initStickyPositions()})),i.takeWhile(this.isAlive())).subscribe((function(e){t.setSticky(e)}))},t.prototype.connectDataSource=function(t){var e=this;if(this.dataSourceChanges.next(),!(t instanceof c))throw new Error("[tvsItemSize] requires TableVirtualScrollDataSource be set as [dataSource] of [cdk-table]");t.dataToRender$.pipe(i.distinctUntilChanged(),i.takeUntil(this.dataSourceChanges),i.takeWhile(this.isAlive()),i.tap((function(t){return e.scrollStrategy.dataLength=t.length})),i.switchMap((function(t){return e.scrollStrategy.renderedRangeStream.pipe(i.map((function(e){var i=e.start,r=e.end;return"number"!=typeof i||"number"!=typeof r?t:t.slice(i,r)})))}))).subscribe((function(i){e.zone.run((function(){t.dataOfRange$.next(i)}))}))},t.prototype.ngOnChanges=function(){var t={rowHeight:+this.rowHeight||l,headerHeight:this.headerEnabled?+this.headerHeight||p:0,footerHeight:this.footerEnabled?+this.footerHeight||f:0,bufferMultiplier:+this.bufferMultiplier||y};this.scrollStrategy.setConfig(t)},t.prototype.setSticky=function(t){var e=this;this.scrollStrategy.viewport.elementRef.nativeElement.querySelectorAll(".cdk-header-row .cdk-table-sticky").forEach((function(i){var r=i.parentElement,n=0;e.stickyPositions.has(r)&&(n=e.stickyPositions.get(r)),i.style.top=n-t+"px"})),this.scrollStrategy.viewport.elementRef.nativeElement.querySelectorAll(".cdk-footer-row .cdk-table-sticky").forEach((function(i){var r=i.parentElement,n=0;e.stickyPositions.has(r)&&(n=e.stickyPositions.get(r)),i.style.bottom=-n+t+"px"}))},t.prototype.initStickyPositions=function(){var t=this;this.stickyPositions=new Map,this.scrollStrategy.viewport.elementRef.nativeElement.querySelectorAll(".cdk-header-row .cdk-table-sticky").forEach((function(e){var i=e.parentElement;t.stickyPositions.has(i)||t.stickyPositions.set(i,i.offsetTop)}))},t.ctorParameters=function(){return[{type:e.NgZone}]},s([e.Input("tvsItemSize")],t.prototype,"rowHeight",void 0),s([e.Input()],t.prototype,"headerEnabled",void 0),s([e.Input()],t.prototype,"headerHeight",void 0),s([e.Input()],t.prototype,"footerEnabled",void 0),s([e.Input()],t.prototype,"footerHeight",void 0),s([e.Input()],t.prototype,"bufferMultiplier",void 0),s([e.ContentChild(o.CdkTable,{static:!1})],t.prototype,"table",void 0),t=a=s([e.Directive({selector:"cdk-virtual-scroll-viewport[tvsItemSize]",providers:[{provide:n.VIRTUAL_SCROLL_STRATEGY,useFactory:u,deps:[e.forwardRef((function(){return a}))]}]})],t)}(),S=function(){function t(){}return t=s([e.NgModule({declarations:[b],exports:[b],imports:[]})],t)}();t.FixedSizeTableVirtualScrollStrategy=h,t.TableItemSizeDirective=b,t.TableVirtualScrollDataSource=c,t.TableVirtualScrollModule=S,t._tableVirtualScrollDirectiveStrategyFactory=u,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-cdk-table-virtual-scroll.umd.min.js.map