willba-component-library 0.2.11 → 0.2.13

package/package.json

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

package/src/components/FilterCalendar/FilterCalendar.css

@@ -1,6 +1,10 @@
 .will-root .will-calendar-wrapper {
     box-shadow: var(--will-box-shadow-dark);
     border-radius: 20px;
+    background-color: var(--will-white);
+    position: absolute;
+    top: 0;
+    left: 0;
 }
 
 .will-root .will-calendar-wrapper .will-calendar-header,

package/src/components/FilterCalendar/FilterCalendar.stories.tsx

@@ -37,8 +37,10 @@ export const Primary: Story = {
       primary: '',
       secondary: '',
     },
-    openCalendar: true,
-    onSubmit: (val: any) => console.log(val),
+    toggleCalendar: true,
+    onSubmit: (val) => console.log(val),
+    setToggleCalendar: (val) => console.log(val),
+    requestDates: (val) => console.log(val),
   },
   render: (args) => (
     <div style={{ padding: '30px', height: '100vh' }}>

package/src/components/FilterCalendar/FilterCalendar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import useTheme from '../../themes/useTheme'
@@ -11,7 +11,7 @@ import {
 } from '../../core/hooks'
 import { nightsCount, parseDate } from '../../core/utils'
 
-import { FilterCalendarType } from './FilterCalendarTypes'
+import { FilterCalendarTypes } from './FilterCalendarTypes'
 import { useFilterCalendar } from './hooks/useFilterCalendar'
 
 import './FilterCalendar.css'
@@ -20,32 +20,24 @@ export default function FilterCalendar({
   calendarOffset,
   language,
   palette,
-  openCalendar,
   onSubmit,
   calendarOffsetGroup,
-}: FilterCalendarType) {
+  toggleCalendar,
+  setToggleCalendar,
+  requestDates,
+}: FilterCalendarTypes) {
   const themePalette = useTheme({ palette })
 
   // Translations
   useUpdateTranslations({ language })
   const { t } = useTranslation()
 
-  const {
-    handleSubmit,
-    setToggleCalendar,
-    setCalendarRange,
-    handleClearDates,
-    toggleCalendar,
-    calendarRange,
-  } = useFilterCalendar({ onSubmit })
+  const { handleSubmit, setCalendarRange, handleClearDates, calendarRange } =
+    useFilterCalendar({ onSubmit, setToggleCalendar })
 
   // Display component after fully loaded
   useAwaitRender()
 
-  useEffect(() => {
-    if (openCalendar) setToggleCalendar(true)
-  }, [openCalendar])
-
   // Handle close filter section
   const { filtersRef } = useCloseFilterSection({
     handleSelectedFilter: setToggleCalendar,
@@ -69,6 +61,7 @@ export default function FilterCalendar({
               selectedPath={'/rooms'}
               language={language}
               calendarOffsetGroup={calendarOffsetGroup}
+              requestDates={requestDates}
             />
           </div>
           <div className={`will-calendar-footer`}>

package/src/components/FilterCalendar/FilterCalendarTypes.ts

@@ -1,10 +1,12 @@
+import { CSSProperties } from 'react'
 import { DateRange } from 'react-day-picker'
 
 import { Palette } from '../../themes/useTheme'
 import { CalendarTypes } from '../../core/components/calendar/CalendarTypes'
 
-export interface FilterCalendarType extends Partial<CalendarTypes> {
+export interface FilterCalendarTypes extends Partial<CalendarTypes> {
   palette: Palette
-  openCalendar?: boolean
   onSubmit: (val: DateRange) => void
+  toggleCalendar: boolean
+  setToggleCalendar: (val: boolean) => void
 }

package/src/components/FilterCalendar/hooks/useFilterCalendar.ts

@@ -3,13 +3,14 @@ import { DateRange } from 'react-day-picker'
 
 type Props = {
   onSubmit: (val: any) => void
+  setToggleCalendar: (val: boolean) => void
 }
 
-export const useFilterCalendar = ({ onSubmit }: Props) => {
+export const useFilterCalendar = ({ onSubmit, setToggleCalendar }: Props) => {
   const [calendarRange, setCalendarRange] = useState<DateRange | undefined>()
-  const [toggleCalendar, setToggleCalendar] = useState<boolean>(false)
 
   const handleSubmit = () => {
+    setToggleCalendar(false)
     return onSubmit(calendarRange)
   }
 
@@ -20,10 +21,8 @@ export const useFilterCalendar = ({ onSubmit }: Props) => {
   return {
     handleSubmit,
     handleClearDates,
-    setToggleCalendar,
     setCalendarRange,
 
     calendarRange,
-    toggleCalendar,
   }
 }

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

@@ -17,6 +17,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       selectedPath,
       language,
       calendarOffsetGroup,
+      requestDates,
     }: CalendarTypes,
     ref
   ) => {
@@ -68,6 +69,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
             defaultMonth={selectedStartDate || disabledDays[0].from}
             disabled={calendarOffsetGroup || disabledDays}
             fromMonth={today}
+            onMonthChange={(val) => (requestDates ? requestDates(val) : null)}
           />
         </div>
       </div>

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

@@ -14,4 +14,5 @@ export type CalendarTypes = {
     from: Date
     to: Date
   }[]
+  requestDates?: (val: Date) => void
 }

package/src/index.ts

@@ -3,4 +3,6 @@ import FilterBar from './components/FilterBar'
 import FilterCalendar from './components/FilterCalendar'
 
 export { Button, FilterBar, FilterCalendar }
+
 export type { Tab } from './components/FilterBar/FilterBarTypes'
+export type { FilterCalendarTypes } from './components/FilterCalendar/FilterCalendarTypes'