Skip to content
This repository was archived by the owner on Jun 22, 2020. It is now read-only.

Commit 8d9f355

Browse files
authored
Merge pull request #29 from Angular-RU/fix/render
fix: refactor render
2 parents 76dfac4 + 78dd826 commit 8d9f355

File tree

74 files changed

+1683
-1690
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+1683
-1690
lines changed

README.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,7 @@ import { MyData } from './my-data.interface';
2929

3030
@Component({
3131
selector: 'app-root',
32-
template: `
33-
<ngx-table-builder [source]="data"></ngx-table-builder>
34-
`
32+
template: ` <ngx-table-builder [source]="data"></ngx-table-builder> `
3533
})
3634
export class AppComponent {
3735
public data: MyData[] = [

helpers/mocks/simple-mock.component.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@ import { TableRow } from '../../projects/table-builder/src/lib/table/interfaces/
55
// noinspection AngularMissingOrInvalidDeclarationInModule
66
@Component({
77
selector: 'app',
8-
template: `
9-
<ngx-table-builder [source]="data" [buffer-amount]="5"></ngx-table-builder>
10-
`
8+
template: ` <ngx-table-builder [source]="data" [buffer-amount]="5"></ngx-table-builder> `
119
})
1210
export class SimpleMockComponent {
1311
public data: TableRow[] = [

package.json

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,12 @@
1212
"test": "jest --config ./jest.config.js"
1313
},
1414
"devDependencies": {
15-
"@angular-devkit/build-angular": "0.803.25",
16-
"@angular-ru/eslint-config": "10.6.0",
15+
"@angular-devkit/build-angular": "0.803.26",
16+
"@angular-ru/eslint-config": "12.3.0",
17+
"@angular-ru/prettier-config": "12.6.0",
1718
"@angular/animations": "8.2.14",
1819
"@angular/cdk": "8.2.3",
19-
"@angular/cli": "8.3.25",
20+
"@angular/cli": "8.3.26",
2021
"@angular/common": "8.2.14",
2122
"@angular/compiler": "8.2.14",
2223
"@angular/compiler-cli": "8.2.14",
@@ -30,7 +31,6 @@
3031
"@types/jest": "24.0.13",
3132
"@types/node": "12.7.5",
3233
"acorn": "6.1.1",
33-
"codelyzer": "5.0.1",
3434
"colors": "1.3.3",
3535
"core-js": "2.6.9",
3636
"eslint": "6.8.0",
@@ -42,7 +42,6 @@
4242
"jest-preset-angular": "7.1.0",
4343
"ng-packagr": "9.0.3",
4444
"ngx-toastr": "10.0.4",
45-
"prettier": "1.17.1",
4645
"pretty": "2.0.0",
4746
"rxjs": "6.5.2",
4847
"sort-package-json": "1.40.0",

projects/table-builder/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@angular-ru/ng-table-builder",
3-
"version": "0.38.0",
3+
"version": "0.41.0",
44
"license": "MIT",
55
"bugs": {
66
"url": "https://github.com/Angular-RU/ng-table-builder/issues"

projects/table-builder/src/lib/table-builder.module.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { ObserverViewDirective } from './table/directives/observer-view.directiv
2424
import { TemplateBodyTdDirective } from './table/directives/rows/template-body-td.directive';
2525
import { TemplateHeadThDirective } from './table/directives/rows/template-head-th.directive';
2626
import { VirtualForDirective } from './table/directives/virtual-for.directive';
27+
import { Any } from './table/interfaces/table-builder.internal';
2728
import { DeepPathPipe } from './table/pipes/deep-path.pipe';
2829
import { DefaultValuePipe } from './table/pipes/default-value.pipe';
2930
import { DisableRowPipe } from './table/pipes/disable-row.pipe';
@@ -32,6 +33,10 @@ import { UtilsService } from './table/services/utils/utils.service';
3233
import { TableBuilderComponent } from './table/table-builder.component';
3334
import { WebWorkerThreadService } from './table/worker/worker-thread.service';
3435

36+
if (window['Zone']) {
37+
(window as Any)[window['Zone'].__symbol__('MutationObserver')] = MutationObserver;
38+
}
39+
3540
@NgModule({
3641
imports: [CommonModule, DragDropModule],
3742
declarations: [

projects/table-builder/src/lib/table/components/common/modal-view-layer.ts

Lines changed: 21 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -81,17 +81,13 @@ export abstract class ModalViewLayer<T extends PositionState> implements OnDestr
8181
public updateView(): void {
8282
detectChanges(this.cd);
8383

84-
this.ngZone.runOutsideAngular(
85-
(): void => {
86-
window.requestAnimationFrame(
87-
(): void => {
88-
detectChanges(this.cd);
89-
this.app.tick();
90-
this.refresh();
91-
}
92-
);
93-
}
94-
);
84+
this.ngZone.run((): void => {
85+
window.requestAnimationFrame((): void => {
86+
detectChanges(this.cd);
87+
this.app.tick();
88+
this.refresh();
89+
});
90+
});
9591
}
9692

9793
public ngOnDestroy(): void {
@@ -103,28 +99,22 @@ export abstract class ModalViewLayer<T extends PositionState> implements OnDestr
10399
public abstract close(event: MouseEvent): void;
104100

105101
protected update(): void {
106-
this.ngZone.runOutsideAngular(
107-
(): void => {
108-
window.setTimeout(
109-
(): void => {
110-
this.isViewed = this.state.opened;
111-
this.updateView();
112-
window.setTimeout((): void => this.updateView());
113-
}
114-
);
115-
}
116-
);
102+
this.ngZone.runOutsideAngular((): void => {
103+
window.setTimeout((): void => {
104+
this.isViewed = this.state.opened;
105+
this.updateView();
106+
window.setTimeout((): void => this.updateView());
107+
});
108+
});
117109
}
118110

119111
private refresh(): void {
120-
this.ngZone.runOutsideAngular(
121-
(): void => {
122-
window.setTimeout((): void => {
123-
this.isRendered = true;
124-
this.minHeight = this.calculatedHeight;
125-
detectChanges(this.cd);
126-
}, TABLE_GLOBAL_OPTIONS.TIME_IDLE);
127-
}
128-
);
112+
this.ngZone.runOutsideAngular((): void => {
113+
window.setTimeout((): void => {
114+
this.isRendered = true;
115+
this.minHeight = this.calculatedHeight;
116+
detectChanges(this.cd);
117+
}, TABLE_GLOBAL_OPTIONS.TIME_IDLE);
118+
});
129119
}
130120
}

projects/table-builder/src/lib/table/components/ngx-context-menu/ngx-context-menu-item/ngx-context-menu-item.component.ts

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -113,19 +113,15 @@ export class NgxContextMenuItemComponent implements OnInit, OnDestroy {
113113
}
114114

115115
private deferCloseMenu(): void {
116-
this.ngZone.runOutsideAngular(
117-
(): void => {
118-
this.taskId = window.setTimeout((): void => this.contextMenu.close());
119-
}
120-
);
116+
this.ngZone.runOutsideAngular((): void => {
117+
this.taskId = window.setTimeout((): void => this.contextMenu.close());
118+
});
121119
}
122120

123121
private deferUpdateView(): void {
124-
this.ngZone.runOutsideAngular(
125-
(): void => {
126-
window.clearInterval(this.taskId);
127-
this.taskId = window.setTimeout((): void => detectChanges(this.cd));
128-
}
129-
);
122+
this.ngZone.runOutsideAngular((): void => {
123+
window.clearInterval(this.taskId);
124+
this.taskId = window.setTimeout((): void => detectChanges(this.cd));
125+
});
130126
}
131127
}

projects/table-builder/src/lib/table/components/ngx-filter-viewer/ngx-filter-viewer.component.ts

Lines changed: 22 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -55,38 +55,34 @@ export class NgxFilterViewerComponent implements OnChanges, OnInit, OnDestroy {
5555
}
5656

5757
public ngOnInit(): void {
58-
this.subscription = this.filterable.events.subscribe(
59-
(event: FilterEvent): void => {
60-
if (this.filterable.definition[this.key] || this.filterable.globalFilterValue) {
61-
this.changeSelection(event);
62-
} else {
63-
this.defaultHtmlValue();
64-
}
65-
66-
detectChanges(this.cd);
58+
this.subscription = this.filterable.events.subscribe((event: FilterEvent): void => {
59+
if (this.filterable.definition[this.key] || this.filterable.globalFilterValue) {
60+
this.changeSelection(event);
61+
} else {
62+
this.defaultHtmlValue();
6763
}
68-
);
64+
65+
detectChanges(this.cd);
66+
});
6967
}
7068

7169
public ngOnDestroy(): void {
7270
this.subscription.unsubscribe();
7371
}
7472

7573
private changeSelection(event: FilterEvent): void {
76-
this.ngZone.runOutsideAngular(
77-
(): void => {
78-
window.clearInterval(this.taskId);
79-
this.taskId = window.setTimeout((): void => {
80-
if (event.value || this.filterable.definition[this.key]) {
81-
this.selected(event);
82-
} else {
83-
this.defaultHtmlValue();
84-
}
85-
86-
detectChanges(this.cd);
87-
}, TIME_RELOAD + this.index);
88-
}
89-
);
74+
this.ngZone.runOutsideAngular((): void => {
75+
window.clearInterval(this.taskId);
76+
this.taskId = window.setTimeout((): void => {
77+
if (event.value || this.filterable.definition[this.key]) {
78+
this.selected(event);
79+
} else {
80+
this.defaultHtmlValue();
81+
}
82+
83+
detectChanges(this.cd);
84+
}, TIME_RELOAD + this.index);
85+
});
9086
}
9187

9288
// eslint-disable-next-line max-lines-per-function,complexity
@@ -113,9 +109,8 @@ export class NgxFilterViewerComponent implements OnChanges, OnInit, OnDestroy {
113109
regexp = new RegExp(`${escapedValue}`, 'ig');
114110
}
115111

116-
const trustedHtml: string = String(this.text).replace(
117-
regexp,
118-
(finder: string): string => NgxFilterViewerComponent.wrapSelectedHtml(finder)
112+
const trustedHtml: string = String(this.text).replace(regexp, (finder: string): string =>
113+
NgxFilterViewerComponent.wrapSelectedHtml(finder)
119114
);
120115

121116
this.html = this.sanitizer.bypassSecurityTrustHtml(trustedHtml);

projects/table-builder/src/lib/table/components/table-cell/table-cell.component.ts

Lines changed: 31 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -85,20 +85,18 @@ export class TableCellComponent implements OnDestroy {
8585

8686
private detectCheckOverflow(element: HTMLDivElement, event: MouseEvent): void {
8787
window.clearInterval(this.timeoutShowedFrameId);
88-
this.ngZone.runOutsideAngular(
89-
(): void => {
90-
this.timeoutShowedFrameId = window.setTimeout((): void => {
91-
const canEnableTooltip: boolean = this.viewportInfo.isScrolling
92-
? false
93-
: this.isEllipsisActive(element);
94-
95-
if (canEnableTooltip) {
96-
this.removeElement();
97-
this.showTooltip(element, event);
98-
}
99-
}, this.timeIdle);
100-
}
101-
);
88+
this.ngZone.runOutsideAngular((): void => {
89+
this.timeoutShowedFrameId = window.setTimeout((): void => {
90+
const canEnableTooltip: boolean = this.viewportInfo.isScrolling
91+
? false
92+
: this.isEllipsisActive(element);
93+
94+
if (canEnableTooltip) {
95+
this.removeElement();
96+
this.showTooltip(element, event);
97+
}
98+
}, this.timeIdle);
99+
});
102100
}
103101

104102
// eslint-disable-next-line max-lines-per-function
@@ -125,34 +123,30 @@ export class TableCellComponent implements OnDestroy {
125123
this.nodeSubscription = fromEvent(elem, 'mouseleave').subscribe((): void => this.removeElement());
126124
this.closeElemSub = fromEvent(this.overflowCloseElem, 'click').subscribe((): void => this.removeElement());
127125

128-
this.ngZone.runOutsideAngular(
129-
(): void => {
130-
this.timeoutOverflowId = window.setTimeout((): void => {
131-
if (this.viewportInfo.isScrolling) {
132-
this.removeElement();
133-
} else {
134-
this.overflowContentElem.classList.add('visible');
135-
}
136-
}, TABLE_GLOBAL_OPTIONS.TIME_IDLE);
137-
}
138-
);
126+
this.ngZone.runOutsideAngular((): void => {
127+
this.timeoutOverflowId = window.setTimeout((): void => {
128+
if (this.viewportInfo.isScrolling) {
129+
this.removeElement();
130+
} else {
131+
this.overflowContentElem.classList.add('visible');
132+
}
133+
}, TABLE_GLOBAL_OPTIONS.TIME_IDLE);
134+
});
139135
}
140136

141137
private removeElement(): void {
142138
if (this.overflowContentElem) {
143139
this.overflowContentElem.classList.remove('visible');
144-
this.ngZone.runOutsideAngular(
145-
(): void => {
146-
window.setTimeout((): void => {
147-
if (this.overflowContentElem) {
148-
this.overflowContentElem.parentNode.removeChild(this.overflowContentElem);
149-
}
150-
151-
this.nodeSubscription && this.nodeSubscription.unsubscribe();
152-
this.closeElemSub && this.closeElemSub.unsubscribe();
153-
}, TABLE_GLOBAL_OPTIONS.TIME_IDLE);
154-
}
155-
);
140+
this.ngZone.runOutsideAngular((): void => {
141+
window.setTimeout((): void => {
142+
if (this.overflowContentElem) {
143+
this.overflowContentElem.parentNode.removeChild(this.overflowContentElem);
144+
}
145+
146+
this.nodeSubscription && this.nodeSubscription.unsubscribe();
147+
this.closeElemSub && this.closeElemSub.unsubscribe();
148+
}, TABLE_GLOBAL_OPTIONS.TIME_IDLE);
149+
});
156150
}
157151
}
158152
}

0 commit comments

Comments
 (0)