feat(gantt): add scrollbar component(#TINFR-605)

worktile · Sep 10, 2024 · d3d6a7c · d3d6a7c
1 parent 235ddcb
commit d3d6a7c
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 16 deletions.
diff --git a/packages/gantt/src/components/scrollbar/scrollbar.component.html b/packages/gantt/src/components/scrollbar/scrollbar.component.html
@@ -0,0 +1,11 @@
+<div
+  class="gantt-scrollbar"
+  [ngClass]="{ 'gantt-scrollbar-bg': hasGanttFooter }"
+  [style.height.px]="ganttRoot?.horizontalScrollbarHeight + 1"
+  [style.right.px]="ganttRoot?.verticalScrollbarWidth"
+>
+  <div class="gantt-table-scrollbar" [class.with-scrollbar]="ganttRoot?.horizontalScrollbarHeight" [style.width.px]="ganttTableWidth"></div>
+  <div class="gantt-main-scrollbar">
+    <div class="h-100" [style.width.px]="ganttRoot['view']?.width"></div>
+  </div>
+</div>
diff --git a/packages/gantt/src/components/scrollbar/scrollbar.component.ts b/packages/gantt/src/components/scrollbar/scrollbar.component.ts
@@ -0,0 +1,20 @@
+import { Component, Inject, Input } from '@angular/core';
+import { GANTT_UPPER_TOKEN, GanttUpper } from '../../gantt-upper';
+import { NgClass } from '@angular/common';
+import { NgxGanttRootComponent } from '../../root.component';
+
+@Component({
+    selector: 'gantt-scrollbar',
+    templateUrl: `./scrollbar.component.html`,
+    imports: [NgClass],
+    standalone: true
+})
+export class GanttScrollbarComponent {
+    @Input() hasGanttFooter: boolean = false;
+
+    @Input() ganttTableWidth: number;
+
+    @Input() ganttRoot: NgxGanttRootComponent;
+
+    constructor(@Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper) {}
+}
diff --git a/packages/gantt/src/gantt.component.html b/packages/gantt/src/gantt.component.html
@@ -67,21 +67,11 @@
 
   <gantt-drag-backdrop [style.left.px]="tableHeader.tableWidth + 1"></gantt-drag-backdrop>
 
-  <div
-    class="gantt-scrollbar"
-    [style.height.px]="ganttRoot.horizontalScrollbarHeight + 1"
-    [style.right.px]="ganttRoot.verticalScrollbarWidth"
-    [ngClass]="{ 'gantt-scrollbar-bg': table?.tableFooterTemplate }"
-  >
-    <div
-      [style.width.px]="tableHeader.tableWidth"
-      class="gantt-table-scrollbar"
-      [class.with-scrollbar]="ganttRoot.horizontalScrollbarHeight"
-    ></div>
-    <div class="gantt-main-scrollbar">
-      <div class="h-100" [style.width.px]="view.width"></div>
-    </div>
-  </div>
+  <gantt-scrollbar
+    [ganttRoot]="ganttRoot"
+    [hasGanttFooter]="!!table?.tableFooterTemplate"
+    [ganttTableWidth]="tableHeader.tableWidth"
+  ></gantt-scrollbar>
 
   <div class="gantt-footer" [style.right.px]="ganttRoot.verticalScrollbarWidth" [style.bottom.px]="ganttRoot.horizontalScrollbarHeight">
     <div class="gantt-table-footer" [style.width.px]="tableHeader.tableWidth + 1" *ngIf="table?.tableFooterTemplate">

diff --git a/packages/gantt/src/gantt.component.ts b/packages/gantt/src/gantt.component.ts
@@ -50,6 +50,8 @@ import { NgxGanttTableColumnComponent } from './table/gantt-column.component';
 import { NgxGanttTableComponent } from './table/gantt-table.component';
 import { GanttDate } from './utils/date';
 import { Dictionary, keyBy, recursiveItems, uniqBy } from './utils/helpers';
+import { GanttScrollbarComponent } from './components/scrollbar/scrollbar.component';
+
 @Component({
     selector: 'ngx-gantt',
     templateUrl: './gantt.component.html',
@@ -79,6 +81,7 @@ import { Dictionary, keyBy, recursiveItems, uniqBy } from './utils/helpers';
         GanttCalendarGridComponent,
         GanttMainComponent,
         GanttDragBackdropComponent,
+        GanttScrollbarComponent,
         NgTemplateOutlet
     ]
 })

diff --git a/packages/gantt/src/gantt.module.ts b/packages/gantt/src/gantt.module.ts
@@ -22,6 +22,7 @@ import { IsGanttBarItemPipe, IsGanttCustomItemPipe, IsGanttRangeItemPipe } from
 import { NgxGanttRootComponent } from './root.component';
 import { NgxGanttTableColumnComponent } from './table/gantt-column.component';
 import { NgxGanttTableComponent } from './table/gantt-table.component';
+import { GanttScrollbarComponent } from './components/scrollbar/scrollbar.component';
 
 @NgModule({
     imports: [
@@ -45,6 +46,7 @@ import { NgxGanttTableComponent } from './table/gantt-table.component';
         NgxGanttRootComponent,
         NgxGanttBaselineComponent,
         NgxGanttToolbarComponent,
+        GanttScrollbarComponent,
         IsGanttRangeItemPipe,
         IsGanttBarItemPipe,
         IsGanttCustomItemPipe
@@ -60,7 +62,8 @@ import { NgxGanttTableComponent } from './table/gantt-table.component';
         NgxGanttToolbarComponent,
         GanttCalendarHeaderComponent,
         GanttCalendarGridComponent,
-        GanttDragBackdropComponent
+        GanttDragBackdropComponent,
+        GanttScrollbarComponent
     ],
     providers: [
         CdkVirtualScrollViewport,

diff --git a/packages/gantt/src/public-api.ts b/packages/gantt/src/public-api.ts
@@ -24,3 +24,4 @@ export * from './gantt.config';
 export * from './components/calendar/header/calendar-header.component';
 export * from './components/calendar/grid/calendar-grid.component';
 export * from './components/drag-backdrop/drag-backdrop.component';
+export * from './components/scrollbar/scrollbar.component';