willba-component-library 0.2.15 → 0.2.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/FilterBar/FilterBar.d.ts +1 -1
- package/lib/components/FilterBar/FilterBarTypes.d.ts +2 -2
- package/lib/components/FilterCalendar/FilterCalendar.d.ts +1 -1
- package/lib/components/FilterCalendar/hooks/useFilterCalendar.d.ts +5 -1
- package/lib/core/components/calendar/CalendarTypes.d.ts +22 -5
- package/lib/index.d.ts +30 -13
- package/lib/index.esm.js +210 -69
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +210 -69
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +210 -69
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FilterBar/FilterBar.stories.tsx +11 -3
- package/src/components/FilterBar/FilterBar.tsx +2 -2
- package/src/components/FilterBar/FilterBarTypes.ts +2 -2
- package/src/components/FilterCalendar/FilterCalendar.stories.tsx +861 -20
- package/src/components/FilterCalendar/FilterCalendar.tsx +24 -6
- package/src/components/FilterCalendar/hooks/useFilterCalendar.ts +29 -3
- package/src/core/components/calendar/Calendar.css +50 -8
- package/src/core/components/calendar/Calendar.tsx +231 -81
- package/src/core/components/calendar/CalendarTypes.ts +20 -5
- package/src/locales/en/common.json +5 -1
- package/src/locales/en/filterBar.json +1 -1
- package/src/locales/fi/common.json +5 -1
- package/src/themes/Default.css +1 -0
|
@@ -2,4 +2,4 @@ import React from 'react';
|
|
|
2
2
|
import '../../themes/Default.css';
|
|
3
3
|
import { FilterBarProps } from './FilterBarTypes';
|
|
4
4
|
import './FilterBar.css';
|
|
5
|
-
export default function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth,
|
|
5
|
+
export default function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, }: FilterBarProps): React.JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { DisableCalendarDates } from '../../core/components/calendar/CalendarTypes';
|
|
1
2
|
import { Palette } from '../../themes/useTheme';
|
|
2
|
-
import { CalendarOffset } from '../../core/components/calendar/CalendarTypes';
|
|
3
3
|
export type FilterBarProps = {
|
|
4
4
|
language?: string;
|
|
5
5
|
ageCategories?: AgeCategoryType[];
|
|
@@ -7,7 +7,7 @@ export type FilterBarProps = {
|
|
|
7
7
|
palette?: Palette;
|
|
8
8
|
onSubmit?: ((val: Filters) => void) | null;
|
|
9
9
|
fullWidth?: boolean;
|
|
10
|
-
|
|
10
|
+
disableCalendarDates?: DisableCalendarDates;
|
|
11
11
|
mode?: string;
|
|
12
12
|
defaultTab?: string;
|
|
13
13
|
tabs?: Tab[];
|
|
@@ -2,4 +2,4 @@ import React from 'react';
|
|
|
2
2
|
import '../../themes/Default.css';
|
|
3
3
|
import { FilterCalendarTypes } from './FilterCalendarTypes';
|
|
4
4
|
import './FilterCalendar.css';
|
|
5
|
-
export default function FilterCalendar({ calendarOffset, language, palette, onSubmit,
|
|
5
|
+
export default function FilterCalendar({ calendarOffset, language, palette, onSubmit, disableCalendarDates, toggleCalendar, loadingData, setToggleCalendar, requestDates, }: FilterCalendarTypes): React.JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { DateRange } from 'react-day-picker';
|
|
2
|
+
import { DateRange, Matcher } from 'react-day-picker';
|
|
3
3
|
type Props = {
|
|
4
4
|
onSubmit: (val: any) => void;
|
|
5
5
|
setToggleCalendar: (val: boolean) => void;
|
|
@@ -8,6 +8,10 @@ export declare const useFilterCalendar: ({ onSubmit, setToggleCalendar }: Props)
|
|
|
8
8
|
handleSubmit: () => void;
|
|
9
9
|
handleClearDates: () => void;
|
|
10
10
|
setCalendarRange: import("react").Dispatch<import("react").SetStateAction<DateRange | undefined>>;
|
|
11
|
+
setDisabledDates: import("react").Dispatch<import("react").SetStateAction<Matcher[]>>;
|
|
12
|
+
setUpdateCalendar: import("react").Dispatch<import("react").SetStateAction<boolean>>;
|
|
11
13
|
calendarRange: DateRange | undefined;
|
|
14
|
+
disabledDates: Matcher[];
|
|
15
|
+
updateCalendar: boolean;
|
|
12
16
|
};
|
|
13
17
|
export {};
|
|
@@ -1,16 +1,33 @@
|
|
|
1
|
-
import { DateRange } from 'react-day-picker';
|
|
1
|
+
import { DateRange, Matcher } from 'react-day-picker';
|
|
2
2
|
export type CalendarOffset = {
|
|
3
3
|
[key: string]: number;
|
|
4
4
|
};
|
|
5
|
+
export type DisableCalendarDates = {
|
|
6
|
+
availableDates?: {
|
|
7
|
+
checkIn: Date;
|
|
8
|
+
firstCheckOut: Date;
|
|
9
|
+
lastCheckOut: Date;
|
|
10
|
+
}[];
|
|
11
|
+
disabledDates?: {
|
|
12
|
+
to: Date;
|
|
13
|
+
from: Date;
|
|
14
|
+
}[];
|
|
15
|
+
disabledDatesByPage?: {
|
|
16
|
+
page: string;
|
|
17
|
+
offset: number;
|
|
18
|
+
}[];
|
|
19
|
+
};
|
|
5
20
|
export type CalendarTypes = {
|
|
6
21
|
calendarRange?: DateRange | undefined;
|
|
7
22
|
setCalendarRange: (range: DateRange | undefined) => void;
|
|
8
23
|
calendarOffset?: CalendarOffset;
|
|
9
24
|
selectedPath?: string;
|
|
10
25
|
language?: string;
|
|
11
|
-
|
|
12
|
-
from: Date;
|
|
13
|
-
to: Date;
|
|
14
|
-
}[];
|
|
26
|
+
disableCalendarDates?: DisableCalendarDates;
|
|
15
27
|
requestDates?: (val: Date) => void;
|
|
28
|
+
disabledDates?: Matcher[];
|
|
29
|
+
setDisabledDates?: (arg: Matcher[]) => void;
|
|
30
|
+
updateCalendar?: boolean;
|
|
31
|
+
setUpdateCalendar?: (arg: (prev: boolean) => boolean) => void;
|
|
32
|
+
loadingData?: boolean;
|
|
16
33
|
};
|
package/lib/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { DateRange } from 'react-day-picker';
|
|
2
|
+
import { DateRange, Matcher } from 'react-day-picker';
|
|
3
3
|
|
|
4
4
|
interface ButtonProps {
|
|
5
5
|
/**
|
|
@@ -28,25 +28,42 @@ interface ButtonProps {
|
|
|
28
28
|
*/
|
|
29
29
|
declare const Button: ({ type, textColor, size, onClick, label, }: ButtonProps) => React.JSX.Element;
|
|
30
30
|
|
|
31
|
-
type Palette = {
|
|
32
|
-
primary: string;
|
|
33
|
-
secondary: string;
|
|
34
|
-
};
|
|
35
|
-
|
|
36
31
|
type CalendarOffset = {
|
|
37
32
|
[key: string]: number;
|
|
38
33
|
};
|
|
34
|
+
type DisableCalendarDates = {
|
|
35
|
+
availableDates?: {
|
|
36
|
+
checkIn: Date;
|
|
37
|
+
firstCheckOut: Date;
|
|
38
|
+
lastCheckOut: Date;
|
|
39
|
+
}[];
|
|
40
|
+
disabledDates?: {
|
|
41
|
+
to: Date;
|
|
42
|
+
from: Date;
|
|
43
|
+
}[];
|
|
44
|
+
disabledDatesByPage?: {
|
|
45
|
+
page: string;
|
|
46
|
+
offset: number;
|
|
47
|
+
}[];
|
|
48
|
+
};
|
|
39
49
|
type CalendarTypes = {
|
|
40
50
|
calendarRange?: DateRange | undefined;
|
|
41
51
|
setCalendarRange: (range: DateRange | undefined) => void;
|
|
42
52
|
calendarOffset?: CalendarOffset;
|
|
43
53
|
selectedPath?: string;
|
|
44
54
|
language?: string;
|
|
45
|
-
|
|
46
|
-
from: Date;
|
|
47
|
-
to: Date;
|
|
48
|
-
}[];
|
|
55
|
+
disableCalendarDates?: DisableCalendarDates;
|
|
49
56
|
requestDates?: (val: Date) => void;
|
|
57
|
+
disabledDates?: Matcher[];
|
|
58
|
+
setDisabledDates?: (arg: Matcher[]) => void;
|
|
59
|
+
updateCalendar?: boolean;
|
|
60
|
+
setUpdateCalendar?: (arg: (prev: boolean) => boolean) => void;
|
|
61
|
+
loadingData?: boolean;
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
type Palette = {
|
|
65
|
+
primary: string;
|
|
66
|
+
secondary: string;
|
|
50
67
|
};
|
|
51
68
|
|
|
52
69
|
type FilterBarProps = {
|
|
@@ -56,7 +73,7 @@ type FilterBarProps = {
|
|
|
56
73
|
palette?: Palette;
|
|
57
74
|
onSubmit?: ((val: Filters) => void) | null;
|
|
58
75
|
fullWidth?: boolean;
|
|
59
|
-
|
|
76
|
+
disableCalendarDates?: DisableCalendarDates;
|
|
60
77
|
mode?: string;
|
|
61
78
|
defaultTab?: string;
|
|
62
79
|
tabs?: Tab[];
|
|
@@ -82,7 +99,7 @@ type Tab = {
|
|
|
82
99
|
label?: Translations;
|
|
83
100
|
};
|
|
84
101
|
|
|
85
|
-
declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth,
|
|
102
|
+
declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, }: FilterBarProps): React.JSX.Element;
|
|
86
103
|
|
|
87
104
|
interface FilterCalendarTypes extends Partial<CalendarTypes> {
|
|
88
105
|
palette: Palette;
|
|
@@ -91,6 +108,6 @@ interface FilterCalendarTypes extends Partial<CalendarTypes> {
|
|
|
91
108
|
setToggleCalendar: (val: boolean) => void;
|
|
92
109
|
}
|
|
93
110
|
|
|
94
|
-
declare function FilterCalendar({ calendarOffset, language, palette, onSubmit,
|
|
111
|
+
declare function FilterCalendar({ calendarOffset, language, palette, onSubmit, disableCalendarDates, toggleCalendar, loadingData, setToggleCalendar, requestDates, }: FilterCalendarTypes): React.JSX.Element;
|
|
95
112
|
|
|
96
113
|
export { Button, FilterBar, FilterCalendar, FilterCalendarTypes, Tab };
|
package/lib/index.esm.js
CHANGED
|
@@ -524,7 +524,7 @@ function useTheme(_a) {
|
|
|
524
524
|
return themePalette;
|
|
525
525
|
}
|
|
526
526
|
|
|
527
|
-
var css_248z$c = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n \n box-sizing: border-box;\n font-size: 14px;\n \n color: #1E1E1E;\n \n /* Palette */\n --will-primary: #374269;\n --will-secondary: #374269;\n --will-grey: #ABA7AF;\n --will-white: #fff;\n --will-black: #000;\n --will-onahau: #CDEEFF;\n --will-text: #5A5959;\n --will-charcoal-blue: #384265;\n --will-transparent-white: rgba(255, 255, 255, 0.30);\n --will-transparent-black: rgba(171, 167, 175, 0.30);\n\n /* Confines */\n --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n /* Breakpoints */\n\n --will-lg: 1140px;\n --will-md: 960px;\n --will-sm: 600px;\n --will-xl: 1280px;\n --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n margin: 0;\n padding: 0;\n}\n\n\n/* Integration fixes */\n\n.will-root p {\n margin: 0 !important;\n}\n\n.will-root button {\n line-height: normal !important;\n}\n";
|
|
527
|
+
var css_248z$c = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n \n box-sizing: border-box;\n font-size: 14px;\n \n color: #1E1E1E;\n \n /* Palette */\n --will-primary: #374269;\n --will-secondary: #374269;\n --will-grey: #ABA7AF;\n --will-white: #fff;\n --will-white-transparent: #ffffffcf;\n --will-black: #000;\n --will-onahau: #CDEEFF;\n --will-text: #5A5959;\n --will-charcoal-blue: #384265;\n --will-transparent-white: rgba(255, 255, 255, 0.30);\n --will-transparent-black: rgba(171, 167, 175, 0.30);\n\n /* Confines */\n --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n /* Breakpoints */\n\n --will-lg: 1140px;\n --will-md: 960px;\n --will-sm: 600px;\n --will-xl: 1280px;\n --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n margin: 0;\n padding: 0;\n}\n\n\n/* Integration fixes */\n\n.will-root p {\n margin: 0 !important;\n}\n\n.will-root button {\n line-height: normal !important;\n}\n";
|
|
528
528
|
styleInject(css_248z$c);
|
|
529
529
|
|
|
530
530
|
var useAwaitRender = function () {
|
|
@@ -2809,7 +2809,7 @@ instance.loadNamespaces;
|
|
|
2809
2809
|
instance.loadLanguages;
|
|
2810
2810
|
|
|
2811
2811
|
var calendar$1 = {
|
|
2812
|
-
label: "
|
|
2812
|
+
label: "Dates",
|
|
2813
2813
|
roomsLabelPlaceholder: "Add check-in and check-out",
|
|
2814
2814
|
eventsLabelPlaceholder: "Add search dates",
|
|
2815
2815
|
startDate: "Start date",
|
|
@@ -2847,12 +2847,20 @@ var nights$1 = "nights";
|
|
|
2847
2847
|
var checkIn$1 = "check-in";
|
|
2848
2848
|
var checkOut$1 = "check-out";
|
|
2849
2849
|
var search$1 = "Search";
|
|
2850
|
+
var apply$1 = "Apply";
|
|
2851
|
+
var clearDates$1 = "Clear dates";
|
|
2852
|
+
var noCheckIn$1 = "No check-in";
|
|
2853
|
+
var noCheckOut$1 = "No check-out";
|
|
2850
2854
|
var enCommon = {
|
|
2851
2855
|
night: night$1,
|
|
2852
2856
|
nights: nights$1,
|
|
2853
2857
|
checkIn: checkIn$1,
|
|
2854
2858
|
checkOut: checkOut$1,
|
|
2855
|
-
search: search$1
|
|
2859
|
+
search: search$1,
|
|
2860
|
+
apply: apply$1,
|
|
2861
|
+
clearDates: clearDates$1,
|
|
2862
|
+
noCheckIn: noCheckIn$1,
|
|
2863
|
+
noCheckOut: noCheckOut$1
|
|
2856
2864
|
};
|
|
2857
2865
|
|
|
2858
2866
|
var calendar = {
|
|
@@ -2896,12 +2904,20 @@ var nights = "yötä";
|
|
|
2896
2904
|
var checkIn = "check-in";
|
|
2897
2905
|
var checkOut = "check-out";
|
|
2898
2906
|
var search = "Hae";
|
|
2907
|
+
var apply = "Apply";
|
|
2908
|
+
var clearDates = "Clear dates";
|
|
2909
|
+
var noCheckIn = "No check-in";
|
|
2910
|
+
var noCheckOut = "No check-out";
|
|
2899
2911
|
var fiCommon = {
|
|
2900
2912
|
night: night,
|
|
2901
2913
|
nights: nights,
|
|
2902
2914
|
checkIn: checkIn,
|
|
2903
2915
|
checkOut: checkOut,
|
|
2904
|
-
search: search
|
|
2916
|
+
search: search,
|
|
2917
|
+
apply: apply,
|
|
2918
|
+
clearDates: clearDates,
|
|
2919
|
+
noCheckIn: noCheckIn,
|
|
2920
|
+
noCheckOut: noCheckOut
|
|
2905
2921
|
};
|
|
2906
2922
|
|
|
2907
2923
|
var urlParams = typeof window !== 'undefined'
|
|
@@ -10770,85 +10786,187 @@ var reactResponsiveExports = reactResponsive.exports;
|
|
|
10770
10786
|
var css_248z$9 = ".rdp {\n --rdp-cell-size: 40px;\n --rdp-caption-font-size: 18px;\n --rdp-accent-color: #0000ff;\n --rdp-background-color: #e7edff;\n --rdp-accent-color-dark: #3003e1;\n --rdp-background-color-dark: #180270;\n --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n\n margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n background: transparent;\n border: 0;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n position: absolute !important;\n top: 0;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n overflow: hidden !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n appearance: none;\n position: relative;\n margin: 0;\n padding: 0;\n cursor: default;\n color: inherit;\n background: none;\n font: inherit;\n\n -moz-appearance: none;\n -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n /* Make sure to reset outline only when :focus-visible is supported */\n outline: none;\n}\n\n.rdp-button {\n border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n color: inherit;\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n display: flex;\n}\n\n.rdp-month {\n margin: 0 1em;\n}\n\n.rdp-month:first-child {\n margin-left: 0;\n}\n\n.rdp-month:last-child {\n margin-right: 0;\n}\n\n.rdp-table {\n margin: 0;\n max-width: calc(var(--rdp-cell-size) * 7);\n border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n max-width: calc(var(--rdp-cell-size) * 8);\n border-collapse: collapse;\n}\n\n.rdp-caption {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0;\n text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n position: relative;\n display: block;\n text-align: center;\n}\n\n.rdp-caption_dropdowns {\n position: relative;\n display: inline-flex;\n}\n\n.rdp-caption_label {\n position: relative;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n margin: 0;\n padding: 0 0.25em;\n white-space: nowrap;\n color: currentColor;\n border: 0;\n border: 2px solid transparent;\n font-family: inherit;\n font-size: var(--rdp-caption-font-size);\n font-weight: bold;\n}\n\n.rdp-nav {\n white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n padding: 0.25em;\n border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.rdp-dropdown {\n appearance: none;\n position: absolute;\n z-index: 2;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n margin: 0;\n padding: 0;\n cursor: inherit;\n opacity: 0;\n border: none;\n background-color: transparent;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n opacity: unset;\n color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n margin: 0 0 0 5px;\n}\n\n.rdp-head {\n border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n height: 100%;\n}\n\n.rdp-head_cell {\n vertical-align: middle;\n font-size: 0.75em;\n font-weight: 700;\n text-align: center;\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-transform: uppercase;\n}\n\n.rdp-tbody {\n border: 0;\n}\n\n.rdp-tfoot {\n margin: 0.5em;\n}\n\n.rdp-cell {\n width: var(--rdp-cell-size);\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-align: center;\n}\n\n.rdp-weeknumber {\n font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n display: flex;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--rdp-cell-size);\n max-width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n margin: 0;\n border: 2px solid transparent;\n border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n color: white;\n opacity: 1;\n background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n /* Since the background is the same use again the outline */\n outline: var(--rdp-outline);\n outline-offset: 2px;\n z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n border-radius: 0;\n}";
|
|
10771
10787
|
styleInject(css_248z$9);
|
|
10772
10788
|
|
|
10773
|
-
var css_248z$8 = ".will-calendar-filter-container {\n display: flex;\n justify-content: center;\n user-select: none;\n}\n\n/* Calendar overrides */\n\n\n.will-calendar-filter-container .DayPicker {\n font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n border: 1px solid var(--will-primary);\n border-radius: 50%;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n opacity: .6;\n}\n\n
|
|
10789
|
+
var css_248z$8 = ".will-calendar-filter-container {\n display: flex;\n justify-content: center;\n user-select: none;\n}\n\n/* Calendar overrides */\n\n\n.will-calendar-filter-container .DayPicker {\n font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n border: 1px solid var(--will-primary);\n border-radius: 50%;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n background-color: var(--will-primary);\n opacity: 1;\n}\n\n.will-calendar-filter-container .my-today:not(.rdp-day_selected) { \n font-weight: 700;\n opacity: 1;\n color: var(--will-primary);\n}\n\n.will-calendar-filter-container .rdp-cell {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-cell button {\n font-weight: 500;\n}\n\n.will-calendar-filter-container .rdp-cell button.booked {\n font-weight: 400;\n cursor: not-allowed;\n}\n\n.will-calendar-filter-container .rdp-cell .rdp-button[disabled] {\n opacity: 0.5;\n}\n\n@media (max-width: 960px) {\n .will-calendar-filter-container .rdp-month .rdp-nav {\n border: none;\n border-radius: initial;\n }\n\n .will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 10px;\n }\n \n .will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 10px;\n }\n}\n\n/* Tooltip */\n.will-root .will-calendar-filter-container .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out {\n position: absolute;\n top: -42px;\n transform: translateX(calc(-50% + 20px));\n display: none;\n white-space: nowrap;\n z-index: 2;\n}\n.will-root .will-calendar-filter-container .will-calendar-tooltip > div,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out> div {\n background-color: white;\n position: relative;\n padding: 5px 10px;\n border: 1px solid var(--will-primary);\n border-radius: 5px;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip::before,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out::before {\n content: \"\";\n width: 10px;\n height: 10px;\n border: 1px solid var(--will-primary);\n position: absolute;\n bottom: -4px;\n left:calc(50% - 5.555px);\n rotate: 45deg;\n z-index: 0;\n background-color: var(--will-white);\n}\n\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-out {\n display: block;\n}\n\n/* Loading spinner */\n\n.will-root .will-calendar-filter-container .rdp-months {\n position: relative;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-spinner {\n position: absolute;\n top:0;\n bottom:0;\n left: 0;\n right: 0;\n background-color: var(--will-white-transparent);\n z-index: 3;\n display: none;\n justify-content: center;\n align-items: center;\n font-weight: 600;\n}\n\n\n";
|
|
10774
10790
|
styleInject(css_248z$8);
|
|
10775
10791
|
|
|
10776
10792
|
var Calendar = forwardRef(function (_a, ref) {
|
|
10777
10793
|
var _b;
|
|
10778
|
-
var calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange,
|
|
10794
|
+
var selectedPath = _a.selectedPath, calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, language = _a.language, disableCalendarDates = _a.disableCalendarDates, requestDates = _a.requestDates, disabledDates = _a.disabledDates, setDisabledDates = _a.setDisabledDates, updateCalendar = _a.updateCalendar, setUpdateCalendar = _a.setUpdateCalendar, loadingData = _a.loadingData;
|
|
10779
10795
|
// Translations
|
|
10780
|
-
var t = useTranslation('
|
|
10796
|
+
var t = useTranslation('common').t;
|
|
10781
10797
|
var isTablet = reactResponsiveExports.useMediaQuery({ maxWidth: 960 });
|
|
10798
|
+
var today = startOfDay(new Date());
|
|
10799
|
+
var selectedStartDate = calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from;
|
|
10782
10800
|
useEffect(function () {
|
|
10783
10801
|
if (!calendarRange)
|
|
10784
10802
|
setCalendarRange(undefined);
|
|
10785
10803
|
}, []);
|
|
10786
|
-
|
|
10787
|
-
|
|
10788
|
-
|
|
10789
|
-
|
|
10790
|
-
|
|
10791
|
-
|
|
10792
|
-
|
|
10793
|
-
|
|
10794
|
-
|
|
10795
|
-
|
|
10796
|
-
|
|
10797
|
-
|
|
10798
|
-
|
|
10799
|
-
|
|
10800
|
-
|
|
10801
|
-
|
|
10802
|
-
|
|
10803
|
-
|
|
10804
|
-
return isAfter(date.from, (range === null || range === void 0 ? void 0 : range.from) || 1) &&
|
|
10805
|
-
isBefore(date.from, (range === null || range === void 0 ? void 0 : range.to) || 1);
|
|
10806
|
-
});
|
|
10807
|
-
var handleTooltip = function (type) {
|
|
10808
|
-
var calendarButton = e.currentTarget;
|
|
10809
|
-
var calendarTooltip = document.querySelector('.will-calendar-tooltip');
|
|
10810
|
-
if (calendarButton && calendarTooltip) {
|
|
10811
|
-
if (type) {
|
|
10812
|
-
calendarButton.appendChild(calendarTooltip);
|
|
10813
|
-
calendarTooltip.style.display = 'block';
|
|
10814
|
-
calendarButton.style.overflow = 'visible';
|
|
10815
|
-
calendarButton.style.position = 'relative';
|
|
10816
|
-
}
|
|
10817
|
-
else {
|
|
10818
|
-
calendarTooltip.style.display = 'none';
|
|
10819
|
-
}
|
|
10820
|
-
}
|
|
10821
|
-
};
|
|
10822
|
-
if (isNextDayDisabled) {
|
|
10823
|
-
setOpenTooltip('next');
|
|
10824
|
-
handleTooltip('next');
|
|
10825
|
-
setCalendarRange(undefined);
|
|
10804
|
+
// Handle tooltip
|
|
10805
|
+
useEffect(function () {
|
|
10806
|
+
if (typeof document === 'undefined')
|
|
10807
|
+
return;
|
|
10808
|
+
var calendarTooltip = document.querySelector('.will-calendar-tooltip');
|
|
10809
|
+
var calendarTooltipCheckOut = document.querySelector('.will-calendar-tooltip-check-out');
|
|
10810
|
+
var loadingSpinner = document.querySelector('.will-filter-bar-calendar .will-calendar-spinner');
|
|
10811
|
+
var calendarButtons = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.booked):not(:has(.disabled-after-check-in))');
|
|
10812
|
+
var calendarButtonsCheckOut = document.querySelectorAll('.will-filter-bar-calendar .rdp-cell:has(.booked.disabled-after-check-in)');
|
|
10813
|
+
var calendarMonthContainer = document.querySelector('.will-filter-bar-calendar .rdp-months');
|
|
10814
|
+
var tooltipClones = [];
|
|
10815
|
+
var tooltipClonesCheckOut = [];
|
|
10816
|
+
if (calendarTooltip && calendarButtons.length > 0) {
|
|
10817
|
+
calendarButtons.forEach(function (element) {
|
|
10818
|
+
var tooltipClone = calendarTooltip.cloneNode(true);
|
|
10819
|
+
element.appendChild(tooltipClone);
|
|
10820
|
+
tooltipClones.push(tooltipClone);
|
|
10821
|
+
});
|
|
10826
10822
|
}
|
|
10827
|
-
|
|
10828
|
-
|
|
10829
|
-
|
|
10830
|
-
|
|
10823
|
+
if (calendarTooltipCheckOut && calendarButtonsCheckOut.length > 0) {
|
|
10824
|
+
calendarButtonsCheckOut.forEach(function (element) {
|
|
10825
|
+
var tooltipClone = calendarTooltipCheckOut.cloneNode(true);
|
|
10826
|
+
element.appendChild(tooltipClone);
|
|
10827
|
+
tooltipClonesCheckOut.push(tooltipClone);
|
|
10828
|
+
});
|
|
10829
|
+
}
|
|
10830
|
+
if (loadingSpinner && calendarMonthContainer) {
|
|
10831
|
+
calendarMonthContainer.appendChild(loadingSpinner);
|
|
10832
|
+
}
|
|
10833
|
+
return function () {
|
|
10834
|
+
tooltipClones.forEach(function (clone) { return clone.remove(); });
|
|
10835
|
+
tooltipClonesCheckOut.forEach(function (clone) { return clone.remove(); });
|
|
10836
|
+
};
|
|
10837
|
+
}, [calendarRange, updateCalendar]);
|
|
10838
|
+
// Handle loading spinner
|
|
10839
|
+
useEffect(function () {
|
|
10840
|
+
if (typeof document === 'undefined')
|
|
10841
|
+
return;
|
|
10842
|
+
var loadingSpinner = document.querySelector('.will-filter-bar-calendar .will-calendar-spinner');
|
|
10843
|
+
if (loadingData) {
|
|
10844
|
+
if (loadingSpinner)
|
|
10845
|
+
loadingSpinner.style.display = 'flex';
|
|
10831
10846
|
}
|
|
10832
10847
|
else {
|
|
10833
|
-
|
|
10834
|
-
|
|
10835
|
-
handleTooltip('');
|
|
10848
|
+
if (loadingSpinner)
|
|
10849
|
+
loadingSpinner.style.display = 'none';
|
|
10836
10850
|
}
|
|
10837
|
-
};
|
|
10851
|
+
}, [loadingData]);
|
|
10852
|
+
// Handle disable dates by page
|
|
10853
|
+
var disabledDatesByPage = handleDisabledDatesByPage({
|
|
10854
|
+
today: today,
|
|
10855
|
+
selectedPath: selectedPath,
|
|
10856
|
+
disableCalendarDates: disableCalendarDates,
|
|
10857
|
+
});
|
|
10838
10858
|
return (React__default__default.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
|
|
10839
10859
|
React__default__default.createElement("div", { className: "will-calendar-filter-container" },
|
|
10840
10860
|
React__default__default.createElement(DayPicker, { id: "will-calendar", mode: "range", locale: language === 'en' ? enUS : fi, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: function (range, days, activeModifiers, e) {
|
|
10841
|
-
return
|
|
10861
|
+
return handleSelectedCheckIn({
|
|
10862
|
+
range: range,
|
|
10863
|
+
e: e,
|
|
10864
|
+
disableCalendarDates: disableCalendarDates,
|
|
10865
|
+
setCalendarRange: setCalendarRange,
|
|
10866
|
+
setDisabledDates: setDisabledDates,
|
|
10867
|
+
calendarRange: calendarRange,
|
|
10868
|
+
});
|
|
10842
10869
|
}, modifiersClassNames: {
|
|
10843
10870
|
today: 'my-today',
|
|
10844
|
-
|
|
10845
|
-
|
|
10846
|
-
}, captionLayout: "dropdown-buttons", defaultMonth: selectedStartDate ||
|
|
10871
|
+
booked: 'booked',
|
|
10872
|
+
disabledAfterCheckIn: 'disabled-after-check-in',
|
|
10873
|
+
}, captionLayout: "dropdown-buttons", defaultMonth: selectedStartDate ||
|
|
10874
|
+
(((_b = disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.length)
|
|
10875
|
+
? disableCalendarDates.disabledDates[0].from
|
|
10876
|
+
: today), disabled: disabledDatesByPage.length
|
|
10877
|
+
? disabledDatesByPage
|
|
10878
|
+
: (disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.length)
|
|
10879
|
+
? disabledDates
|
|
10880
|
+
: (disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.disabledDates) || [], fromMonth: today, onMonthChange: function (val) {
|
|
10881
|
+
requestDates && setUpdateCalendar
|
|
10882
|
+
? (requestDates(val), setUpdateCalendar(function (prev) { return !prev; }))
|
|
10883
|
+
: null;
|
|
10884
|
+
}, modifiers: {
|
|
10885
|
+
booked: disabledDatesByPage.length
|
|
10886
|
+
? disabledDatesByPage
|
|
10887
|
+
: (disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.length)
|
|
10888
|
+
? disabledDates
|
|
10889
|
+
: (disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.disabledDates) || [],
|
|
10890
|
+
disabledAfterCheckIn: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
|
|
10891
|
+
? [{ after: calendarRange.from }]
|
|
10892
|
+
: [],
|
|
10893
|
+
} }),
|
|
10847
10894
|
React__default__default.createElement("div", { className: 'will-calendar-tooltip' },
|
|
10848
|
-
React__default__default.createElement("div", null,
|
|
10849
|
-
|
|
10850
|
-
|
|
10895
|
+
React__default__default.createElement("div", null, t('noCheckIn'))),
|
|
10896
|
+
React__default__default.createElement("div", { className: 'will-calendar-tooltip-check-out' },
|
|
10897
|
+
React__default__default.createElement("div", null, t('noCheckOut'))),
|
|
10898
|
+
React__default__default.createElement("div", { className: 'will-calendar-spinner' }, "Loading..."))));
|
|
10851
10899
|
});
|
|
10900
|
+
/////////
|
|
10901
|
+
var handleSelectedCheckIn = function (_a) {
|
|
10902
|
+
var _b;
|
|
10903
|
+
var range = _a.range; _a.e; var disableCalendarDates = _a.disableCalendarDates, setCalendarRange = _a.setCalendarRange, setDisabledDates = _a.setDisabledDates, calendarRange = _a.calendarRange;
|
|
10904
|
+
// Calendar dates select logic
|
|
10905
|
+
var dateFormat = 'dd-MM-yyyy';
|
|
10906
|
+
var rangeFrom = (range === null || range === void 0 ? void 0 : range.from) ? format(range.from, dateFormat) : null;
|
|
10907
|
+
var rangeTo = (range === null || range === void 0 ? void 0 : range.to) ? format(range.to, dateFormat) : null;
|
|
10908
|
+
var calendarFrom = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
|
|
10909
|
+
? format(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from, dateFormat)
|
|
10910
|
+
: null;
|
|
10911
|
+
(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to)
|
|
10912
|
+
? format(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to, dateFormat)
|
|
10913
|
+
: null;
|
|
10914
|
+
var checkOutRange = ((_b = disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.availableDates) === null || _b === void 0 ? void 0 : _b.length)
|
|
10915
|
+
? disableCalendarDates.availableDates.find(function (checkInDate) {
|
|
10916
|
+
return format(checkInDate.checkIn || 1, dateFormat) ===
|
|
10917
|
+
format((range === null || range === void 0 ? void 0 : range.from) || 1, dateFormat);
|
|
10918
|
+
})
|
|
10919
|
+
: null;
|
|
10920
|
+
if (rangeFrom &&
|
|
10921
|
+
// rangeFrom !== calendarTo &&
|
|
10922
|
+
checkOutRange &&
|
|
10923
|
+
setDisabledDates) {
|
|
10924
|
+
var checkIn = addDays(checkOutRange.checkIn, 1);
|
|
10925
|
+
var firstCheckOut = addDays(checkOutRange.firstCheckOut, -1);
|
|
10926
|
+
var noDatesRange = format(checkIn, dateFormat) ===
|
|
10927
|
+
format(checkOutRange.firstCheckOut, dateFormat);
|
|
10928
|
+
setDisabledDates(__spreadArray$1(__spreadArray$1([], __read(((disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.disabledDates) || [])), false), [
|
|
10929
|
+
{
|
|
10930
|
+
from: noDatesRange ? undefined : checkIn,
|
|
10931
|
+
to: noDatesRange ? undefined : firstCheckOut,
|
|
10932
|
+
},
|
|
10933
|
+
{ after: checkOutRange === null || checkOutRange === void 0 ? void 0 : checkOutRange.lastCheckOut },
|
|
10934
|
+
], false));
|
|
10935
|
+
}
|
|
10936
|
+
if ((rangeTo && rangeFrom && rangeFrom === rangeTo) ||
|
|
10937
|
+
(!rangeTo && !rangeFrom)) {
|
|
10938
|
+
setCalendarRange(undefined);
|
|
10939
|
+
setDisabledDates && setDisabledDates([]);
|
|
10940
|
+
}
|
|
10941
|
+
else if (calendarFrom && rangeFrom && rangeFrom !== calendarFrom) {
|
|
10942
|
+
setCalendarRange({
|
|
10943
|
+
from: range === null || range === void 0 ? void 0 : range.from,
|
|
10944
|
+
to: undefined,
|
|
10945
|
+
});
|
|
10946
|
+
}
|
|
10947
|
+
else {
|
|
10948
|
+
setCalendarRange(range);
|
|
10949
|
+
}
|
|
10950
|
+
};
|
|
10951
|
+
var handleDisabledDatesByPage = function (_a) {
|
|
10952
|
+
var _b, _c, _d;
|
|
10953
|
+
var disableCalendarDates = _a.disableCalendarDates, selectedPath = _a.selectedPath, today = _a.today;
|
|
10954
|
+
var daysToOffsetCalendar = (disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.disabledDatesByPage) && selectedPath
|
|
10955
|
+
? [
|
|
10956
|
+
(_b = disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.disabledDatesByPage) === null || _b === void 0 ? void 0 : _b.find(function (item) { return selectedPath === item.page; }),
|
|
10957
|
+
]
|
|
10958
|
+
: [];
|
|
10959
|
+
return daysToOffsetCalendar.length
|
|
10960
|
+
? [
|
|
10961
|
+
{
|
|
10962
|
+
from: addDays(today, daysToOffsetCalendar.length && ((_c = daysToOffsetCalendar[0]) === null || _c === void 0 ? void 0 : _c.offset)
|
|
10963
|
+
? (_d = daysToOffsetCalendar[0]) === null || _d === void 0 ? void 0 : _d.offset
|
|
10964
|
+
: -2),
|
|
10965
|
+
to: addDays(today, -100),
|
|
10966
|
+
},
|
|
10967
|
+
]
|
|
10968
|
+
: [];
|
|
10969
|
+
};
|
|
10852
10970
|
|
|
10853
10971
|
var parseDates = function (_a) {
|
|
10854
10972
|
var calendarRange = _a.calendarRange;
|
|
@@ -11165,7 +11283,7 @@ var css_248z$1 = ".will-root {\n z-index: 999;\n width: fit-content;\n min-wi
|
|
|
11165
11283
|
styleInject(css_248z$1);
|
|
11166
11284
|
|
|
11167
11285
|
function FilterBar(_a) {
|
|
11168
|
-
var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b, _c = _a.redirectUrl, redirectUrl = _c === void 0 ? REDIRECT_URL_FALLBACK : _c, palette = _a.palette, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth,
|
|
11286
|
+
var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b, _c = _a.redirectUrl, redirectUrl = _c === void 0 ? REDIRECT_URL_FALLBACK : _c, palette = _a.palette, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, disableCalendarDates = _a.disableCalendarDates, mode = _a.mode, tabs = _a.tabs;
|
|
11169
11287
|
var themePalette = useTheme({ palette: palette });
|
|
11170
11288
|
// Translations
|
|
11171
11289
|
useUpdateTranslations({ language: language });
|
|
@@ -11212,7 +11330,7 @@ function FilterBar(_a) {
|
|
|
11212
11330
|
React__default__default.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React__default__default.createElement(FaSearch, null), label: t('common:search') })),
|
|
11213
11331
|
selectedFilter && (React__default__default.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: (!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {} },
|
|
11214
11332
|
React__default__default.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
|
|
11215
|
-
selectedFilter === FilterSections.CALENDAR && (React__default__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, ref: filtersRef,
|
|
11333
|
+
selectedFilter === FilterSections.CALENDAR && (React__default__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, ref: filtersRef, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language })),
|
|
11216
11334
|
selectedFilter === FilterSections.GUESTS && (React__default__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef })),
|
|
11217
11335
|
selectedFilter === FilterSections.CATEGORIES && (React__default__default.createElement(Categories, { categories: categories, setCategories: setCategories }))))));
|
|
11218
11336
|
}
|
|
@@ -11236,18 +11354,41 @@ var REDIRECT_URL_FALLBACK = 'http://localhost:3000/';
|
|
|
11236
11354
|
var useFilterCalendar = function (_a) {
|
|
11237
11355
|
var onSubmit = _a.onSubmit, setToggleCalendar = _a.setToggleCalendar;
|
|
11238
11356
|
var _b = __read(useState(), 2), calendarRange = _b[0], setCalendarRange = _b[1];
|
|
11357
|
+
var _c = __read(useState([]), 2), disabledDates = _c[0], setDisabledDates = _c[1];
|
|
11358
|
+
var _d = __read(useState(false), 2), updateCalendar = _d[0], setUpdateCalendar = _d[1];
|
|
11359
|
+
useEffect(function () {
|
|
11360
|
+
if (typeof window === 'undefined')
|
|
11361
|
+
return;
|
|
11362
|
+
var urlSearchParams = new URLSearchParams(window.location.search);
|
|
11363
|
+
var startDateParam = urlSearchParams.get('startDate');
|
|
11364
|
+
var endDateParam = urlSearchParams.get('endDate');
|
|
11365
|
+
if (startDateParam && endDateParam) {
|
|
11366
|
+
setCalendarRange({
|
|
11367
|
+
from: new Date(startDateParam),
|
|
11368
|
+
to: new Date(endDateParam),
|
|
11369
|
+
});
|
|
11370
|
+
}
|
|
11371
|
+
}, []);
|
|
11372
|
+
useEffect(function () {
|
|
11373
|
+
onSubmit(calendarRange);
|
|
11374
|
+
}, []);
|
|
11239
11375
|
var handleSubmit = function () {
|
|
11240
11376
|
setToggleCalendar(false);
|
|
11241
11377
|
return onSubmit(calendarRange);
|
|
11242
11378
|
};
|
|
11243
11379
|
var handleClearDates = function () {
|
|
11380
|
+
setDisabledDates([]);
|
|
11244
11381
|
setCalendarRange(undefined);
|
|
11245
11382
|
};
|
|
11246
11383
|
return {
|
|
11247
11384
|
handleSubmit: handleSubmit,
|
|
11248
11385
|
handleClearDates: handleClearDates,
|
|
11249
11386
|
setCalendarRange: setCalendarRange,
|
|
11387
|
+
setDisabledDates: setDisabledDates,
|
|
11388
|
+
setUpdateCalendar: setUpdateCalendar,
|
|
11250
11389
|
calendarRange: calendarRange,
|
|
11390
|
+
disabledDates: disabledDates,
|
|
11391
|
+
updateCalendar: updateCalendar,
|
|
11251
11392
|
};
|
|
11252
11393
|
};
|
|
11253
11394
|
|
|
@@ -11255,12 +11396,12 @@ var css_248z = ".will-root .will-calendar-wrapper {\n box-shadow: var(--will-
|
|
|
11255
11396
|
styleInject(css_248z);
|
|
11256
11397
|
|
|
11257
11398
|
function FilterCalendar(_a) {
|
|
11258
|
-
var calendarOffset = _a.calendarOffset, language = _a.language, palette = _a.palette, onSubmit = _a.onSubmit,
|
|
11399
|
+
var calendarOffset = _a.calendarOffset, language = _a.language, palette = _a.palette, onSubmit = _a.onSubmit, disableCalendarDates = _a.disableCalendarDates, toggleCalendar = _a.toggleCalendar, loadingData = _a.loadingData, setToggleCalendar = _a.setToggleCalendar, requestDates = _a.requestDates;
|
|
11259
11400
|
var themePalette = useTheme({ palette: palette });
|
|
11260
11401
|
// Translations
|
|
11261
11402
|
useUpdateTranslations({ language: language });
|
|
11262
11403
|
var t = useTranslation().t;
|
|
11263
|
-
var _b = useFilterCalendar({ onSubmit: onSubmit, setToggleCalendar: setToggleCalendar }), handleSubmit = _b.handleSubmit, setCalendarRange = _b.setCalendarRange, handleClearDates = _b.handleClearDates, calendarRange = _b.calendarRange;
|
|
11404
|
+
var _b = useFilterCalendar({ onSubmit: onSubmit, setToggleCalendar: setToggleCalendar }), handleSubmit = _b.handleSubmit, setCalendarRange = _b.setCalendarRange, handleClearDates = _b.handleClearDates, calendarRange = _b.calendarRange, disabledDates = _b.disabledDates, setDisabledDates = _b.setDisabledDates, updateCalendar = _b.updateCalendar, setUpdateCalendar = _b.setUpdateCalendar;
|
|
11264
11405
|
// Display component after fully loaded
|
|
11265
11406
|
useAwaitRender();
|
|
11266
11407
|
// Handle close filter section
|
|
@@ -11273,7 +11414,7 @@ function FilterCalendar(_a) {
|
|
|
11273
11414
|
React__default__default.createElement("h2", null, t('filterBar:calendar.title')),
|
|
11274
11415
|
React__default__default.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
|
|
11275
11416
|
React__default__default.createElement("div", { className: "will-calendar-main" },
|
|
11276
|
-
React__default__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language,
|
|
11417
|
+
React__default__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, disableCalendarDates: disableCalendarDates, requestDates: requestDates, disabledDates: disabledDates, setDisabledDates: setDisabledDates, updateCalendar: updateCalendar, setUpdateCalendar: setUpdateCalendar, loadingData: loadingData })),
|
|
11277
11418
|
React__default__default.createElement("div", { className: "will-calendar-footer" },
|
|
11278
11419
|
React__default__default.createElement("div", { className: "will-calendar-footer-dates" },
|
|
11279
11420
|
React__default__default.createElement("div", null,
|
|
@@ -11288,8 +11429,8 @@ function FilterCalendar(_a) {
|
|
|
11288
11429
|
}) || t('common:checkOut'))),
|
|
11289
11430
|
!!nights && (React__default__default.createElement("span", null, "".concat(nights, " ").concat(t("common:".concat(nights > 1 ? 'nights' : 'night')))))),
|
|
11290
11431
|
React__default__default.createElement("div", { className: "will-calendar-footer-actions" },
|
|
11291
|
-
React__default__default.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label:
|
|
11292
|
-
React__default__default.createElement(SubmitButton, { onClick: handleSubmit, label: t("common:
|
|
11432
|
+
React__default__default.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates") }),
|
|
11433
|
+
React__default__default.createElement(SubmitButton, { onClick: handleSubmit, label: t("common:apply"), disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) || !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) })))))));
|
|
11293
11434
|
}
|
|
11294
11435
|
|
|
11295
11436
|
export { Button$1 as Button, FilterBar, FilterCalendar };
|