ng-cw-v12/fesm2015/ng-cw-v12-infinite-scroll.js

Angular UI Component Library

import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewChild, Output, Input, NgModule } from '@angular/core';
import { Subject, fromEvent } from 'rxjs';
import { debounceTime, filter } from 'rxjs/operators';

class InfiniteScrollComponent {
    constructor() {
        /** 滚动到底部时回调 */
        this.ncReachedBottom = new EventEmitter();
        /** 是否禁用检测 */
        this._disableDetection = false;
        /** 触发加载的距离阈值，单位为px */
        this.ncDistance = 0;
        /** 防抖延迟（单位ms），默认用户停止滚动触底200ms后执行方法 */
        this.ncDelay = 200;
        this.scrollSubject = new Subject();
        this.isNearBottom = false;
    }
    set ncDisableDetection(value) {
        this._disableDetection = value !== null && value !== undefined && value !== false && value !== 'false';
    }
    get ncDisableDetection() {
        return this._disableDetection;
    }
    ngAfterViewInit() {
        this.initScrollListener();
    }
    initScrollListener() {
        const scrollElement = this.scrollContainer.nativeElement;
        fromEvent(scrollElement, 'scroll').subscribe(() => {
            this.handleScroll(scrollElement);
        });
        this.scrollSubject.pipe(debounceTime(this.ncDelay), filter(() => !this.ncDisableDetection)).subscribe(() => {
            if (this.isNearBottom) {
                this.ncReachedBottom.emit();
            }
        });
    }
    handleScroll(element) {
        const { scrollTop, clientHeight, scrollHeight } = element;
        this.isNearBottom = scrollTop + clientHeight >= scrollHeight - this.ncDistance;
        if (this.isNearBottom) {
            this.scrollSubject.next();
        }
    }
}
InfiniteScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: InfiniteScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
InfiniteScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: InfiniteScrollComponent, selector: "nc-infinite-scroll", inputs: { ncDisableDetection: "ncDisableDetection", ncDistance: "ncDistance", ncDelay: "ncDelay" }, outputs: { ncReachedBottom: "ncReachedBottom" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div #scrollContainer class=\"nc-infinite-scroll\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [".nc-infinite-scroll{width:100%;height:100%;overflow:auto}.nc-infinite-scroll::-webkit-scrollbar{width:6px;height:6px}.nc-infinite-scroll::-webkit-scrollbar-thumb{background-color:#cdc9cf;border-radius:10px;-webkit-transition:background-color .3s ease;transition:background-color .3s ease}.nc-infinite-scroll::-webkit-scrollbar-thumb:hover{background-color:#766d7b}.nc-infinite-scroll::-webkit-scrollbar-track{background:#0000;cursor:pointer}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: InfiniteScrollComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'nc-infinite-scroll',
                    templateUrl: './infinite-scroll.component.html',
                    styleUrls: ['./infinite-scroll.component.less']
                }]
        }], ctorParameters: function () { return []; }, propDecorators: { scrollContainer: [{
                type: ViewChild,
                args: ['scrollContainer']
            }], ncReachedBottom: [{
                type: Output
            }], ncDisableDetection: [{
                type: Input
            }], ncDistance: [{
                type: Input
            }], ncDelay: [{
                type: Input
            }] } });

class NcInfiniteScrollModule {
}
NcInfiniteScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcInfiniteScrollModule, declarations: [InfiniteScrollComponent], exports: [InfiniteScrollComponent] });
NcInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcInfiniteScrollModule, imports: [[]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcInfiniteScrollModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        InfiniteScrollComponent
                    ],
                    imports: [],
                    exports: [
                        InfiniteScrollComponent
                    ]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { InfiniteScrollComponent, NcInfiniteScrollModule };
//# sourceMappingURL=ng-cw-v12-infinite-scroll.js.map