willba-component-library 0.1.16 → 0.1.18
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 +2 -1
- package/lib/components/FilterBar/components/buttons/tab-button/TabButton.d.ts +9 -0
- package/lib/components/FilterBar/hooks/useFilterBar.d.ts +2 -0
- package/lib/index.d.ts +2 -1
- package/lib/index.esm.js +75 -39
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +75 -39
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +75 -39
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FilterBar/FilterBar.css +13 -2
- package/src/components/FilterBar/FilterBar.tsx +27 -6
- package/src/components/FilterBar/components/buttons/tab-button/TabButton.css +43 -0
- package/src/components/FilterBar/components/buttons/tab-button/TabButton.tsx +20 -0
- package/src/components/FilterBar/hooks/useFilterBar.tsx +20 -1
- package/src/locales/en/filterBar.json +4 -0
- package/src/locales/fi/filterBar.json +4 -0
- package/src/themes/Default.css +3 -1
|
@@ -9,5 +9,6 @@ export interface FilterBarProps {
|
|
|
9
9
|
ageCategories?: AgeCategoryType[];
|
|
10
10
|
redirectUrl: string;
|
|
11
11
|
palette?: Palette;
|
|
12
|
+
currentPath?: string;
|
|
12
13
|
}
|
|
13
|
-
export default function FilterBar({ language, ageCategories, redirectUrl, palette, }: FilterBarProps): React.JSX.Element;
|
|
14
|
+
export default function FilterBar({ language, ageCategories, currentPath, redirectUrl, palette, }: FilterBarProps): React.JSX.Element;
|
|
@@ -9,6 +9,7 @@ export default function useFilterBar({ redirectUrl }: UseFilterBarPropsType): {
|
|
|
9
9
|
ageCategoryCounts: AgeCategoryCount;
|
|
10
10
|
categories: number;
|
|
11
11
|
calendarRange: DateRange | undefined;
|
|
12
|
+
selectedPath: string;
|
|
12
13
|
setCalendarRange: import("react").Dispatch<import("react").SetStateAction<DateRange | undefined>>;
|
|
13
14
|
setSelectedFilter: import("react").Dispatch<import("react").SetStateAction<number | boolean>>;
|
|
14
15
|
setAgeCategoryCounts: import("react").Dispatch<import("react").SetStateAction<AgeCategoryCount>>;
|
|
@@ -17,5 +18,6 @@ export default function useFilterBar({ redirectUrl }: UseFilterBarPropsType): {
|
|
|
17
18
|
handleSubmit: () => void;
|
|
18
19
|
updateGuestsCount: (id: number, newCount: number) => void;
|
|
19
20
|
handleResetFilters: () => void;
|
|
21
|
+
setSelectedPath: import("react").Dispatch<import("react").SetStateAction<string>>;
|
|
20
22
|
};
|
|
21
23
|
export {};
|
package/lib/index.d.ts
CHANGED
|
@@ -46,7 +46,8 @@ interface FilterBarProps {
|
|
|
46
46
|
ageCategories?: AgeCategoryType[];
|
|
47
47
|
redirectUrl: string;
|
|
48
48
|
palette?: Palette;
|
|
49
|
+
currentPath?: string;
|
|
49
50
|
}
|
|
50
|
-
declare function FilterBar({ language, ageCategories, redirectUrl, palette, }: FilterBarProps): React.JSX.Element;
|
|
51
|
+
declare function FilterBar({ language, ageCategories, currentPath, redirectUrl, palette, }: FilterBarProps): React.JSX.Element;
|
|
51
52
|
|
|
52
53
|
export { Button, FilterBar };
|
package/lib/index.esm.js
CHANGED
|
@@ -96,8 +96,8 @@ function styleInject(css, ref) {
|
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
-
var css_248z$
|
|
100
|
-
styleInject(css_248z$
|
|
99
|
+
var css_248z$c = ".storybook-button {\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-weight: 700;\n border: 0;\n border-radius: 3em;\n cursor: pointer;\n display: inline-block;\n line-height: 1;\n}\n.storybook-button--primary {\n color: white;\n background-color: #1ea7fd;\n}\n.storybook-button--secondary {\n color: #333;\n background-color: transparent;\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n}\n.storybook-button--small {\n font-size: 12px;\n padding: 10px 16px;\n}\n.storybook-button--medium {\n font-size: 14px;\n padding: 11px 20px;\n}\n.storybook-button--large {\n font-size: 16px;\n padding: 12px 24px;\n}";
|
|
100
|
+
styleInject(css_248z$c);
|
|
101
101
|
|
|
102
102
|
/**
|
|
103
103
|
* Primary UI component for user interaction
|
|
@@ -3807,15 +3807,15 @@ function setYear(dirtyDate, dirtyYear) {
|
|
|
3807
3807
|
return date;
|
|
3808
3808
|
}
|
|
3809
3809
|
|
|
3810
|
-
var css_248z$
|
|
3811
|
-
styleInject(css_248z$
|
|
3810
|
+
var css_248z$b = ".will-filter-bar-divider {\n width: 1px;\n margin: 0 10px;\n height: 35px;\n background-color: #384265;\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-divider {\n width: 100%;\n margin: 0 10px;\n height: 1px;\n background-color: #384265;\n }\n}";
|
|
3811
|
+
styleInject(css_248z$b);
|
|
3812
3812
|
|
|
3813
3813
|
function Divider() {
|
|
3814
3814
|
return React__default__default.createElement("div", { className: "will-filter-bar-divider" });
|
|
3815
3815
|
}
|
|
3816
3816
|
|
|
3817
|
-
var css_248z$
|
|
3818
|
-
styleInject(css_248z$
|
|
3817
|
+
var css_248z$a = ".will-filter-bar-select-button {\n width: 100%;\n height: auto;\n background-color: transparent;\n border: none;\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n font-size: 15px;\n text-align: initial;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n \n}\n\n@media (max-width: 960px) {\n .will-filter-bar-select-button {\n margin: 15px 0;\n }\n\n .will-filter-bar-select-button .select-button-wrapper {\n justify-content: center;\n text-align: center;\n }\n\n .will-filter-bar-select-button .select-button-divider {\n display: none\n }\n}\n\n\n";
|
|
3818
|
+
styleInject(css_248z$a);
|
|
3819
3819
|
|
|
3820
3820
|
function SelectButton(_a) {
|
|
3821
3821
|
var label = _a.label, onClick = _a.onClick, style = _a.style, date = _a.date;
|
|
@@ -3905,10 +3905,10 @@ function FaSearch (props) {
|
|
|
3905
3905
|
return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"}}]})(props);
|
|
3906
3906
|
}
|
|
3907
3907
|
|
|
3908
|
-
var css_248z$
|
|
3909
|
-
styleInject(css_248z$
|
|
3908
|
+
var css_248z$9 = ".will-filter-bar-submit-button {\n width: auto;\n height: auto;\n background-color: var(--will-primary);\n color: var(--will-white);\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n border: none;\n white-space: nowrap;\n text-transform: uppercase;\n font-size: 12px;\n display: flex;\n align-items: center;\n}\n\n.will-filter-bar-submit-button span {\n margin-right: 10px;\n display: flex;\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-submit-button {\n justify-content: center;\n margin-bottom: 15px;\n }\n}\n";
|
|
3909
|
+
styleInject(css_248z$9);
|
|
3910
3910
|
|
|
3911
|
-
function SubmitButton(_a) {
|
|
3911
|
+
function SubmitButton$1(_a) {
|
|
3912
3912
|
var onClick = _a.onClick;
|
|
3913
3913
|
var t = useTranslation('filterBar').t;
|
|
3914
3914
|
return (React__default__default.createElement("button", { className: "will-filter-bar-submit-button", onClick: onClick },
|
|
@@ -7885,11 +7885,11 @@ var reactResponsive = {exports: {}};
|
|
|
7885
7885
|
|
|
7886
7886
|
var reactResponsiveExports = reactResponsive.exports;
|
|
7887
7887
|
|
|
7888
|
-
var css_248z$
|
|
7889
|
-
styleInject(css_248z$
|
|
7888
|
+
var css_248z$8 = ".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}";
|
|
7889
|
+
styleInject(css_248z$8);
|
|
7890
7890
|
|
|
7891
|
-
var css_248z$
|
|
7892
|
-
styleInject(css_248z$
|
|
7891
|
+
var css_248z$7 = "/* .will-filter-bar-calendar {} */\n\n.will-calendar-filter-header {\n padding: 15px 0;\n border-bottom: 1px solid var(--will-grey);\n}\n\n.will-calendar-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0;\n text-align: left;\n}\n\n.will-calendar-filter-container {\n display: flex;\n justify-content: center;\n padding-top: 20px;\n}\n\n/* Calendar overrides */\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 left: 25;\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 {\n opacity: 0.7;\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@media (max-width: 960px) {\n .will-calendar-filter-container .rdp-month .rdp-nav {\n border: none;\n border-radius: initial;\n \n }\n}\n\n\n";
|
|
7892
|
+
styleInject(css_248z$7);
|
|
7893
7893
|
|
|
7894
7894
|
var currentMonth = new Date();
|
|
7895
7895
|
function Calendar(_a) {
|
|
@@ -7911,8 +7911,8 @@ function Calendar(_a) {
|
|
|
7911
7911
|
React__default__default.createElement(DayPicker, { id: "will-calendar", mode: "range", showOutsideDays: true, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, defaultMonth: currentMonth, selected: calendarRange, onSelect: setCalendarRange }))));
|
|
7912
7912
|
}
|
|
7913
7913
|
|
|
7914
|
-
var css_248z$
|
|
7915
|
-
styleInject(css_248z$
|
|
7914
|
+
var css_248z$6 = ".will-guests-filter-label, .will-guests-filter-count {\n font-size: 18px;\n color: var(--will-text)\n}\n\n.will-guests-filter-inner {\n display: flex;\n align-items: center;\n}\n\n.will-guests-filter-inner {\n margin-top: 30px;\n margin-right: 50px;\n}\n\n.will-guests-filter-label {\n display: block;\n margin-right: 20px;\n font-weight: bold;\n \n}\n\n.will-guests-filter-inner > div {\n display: flex;\n align-items: center;\n}\n\n.will-guests-filter-count {\n margin: 0 10px;\n min-width: 30px;\n text-align: center;\n}\n\n.will-guests-filter-button {\n border-radius: 50%;\n border: none;\n background-color: var(--will-onahau);\n width: 25px;\n height: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n cursor: pointer;\n}\n\n@media (max-width: 960px) {\n\n .will-guests-filter-inner {\n width: 100%;\n margin: 15px 0;\n justify-content: space-between;\n }\n}";
|
|
7915
|
+
styleInject(css_248z$6);
|
|
7916
7916
|
|
|
7917
7917
|
function GuestCount(_a) {
|
|
7918
7918
|
var label = _a.label, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
|
|
@@ -7939,8 +7939,8 @@ function GuestCount(_a) {
|
|
|
7939
7939
|
React__default__default.createElement("button", { className: "will-guests-filter-button", onClick: handleIncrement }, "+"))));
|
|
7940
7940
|
}
|
|
7941
7941
|
|
|
7942
|
-
var css_248z$
|
|
7943
|
-
styleInject(css_248z$
|
|
7942
|
+
var css_248z$5 = ".will-filter-bar-guests {\n text-align: initial;\n}\n\n.will-guests-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0;\n}\n\n.will-guests-filter-subtitle {\n font-size: 15px;\n font-weight: 500;\n color:var(--will-text)\n}\n\n\n.will-guests-filter-container {\n display: flex;\n flex-wrap: wrap;\n}\n\n\n@media (max-width: 960px) {\n .will-guests-filter-container {\n margin-top: 15px;\n }\n}";
|
|
7943
|
+
styleInject(css_248z$5);
|
|
7944
7944
|
|
|
7945
7945
|
function Guests(_a) {
|
|
7946
7946
|
var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts;
|
|
@@ -7952,8 +7952,8 @@ function Guests(_a) {
|
|
|
7952
7952
|
category.minVal })); }))));
|
|
7953
7953
|
}
|
|
7954
7954
|
|
|
7955
|
-
var css_248z$
|
|
7956
|
-
styleInject(css_248z$
|
|
7955
|
+
var css_248z$4 = ".will-filter-bar-categories {\n text-align: center;\n}\n\n.will-categories-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0 30px 0;\n}\n\n.will-categories-filter-inner {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n}\n\n.will-categories-filter-inner input {\n cursor: pointer;\n margin-right: 10px;\n}\n";
|
|
7956
|
+
styleInject(css_248z$4);
|
|
7957
7957
|
|
|
7958
7958
|
function Categories(_a) {
|
|
7959
7959
|
_a.categories; var setCategories = _a.setCategories;
|
|
@@ -8020,10 +8020,11 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
8020
8020
|
|
|
8021
8021
|
function useFilterBar(_a) {
|
|
8022
8022
|
var redirectUrl = _a.redirectUrl;
|
|
8023
|
-
var _b = useState(
|
|
8024
|
-
var _c = useState(),
|
|
8025
|
-
var _d = useState(
|
|
8026
|
-
var _e = useState(
|
|
8023
|
+
var _b = useState('/events'), selectedPath = _b[0], setSelectedPath = _b[1];
|
|
8024
|
+
var _c = useState(false), selectedFilter = _c[0], setSelectedFilter = _c[1];
|
|
8025
|
+
var _d = useState(), calendarRange = _d[0], setCalendarRange = _d[1];
|
|
8026
|
+
var _e = useState(0), categories = _e[0], setCategories = _e[1];
|
|
8027
|
+
var _f = useState({}), ageCategoryCounts = _f[0], setAgeCategoryCounts = _f[1];
|
|
8027
8028
|
var updateGuestsCount = function (id, newCount) {
|
|
8028
8029
|
setAgeCategoryCounts(function (prevCounts) {
|
|
8029
8030
|
var _a;
|
|
@@ -8064,7 +8065,7 @@ function useFilterBar(_a) {
|
|
|
8064
8065
|
queryParams.append(key, value.toString());
|
|
8065
8066
|
}
|
|
8066
8067
|
}
|
|
8067
|
-
window.location.href = "".concat(redirectUrl).concat(queryParams ? "?".concat(queryParams.toString()) : '');
|
|
8068
|
+
window.location.href = "".concat(redirectUrl, "/").concat(selectedPath).concat(queryParams ? "?".concat(queryParams.toString()) : '');
|
|
8068
8069
|
handleSelectedFilter(false);
|
|
8069
8070
|
};
|
|
8070
8071
|
useEffect(function () {
|
|
@@ -8073,6 +8074,18 @@ function useFilterBar(_a) {
|
|
|
8073
8074
|
document.body.style.overflow = 'visible';
|
|
8074
8075
|
};
|
|
8075
8076
|
}, [selectedFilter]);
|
|
8077
|
+
useEffect(function () {
|
|
8078
|
+
var currentPath = '/events'; // Default path name
|
|
8079
|
+
if (typeof window !== 'undefined') {
|
|
8080
|
+
// Get current path name
|
|
8081
|
+
currentPath =
|
|
8082
|
+
window.location.pathname.includes('/events') ||
|
|
8083
|
+
window.location.pathname.includes('/rooms')
|
|
8084
|
+
? window.location.pathname
|
|
8085
|
+
: '/events';
|
|
8086
|
+
setSelectedPath(currentPath);
|
|
8087
|
+
}
|
|
8088
|
+
}, []);
|
|
8076
8089
|
var handleResetFilters = function () {
|
|
8077
8090
|
setAgeCategoryCounts({});
|
|
8078
8091
|
handleSubmit();
|
|
@@ -8083,6 +8096,7 @@ function useFilterBar(_a) {
|
|
|
8083
8096
|
ageCategoryCounts: ageCategoryCounts,
|
|
8084
8097
|
categories: categories,
|
|
8085
8098
|
calendarRange: calendarRange,
|
|
8099
|
+
selectedPath: selectedPath,
|
|
8086
8100
|
setCalendarRange: setCalendarRange,
|
|
8087
8101
|
setSelectedFilter: setSelectedFilter,
|
|
8088
8102
|
setAgeCategoryCounts: setAgeCategoryCounts,
|
|
@@ -8091,14 +8105,15 @@ function useFilterBar(_a) {
|
|
|
8091
8105
|
handleSubmit: handleSubmit,
|
|
8092
8106
|
updateGuestsCount: updateGuestsCount,
|
|
8093
8107
|
handleResetFilters: handleResetFilters,
|
|
8108
|
+
setSelectedPath: setSelectedPath,
|
|
8094
8109
|
};
|
|
8095
8110
|
}
|
|
8096
8111
|
|
|
8097
|
-
var css_248z$
|
|
8098
|
-
styleInject(css_248z$
|
|
8112
|
+
var css_248z$3 = ".will-root {\n z-index: 99999;\n width: 100%;\n max-height: 100vh;\n position: relative;\n \n}\n\n.will-filter-bar {\n box-sizing: border-box;\n position: relative;\n}\n\n.will-filter-bar-underlay {\n background-color: rgba(0,0,0,.8);\n position: absolute;\n /* top:0; */\n left: 0;\n width: 100%;\n height: 100%;\n cursor: pointer;\n min-height: 500vh;\n z-index: 88888;\n\n transform: translateY(-50%);\n}\n\n/* Tabs */\n\n.will-filter-bar-tabs {\n display: flex;\n align-items: center;\n width: fit-content;\n position: relative;\n z-index: 222;\n}\n\n/* Header */\n.will-filter-bar-header {\n display: flex;\n justify-content: space-between;\n padding: 10px 20px;\n position: relative;\n z-index: 222;\n \n \n border-radius: 40px;\n border-top-left-radius: 0;\n background-color: var(--will-white);\n \n}\n\n@media (max-width: 960px) {\n .will-filter-bar-header {\n flex-direction: column;\n padding: 20px;\n }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n background-color: var(--will-white);\n min-height: 100px;\n \n padding: 90px 40px 30px 40px;\n position: absolute;\n top: 45px;\n z-index: 111;\n border-radius: 25px;\n width: -webkit-fill-available;\n box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n .will-root { \n overflow-y: auto;\n padding: 40px 10px;\n top: 15px;\n z-index: 0;\n }\n\n .will-filter-bar-container {\n margin-top: 20px;\n padding: 30px 40px;\n position: relative;\n }\n\n .will-root.isMobileAbsolute {\n position: relative;\n z-index: 99999;\n }\n}\n\n";
|
|
8113
|
+
styleInject(css_248z$3);
|
|
8099
8114
|
|
|
8100
|
-
var css_248z$
|
|
8101
|
-
styleInject(css_248z$
|
|
8115
|
+
var css_248z$2 = "@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-transparent-white: rgba(255, 255, 255, 0.8);\n\n /* Confines */\n --will-box-shadow: 0px 6px 11px 0px #a7a4a480;\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}";
|
|
8116
|
+
styleInject(css_248z$2);
|
|
8102
8117
|
|
|
8103
8118
|
const consoleLogger = {
|
|
8104
8119
|
type: 'logger',
|
|
@@ -10391,11 +10406,16 @@ var categories$1 = {
|
|
|
10391
10406
|
var submit$1 = {
|
|
10392
10407
|
label: "Search"
|
|
10393
10408
|
};
|
|
10409
|
+
var tabs$1 = {
|
|
10410
|
+
events: "Events",
|
|
10411
|
+
rooms: "Rooms"
|
|
10412
|
+
};
|
|
10394
10413
|
var enFilterBar = {
|
|
10395
10414
|
calendar: calendar$1,
|
|
10396
10415
|
guests: guests$1,
|
|
10397
10416
|
categories: categories$1,
|
|
10398
|
-
submit: submit$1
|
|
10417
|
+
submit: submit$1,
|
|
10418
|
+
tabs: tabs$1
|
|
10399
10419
|
};
|
|
10400
10420
|
|
|
10401
10421
|
var calendar = {
|
|
@@ -10417,11 +10437,16 @@ var categories = {
|
|
|
10417
10437
|
var submit = {
|
|
10418
10438
|
label: "Hae"
|
|
10419
10439
|
};
|
|
10440
|
+
var tabs = {
|
|
10441
|
+
events: "Events",
|
|
10442
|
+
rooms: "Rooms"
|
|
10443
|
+
};
|
|
10420
10444
|
var fiFilterBar = {
|
|
10421
10445
|
calendar: calendar,
|
|
10422
10446
|
guests: guests,
|
|
10423
10447
|
categories: categories,
|
|
10424
|
-
submit: submit
|
|
10448
|
+
submit: submit,
|
|
10449
|
+
tabs: tabs
|
|
10425
10450
|
};
|
|
10426
10451
|
|
|
10427
10452
|
var urlParams = typeof window !== 'undefined'
|
|
@@ -10445,8 +10470,8 @@ function IoIosCloseCircleOutline (props) {
|
|
|
10445
10470
|
return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M331.3 308.7L278.6 256l52.7-52.7c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-52.7-52.7c-6.2-6.2-15.6-7.1-22.6 0-7.1 7.1-6 16.6 0 22.6l52.7 52.7-52.7 52.7c-6.7 6.7-6.4 16.3 0 22.6 6.4 6.4 16.4 6.2 22.6 0l52.7-52.7 52.7 52.7c6.2 6.2 16.4 6.2 22.6 0 6.3-6.2 6.3-16.4 0-22.6z"}},{"tag":"path","attr":{"d":"M256 76c48.1 0 93.3 18.7 127.3 52.7S436 207.9 436 256s-18.7 93.3-52.7 127.3S304.1 436 256 436c-48.1 0-93.3-18.7-127.3-52.7S76 304.1 76 256s18.7-93.3 52.7-127.3S207.9 76 256 76m0-28C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z"}}]})(props);
|
|
10446
10471
|
}
|
|
10447
10472
|
|
|
10448
|
-
var css_248z = ".will-filter-bar-close-button {\n width: auto;\n height: auto;\n /* background-color: var(--will-grey); */\n color: var(--will-grey);\n padding: 2px 7px;\n border-radius: 50%;\n cursor: pointer;\n border: none;\n display: flex;\n align-items: center;\n font-size: 23px;\n /* display: none; */\n\n position: absolute;\n top: 80px;\n right: 20px;\n\n min-height: 35px;\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-close-button {\n top: 10px;\n right: 10px;\n\n border-radius: 25px;\n margin-left:0;\n \n display: flex;\n justify-content: center;\n }\n}\n";
|
|
10449
|
-
styleInject(css_248z);
|
|
10473
|
+
var css_248z$1 = ".will-filter-bar-close-button {\n width: auto;\n height: auto;\n /* background-color: var(--will-grey); */\n color: var(--will-grey);\n padding: 2px 7px;\n border-radius: 50%;\n cursor: pointer;\n border: none;\n display: flex;\n align-items: center;\n font-size: 23px;\n /* display: none; */\n\n position: absolute;\n top: 80px;\n right: 20px;\n\n min-height: 35px;\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-close-button {\n top: 10px;\n right: 10px;\n\n border-radius: 25px;\n margin-left:0;\n \n display: flex;\n justify-content: center;\n }\n}\n";
|
|
10474
|
+
styleInject(css_248z$1);
|
|
10450
10475
|
|
|
10451
10476
|
function CloseButton(_a) {
|
|
10452
10477
|
var handleClose = _a.handleClose;
|
|
@@ -10454,8 +10479,16 @@ function CloseButton(_a) {
|
|
|
10454
10479
|
React__default__default.createElement(IoIosCloseCircleOutline, null)));
|
|
10455
10480
|
}
|
|
10456
10481
|
|
|
10482
|
+
var css_248z = ".will-filter-bar-tab-button {\n width: auto;\n height: auto;\n padding: 10px 50px;\n cursor: pointer;\n border: none;\n white-space: nowrap;\n text-transform: uppercase;\n font-size: 12px;\n display: flex;\n align-items: center;\n border: 1px solid var(--will-black);\n border-top: none;\n background-color: var(--will-transparent-white);\n user-select: none;\n font-weight: 600;\n }\n\n /* .will-filter-bar-tab-button:not(:first-child) {\n border-left: none;\n } */\n\n .will-filter-bar-tab-button:hover {\n background-color: var(--will-white);\n }\n\n .will-filter-bar-tab-button.active {\n background-color: var(--will-white);\n border-color: var(--will-white);\n }\n\n\n\n\n \n\n /* @media (max-width: 960px) {\n .will-filter-bar-tab-button {\n justify-content: center;\n margin-bottom: 15px;\n }\n } */\n ";
|
|
10483
|
+
styleInject(css_248z);
|
|
10484
|
+
|
|
10485
|
+
function SubmitButton(_a) {
|
|
10486
|
+
var onClick = _a.onClick, label = _a.label, active = _a.active;
|
|
10487
|
+
return (React__default__default.createElement("button", { className: "will-filter-bar-tab-button ".concat(active && 'active'), onClick: onClick }, label));
|
|
10488
|
+
}
|
|
10489
|
+
|
|
10457
10490
|
function FilterBar(_a) {
|
|
10458
|
-
var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b
|
|
10491
|
+
var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b; _a.currentPath; var _c = _a.redirectUrl, redirectUrl = _c === void 0 ? REDIRECT_URL_FALLBACK : _c, palette = _a.palette;
|
|
10459
10492
|
var themePalette = useTheme({ palette: palette });
|
|
10460
10493
|
// Translations
|
|
10461
10494
|
var _d = useState(0); _d[0]; var setRerenderKey = _d[1];
|
|
@@ -10465,7 +10498,7 @@ function FilterBar(_a) {
|
|
|
10465
10498
|
}, [language]);
|
|
10466
10499
|
var t = useTranslation('filterBar').t;
|
|
10467
10500
|
// Filters
|
|
10468
|
-
var _e = useFilterBar({ redirectUrl: redirectUrl }), selectedFilter = _e.selectedFilter, ageCategoryCounts = _e.ageCategoryCounts, categories = _e.categories, calendarRange = _e.calendarRange, setCalendarRange = _e.setCalendarRange, setCategories = _e.setCategories, handleSelectedFilter = _e.handleSelectedFilter, handleSubmit = _e.handleSubmit, updateGuestsCount = _e.updateGuestsCount;
|
|
10501
|
+
var _e = useFilterBar({ redirectUrl: redirectUrl }), selectedFilter = _e.selectedFilter, ageCategoryCounts = _e.ageCategoryCounts, categories = _e.categories, calendarRange = _e.calendarRange, selectedPath = _e.selectedPath, setCalendarRange = _e.setCalendarRange, setCategories = _e.setCategories, handleSelectedFilter = _e.handleSelectedFilter, handleSubmit = _e.handleSubmit, updateGuestsCount = _e.updateGuestsCount, setSelectedPath = _e.setSelectedPath;
|
|
10469
10502
|
// Scroll in to view
|
|
10470
10503
|
var targetFilterBarRef = useRef(null);
|
|
10471
10504
|
useEffect(function () {
|
|
@@ -10483,13 +10516,16 @@ function FilterBar(_a) {
|
|
|
10483
10516
|
handleSelectedFilter(false);
|
|
10484
10517
|
} })),
|
|
10485
10518
|
React__default__default.createElement("div", { className: "will-root ".concat(selectedFilter ? 'isMobileAbsolute' : ''), style: themePalette },
|
|
10486
|
-
React__default__default.createElement("div", { className: "will-filter-bar-
|
|
10487
|
-
React__default__default.createElement(
|
|
10519
|
+
React__default__default.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef },
|
|
10520
|
+
React__default__default.createElement(SubmitButton, { label: t('tabs.events'), onClick: function () { return setSelectedPath('/events'); }, active: selectedPath === '/events' }),
|
|
10521
|
+
React__default__default.createElement(SubmitButton, { label: t('tabs.rooms'), onClick: function () { return setSelectedPath('/rooms'); }, active: selectedPath === '/rooms' })),
|
|
10522
|
+
React__default__default.createElement("div", { className: "will-filter-bar-header" },
|
|
10523
|
+
React__default__default.createElement(SelectButton, { style: fontWeightBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.startDate'), onClick: function () { return handleSelectedFilter(1); }, date: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
|
|
10488
10524
|
? format(calendarRange.from, 'dd.MM.yyyy')
|
|
10489
10525
|
: null }),
|
|
10490
10526
|
React__default__default.createElement(Divider, null),
|
|
10491
|
-
React__default__default.createElement(SelectButton, { style:
|
|
10492
|
-
React__default__default.createElement(SubmitButton, { onClick: handleSubmit })),
|
|
10527
|
+
React__default__default.createElement(SelectButton, { style: fontWeightBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.endDate'), onClick: function () { return handleSelectedFilter(2); }, date: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? format(calendarRange.to, 'dd.MM.yyyy') : null }),
|
|
10528
|
+
React__default__default.createElement(SubmitButton$1, { onClick: handleSubmit })),
|
|
10493
10529
|
selectedFilter && (React__default__default.createElement("div", { className: "will-filter-bar-container" },
|
|
10494
10530
|
React__default__default.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
|
|
10495
10531
|
(selectedFilter === 1 || selectedFilter === 2) && (React__default__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange })),
|
|
@@ -10497,7 +10533,7 @@ function FilterBar(_a) {
|
|
|
10497
10533
|
selectedFilter === 4 && (React__default__default.createElement(Categories, { categories: categories, setCategories: setCategories })))))));
|
|
10498
10534
|
}
|
|
10499
10535
|
////////////
|
|
10500
|
-
var
|
|
10536
|
+
var fontWeightBold = function (input) {
|
|
10501
10537
|
return { fontWeight: input ? 'bold' : 'initial' };
|
|
10502
10538
|
};
|
|
10503
10539
|
var AGE_CATEGORIES_FALLBACK = [
|