fix(sbb-calendar): ensure dateFilter works with SSR (#2220)

sbb-design-systems · Nov 23, 2023 · 4c127f9 · 4c127f9
1 parent cbe33ad
commit 4c127f9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/src/components/calendar/calendar.stories.tsx b/src/components/calendar/calendar.stories.tsx
@@ -97,7 +97,7 @@ const dataNow: InputType = {
 };
 
 const filterFunctions = [
-  () => true,
+  undefined,
   (d) => d.getDay() !== 6 && d.getDay() !== 0,
   (d) => d.getDate() % 2 === 1,
   (d) => d.getFullYear() % 2 === 0,

diff --git a/src/components/calendar/calendar.ts b/src/components/calendar/calendar.ts
@@ -100,8 +100,7 @@ export class SbbCalendar extends LitElement {
   @property() public max: SbbDateLike;
 
   /** A function used to filter out dates. */
-  @property({ attribute: 'date-filter' }) public dateFilter: (date: Date | null) => boolean = () =>
-    true;
+  @property({ attribute: 'date-filter' }) public dateFilter?: (date: Date | null) => boolean;
 
   /** The selected date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). */
   @property({ attribute: 'selected-date' }) public selectedDate: SbbDateLike;
@@ -194,16 +193,21 @@ export class SbbCalendar extends LitElement {
   /** Sets the selected date. */
   private _setSelectedDate(selectedDate: SbbDateLike): void {
     const value = this._dateAdapter.deserializeDate(selectedDate);
+    const dateFilter = this._getDateFilter();
     if (
       !!value &&
-      (!this._isDayInRange(this._dateAdapter.getISOString(value)) || this.dateFilter(value))
+      (!this._isDayInRange(this._dateAdapter.getISOString(value)) || dateFilter(value))
     ) {
       this._selected = this._dateAdapter.getISOString(value);
     } else {
       this._selected = undefined;
     }
   }
 
+  private _getDateFilter(): (date: Date) => boolean {
+    return this.dateFilter ?? (() => true);
+  }
+
   /** Resets the active month according to the new state of the calendar. */
   public resetPosition(): void {
     if (this._calendarView !== 'day') {
@@ -215,10 +219,6 @@ export class SbbCalendar extends LitElement {
 
   public override connectedCallback(): void {
     super.connectedCallback();
-
-    if (!this.dateFilter) {
-      this.dateFilter = () => true;
-    }
     this.focus = () => {
       this._resetFocus = true;
       this._focusCell();
@@ -915,9 +915,10 @@ export class SbbCalendar extends LitElement {
 
   /** Creates the cells for the daily view. */
   private _createDayCells(week: Day[], today: string): TemplateResult[] {
+    const dateFilter = this._getDateFilter();
     return week.map((day: Day) => {
       const isOutOfRange = !this._isDayInRange(day.value);
-      const isFilteredOut = !this.dateFilter(this._dateAdapter.createDateFromISOString(day.value));
+      const isFilteredOut = !dateFilter(this._dateAdapter.createDateFromISOString(day.value));
       const selected: boolean = !!this._selected && day.value === this._selected;
       const dayValue = `${day.dayValue} ${day.monthValue} ${day.yearValue}`;
       const isToday = day.value === today;

diff --git a/src/components/calendar/readme.md b/src/components/calendar/readme.md
@@ -64,13 +64,13 @@ This is helpful if you need a specific state of the component.
 
 ## Properties
 
-| Name           | Attribute       | Privacy | Type                              | Default | Description                                                                                                     |
-| -------------- | --------------- | ------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
-| `wide`         | `wide`          | public  | `boolean`                         | `false` | If set to true, two months are displayed                                                                        |
-| `min`          | `min`           | public  | `SbbDateLike`                     |         | The minimum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). |
-| `max`          | `max`           | public  | `SbbDateLike`                     |         | The maximum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). |
-| `dateFilter`   | `date-filter`   | public  | `(date: Date \| null) => boolean` |         | A function used to filter out dates.                                                                            |
-| `selectedDate` | `selected-date` | public  | `SbbDateLike`                     |         | The selected date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970).      |
+| Name           | Attribute       | Privacy | Type                                           | Default | Description                                                                                                     |
+| -------------- | --------------- | ------- | ---------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
+| `wide`         | `wide`          | public  | `boolean`                                      | `false` | If set to true, two months are displayed                                                                        |
+| `min`          | `min`           | public  | `SbbDateLike`                                  |         | The minimum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). |
+| `max`          | `max`           | public  | `SbbDateLike`                                  |         | The maximum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). |
+| `dateFilter`   | `date-filter`   | public  | `(date: Date \| null) => boolean \| undefined` |         | A function used to filter out dates.                                                                            |
+| `selectedDate` | `selected-date` | public  | `SbbDateLike`                                  |         | The selected date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970).      |
 
 ## Methods