Fixed #11697 - Tree | scrollTo, scrollToVirtualIndex, onScroll, and o…

…nScrollIndexChange support
primefaces · Jul 10, 2022 · d6751f1 · d6751f1
1 parent a16a866
commit d6751f1
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 6 deletions.
diff --git a/src/app/components/tree/tree.ts b/src/app/components/tree/tree.ts
@@ -11,7 +11,7 @@ import {BlockableUI} from 'primeng/api';
 import {ObjectUtils} from 'primeng/utils';
 import {DomHandler} from 'primeng/dom';
 import {RippleModule} from 'primeng/ripple';
-import {ScrollerModule, ScrollerOptions} from 'primeng/scroller';
+import {Scroller, ScrollerModule, ScrollerOptions} from 'primeng/scroller';
 
 @Component({
     selector: 'p-treeNode',
@@ -529,8 +529,8 @@ export class UITreeNode implements OnInit {
                     <span class="p-tree-filter-icon pi pi-search"></span>
             </div>
 
-            <p-scroller *ngIf="virtualScroll" [items]="serializedValue" styleClass="p-tree-wrapper" [style]="{'height': scrollHeight}" [itemSize]="virtualScrollItemSize||_virtualNodeHeight"
-                [lazy]="lazy" (onLazyLoad)="onLazyLoad.emit($event)" [options]="virtualScrollOptions">
+            <p-scroller #scroller *ngIf="virtualScroll" [items]="serializedValue" styleClass="p-tree-wrapper" [style]="{'height': scrollHeight}" [itemSize]="virtualScrollItemSize||_virtualNodeHeight"
+                [lazy]="lazy" (onScroll)="onScroll.emit($event)" (onScrollIndexChange)="onScrollIndexChange.emit($event)" (onLazyLoad)="onLazyLoad.emit($event)" [options]="virtualScrollOptions">
                 <ng-template pTemplate="content" let-items let-scrollerOptions="options">
                     <ul *ngIf="items" class="p-tree-container" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="tree" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy">
                         <p-treeNode *ngFor="let rowNode of items; let firstChild=first;let lastChild=last; let index=index; trackBy: trackBy" [level]="rowNode.level"
@@ -544,7 +544,7 @@ export class UITreeNode implements OnInit {
                 </ng-container>
             </p-scroller>
             <ng-container *ngIf="!virtualScroll">
-                <div class="p-tree-wrapper" [style.max-height]="scrollHeight">
+                <div #wrapper class="p-tree-wrapper" [style.max-height]="scrollHeight">
                     <ul class="p-tree-container" *ngIf="getRootNode()" role="tree" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy">
                         <p-treeNode *ngFor="let node of getRootNode(); let firstChild=first;let lastChild=last; let index=index; trackBy: trackBy" [node]="node"
                                     [firstChild]="firstChild" [lastChild]="lastChild" [index]="index" [level]="0"></p-treeNode>
@@ -670,12 +670,20 @@ export class Tree implements OnInit,AfterContentInit,OnChanges,OnDestroy,Blockab
 
     @Output() onLazyLoad: EventEmitter<any> = new EventEmitter();
 
+    @Output() onScroll: EventEmitter<any> = new EventEmitter();
+
+    @Output() onScrollIndexChange: EventEmitter<any> = new EventEmitter();
+
     @Output() onFilter: EventEmitter<any> = new EventEmitter();
 
     @ContentChildren(PrimeTemplate) templates: QueryList<any>;
 
     @ViewChild('filter') filterViewChild: ElementRef;
 
+    @ViewChild('scroller') scroller: Scroller;
+
+    @ViewChild('wrapper') wrapperViewChild: ElementRef;
+
     /* @deprecated */
     _virtualNodeHeight: number;
     @Input() get virtualNodeHeight(): number {
@@ -1214,7 +1222,7 @@ export class Tree implements OnInit,AfterContentInit,OnChanges,OnDestroy,Blockab
         }
     }
 
-    _filter(value) {
+    public _filter(value) {
         let filterValue = value;
         if (filterValue === '') {
             this.filteredNodes = null;
@@ -1241,14 +1249,34 @@ export class Tree implements OnInit,AfterContentInit,OnChanges,OnDestroy,Blockab
         });
     }
 
-    resetFilter() {
+    public resetFilter() {
         this.filteredNodes = null;
 
         if (this.filterViewChild && this.filterViewChild.nativeElement) {
             this.filterViewChild.nativeElement.value = '';
         }
     }
 
+    public scrollToVirtualIndex(index: number) {
+        console.log('hi?', index)
+        this.virtualScroll && this.scroller.scrollToIndex(index);
+    }
+
+    public scrollTo(options) {
+        if (this.virtualScroll) {
+            this.scroller.scrollTo(options);
+        }
+        else  if (this.wrapperViewChild && this.wrapperViewChild.nativeElement) {
+            if (this.wrapperViewChild.nativeElement.scrollTo) {
+                this.wrapperViewChild.nativeElement.scrollTo(options);
+            }
+            else {
+                this.wrapperViewChild.nativeElement.scrollLeft = options.left;
+                this.wrapperViewChild.nativeElement.scrollTop = options.top;
+            }
+        }
+    }
+
     findFilteredNodes(node, paramsWithoutNode) {
         if (node) {
             let matched = false;

diff --git a/src/app/showcase/components/tree/treedemo.html b/src/app/showcase/components/tree/treedemo.html
@@ -797,6 +797,18 @@ <h5>Events</h5>
                             </td>
                             <td>Callback to invoke in lazy mode to load new data.</td>
                         </tr>
+                        <tr>
+                            <td>onScroll</td>
+                            <td>event: Browser event</td>
+                            <td>Callback to invoke in virtual scroll mode when scroll position changes.</td>
+                        </tr>
+                        <tr>
+                            <td>onScrollIndexChange</td>
+                            <td>event.first: First index of the new data range to be loaded.<br/>
+                                event.last: Last index of the new data range to be loaded.
+                            </td>
+                            <td>Callback to invoke in virtual scroll mode when scroll position and item's range in view changes.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
@@ -822,6 +834,18 @@ <h5>Methods</h5>
                             <td>value: string</td>
                             <td>Applies filter by given value.</td>
                         </tr>
+                        <tr>
+                            <td>scrollToVirtualIndex</td>
+                            <td>index</td>
+                            <td>Scrolls to the node with the given index when virtual scrolling is enabled.</td>
+                        </tr>
+                        <tr>
+                            <td>scrollTo</td>
+                            <td>options.left: Specifies the number of pixels along the X axis<br/>
+                                options.top: Specifies the number of pixels along the Y axis<br />
+                                options.behavior: Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto).</td>
+                            <td>Scrolls to a position of a scrollable tree viewport.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>