virtualscroller.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. "use strict";
  2. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  3. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  4. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  5. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  6. return c > 3 && r && Object.defineProperty(target, key, r), r;
  7. };
  8. var __metadata = (this && this.__metadata) || function (k, v) {
  9. if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
  10. };
  11. Object.defineProperty(exports, "__esModule", { value: true });
  12. var core_1 = require("@angular/core");
  13. var common_1 = require("@angular/common");
  14. var shared_1 = require("../common/shared");
  15. var scrolling_1 = require("@angular/cdk/scrolling");
  16. var VirtualScroller = /** @class */ (function () {
  17. function VirtualScroller(el) {
  18. this.el = el;
  19. this.cache = true;
  20. this.first = 0;
  21. this.trackBy = function (index, item) { return item; };
  22. this.onLazyLoad = new core_1.EventEmitter();
  23. this._totalRecords = 0;
  24. this.lazyValue = [];
  25. this.page = 0;
  26. }
  27. Object.defineProperty(VirtualScroller.prototype, "totalRecords", {
  28. get: function () {
  29. return this._totalRecords;
  30. },
  31. set: function (val) {
  32. this._totalRecords = val;
  33. this.lazyValue = Array.from({ length: this._totalRecords });
  34. this.onLazyLoad.emit(this.createLazyLoadMetadata());
  35. this.first = 0;
  36. this.scrollTo(0);
  37. },
  38. enumerable: true,
  39. configurable: true
  40. });
  41. Object.defineProperty(VirtualScroller.prototype, "value", {
  42. get: function () {
  43. return this.lazy ? this.lazyValue : this._value;
  44. },
  45. set: function (val) {
  46. if (this.lazy) {
  47. if (val) {
  48. var arr = this.cache ? this.lazyValue.slice() : Array.from({ length: this._totalRecords });
  49. for (var i = this.first, j = 0; i < (this.first + this.rows); i++, j++) {
  50. arr[i] = val[j];
  51. }
  52. this.lazyValue = arr;
  53. }
  54. }
  55. else {
  56. this._value = val;
  57. }
  58. },
  59. enumerable: true,
  60. configurable: true
  61. });
  62. VirtualScroller.prototype.ngAfterContentInit = function () {
  63. var _this = this;
  64. this.templates.forEach(function (item) {
  65. switch (item.getType()) {
  66. case 'item':
  67. _this.itemTemplate = item.template;
  68. break;
  69. case 'loadingItem':
  70. _this.loadingItemTemplate = item.template;
  71. break;
  72. default:
  73. _this.itemTemplate = item.template;
  74. break;
  75. }
  76. });
  77. };
  78. VirtualScroller.prototype.onScrollIndexChange = function (index) {
  79. var p = Math.floor(index / this.rows);
  80. if (p !== this.page) {
  81. this.page = p;
  82. this.first = this.page * this.rows;
  83. this.onLazyLoad.emit(this.createLazyLoadMetadata());
  84. }
  85. };
  86. VirtualScroller.prototype.createLazyLoadMetadata = function () {
  87. return {
  88. first: this.first,
  89. rows: this.rows
  90. };
  91. };
  92. VirtualScroller.prototype.getBlockableElement = function () {
  93. return this.el.nativeElement.children[0];
  94. };
  95. VirtualScroller.prototype.scrollTo = function (index) {
  96. if (this.viewPortViewChild && this.viewPortViewChild['elementRef'] && this.viewPortViewChild['elementRef'].nativeElement) {
  97. this.viewPortViewChild['elementRef'].nativeElement.scrollTop = index * this.itemSize;
  98. }
  99. };
  100. __decorate([
  101. core_1.Input(),
  102. __metadata("design:type", Number)
  103. ], VirtualScroller.prototype, "itemSize", void 0);
  104. __decorate([
  105. core_1.Input(),
  106. __metadata("design:type", Object)
  107. ], VirtualScroller.prototype, "style", void 0);
  108. __decorate([
  109. core_1.Input(),
  110. __metadata("design:type", String)
  111. ], VirtualScroller.prototype, "styleClass", void 0);
  112. __decorate([
  113. core_1.Input(),
  114. __metadata("design:type", Object)
  115. ], VirtualScroller.prototype, "scrollHeight", void 0);
  116. __decorate([
  117. core_1.Input(),
  118. __metadata("design:type", Boolean)
  119. ], VirtualScroller.prototype, "lazy", void 0);
  120. __decorate([
  121. core_1.Input(),
  122. __metadata("design:type", Boolean)
  123. ], VirtualScroller.prototype, "cache", void 0);
  124. __decorate([
  125. core_1.Input(),
  126. __metadata("design:type", Number)
  127. ], VirtualScroller.prototype, "rows", void 0);
  128. __decorate([
  129. core_1.Input(),
  130. __metadata("design:type", Number)
  131. ], VirtualScroller.prototype, "first", void 0);
  132. __decorate([
  133. core_1.Input(),
  134. __metadata("design:type", Function)
  135. ], VirtualScroller.prototype, "trackBy", void 0);
  136. __decorate([
  137. core_1.ContentChild(shared_1.Header, { static: false }),
  138. __metadata("design:type", Object)
  139. ], VirtualScroller.prototype, "header", void 0);
  140. __decorate([
  141. core_1.ContentChild(shared_1.Footer, { static: false }),
  142. __metadata("design:type", Object)
  143. ], VirtualScroller.prototype, "footer", void 0);
  144. __decorate([
  145. core_1.ContentChildren(shared_1.PrimeTemplate),
  146. __metadata("design:type", core_1.QueryList)
  147. ], VirtualScroller.prototype, "templates", void 0);
  148. __decorate([
  149. core_1.ViewChild('viewport', { static: false }),
  150. __metadata("design:type", core_1.ElementRef)
  151. ], VirtualScroller.prototype, "viewPortViewChild", void 0);
  152. __decorate([
  153. core_1.Output(),
  154. __metadata("design:type", core_1.EventEmitter)
  155. ], VirtualScroller.prototype, "onLazyLoad", void 0);
  156. __decorate([
  157. core_1.Input(),
  158. __metadata("design:type", Number),
  159. __metadata("design:paramtypes", [Number])
  160. ], VirtualScroller.prototype, "totalRecords", null);
  161. __decorate([
  162. core_1.Input(),
  163. __metadata("design:type", Array),
  164. __metadata("design:paramtypes", [Array])
  165. ], VirtualScroller.prototype, "value", null);
  166. VirtualScroller = __decorate([
  167. core_1.Component({
  168. selector: 'p-virtualScroller',
  169. template: "\n <div [ngClass]=\"'ui-virtualscroller ui-widget'\" [ngStyle]=\"style\" [class]=\"styleClass\">\n <div class=\"ui-virtualscroller-header ui-widget-header ui-corner-top\" *ngIf=\"header\">\n <ng-content select=\"p-header\"></ng-content>\n </div>\n <div #content class=\"ui-virtualscroller-content ui-widget-content\">\n <ul class=\"ui-virtualscroller-list\">\n <cdk-virtual-scroll-viewport #viewport [ngStyle]=\"{'height': scrollHeight}\" [itemSize]=\"itemSize\" (scrolledIndexChange)=\"onScrollIndexChange($event)\">\n <ng-container *cdkVirtualFor=\"let item of value; trackBy: trackBy; let i = index; let c = count; let f = first; let l = last; let e = even; let o = odd; \">\n <li [ngStyle]=\"{'height': itemSize + 'px'}\">\n <ng-container *ngTemplateOutlet=\"item ? itemTemplate : loadingItemTemplate; context: {$implicit: item, index: i, count: c, first: f, last: l, even: e, odd: o}\"></ng-container>\n </li>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n </ul>\n </div>\n <div class=\"ui-virtualscroller-footer ui-widget-header ui-corner-bottom\" *ngIf=\"footer\">\n <ng-content select=\"p-footer\"></ng-content>\n </div>\n </div>\n "
  170. }),
  171. __metadata("design:paramtypes", [core_1.ElementRef])
  172. ], VirtualScroller);
  173. return VirtualScroller;
  174. }());
  175. exports.VirtualScroller = VirtualScroller;
  176. var VirtualScrollerModule = /** @class */ (function () {
  177. function VirtualScrollerModule() {
  178. }
  179. VirtualScrollerModule = __decorate([
  180. core_1.NgModule({
  181. imports: [common_1.CommonModule, scrolling_1.ScrollingModule],
  182. exports: [VirtualScroller, shared_1.SharedModule, scrolling_1.ScrollingModule],
  183. declarations: [VirtualScroller]
  184. })
  185. ], VirtualScrollerModule);
  186. return VirtualScrollerModule;
  187. }());
  188. exports.VirtualScrollerModule = VirtualScrollerModule;
  189. //# sourceMappingURL=virtualscroller.js.map