willba-component-library 0.2.28 → 0.2.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.2.28",
+  "version": "0.2.30",
   "description": "A custom UI component library",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

package/src/assets/SpinnerSvg.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+export const SpinnerSVG = ({
+  fill,
+  size,
+}: {
+  fill?: string
+  size?: number
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={`${size || 25}`}
+    height={`${size || 25}`}
+    viewBox="0 0 24 24"
+  >
+    <style>
+      {`
+  .spinner_z9k8 {
+  transform-origin: center;
+  animation: spinner_StKS .75s infinite linear;
+  }
+  @keyframes spinner_StKS {
+  100% {
+  transform: rotate(360deg);
+  }
+  }
+  `}
+    </style>
+    <path
+      d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+      opacity=".25"
+      fill={fill}
+    />
+    <path
+      d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
+      className="spinner_z9k8"
+      fill={fill}
+    />
+  </svg>
+)

package/src/components/FilterCalendar/FilterCalendar.tsx

@@ -87,6 +87,7 @@ export default function FilterCalendar({
               initialCalendarRange={initialCalendarRange}
               showFeedback={showFeedback}
               noActiveSelection={noActiveSelection}
+              palette={palette}
             />
           </div>
           <div className={`will-calendar-footer`}>

package/src/core/components/calendar/Calendar.tsx

@@ -6,6 +6,7 @@ import { DateRange, DayPicker, Matcher } from 'react-day-picker'
 import { useMediaQuery } from 'react-responsive'
 
 import { CalendarTypes, DisableCalendarDates } from './CalendarTypes'
+import { SpinnerSVG } from '../../../assets/SpinnerSvg'
 
 import 'react-day-picker/dist/style.css'
 import './Calendar.css'
@@ -26,6 +27,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       loadingData,
       initialCalendarRange,
       showFeedback,
+      palette,
     }: CalendarTypes,
     ref
   ) => {
@@ -96,6 +98,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
     useEffect(() => {
       if (typeof document === 'undefined' || !showFeedback) return
 
+      // Children
       const calendarTooltip = document.querySelector('.will-calendar-tooltip')
       const calendarTooltipCheckOut = document.querySelector(
         '.will-calendar-tooltip-check-out'
@@ -108,6 +111,8 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       const loadingSpinner = document.querySelector(
         '.will-filter-bar-calendar .will-calendar-spinner'
       )
+
+      // Parents
       const calendarButtons = document.querySelectorAll(
         '.will-filter-bar-calendar .rdp-cell:has(.booked):not(:has(.disabled-after-check-in))'
       )
@@ -117,16 +122,13 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       const calendarMonthContainer = document.querySelector(
         '.will-filter-bar-calendar .rdp-months'
       )
-      const calendarOverlappingDate = document.querySelector(
+      const calendarOverlappingDate = document.querySelectorAll(
         '.will-filter-bar-calendar .rdp-cell:has(.overlapping-date)'
       )
-      const appendedOverlappingDateTooltip: HTMLElement | null =
-        document.querySelector(
-          '.will-filter-bar-calendar .rdp-cell .will-calendar-tooltip-overlapping-date'
-        )
 
       const tooltipClones: Element[] = []
       const tooltipClonesCheckOut: Element[] = []
+      const tooltipClonesOverlappingDates: Element[] = []
 
       if (calendarTooltip && calendarButtons.length > 0) {
         calendarButtons.forEach((element) => {
@@ -153,23 +155,23 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       }
 
       if (
-        calendarOverlappingDate &&
         calendarTooltipOverlappingDate &&
-        !appendedOverlappingDateTooltip &&
-        !calendarRange
+        calendarOverlappingDate.length > 0
       ) {
-        calendarOverlappingDate.appendChild(calendarTooltipOverlappingDate)
-      } else if (calendarRange && appendedOverlappingDateTooltip) {
-        appendedOverlappingDateTooltip.style.display = 'none'
-      } else if (!calendarRange && appendedOverlappingDateTooltip) {
-        appendedOverlappingDateTooltip.style.display = 'block'
+        calendarOverlappingDate.forEach((element) => {
+          const tooltipClone: Element =
+            calendarTooltipOverlappingDate.cloneNode(true) as Element
+          element.appendChild(tooltipClone)
+          tooltipClonesOverlappingDates.push(tooltipClone)
+        })
       }
 
       return () => {
         tooltipClones.forEach((clone) => clone.remove())
         tooltipClonesCheckOut.forEach((clone) => clone.remove())
+        tooltipClonesOverlappingDates.forEach((clone) => clone.remove())
       }
-    }, [calendarRange, overlappingDate])
+    }, [calendarRange, updateCalendar, overlappingDate])
 
     return (
       <div className="will-filter-bar-calendar" ref={ref}>
@@ -193,6 +195,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
             }
             captionLayout="dropdown-buttons"
             defaultMonth={
+              initialCalendarRange?.from ||
               selectedStartDate ||
               (disableCalendarDates?.disabledDates?.length
                 ? disableCalendarDates.disabledDates[0].from
@@ -267,7 +270,9 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
           <div className={'will-calendar-tooltip-overlapping-date'}>
             <div>{t('checkOutOnly')}</div>
           </div>
-          <div className={'will-calendar-spinner'}>Loading...</div>
+          <div className={'will-calendar-spinner'}>
+            <SpinnerSVG fill={palette?.primary || 'inherit'} size={50} />
+          </div>
         </div>
       </div>
     )

package/src/core/components/calendar/CalendarTypes.ts

@@ -1,4 +1,5 @@
 import { DateRange, Matcher } from 'react-day-picker'
+import { Palette } from 'src/themes/useTheme'
 
 export type CalendarOffset = {
   [key: string]: number
@@ -33,4 +34,5 @@ export type CalendarTypes = {
   initialCalendarRange?: DateRange | undefined
   showFeedback?: boolean
   noActiveSelection?: boolean
+  palette?: Palette
 }