215 lines
24 KiB
JavaScript
215 lines
24 KiB
JavaScript
|
import { CommonModule } from '@angular/common';
|
||
|
|
import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, EventEmitter, Input, NgModule, Output, ViewChild, ViewEncapsulation, booleanAttribute, numberAttribute } from '@angular/core';
|
||
|
|
import { Footer, Header, PrimeTemplate, SharedModule } from 'primeng/api';
|
||
|
|
import { ScrollerModule } from 'primeng/scroller';
|
||
|
|
import * as i0 from "@angular/core";
|
||
|
|
import * as i1 from "@angular/common";
|
||
|
|
import * as i2 from "primeng/api";
|
||
|
|
import * as i3 from "primeng/scroller";
|
||
|
|
/**
|
||
|
|
* VirtualScroller is a performant approach to handle huge data efficiently.
|
||
|
|
* @group Components
|
||
|
|
*/
|
||
|
|
export class VirtualScroller {
|
||
|
|
el;
|
||
|
|
cd;
|
||
|
|
/**
|
||
|
|
* An array of objects to display.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
value;
|
||
|
|
/**
|
||
|
|
* Height of an item in the list.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
itemSize;
|
||
|
|
/**
|
||
|
|
* Inline style of the component.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
style;
|
||
|
|
/**
|
||
|
|
* Style class of the component.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
styleClass;
|
||
|
|
/**
|
||
|
|
* Max height of the content area in inline mode.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
scrollHeight;
|
||
|
|
/**
|
||
|
|
* Defines if data is loaded and interacted with in lazy manner.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
lazy;
|
||
|
|
/**
|
||
|
|
* Whether to use the scroller feature. The properties of scroller component can be used like an object in it.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
options;
|
||
|
|
/**
|
||
|
|
* Threshold in milliseconds to delay lazy loading during scrolling.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
delay = 250;
|
||
|
|
/**
|
||
|
|
* Callback to invoke in lazy mode to load new data.
|
||
|
|
* @param {VirtualScrollerLazyLoadEvent} event - custom lazy load event.
|
||
|
|
* @group Emits
|
||
|
|
*/
|
||
|
|
onLazyLoad = new EventEmitter();
|
||
|
|
header;
|
||
|
|
footer;
|
||
|
|
templates;
|
||
|
|
scroller;
|
||
|
|
itemTemplate;
|
||
|
|
headerTemplate;
|
||
|
|
footerTemplate;
|
||
|
|
loadingItemTemplate;
|
||
|
|
virtualScrollTimeout;
|
||
|
|
constructor(el, cd) {
|
||
|
|
this.el = el;
|
||
|
|
this.cd = cd;
|
||
|
|
}
|
||
|
|
ngAfterContentInit() {
|
||
|
|
this.templates.forEach((item) => {
|
||
|
|
switch (item.getType()) {
|
||
|
|
case 'item':
|
||
|
|
this.itemTemplate = item.template;
|
||
|
|
break;
|
||
|
|
case 'loadingItem':
|
||
|
|
this.loadingItemTemplate = item.template;
|
||
|
|
break;
|
||
|
|
case 'header':
|
||
|
|
this.headerTemplate = item.template;
|
||
|
|
break;
|
||
|
|
case 'footer':
|
||
|
|
this.footerTemplate = item.template;
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
this.itemTemplate = item.template;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
onLazyItemLoad(event) {
|
||
|
|
if (this.virtualScrollTimeout) {
|
||
|
|
clearTimeout(this.virtualScrollTimeout);
|
||
|
|
}
|
||
|
|
this.virtualScrollTimeout = setTimeout(() => {
|
||
|
|
this.onLazyLoad.emit({
|
||
|
|
...event,
|
||
|
|
rows: event.last - event.first,
|
||
|
|
forceUpdate: () => this.cd.detectChanges()
|
||
|
|
});
|
||
|
|
}, this.delay);
|
||
|
|
}
|
||
|
|
getBlockableElement() {
|
||
|
|
return this.el.nativeElement.children[0];
|
||
|
|
}
|
||
|
|
scrollToIndex(index, mode) {
|
||
|
|
this.scroller?.scrollToIndex(index, mode);
|
||
|
|
}
|
||
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: VirtualScroller, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
||
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: VirtualScroller, selector: "p-virtualScroller", inputs: { value: "value", itemSize: ["itemSize", "itemSize", numberAttribute], style: "style", styleClass: "styleClass", scrollHeight: "scrollHeight", lazy: ["lazy", "lazy", booleanAttribute], options: "options", delay: ["delay", "delay", numberAttribute] }, outputs: { onLazyLoad: "onLazyLoad" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "header", first: true, predicate: Header, descendants: true }, { propertyName: "footer", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }], ngImport: i0, template: `
|
||
|
|
<div [ngClass]="'p-virtualscroller p-component'" [ngStyle]="style" [class]="styleClass" [attr.data-pc-name]="'virtualscroller'" [attr.data-pc-section]="'root'">
|
||
|
|
<div class="p-virtualscroller-header" *ngIf="header || headerTemplate">
|
||
|
|
<ng-content select="p-header"></ng-content>
|
||
|
|
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
|
||
|
|
</div>
|
||
|
|
<div #content class="p-virtualscroller-content" [attr.data-pc-section]="'content'">
|
||
|
|
<p-scroller #scroller [items]="value" styleClass="p-virtualscroller-list" [style]="{ height: scrollHeight }" [itemSize]="itemSize" [lazy]="lazy" (onLazyLoad)="onLazyItemLoad($event)" [options]="options">
|
||
|
|
<ng-template pTemplate="item" let-item let-scrollerOptions="options">
|
||
|
|
<div [ngStyle]="{ height: itemSize + 'px' }" class="p-virtualscroller-item">
|
||
|
|
<ng-container *ngTemplateOutlet="item ? itemTemplate : loadingItemTemplate; context: { $implicit: item, options: scrollerOptions }"></ng-container>
|
||
|
|
</div>
|
||
|
|
</ng-template>
|
||
|
|
</p-scroller>
|
||
|
|
</div>
|
||
|
|
<div class="p-virtualscroller-footer" *ngIf="footer || footerTemplate" [attr.data-pc-section]="'footer'">
|
||
|
|
<ng-content select="p-footer"></ng-content>
|
||
|
|
<ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.Scroller, selector: "p-scroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: VirtualScroller, decorators: [{
|
||
|
|
type: Component,
|
||
|
|
args: [{
|
||
|
|
selector: 'p-virtualScroller',
|
||
|
|
template: `
|
||
|
|
<div [ngClass]="'p-virtualscroller p-component'" [ngStyle]="style" [class]="styleClass" [attr.data-pc-name]="'virtualscroller'" [attr.data-pc-section]="'root'">
|
||
|
|
<div class="p-virtualscroller-header" *ngIf="header || headerTemplate">
|
||
|
|
<ng-content select="p-header"></ng-content>
|
||
|
|
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
|
||
|
|
</div>
|
||
|
|
<div #content class="p-virtualscroller-content" [attr.data-pc-section]="'content'">
|
||
|
|
<p-scroller #scroller [items]="value" styleClass="p-virtualscroller-list" [style]="{ height: scrollHeight }" [itemSize]="itemSize" [lazy]="lazy" (onLazyLoad)="onLazyItemLoad($event)" [options]="options">
|
||
|
|
<ng-template pTemplate="item" let-item let-scrollerOptions="options">
|
||
|
|
<div [ngStyle]="{ height: itemSize + 'px' }" class="p-virtualscroller-item">
|
||
|
|
<ng-container *ngTemplateOutlet="item ? itemTemplate : loadingItemTemplate; context: { $implicit: item, options: scrollerOptions }"></ng-container>
|
||
|
|
</div>
|
||
|
|
</ng-template>
|
||
|
|
</p-scroller>
|
||
|
|
</div>
|
||
|
|
<div class="p-virtualscroller-footer" *ngIf="footer || footerTemplate" [attr.data-pc-section]="'footer'">
|
||
|
|
<ng-content select="p-footer"></ng-content>
|
||
|
|
<ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
changeDetection: ChangeDetectionStrategy.Default,
|
||
|
|
encapsulation: ViewEncapsulation.None,
|
||
|
|
host: {
|
||
|
|
class: 'p-element'
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
|
||
|
|
type: Input
|
||
|
|
}], itemSize: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: numberAttribute }]
|
||
|
|
}], style: [{
|
||
|
|
type: Input
|
||
|
|
}], styleClass: [{
|
||
|
|
type: Input
|
||
|
|
}], scrollHeight: [{
|
||
|
|
type: Input
|
||
|
|
}], lazy: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], options: [{
|
||
|
|
type: Input
|
||
|
|
}], delay: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: numberAttribute }]
|
||
|
|
}], onLazyLoad: [{
|
||
|
|
type: Output
|
||
|
|
}], header: [{
|
||
|
|
type: ContentChild,
|
||
|
|
args: [Header]
|
||
|
|
}], footer: [{
|
||
|
|
type: ContentChild,
|
||
|
|
args: [Footer]
|
||
|
|
}], templates: [{
|
||
|
|
type: ContentChildren,
|
||
|
|
args: [PrimeTemplate]
|
||
|
|
}], scroller: [{
|
||
|
|
type: ViewChild,
|
||
|
|
args: ['scroller']
|
||
|
|
}] } });
|
||
|
|
export class VirtualScrollerModule {
|
||
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: VirtualScrollerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
||
|
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: VirtualScrollerModule, declarations: [VirtualScroller], imports: [CommonModule, SharedModule, ScrollerModule], exports: [VirtualScroller, SharedModule, ScrollerModule] });
|
||
|
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: VirtualScrollerModule, imports: [CommonModule, SharedModule, ScrollerModule, SharedModule, ScrollerModule] });
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: VirtualScrollerModule, decorators: [{
|
||
|
|
type: NgModule,
|
||
|
|
args: [{
|
||
|
|
imports: [CommonModule, SharedModule, ScrollerModule],
|
||
|
|
exports: [VirtualScroller, SharedModule, ScrollerModule],
|
||
|
|
declarations: [VirtualScroller]
|
||
|
|
}]
|
||
|
|
}] });
|
||
|
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlydHVhbHNjcm9sbGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2FwcC9jb21wb25lbnRzL3ZpcnR1YWxzY3JvbGxlci92aXJ0dWFsc2Nyb2xsZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFFSCx1QkFBdUIsRUFFdkIsU0FBUyxFQUNULFlBQVksRUFDWixlQUFlLEVBRWYsWUFBWSxFQUNaLEtBQUssRUFDTCxRQUFRLEVBQ1IsTUFBTSxFQUdOLFNBQVMsRUFDVCxpQkFBaUIsRUFDakIsZ0JBQWdCLEVBQ2hCLGVBQWUsRUFDbEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFlLE1BQU0sRUFBRSxNQUFNLEVBQUUsYUFBYSxFQUFtQixZQUFZLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDeEcsT0FBTyxFQUFZLGNBQWMsRUFBRSxNQUFNLGtCQUFrQixDQUFDOzs7OztBQUc1RDs7O0dBR0c7QUE4QkgsTUFBTSxPQUFPLGVBQWU7SUFrRUw7SUFBdUI7SUFqRTFDOzs7T0FHRztJQUNNLEtBQUssQ0FBb0I7SUFDbEM7OztPQUdHO0lBQ29DLFFBQVEsQ0FBcUI7SUFDcEU7OztPQUdHO0lBQ00sS0FBSyxDQUE4QztJQUM1RDs7O09BR0c7SUFDTSxVQUFVLENBQXFCO0lBQ3hDOzs7T0FHRztJQUNNLFlBQVksQ0FBTTtJQUMzQjs7O09BR0c7SUFDcUMsSUFBSSxDQUFzQjtJQUNsRTs7O09BR0c7SUFDTSxPQUFPLENBQThCO0lBQzlDOzs7T0FHRztJQUNvQyxLQUFLLEdBQVcsR0FBRyxDQUFDO0lBQzNEOzs7O09BSUc7SUFDTyxVQUFVLEdBQStDLElBQUksWUFBWSxFQUFnQyxDQUFDO0lBRTlGLE1BQU0sQ0FBcUI7SUFFM0IsTUFBTSxDQUFxQjtJQUVqQixTQUFTLENBQXFDO0lBRXZELFFBQVEsQ0FBcUI7SUFFcEQsWUFBWSxD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
|