feat(gantt): support hide quick time jump (#597)

Author: xinglu01

example/src/app/gantt/gantt.component.ts

@@ -65,7 +65,7 @@ export class AppGanttExampleComponent implements OnInit, AfterViewInit {
         { id: '000002', title: 'Task 2', start: 1617361997, end: 1625483597, progress: 0.5, linkable: false },
         { id: '000003', title: 'Task 3 (不可拖动)', start: 1628507597, end: 1633345997, itemDraggable: false },
         { id: '000004', title: 'Task 4', start: 1624705997 },
-        { id: '000005', title: 'Task 5', start: 1756628881, end: 1756801681, color: '#709dc1' },
+        { id: '000005', title: 'Task 5', start: 1756543568, end: 1756629968, color: '#709dc1' },
         { id: '000006', title: 'Task 6', start: 1641121997, end: 1645528397 },
         { id: '000007', title: 'Task 7', start: 1639393997, end: 1640862797 },
         { id: '000008', title: 'Task 8', end: 1628783999, color: '#709dc1' },

packages/gantt/src/components/bar/bar.component.ts

@@ -127,9 +127,6 @@ export class NgxGanttBarComponent extends GanttItemUpper implements OnInit, Afte
         const contentElement = this.contentElementRef.nativeElement;
         const barElement = this.elementRef.nativeElement;
 
-        if (this.item.barStyle && Object.prototype.hasOwnProperty.call(this.item.barStyle, 'visibility')) {
-            barElement.style.visibility = this.item.barStyle?.visibility as string;
-        }
         if (this.item.refs?.width) {
             const color = this.item.color || barBackground;
 

packages/gantt/src/components/main/gantt-main.component.html

@@ -46,7 +46,11 @@
     <div class="gantt-quick-time-focus" [style.width.px]="dom.visibleRangeX().max - dom.visibleRangeX().min">
       @for (data of viewportItems; track trackBy(i, data); let i = $index) {
         @let item = toItemType(data);
-        <div class="gantt-quick-time-focus-item" [style.height.px]="ganttUpper.styles.lineHeight">
+        <div
+          class="gantt-quick-time-focus-item"
+          [ngClass]="{ 'gantt-quick-time-focus-item-hide': !item?.refs?.width }"
+          [style.height.px]="ganttUpper.styles.lineHeight"
+        >
           <span class="ml-2">
             @if (item.refs?.x < dom.visibleRangeX().min && item.refs?.width) {
               <a class="gantt-quick-time-focus-item-arrow link-secondary" href="javascript:;" (click)="quickTime(item.origin, 'left')">

packages/gantt/src/gantt.component.scss

@@ -164,6 +164,10 @@
               }
             }
           }
+
+          &-hide {
+            visibility: hidden;
+          }
         }
       }
     }