From f7f061a74de6f749b078400617ff1a7787992185 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
<92744169+mehmetcetin01140@users.noreply.github.com>
Date: Wed, 24 Jul 2024 15:14:41 +0300
Subject: [PATCH] refactor
---
src/app/components/tabmenu/tabmenu.ts | 51 ++++++++++++-------
src/app/showcase/doc/tabmenu/basicdoc.ts | 24 ++++++---
src/app/showcase/pages/tabmenu/tabmenudemo.ts | 37 +-------------
3 files changed, 52 insertions(+), 60 deletions(-)
diff --git a/src/app/components/tabmenu/tabmenu.ts b/src/app/components/tabmenu/tabmenu.ts
index c3bcd5f0bb8..1a38d3ba7ed 100644
--- 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,12 +247,7 @@ 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();
});
@@ -257,14 +255,7 @@ export class TabMenu implements AfterContentInit, AfterViewInit, AfterViewChecke
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
index 02c254f0589..f44b6f99713 100644
--- 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,7 +9,7 @@ import { Code } from '@domain/code';
TabMenu requires a collection of menuitems as its model.
`
@@ -17,13 +17,21 @@ import { Code } from '@domain/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
index 32918522f9a..1fd5ce417e1 100755
--- 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
- }
+
];
}