Skip to content

Commit

Permalink
feat(core): support angular 8
Browse files Browse the repository at this point in the history
  • Loading branch information
@PxyUp
PxyUp committed Oct 5, 2019
1 parent bf5eb7b commit fac2104
Show file tree
Hide file tree
Showing 6 changed files with 3,069 additions and 1,395 deletions.
7 changes: 6 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
## ng-virtual-table

Angular 7 virtual scroll table with support dynamic component, draggable, filtering, sorting, paginations, resizable and custom config for each column
Angular 7/8 virtual scroll table with support dynamic component, draggable, filtering, sorting, paginations, resizable and custom config for each column

[![Travis CI](https://img.shields.io/travis/PxyUp/ng-virtual-table/master.svg)](https://travis-ci.org/PxyUp/ng-virtual-table)
[![Coverage](https://img.shields.io/codecov/c/github/PxyUp/ng-virtual-table.svg)](https://codecov.io/gh/PxyUp/ng-virtual-table)
Expand All @@ -10,6 +10,11 @@ Angular 7 virtual scroll table with support dynamic component, draggable, filter

## Install and Use

| Angular | ng-virtual-table | NPM package |
|---------|------------------|-------------------------------|
| 8.x.x | 2.x.x | `ng-virtual-table@^2.0.0` |
| 7.x.x | 1.x.x | `ng-virtual-table@^1.0.0` |

```bash
npm i ng-virtual-table
yarn add ng-virtual-table
Expand Down
71 changes: 29 additions & 42 deletions lib/src/components/virtual-table.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,27 @@
/* tslint:disable */
import { VirtualTableComponent } from './virtual-table.component';
import { ComponentFixture, async, TestBed, tick, fakeAsync, flush } from '@angular/core/testing';
import { NgVirtualTableService } from '../services/ngVirtualTable.service';
import { MatIconModule } from '@angular/material/icon';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { CdkDragDrop, CdkDragMove, DragDropModule } from '@angular/cdk/drag-drop';
import { ComponentFixture, TestBed, async, fakeAsync, flush, tick } from '@angular/core/testing';
import { DebugElement, EmbeddedViewRef, SimpleChange } from '@angular/core';
import { Observable, Observer, of } from 'rxjs';
import {
ScrollDispatchModule,
CdkVirtualForOf,
CdkVirtualForOfContext,
} from '@angular/cdk/scrolling';
import { DragDropModule, CdkDragDrop, CdkDragMove } from '@angular/cdk/drag-drop';
import { DynamicModule } from 'ng-dynamic-component';
import { VirtualTableConfig, VirtualTableColumnInternal, sortColumn } from '../interfaces';
import { of, Observable, Observer } from 'rxjs';
ResponseStreamWithSize,
VirtualTableColumnInternal,
VirtualTableConfig,
sortColumn,
} from '../interfaces';
import { delay, skip } from 'rxjs/operators';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { By } from '@angular/platform-browser';
import { SimpleChange, DebugElement, EmbeddedViewRef } from '@angular/core';
import { DynamicModule } from 'ng-dynamic-component';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
import { skip, delay } from 'rxjs/operators';

CdkVirtualForOf.prototype['_updateContext'] = function(this: any) {
const count = this._data.length;
let i = this._viewContainerRef.length;
while (i--) {
const view = this._viewContainerRef.get(i) as EmbeddedViewRef<CdkVirtualForOfContext<any>>;
if (!view.destroyed) {
view.context.index = this._renderedRange.start + i;
view.context.count = count;
this._updateComputedContextProperties(view.context);
view.detectChanges();
}
}
};
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { NgVirtualTableService } from '../services/ngVirtualTable.service';
import { ReactiveFormsModule } from '@angular/forms';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
/* tslint:disable */
import { VirtualTableComponent } from './virtual-table.component';

function finishInit(fixture: ComponentFixture<any>) {
// On the first cycle we render and measure the viewport.
Expand Down Expand Up @@ -872,7 +860,7 @@ describe('VirtualTableComponent', () => {
describe('applyConfig', () => {
it('should execute serverSideStrategyObs', fakeAsync(() => {
const fn = (eff: any) => {
const mock = Observable.create(o => {
const mock = Observable.create((o: Observer<ResponseStreamWithSize>) => {
o.next({
stream: [1, 2, 3],
totalSize: 3,
Expand Down Expand Up @@ -910,7 +898,7 @@ describe('VirtualTableComponent', () => {

it('should serverSideStrategyObs throw error', fakeAsync(() => {
const fn = (eff: any) => {
const mock = Observable.create(o => {
const mock = Observable.create((o: Observer<ResponseStreamWithSize>) => {
o.next({
stream: [1, 2, 3],
totalSize: 3,
Expand Down Expand Up @@ -950,7 +938,7 @@ describe('VirtualTableComponent', () => {

it('should serverSideStrategyObs apply params', fakeAsync(() => {
const fn = (eff: any) => {
const mock = Observable.create(o => {
const mock = Observable.create((o: Observer<ResponseStreamWithSize>) => {
o.next({
stream: [1, 2, 3],
totalSize: 3,
Expand Down Expand Up @@ -988,7 +976,7 @@ describe('VirtualTableComponent', () => {
expect(component.sliceSize).toBe(3);
}));

it('should apply config with paginator', fakeAsync(() => {
it('should apply config with paginator', () => {
const config: VirtualTableConfig = {
header: false,
pagination: true,
Expand Down Expand Up @@ -1017,7 +1005,6 @@ describe('VirtualTableComponent', () => {
dataSource: new SimpleChange(null, component.dataSource, false),
});
fixture.detectChanges();
tick(1);

const header = debugEl.query(By.css('.header'));
const paginator = debugEl.query(By.css('.virtual-table-bottom'));
Expand All @@ -1043,9 +1030,9 @@ describe('VirtualTableComponent', () => {
component.applyConfig(config);
fixture.detectChanges();
expect(spy3).toBeCalled();
}));
});

it('should apply config', fakeAsync(() => {
it('should apply config', () => {
const config: VirtualTableConfig = {
header: false,
};
Expand Down Expand Up @@ -1073,7 +1060,7 @@ describe('VirtualTableComponent', () => {
dataSource: new SimpleChange(null, component.dataSource, false),
});
fixture.detectChanges();
tick(1);

const header = debugEl.query(By.css('.header'));

expect(header).toBe(null);
Expand All @@ -1084,7 +1071,7 @@ describe('VirtualTableComponent', () => {
const headerAfter = debugEl.query(By.css('.header'));

expect(headerAfter).not.toBe(null);
}));
});
});

describe('Set pagination settings', () => {
Expand Down
59 changes: 30 additions & 29 deletions lib/src/components/virtual-table.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,45 @@
import { CdkDragDrop, CdkDragMove, moveItemInArray } from '@angular/cdk/drag-drop';
import {
Component,
ChangeDetectionStrategy,
Input,
SimpleChanges,
ViewChild,
ElementRef,
ChangeDetectorRef,
Component,
ElementRef,
HostBinding,
Input,
OnChanges,
OnDestroy,
SimpleChanges,
ViewChild,
} from '@angular/core';
import { Observable, EMPTY, Subject, combineLatest, Subscription, zip, Observer, of } from 'rxjs';
import { EMPTY, Observable, Observer, Subject, Subscription, combineLatest } from 'rxjs';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import {
StreamWithEffect,
VirtualPageChange,
VirtualTableColumn,
VirtualTableColumnInternal,
VirtualTableConfig,
VirtualTableEffect,
VirtualTableItem,
VirtualTablePaginator,
} from '../interfaces';
import {
map,
startWith,
debounceTime,
distinctUntilChanged,
takeUntil,
filter,
map,
publishBehavior,
refCount,
startWith,
switchMap,
take,
filter,
takeUntil,
tap,
switchMap,
} from 'rxjs/operators';

import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { FormControl } from '@angular/forms';
import {
VirtualTableConfig,
VirtualTableItem,
VirtualTableColumn,
VirtualTableColumnInternal,
StreamWithEffect,
VirtualTablePaginator,
VirtualPageChange,
VirtualTableEffect,
} from '../interfaces';
import { CdkDragMove, CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { NgVirtualTableService } from '../services/ngVirtualTable.service';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { PageEvent, MatPaginator } from '@angular/material/paginator';

@Component({
selector: 'ng-virtual-table',
Expand Down Expand Up @@ -72,13 +73,13 @@ export class VirtualTableComponent implements OnChanges, OnDestroy {

@Input() itemSize = 25;

@ViewChild('inputFilterFocus') inputFilterFocus: ElementRef;
@ViewChild('inputFilterFocus', { static: false }) inputFilterFocus: ElementRef;

@ViewChild('headerDiv') headerDiv: ElementRef;
@ViewChild('headerDiv', { static: false }) headerDiv: ElementRef;

@ViewChild(MatPaginator) paginatorDiv: MatPaginator;
@ViewChild(MatPaginator, { static: false }) paginatorDiv: MatPaginator;

@ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;
@ViewChild(CdkVirtualScrollViewport, { static: false }) viewport: CdkVirtualScrollViewport;

@Input() dataSource: Observable<Array<VirtualTableItem | number | string | boolean>>;

Expand Down Expand Up @@ -221,7 +222,7 @@ export class VirtualTableComponent implements OnChanges, OnDestroy {
.subscribe((stream: Array<VirtualTableItem>) => {
const setOfColumn = new Set();
stream.forEach(e => Object.keys(e).forEach(key => setOfColumn.add(key)));
const autoColumnArray = Array.from(setOfColumn);
const autoColumnArray = Array.from(setOfColumn) as any;
this.column = this.createColumnFromArray(autoColumnArray);
this.cdr.detectChanges();
});
Expand Down
21 changes: 2 additions & 19 deletions lib/src/ngVirtualTable.module.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
import { CdkVirtualForOf, CdkVirtualForOfContext, ScrollingModule } from '@angular/cdk/scrolling';
import { EmbeddedViewRef, ModuleWithProviders, NgModule } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { DynamicModule } from 'ng-dynamic-component';
Expand All @@ -10,24 +6,11 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { NgVirtualTableService } from './services/ngVirtualTable.service';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { VirtualTableComponent } from './components/virtual-table.component';

CdkVirtualForOf.prototype['_updateContext'] = function(this: any) {
const count = this._data.length;
let i = this._viewContainerRef.length;
while (i--) {
const view = this._viewContainerRef.get(i) as EmbeddedViewRef<CdkVirtualForOfContext<any>>;
if (!view.destroyed) {
view.context.index = this._renderedRange.start + i;
view.context.count = count;
this._updateComputedContextProperties(view.context);
view.detectChanges();
}
}
};

@NgModule({
declarations: [VirtualTableComponent],
imports: [
Expand Down
59 changes: 31 additions & 28 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "ng-virtual-table",
"version": "1.0.46",
"description": "Angular 7 virtual scroll table with support dynamic component, draggable, filtering, server side, sorting, pagination, resizable and custom config column",
"version": "2.0.0",
"description": "Angular 7/8 virtual scroll table with support dynamic component, draggable, filtering, server side, sorting, pagination, resizable and custom config column",
"main": "index.js",
"repository": "[email protected]:PxyUp/ng-virtual-table.git",
"author": "Iurii Panarin <[email protected]>",
Expand All @@ -20,9 +20,9 @@
},
"ngPackage": {
"lib": {
"entryFile": "./lib/public_api.ts"
"entryFile": "./lib/public_api.ts",
"cssUrl": "inline"
},
"cssUrl": "inline",
"whitelistedNonPeerDependencies": [
"angular",
"rxjs",
Expand Down Expand Up @@ -51,40 +51,42 @@
]
},
"devDependencies": {
"@angular/animations": "^7.2.0",
"@angular/cdk": "^7.2.1",
"@angular/cli": "^7.0.0",
"@angular/common": "^7.0.0",
"@angular/compiler": "^7.0.0",
"@angular/compiler-cli": "^7.0.0",
"@angular/core": "^7.0.0",
"@angular/forms": "^7.0.0",
"@angular/material": "^7.2.1",
"@angular/platform-browser": "^7.0.0",
"@angular/platform-browser-dynamic": "^7.0.1",
"@angular/animations": "^8.0.0",
"@angular/cdk": "^8.0.0",
"@angular/cli": "^8.0.0",
"@angular/common": "^8.0.0",
"@angular/compiler": "^8.0.0",
"@angular/compiler-cli": "^8.0.0",
"@angular/core": "^8.0.0",
"@angular/forms": "^8.0.0",
"@angular/material": "^8.0.0",
"@angular/platform-browser": "^8.0.0",
"@angular/platform-browser-dynamic": "^8.0.0",
"@commitlint/config-conventional": "^7.1.2",
"@starptech/prettyhtml": "^0.5.1",
"@types/jest": "^23.3.7",
"codecov": "^3.1.0",
"codelyzer": "^4.5.0",
"browserslist": "^4.7.0",
"caniuse-lite": "^1.0.30000997",
"codecov": "^3.6.1",
"codelyzer": "^5.1.0",
"commitizen": "^3.0.4",
"commitlint": "^7.2.1",
"husky": "^1.1.2",
"jest": "^23.6.0",
"jest-preset-angular": "^6.0.1",
"lint-staged": "^8.0.4",
"ng-packagr": "^4.3.1",
"ng-packagr": "^5.5.1",
"npm-run-all": "^4.1.3",
"prettier": "^1.14.3",
"rimraf": "^2.6.2",
"rxjs": "^6.3.3",
"rxjs": "^6.4.0",
"rxjs-tslint-rules": "^4.10.0",
"scss-bundle": "^2.4.0",
"ts-jest": "^23.10.4",
"tsickle": "^0.33.0",
"tsickle": "^0.37.0",
"tslint": "^5.11.0",
"typescript": "3.1.3",
"zone.js": "~0.8.26"
"typescript": "3.4.3",
"zone.js": "~0.9.1"
},
"config": {
"commitizen": {
Expand All @@ -109,6 +111,7 @@
"ngx",
"angular",
"angular 7",
"angular 8",
"ngx",
"dynamic",
"component",
Expand All @@ -117,14 +120,14 @@
"life-cycle"
],
"peerDependencies": {
"@angular/animations": "^7.2.0",
"@angular/cdk": "^7.2.1",
"@angular/core": "^7.2.0",
"@angular/forms": "^7.2.0",
"@angular/material": "^7.2.1"
"@angular/animations": "^8.0.0",
"@angular/cdk": "^8.0.0",
"@angular/core": "^8.0.0",
"@angular/forms": "^8.0.0",
"@angular/material": "^8.0.0"
},
"dependencies": {
"ng-dynamic-component": "^4.0.0"
"ng-dynamic-component": "^5.0.0"
},
"jest": {
"globals": {
Expand Down
Loading

0 comments on commit fac2104

Please sign in to comment.