only render default months if no elements are slotted

WickyNilliams · Nov 2, 2024 · 6a9b205 · 6a9b205
1 parent 02f6c82
commit 6a9b205
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 13 deletions.
diff --git a/src/calendar-base/calendar-base.tsx b/src/calendar-base/calendar-base.tsx
@@ -21,6 +21,8 @@ interface CalendarBaseProps {
   onFocus: (e: CustomEvent<PlainDate>) => void;
   onHover?: (e: CustomEvent<PlainDate>) => void;
   months: number;
+  hasSlotted: boolean;
+  onSlotChange: (e: Event) => void;
 }
 
 function range<T>(max: number, fn: (n: number) => T) {
@@ -83,10 +85,12 @@ export function CalendarBase(
         onfocusday={props.onFocus}
         onhoverday={props.onHover}
       >
-        <slot part="slot">
-          {range(props.months, (offset) => (
-            <CalendarMonth offset={offset} />
-          ))}
+        <slot part="slot" onslotchange={props.onSlotChange}>
+          {props.hasSlotted
+            ? null
+            : range(props.months, (offset) => (
+                <CalendarMonth offset={offset} />
+              ))}
         </slot>
       </CalendarMonthContext>
     </div>

diff --git a/src/calendar-base/useCalendarBase.ts b/src/calendar-base/useCalendarBase.ts
@@ -145,6 +145,14 @@ export function useCalendarBase({
     months.forEach((m) => m.focus());
   }
 
+  const [hasSlotted, setHasSlotted] = useState(false);
+  const onSlotChange = (e: Event) => {
+    return setHasSlotted(
+      (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length >
+        0
+    );
+  };
+
   return {
     format: useDateFormatter(formatOptions, locale),
     formatVerbose: useDateFormatter(formatVerboseOptions, locale),
@@ -161,5 +169,7 @@ export function useCalendarBase({
     next,
     previous,
     focus,
+    hasSlotted,
+    onSlotChange,
   };
 }
diff --git a/src/calendar-date/calendar-date.test.tsx b/src/calendar-date/calendar-date.test.tsx
@@ -803,14 +803,23 @@ describe("CalendarDate", () => {
     });
   });
 
-  it("renders its own months if none supplied", async () => {
-    const calendar = await mount(
-      <CalendarDate locale="en-GB" months={2} value="2024-11-02" />
-    );
-    const months = getMonths(calendar);
-
-    expect(months).to.have.lengthOf(2);
-    expect(getMonthHeading(months[0]!)).to.have.text("November");
-    expect(getMonthHeading(months[1]!)).to.have.text("December");
+  describe("simple usage", () => {
+    it("renders its own months if none supplied", async () => {
+      const calendar = await mount(
+        <CalendarDate locale="en-GB" months={2} value="2024-11-02" />
+      );
+      const months = getMonths(calendar);
+
+      expect(months).to.have.lengthOf(2);
+      expect(getMonthHeading(months[0]!)).to.have.text("November");
+      expect(getMonthHeading(months[1]!)).to.have.text("December");
+    });
+
+    it("does not render its own month if some are slotted", async () => {
+      const calendar = await mount(<Fixture value="2024-11-02" />);
+      expect(
+        calendar.shadowRoot!.querySelector("slot:not([name])")!.children
+      ).to.have.lengthOf(0);
+    });
   });
 });