prop for grid

RocketCommunicationsInc · May 3, 2024 · 3082dd7 · 3082dd7
1 parent 5453785
commit 3082dd7
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 1 deletion.
diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts
@@ -20086,6 +20086,10 @@ export namespace Components {
           * The timeline's playhead date time. Must be an ISO string "2021-02-02T05:00:00Z"
          */
         "playhead"?: string;
+        /**
+          * Controls the display of grid lines
+         */
+        "showGrid": boolean;
         /**
           * The timeline's start date. Must be an ISO string "2021-02-02T05:00:00Z"
          */
@@ -20173,6 +20177,7 @@ export namespace Components {
           * The playhead of rux-track.
          */
         "playhead": any;
+        "showGrid": boolean;
         "start": string;
         "timezone": string;
         "width": number;
@@ -55713,6 +55718,10 @@ declare namespace LocalJSX {
           * The timeline's playhead date time. Must be an ISO string "2021-02-02T05:00:00Z"
          */
         "playhead"?: string;
+        /**
+          * Controls the display of grid lines
+         */
+        "showGrid"?: boolean;
         /**
           * The timeline's start date. Must be an ISO string "2021-02-02T05:00:00Z"
          */
@@ -55804,6 +55813,7 @@ declare namespace LocalJSX {
           * The playhead of rux-track.
          */
         "playhead"?: any;
+        "showGrid"?: boolean;
         "start"?: string;
         "timezone"?: string;
         "width"?: number;

diff --git a/packages/web-components/src/components/rux-timeline/rux-timeline.tsx b/packages/web-components/src/components/rux-timeline/rux-timeline.tsx
@@ -65,6 +65,11 @@ export class RuxTimeline {
      */
     @Prop() interval: 'month' | 'week' | 'hour' | 'day' | 'minute' = 'hour'
 
+    /**
+     * Controls the display of grid lines
+     */
+    @Prop() showGrid: boolean = false
+
     /**
      * Controls the timezone that the timeline is localized to. Must be an IANA time zone name ("America/New_York") or an offset string.
      */
@@ -93,6 +98,7 @@ export class RuxTimeline {
     @Watch('end')
     @Watch('interval')
     @Watch('timezone')
+    @Watch('showGrid')
     handleChange() {
         this.syncPlayhead()
         this._updateRegions()
@@ -368,6 +374,7 @@ export class RuxTimeline {
                 el.start = useStartEndDates.timelineStart.toISOString()
                 el.end = useStartEndDates.timelineEnd.toISOString()
                 el.timezone = this.timezone
+                el.showGrid = this.showGrid
             })
         }
 

diff --git a/packages/web-components/src/components/rux-timeline/rux-track/rux-track.tsx b/packages/web-components/src/components/rux-timeline/rux-track/rux-track.tsx
@@ -73,6 +73,11 @@ export class RuxTrack {
      */
     @Prop({ reflect: true }) timezone = 'UTC'
 
+    /**
+     * @internal - The timeline's grid indicator. Set automatically from the parent Timeline component.
+     */
+    @Prop({ reflect: true }) showGrid = false
+
     /**
      * The playhead of rux-track.
      */
@@ -81,6 +86,7 @@ export class RuxTrack {
     @Watch('start')
     @Watch('end')
     @Watch('interval')
+    @Watch('showGrid')
     handleUpdate(_newValue: any, old: any) {
         if (old) {
             this.initializeRows()
@@ -370,7 +376,7 @@ export class RuxTrack {
                             (this.playedIndicator = el as HTMLInputElement)
                         }
                     ></div>
-                    {this.renderGrid()}
+                    {this.showGrid ? this.renderGrid() : null}
                 </div>
             </Host>
         )

diff --git a/packages/web-components/src/index.html b/packages/web-components/src/index.html
@@ -73,6 +73,9 @@
                         icon="zoom-in"
                         onclick="zoom(1)"
                     ></rux-button>
+                    <rux-button secondary onclick="togglegrid()"
+                        >Toggle Grid</rux-button
+                    >
                 </section>
 
                 <rux-timeline
@@ -83,6 +86,7 @@
                     playhead="2021-02-02T00:00:00.000Z"
                     interval="hour"
                     zoom="2"
+                    show-grid
                 >
                     <rux-track>
                         <div slot="label">Region 1</div>
@@ -172,6 +176,10 @@
                 timeline.setAttribute('zoom', zoomLevel)
             }
 
+            const togglegrid = () => {
+                timeline.toggleAttribute('show-grid')
+            }
+
             function setZoomInterval(zoomLevel) {
                 if (zoomLevel < 1) timeline.setAttribute('interval', 'month')
                 if (zoomLevel < 2) timeline.setAttribute('interval', 'week')