decouple show start of day from secondary ruler

RocketCommunicationsInc · May 31, 2024 · 1308770 · 1308770
1 parent f59afe8
commit 1308770
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts
@@ -19767,6 +19767,10 @@ export namespace Components {
     interface RuxRuler {
         "end": string;
         "interval": any;
+        /**
+          * Display a secondary ruler which shows one level up from the current interval. IE: Days for Hours, Months for Days, etc.
+         */
+        "showSecondaryRuler"?: boolean | undefined;
         /**
           * Display the day (MM/DD) at 00:00. Only works when Timeline interval is set to 'hour' or 'minutes'.
          */
@@ -55345,6 +55349,10 @@ declare namespace LocalJSX {
     interface RuxRuler {
         "end"?: string;
         "interval"?: any;
+        /**
+          * Display a secondary ruler which shows one level up from the current interval. IE: Days for Hours, Months for Days, etc.
+         */
+        "showSecondaryRuler"?: boolean | undefined;
         /**
           * Display the day (MM/DD) at 00:00. Only works when Timeline interval is set to 'hour' or 'minutes'.
          */

diff --git a/packages/web-components/src/components/rux-timeline/rux-ruler/rux-ruler.tsx b/packages/web-components/src/components/rux-timeline/rux-ruler/rux-ruler.tsx
@@ -32,6 +32,11 @@ export class RuxRuler {
      */
     @Prop({ attribute: 'show-start-of-day' }) showStartOfDay? = false
 
+    /**
+     * Display a secondary ruler which shows one level up from the current interval. IE: Days for Hours, Months for Days, etc.
+     */
+    @Prop({ attribute: 'show-secondary-ruler' }) showSecondaryRuler? = false
+
     get dateRange() {
         return getRange(
             new Date(this.start),
@@ -163,7 +168,6 @@ export class RuxRuler {
     timePattern: RegExp = this.timePatterns['day']
 
     secondaryRuler(time: string, newDay: string, index: number) {
-        if (!this.showStartOfDay) return null
         let gridColumn
         let textDisplay = ''
         if (
@@ -267,9 +271,10 @@ export class RuxRuler {
                                         key={index}
                                         class={{
                                             'ruler-time': true,
-                                            'ruler-new-day-cell': this.shouldShow(
-                                                time
-                                            ),
+                                            'ruler-new-day-cell':
+                                                (this.showStartOfDay &&
+                                                    this.shouldShow(time)) ||
+                                                false,
                                             'has-date-scroll':
                                                 (this.showStartOfDay &&
                                                     ['hour', 'minute'].includes(
@@ -284,12 +289,18 @@ export class RuxRuler {
                                     >
                                         {time}
                                     </span>
-                                    {this.secondaryRuler(time, newDay, index)}
+                                    {this.showSecondaryRuler
+                                        ? this.secondaryRuler(
+                                              time,
+                                              newDay,
+                                              index
+                                          )
+                                        : null}
                                 </Fragment>
                             )
                         }
                     )}
-                    {this.showStartOfDay ? this.getPartial() : null}
+                    {this.showSecondaryRuler ? this.getPartial() : null}
                 </div>
             </Host>
         )

diff --git a/packages/web-components/src/index.html b/packages/web-components/src/index.html
@@ -116,7 +116,7 @@
                         </rux-time-region>
                     </rux-track>
                     <rux-track slot="ruler">
-                        <rux-ruler show-start-of-day></rux-ruler>
+                        <rux-ruler show-secondary-ruler></rux-ruler>
                     </rux-track>
                 </rux-timeline>
             </main>