[Month] Add hideControls prop

techniq · Nov 22, 2023 · 9021816 · 9021816
1 parent 6a71989
commit 9021816
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 19 deletions.
diff --git a/.changeset/itchy-wolves-refuse.md b/.changeset/itchy-wolves-refuse.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+[Month] Add `hideControls` prop
diff --git a/packages/svelte-ux/src/lib/components/Month.svelte b/packages/svelte-ux/src/lib/components/Month.svelte
@@ -8,7 +8,6 @@
     endOfMonth as endOfMonthFunc,
     format,
     addMonths,
-    subMonths,
     isSameDay,
     isWithinInterval,
   } from 'date-fns';
@@ -33,10 +32,14 @@
       startOfMonthFunc(selected.from)) ||
     startOfMonthFunc(new Date());
 
-  // TODO: Variable shows error if set to `endOfMonth` maybe due to import
-  $: endOfMonth2 = endOfMonthFunc(startOfMonth);
+  $: endOfMonth = endOfMonthFunc(startOfMonth);
   $: monthDaysByWeek = getMonthDaysByWeek(startOfMonth);
 
+  /**
+   * Hide controls and date.  Useful to control externally
+   */
+  export let hideControls = false;
+
   /**
    * Show days before and after selected month
    */
@@ -65,35 +68,39 @@
   $: isDayHidden = (day: Date) => {
     const isCurrentMonth = isWithinInterval(day, {
       start: startOfMonth,
-      end: endOfMonth2,
+      end: endOfMonth,
     });
     return !isCurrentMonth && !showOutsideDays;
   };
 
   $: isDayFaded = (day: Date) => {
     const isCurrentMonth = isWithinInterval(day, {
       start: startOfMonth,
-      end: endOfMonth2,
+      end: endOfMonth,
     });
     return !isCurrentMonth && showOutsideDays;
   };
 </script>
 
-<div class="flex m-2">
-  <Button
-    icon={mdiChevronLeft}
-    class="p-2"
-    on:click={() => (startOfMonth = subMonths(startOfMonth, 1))}
-  />
-  <div class="flex flex-1 items-center justify-center">
-    <span>{format(startOfMonth, 'MMMM yyyy')}</span>
+{#if !hideControls}
+  <div class="flex m-2">
+    <Button
+      icon={mdiChevronLeft}
+      class="p-2"
+      on:click={() => (startOfMonth = addMonths(startOfMonth, -1))}
+    />
+
+    <div class="flex flex-1 items-center justify-center">
+      <span>{format(startOfMonth, 'MMMM yyyy')}</span>
+    </div>
+
+    <Button
+      icon={mdiChevronRight}
+      class="p-2"
+      on:click={() => (startOfMonth = addMonths(startOfMonth, 1))}
+    />
   </div>
-  <Button
-    icon={mdiChevronRight}
-    class="p-2"
-    on:click={() => (startOfMonth = addMonths(startOfMonth, 1))}
-  />
-</div>
+{/if}
 
 <div class="flex">
   {#each monthDaysByWeek[0] ?? [] as day (day.getDate())}