Fixed #14182 - TabView | Refactor resize observer, add missing input …

…props
primefaces · Nov 22, 2023 · 6a941d5 · 6a941d5
1 parent b4a126a
commit 6a941d5
Showing 1 changed file with 43 additions and 18 deletions.
diff --git a/src/app/components/tabview/tabview.ts b/src/app/components/tabview/tabview.ts
@@ -35,6 +35,7 @@ import { Subscription } from 'rxjs';
 import { TabViewChangeEvent, TabViewCloseEvent } from './tabview.interface';
 import { UniqueComponentId } from 'primeng/utils';
 import { Nullable } from 'primeng/ts-helpers';
+import { AnimationStyleMetadata } from '@angular/animations';
 
 /**
  * TabPanel is a helper component for TabView component.
@@ -271,12 +272,12 @@ export class TabPanel implements AfterContentInit, OnDestroy {
     template: `
         <div [ngClass]="{ 'p-tabview p-component': true, 'p-tabview-scrollable': scrollable }" [ngStyle]="style" [class]="styleClass" [attr.data-pc-name]="'tabview'">
             <div #elementToObserve class="p-tabview-nav-container">
-                <button *ngIf="scrollable && !backwardIsDisabled" #prevBtn class="p-tabview-nav-prev p-tabview-nav-btn p-link" (click)="navBackward()" [attr.tabindex]="tabindex" [attr.aria-label]="prevButtonAriaLabel" type="button" pRipple>
+                <button *ngIf="scrollable && !backwardIsDisabled && autoHideButtons" #prevBtn class="p-tabview-nav-prev p-tabview-nav-btn p-link" (click)="navBackward()" [attr.tabindex]="tabindex" [attr.aria-label]="prevButtonAriaLabel" type="button" pRipple>
                     <ChevronLeftIcon *ngIf="!previousIconTemplate" [attr.aria-hidden]="true" />
                     <ng-template *ngTemplateOutlet="previousIconTemplate"></ng-template>
                 </button>
-                <div #content class="p-tabview-nav-content" (scroll)="onScroll($event)">
-                    <ul #navbar class="p-tabview-nav" role="tablist">
+                <div #content class="p-tabview-nav-content" (scroll)="onScroll($event)" [attr.data-pc-section]="'navcontent'">
+                    <ul #navbar class="p-tabview-nav" role="tablist" [attr.data-pc-section]="'nav'">
                         <ng-template ngFor let-tab [ngForOf]="tabs" let-i="index">
                             <li role="presentation" [ngClass]="{ 'p-highlight': tab.selected, 'p-disabled': tab.disabled }" [attr.data-p-disabled]="tab.disabled" [ngStyle]="tab.headerStyle" [class]="tab.headerStyleClass" *ngIf="!tab.closed">
                                 <a
@@ -321,7 +322,7 @@ export class TabPanel implements AfterContentInit, OnDestroy {
                     </ul>
                 </div>
                 <button
-                    *ngIf="scrollable && !forwardIsDisabled && shouldVisible"
+                    *ngIf="scrollable && !forwardIsDisabled && buttonVisible"
                     #nextBtn
                     [attr.tabindex]="tabindex"
                     [attr.aria-label]="nextButtonAriaLabel"
@@ -396,6 +397,21 @@ export class TabView implements AfterContentInit, AfterViewChecked, OnDestroy, B
      * @group Props
      */
     @Input() selectOnFocus: boolean = false;
+    /**
+     * Used to define a string aria label attribute the forward navigation button.
+     * @group Props
+     */
+    @Input() nextButtonAriaLabel: string | undefined;
+    /**
+     * Used to define a string aria label attribute the backward navigation button.
+     * @group Props
+     */
+    @Input() prevButtonAriaLabel: string | undefined;
+    /**
+     * When activated, navigation buttons will automatically hide or show based on the available space within the container.
+     * @group Props
+     */
+    @Input() autoHideButtons: boolean = true;
     /**
      * Index of the element in tabbing order.
      * @group Props
@@ -456,7 +472,11 @@ export class TabView implements AfterContentInit, AfterViewChecked, OnDestroy, B
 
     resizeObserver: Nullable<ResizeObserver>;
 
-    shouldVisible: boolean;
+    container: HTMLDivElement | undefined;
+
+    list: HTMLUListElement | undefined;
+
+    buttonVisible: boolean;
 
     @ViewChild('elementToObserve') elementToObserve: ElementRef;
 
@@ -484,23 +504,28 @@ export class TabView implements AfterContentInit, AfterViewChecked, OnDestroy, B
 
     ngAfterViewInit() {
         if (isPlatformBrowser(this.platformId)) {
-            this.bindResizeObserver();
+            if(this.autoHideButtons) {
+                this.bindResizeObserver();
+            }
+
         }
     }
 
     bindResizeObserver() {
-        if (!this.resizeObserver) {
-            this.resizeObserver = new ResizeObserver((entries) => {
-                for (let entry of entries) {
-                    const navbarWidth = parseFloat(getComputedStyle(this.navbar.nativeElement).width);
-                    const rect = entry.contentRect;
-                    this.shouldVisible = rect.width < navbarWidth;
-                    this.cd.detectChanges();
-                }
-            });
-
-            this.resizeObserver.observe(this.elementToObserve.nativeElement);
-        }
+        this.container = DomHandler.findSingle(this.el.nativeElement, '[data-pc-section="navcontent"]');
+        this.list = DomHandler.findSingle(this.el.nativeElement,'[data-pc-section="nav"]');
+
+        this.resizeObserver = new ResizeObserver(() => {
+            if(this.list.offsetWidth > this.container.offsetWidth) {
+                this.buttonVisible = true;
+            } else {
+                this.buttonVisible = false;
+            }
+            console.log(this.forwardIsDisabled, this.buttonVisible)
+            this.updateButtonState();
+            this.cd.detectChanges();
+        })
+        this.resizeObserver.observe(this.container);
     }
 
     unbindResizeObserver() {