refactor

primefaces · Jul 24, 2024 · f7f061a · f7f061a
1 parent 9f36400
commit f7f061a
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 60 deletions.
diff --git a/src/app/components/tabmenu/tabmenu.ts b/src/app/components/tabmenu/tabmenu.ts
@@ -12,6 +12,7 @@ import {
     Inject,
     Input,
     NgModule,
+    OnDestroy,
     Output,
     PLATFORM_ID,
     QueryList,
@@ -132,7 +133,7 @@ import { filter } from 'rxjs/operators';
         class: 'p-element'
     }
 })
-export class TabMenu implements AfterContentInit, AfterViewInit, AfterViewChecked {
+export class TabMenu implements AfterContentInit, AfterViewInit, AfterViewChecked, OnDestroy {
     /**
      * An array of menuitems.
      * @group Props
@@ -225,6 +226,8 @@ export class TabMenu implements AfterContentInit, AfterViewInit, AfterViewChecke
 
     forwardIsDisabled: boolean = false;
 
+    private timerIdForAutoScroll: any = null;
+
     _focusableItems: MenuItem[] | undefined | any;
 
     _model: MenuItem[] | undefined;
@@ -244,27 +247,15 @@ export class TabMenu implements AfterContentInit, AfterViewInit, AfterViewChecke
         return this._focusableItems;
     }
 
-    constructor(
-        @Inject(PLATFORM_ID) private platformId: any,
-        private router: Router,
-        private route: ActivatedRoute,
-        private cd: ChangeDetectorRef
-    ) {
+    constructor(@Inject(PLATFORM_ID) private platformId: any, private router: Router, private route: ActivatedRoute, private cd: ChangeDetectorRef) {
         this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
             this.cd.markForCheck();
         });
     }
 
     ngOnChanges(simpleChange: SimpleChanges) {
         if (simpleChange.activeItem) {
-            if (!this.scrollable) {
-                return;
-            }
-            const activeItem = (this.model as MenuItem[]).findIndex((menuItem) => this.isActive(menuItem));
-
-            if (activeItem !== -1) {
-                this.updateScrollBar(activeItem);
-            }
+            this.autoScrollForActiveItem();
         }
     }
 
@@ -293,7 +284,7 @@ export class TabMenu implements AfterContentInit, AfterViewInit, AfterViewChecke
     ngAfterViewInit(): void {
         if (isPlatformBrowser(this.platformId)) {
             this.updateInkBar();
-
+            this.autoScrollForActiveItem();
             this.initButtonState();
         }
     }
@@ -305,6 +296,10 @@ export class TabMenu implements AfterContentInit, AfterViewInit, AfterViewChecke
         }
     }
 
+    ngOnDestroy(): void {
+        this.clearAutoScrollHandler();
+    }
+
     isActive(item: MenuItem) {
         if (item.routerLink) {
             const routerLink = Array.isArray(item.routerLink) ? item.routerLink : [item.routerLink];
@@ -349,7 +344,6 @@ export class TabMenu implements AfterContentInit, AfterViewInit, AfterViewChecke
         }
 
         this.activeItem = item;
-
         this.activeItemChange.emit(item);
         this.tabChanged = true;
         this.cd.markForCheck();
@@ -494,6 +488,29 @@ export class TabMenu implements AfterContentInit, AfterViewInit, AfterViewChecke
         content.scrollLeft = pos >= lastPos ? lastPos : pos;
     }
 
+    private autoScrollForActiveItem(): void {
+        if (!this.scrollable) {
+            return;
+        }
+
+        this.clearAutoScrollHandler();
+        // We have to wait for the rendering and then can scroll to element.
+        this.timerIdForAutoScroll = setTimeout(() => {
+            const activeItem = (this.model as MenuItem[]).findIndex((menuItem) => this.isActive(menuItem));
+
+            if (activeItem !== -1) {
+                this.updateScrollBar(activeItem);
+            }
+        });
+    }
+
+    private clearAutoScrollHandler(): void {
+        if (this.timerIdForAutoScroll) {
+            clearTimeout(this.timerIdForAutoScroll);
+            this.timerIdForAutoScroll = null;
+        }
+    }
+
     private initButtonState(): void {
         if (this.scrollable) {
             // We have to wait for the rendering and then retrieve the actual size element from the DOM.

diff --git a/src/app/showcase/doc/tabmenu/basicdoc.ts b/src/app/showcase/doc/tabmenu/basicdoc.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { MenuItem } from 'primeng/api';
 import { Code } from '@domain/code';
 
@@ -9,21 +9,29 @@ import { Code } from '@domain/code';
             <p>TabMenu requires a collection of menuitems as its model.</p>
         </app-docsectiontext>
         <div class="card">
-            <p-tabMenu [model]="items" />
+        <p-tabMenu [scrollable]="true" [model]="items" [activeItem]="activeItem"></p-tabMenu>
         </div>
         <app-code [code]="code" selector="tab-menu-basic-demo"></app-code>
     `
 })
 export class BasicDoc implements OnInit {
     items: MenuItem[] | undefined;
 
+    activeItem: MenuItem | undefined;
+
+    constructor(private cd:ChangeDetectorRef){
+
+    }
+
     ngOnInit() {
-        this.items = [
-            { label: 'Dashboard', icon: 'pi pi-home' },
-            { label: 'Transactions', icon: 'pi pi-chart-line' },
-            { label: 'Products', icon: 'pi pi-list' },
-            { label: 'Messages', icon: 'pi pi-inbox' }
-        ];
+      this.items = Array.from({ length: 50 }, (_, i) => ({
+        label: `Tab ${i + 1}`,
+      }));
+
+      setTimeout((_) => {
+        this.activeItem = this.items[40];
+        this.cd.markForCheck()
+      }, 2000);
     }
 
     code: Code = {

diff --git a/src/app/showcase/pages/tabmenu/tabmenudemo.ts b/src/app/showcase/pages/tabmenu/tabmenudemo.ts
@@ -13,45 +13,12 @@ import { RouterDoc } from '@doc/tabmenu/routerdoc';
 })
 export class TabMenuDemo {
     docs = [
-        {
-            id: 'import',
-            label: 'Import',
-            component: ImportDoc
-        },
+
         {
             id: 'basic',
             label: 'Basic',
             component: BasicDoc
         },
-        {
-            id: 'controlled',
-            label: 'Controlled',
-            component: ControlledDoc
-        },
-        {
-            id: 'template',
-            label: 'Template',
-            component: TemplateDoc
-        },
-        {
-            id: 'command',
-            label: 'Command',
-            component: CommandDoc
-        },
-        {
-            id: 'router',
-            label: 'Router',
-            component: RouterDoc
-        },
-        {
-            id: 'style',
-            label: 'Style',
-            component: StyleDoc
-        },
-        {
-            id: 'accessibility',
-            label: 'Accessibility',
-            component: AccessibilityDoc
-        }
+
     ];
 }