feat: auto calculate height for context menu

Author: m.ivanov4

projects/table-builder/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@angular-ru/ng-table-builder",
-    "version": "0.24.0",
+    "version": "0.29.0",
     "license": "MIT",
     "bugs": {
         "url": "https://github.com/Angular-RU/ng-table-builder/issues"

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

@@ -1,6 +1,7 @@
 import { ApplicationRef, ChangeDetectorRef, ElementRef, Injector, NgZone, OnDestroy, ViewChild } from '@angular/core';
 import { Subscription } from 'rxjs';
 
+import { TABLE_GLOBAL_OPTIONS } from '../../config/table-global-options';
 import { MousePosition } from '../../interfaces/table-builder.internal';
 import { detectChanges } from '../../operators/detect-changes';
 import { ContextMenuService } from '../../services/context-menu/context-menu.service';
@@ -18,6 +19,8 @@ export abstract class ModalViewLayer<T extends PositionState> implements OnDestr
     public width: number = null;
     public height: number = null;
     public isViewed: boolean = false;
+    public isRendered: boolean = false;
+    public minHeight: number;
     protected subscription: Subscription = null;
     protected readonly app: ApplicationRef;
     protected readonly utils: UtilsService;
@@ -50,17 +53,43 @@ export abstract class ModalViewLayer<T extends PositionState> implements OnDestr
     }
 
     public get overflowY(): number {
-        const overflowY: number = this.getHeight() + this.top - this.utils.bodyRect.height;
+        const overflowY: number = this.calculatedHeight + this.top - this.utils.bodyRect.height;
         return overflowY > 0 ? overflowY + SCROLLBAR_WIDTH : 0;
     }
 
     public abstract get state(): Partial<T>;
 
+    public get calculatedHeight(): number {
+        let height: number;
+
+        try {
+            if (this.height) {
+                height =
+                    this.menu.nativeElement.scrollHeight > this.height
+                        ? this.menu.nativeElement.offsetHeight
+                        : this.height;
+            } else {
+                height = this.menu.nativeElement.scrollHeight;
+            }
+        } catch (e) {
+            height = this.height;
+        }
+
+        return height;
+    }
+
     public updateView(): void {
         detectChanges(this.cd);
+
         this.ngZone.runOutsideAngular(
             (): void => {
-                window.requestAnimationFrame((): void => this.app.tick());
+                window.requestAnimationFrame(
+                    (): void => {
+                        detectChanges(this.cd);
+                        this.app.tick();
+                        this.refresh();
+                    }
+                );
             }
         );
     }
@@ -87,16 +116,15 @@ export abstract class ModalViewLayer<T extends PositionState> implements OnDestr
         );
     }
 
-    private getHeight(): number {
-        let height: number;
-
-        try {
-            height =
-                this.menu.nativeElement.scrollHeight > this.height ? this.menu.nativeElement.offsetHeight : this.height;
-        } catch (e) {
-            height = this.height;
-        }
-
-        return height;
+    private refresh(): void {
+        this.ngZone.runOutsideAngular(
+            (): void => {
+                window.setTimeout((): void => {
+                    this.isRendered = true;
+                    this.minHeight = this.calculatedHeight;
+                    detectChanges(this.cd);
+                }, TABLE_GLOBAL_OPTIONS.TIME_IDLE);
+            }
+        );
     }
 }

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

@@ -12,11 +12,12 @@
         (contextmenu)="close($event)"
         [ngStyle]="{
             'width.px': width,
-            'min-height.px': height,
-            'max-height.px': maxHeight,
+            opacity: isRendered ? 1 : 0,
+            'max-height.px': isRendered ? maxHeight : 0,
+            'min-height.px': isRendered ? minHeight : 0,
             'top.px': state?.position?.top - overflowY,
             'left.px': state?.position?.left - overflowX,
-            visibility: state?.position ? 'visible' : 'hidden'
+            visibility: isRendered ? 'visible' : 'hidden'
         }"
     >
         <ng-content></ng-content>

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

@@ -11,14 +11,15 @@
         z-index: 10;
         border: 1px solid #dcdcdc;
         flex-direction: column;
-        transition: max-height, height, min-height 0.3s;
+        visibility: hidden;
+        transition: opacity 0.3s;
         min-height: 0;
         max-height: 0;
-        height: 0;
         overflow: hidden;
         background: rgb(255, 255, 255);
         box-shadow: 0 8px 15px rgba(0, 0, 0, 0.35);
         border-radius: 4px;
+        opacity: 0;
         font-family: Lucida Grande, sans-serif;
 
         &__item {

projects/table-builder/src/lib/table/styles/columns.scss

@@ -98,15 +98,16 @@
             opacity: 0.2;
             font-size: 12px;
             cursor: pointer;
+            position: relative;
 
             .table-grid-icon--sortable {
                 transition: transform 0.4s;
 
                 &-number {
                     position: absolute;
-                    font-family: Lucida Grande, sans-serif;
-                    font-size: 10px;
-                    font-weight: bold;
+                    font-size: 8px;
+                    font-weight: normal;
+                    right: 0;
                 }
             }
 

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

@@ -35,7 +35,7 @@ import {
     TableRow,
     ViewPortInfo
 } from './interfaces/table-builder.external';
-import { Fn, KeyMap, PrimaryKey, QueryListRef, ResizeEvent } from './interfaces/table-builder.internal';
+import { KeyMap, PrimaryKey, QueryListRef, ResizeEvent } from './interfaces/table-builder.internal';
 import { detectChanges } from './operators/detect-changes';
 import { ContextMenuService } from './services/context-menu/context-menu.service';
 import { DraggableService } from './services/draggable/draggable.service';
@@ -224,6 +224,18 @@ export abstract class TableBuilderApiImpl
         return this.source && this.source.length ? this.source : [];
     }
 
+    private get filterValueExist(): boolean {
+        return this.filterable.filterValueExist && this.enableFiltering;
+    }
+
+    private get notEmpty(): boolean {
+        return !this.sortable.empty && !!this.source;
+    }
+
+    private get notChanges(): boolean {
+        return this.sortable.empty && !this.filterable.filterValueExist;
+    }
+
     public recheckViewportChecked(): void {
         this.tableViewportChecked = !this.tableViewportChecked;
         this.idleDetectChanges();
@@ -274,25 +286,19 @@ export abstract class TableBuilderApiImpl
         );
     }
 
-    // eslint-disable-next-line complexity
     public async sortAndFilter(): Promise<void> {
-        this.toggleFreeze();
-
-        if (this.filterable.filterValueExist && this.enableFiltering) {
-            const filter: FilterWorkerEvent = await this.filterable.filter(this.originalSource);
-            this.source = await this.sortable.sort(filter.source);
-            filter.fireSelection();
-        } else if (!this.sortable.empty && this.source) {
-            this.source = await this.sortable.sort(this.originalSource);
-        }
-
-        if (this.sortable.empty && !this.filterable.filterValueExist) {
-            this.source = this.originalSource;
-        }
-
+        this.toggleFreeze(true);
+        await this.recalculationSource();
         this.calculateViewport(true);
-        this.toggleFreeze(TIME_IDLE);
         this.onChanges.emit(this.sourceRef);
+
+        this.ngZone.runOutsideAngular(
+            (): void => {
+                window.setTimeout((): void => {
+                    this.toggleFreeze(false);
+                }, TIME_IDLE);
+            }
+        );
     }
 
     public sortByKey(key: string): void {
@@ -307,16 +313,9 @@ export abstract class TableBuilderApiImpl
         this.changeSchema();
     }
 
-    public toggleFreeze(time: number = null, callback: Fn = null): void {
-        this.isFrozenView = !this.isFrozenView;
-        if (time) {
-            window.setTimeout((): void => {
-                detectChanges(this.cd);
-                callback && callback();
-            }, time);
-        } else {
-            detectChanges(this.cd);
-        }
+    public toggleFreeze(state: boolean): void {
+        this.isFrozenView = state;
+        detectChanges(this.cd);
     }
 
     public changeSchema(defaultColumns: SimpleSchemaColumns = null): void {
@@ -402,6 +401,20 @@ export abstract class TableBuilderApiImpl
 
     protected abstract updateViewportInfo(start: number, end: number): void;
 
+    private async recalculationSource(): Promise<void> {
+        if (this.filterValueExist) {
+            const filter: FilterWorkerEvent = await this.filterable.filter(this.originalSource);
+            this.source = await this.sortable.sort(filter.source);
+            filter.fireSelection();
+        } else if (this.notEmpty) {
+            this.source = await this.sortable.sort(this.originalSource);
+        }
+
+        if (this.notChanges) {
+            this.source = this.originalSource;
+        }
+    }
+
     private calculateWidth(key: string, width: number): void {
         this.isDragging[key] = true;
         this.onMouseResizeColumn(key, width);

src/app/samples/sample-eleven/sample-eleven.component.html

@@ -47,7 +47,7 @@
                         <br />
 
                         <ngx-table-builder #table1 [source]="licences" [enable-selection]="true">
-                            <ngx-context-menu>
+                            <ngx-context-menu [height]="null">
                                 <ngx-context-menu-item contextTitle divider>
                                     <ngx-menu-content icon="https://angular.io/assets/images/logos/angular/angular.svg">
                                     </ngx-menu-content>

src/polyfills.ts

@@ -1,3 +1,5 @@
+/* eslint-disable simple-import-sort/sort */
 import 'hammerjs';
 import 'intersection-observer';
+import './zone-flags';
 import 'zone.js/dist/zone';

src/tsconfig.app.json

@@ -4,5 +4,5 @@
         "outDir": "../out-tsc/app",
         "types": []
     },
-    "exclude": ["test.ts", "**/*.spec.ts", "**/*.worker.ts"]
+    "include": ["main.ts", "polyfills.ts", "zone-flags.ts", "src/**/*.ts"]
 }

src/tsconfig.spec.json

@@ -4,6 +4,5 @@
         "outDir": "../out-tsc/spec",
         "types": ["jest", "node"]
     },
-    "files": ["test.ts", "polyfills.ts"],
-    "include": ["**/*.spec.ts", "**/*.d.ts"]
+    "include": ["**/*.spec.ts", "main.ts", "polyfills.ts", "zone-flags.ts"]
 }