willba-component-library 0.1.74 → 0.1.76
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 +3 -3
- package/lib/components/FilterBar/FilterBarTypes.d.ts +12 -3
- package/lib/components/FilterBar/hooks/useFilterBar.d.ts +5 -6
- package/lib/index.d.ts +13 -2
- package/lib/index.esm.js +16 -27
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +16 -27
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +16 -27
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FilterBar/FilterBar.stories.tsx +21 -2
- package/src/components/FilterBar/FilterBar.tsx +25 -36
- package/src/components/FilterBar/FilterBarTypes.ts +13 -4
- package/src/components/FilterBar/hooks/useFilterBar.tsx +11 -9
package/lib/index.js
CHANGED
|
@@ -3947,10 +3947,6 @@ var FilterSections;
|
|
|
3947
3947
|
FilterSections["GUESTS"] = "guests";
|
|
3948
3948
|
FilterSections["CATEGORIES"] = "categories";
|
|
3949
3949
|
})(FilterSections || (FilterSections = {}));
|
|
3950
|
-
var ViewApply;
|
|
3951
|
-
(function (ViewApply) {
|
|
3952
|
-
ViewApply["ROOMS"] = "roomFilters";
|
|
3953
|
-
})(ViewApply || (ViewApply = {}));
|
|
3954
3950
|
var Pages;
|
|
3955
3951
|
(function (Pages) {
|
|
3956
3952
|
Pages["ROOMS"] = "/rooms";
|
|
@@ -3958,7 +3954,7 @@ var Pages;
|
|
|
3958
3954
|
})(Pages || (Pages = {}));
|
|
3959
3955
|
|
|
3960
3956
|
var useFilterBar = function (_a) {
|
|
3961
|
-
var redirectUrl = _a.redirectUrl,
|
|
3957
|
+
var redirectUrl = _a.redirectUrl, ageCategories = _a.ageCategories, onSubmit = _a.onSubmit, tabs = _a.tabs;
|
|
3962
3958
|
var _b = __read(React__default.useState(Pages.EVENTS), 2), selectedPath = _b[0], setSelectedPath = _b[1];
|
|
3963
3959
|
var _c = __read(React__default.useState(false), 2), selectedFilter = _c[0], setSelectedFilter = _c[1];
|
|
3964
3960
|
var _d = __read(React__default.useState(), 2), calendarRange = _d[0], setCalendarRange = _d[1];
|
|
@@ -3993,11 +3989,11 @@ var useFilterBar = function (_a) {
|
|
|
3993
3989
|
// Handle default selected tab
|
|
3994
3990
|
if (typeof window === 'undefined')
|
|
3995
3991
|
return;
|
|
3996
|
-
|
|
3997
|
-
var currentPath = defaultTab === Pages.EVENTS ||
|
|
3992
|
+
var defaultTab = (tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 ? tabs[0] : tabs === null || tabs === void 0 ? void 0 : tabs.find(function (tab) { return tab.default; });
|
|
3993
|
+
var currentPath = (defaultTab === null || defaultTab === void 0 ? void 0 : defaultTab.path) === Pages.EVENTS ||
|
|
3998
3994
|
window.location.pathname.includes(Pages.EVENTS)
|
|
3999
3995
|
? Pages.EVENTS
|
|
4000
|
-
: defaultTab === Pages.ROOMS ||
|
|
3996
|
+
: (defaultTab === null || defaultTab === void 0 ? void 0 : defaultTab.path) === Pages.ROOMS ||
|
|
4001
3997
|
window.location.pathname.includes(Pages.ROOMS)
|
|
4002
3998
|
? Pages.ROOMS
|
|
4003
3999
|
: Pages.EVENTS;
|
|
@@ -4025,7 +4021,7 @@ var useFilterBar = function (_a) {
|
|
|
4025
4021
|
ageCategories: ageCategories,
|
|
4026
4022
|
}),
|
|
4027
4023
|
};
|
|
4028
|
-
if (
|
|
4024
|
+
if ((tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1) {
|
|
4029
4025
|
var currentSearchParams = new URLSearchParams(window.location.search);
|
|
4030
4026
|
var updatedParams = new URLSearchParams();
|
|
4031
4027
|
try {
|
|
@@ -11130,7 +11126,7 @@ var css_248z = ".will-root {\n z-index: 999;\n width: fit-content;\n min-widt
|
|
|
11130
11126
|
styleInject(css_248z);
|
|
11131
11127
|
|
|
11132
11128
|
function FilterBar(_a) {
|
|
11133
|
-
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,
|
|
11129
|
+
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, calendarOffset = _a.calendarOffset, mode = _a.mode, tabs = _a.tabs;
|
|
11134
11130
|
var themePalette = useTheme({ palette: palette });
|
|
11135
11131
|
// Translations
|
|
11136
11132
|
useUpdateTranslations({ language: language });
|
|
@@ -11138,17 +11134,10 @@ function FilterBar(_a) {
|
|
|
11138
11134
|
// Filters
|
|
11139
11135
|
var _d = useFilterBar({
|
|
11140
11136
|
redirectUrl: redirectUrl,
|
|
11141
|
-
currentViewApply: currentViewApply,
|
|
11142
11137
|
ageCategories: ageCategories,
|
|
11143
11138
|
onSubmit: onSubmit,
|
|
11144
|
-
|
|
11139
|
+
tabs: tabs,
|
|
11145
11140
|
}), selectedFilter = _d.selectedFilter, ageCategoryCounts = _d.ageCategoryCounts, categories = _d.categories, calendarRange = _d.calendarRange, selectedPath = _d.selectedPath, setCalendarRange = _d.setCalendarRange, setCategories = _d.setCategories, handleSelectedFilter = _d.handleSelectedFilter, handleSubmit = _d.handleSubmit, updateGuestsCount = _d.updateGuestsCount, setSelectedPath = _d.setSelectedPath, handleResetFilters = _d.handleResetFilters;
|
|
11146
|
-
// Default selected tab when tabs are hidden
|
|
11147
|
-
React__default.useEffect(function () {
|
|
11148
|
-
if (currentViewApply === ViewApply.ROOMS) {
|
|
11149
|
-
setSelectedPath(Pages.ROOMS);
|
|
11150
|
-
}
|
|
11151
|
-
}, []);
|
|
11152
11141
|
// Scroll in to view
|
|
11153
11142
|
var _e = useScrollInToView({ selectedFilter: selectedFilter }), isMobile = _e.isMobile, targetFilterBarRef = _e.targetFilterBarRef;
|
|
11154
11143
|
// Handle close filter section
|
|
@@ -11171,14 +11160,14 @@ function FilterBar(_a) {
|
|
|
11171
11160
|
guestsLabel: t('guests.guestsLabel'),
|
|
11172
11161
|
});
|
|
11173
11162
|
return (React__default.createElement("div", { className: "will-root ".concat(fullWidth ? 'is-full-width' : ''), style: themePalette },
|
|
11174
|
-
|
|
11175
|
-
|
|
11176
|
-
|
|
11177
|
-
|
|
11178
|
-
|
|
11179
|
-
|
|
11180
|
-
|
|
11181
|
-
React__default.createElement("div", { className: "will-filter-bar-header ".concat(mode || 'dark'), ref:
|
|
11163
|
+
tabs && tabs.length > 1 && (React__default.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef }, tabs
|
|
11164
|
+
.sort(function (a, b) { return a.order - b.order; })
|
|
11165
|
+
.map(function (tab, idx) { return (React__default.createElement(TabButton, { key: "tab-".concat(idx), label: tab.label && language
|
|
11166
|
+
? tab.label[language]
|
|
11167
|
+
: t("tabs.".concat(tab.path.substring(1))), onClick: function () {
|
|
11168
|
+
setSelectedPath(tab.path), handleResetFilters();
|
|
11169
|
+
}, active: selectedPath === tab.path, mode: mode })); }))),
|
|
11170
|
+
React__default.createElement("div", { className: "will-filter-bar-header ".concat(mode || 'dark'), ref: (tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 ? targetFilterBarRef : null },
|
|
11182
11171
|
React__default.createElement(SelectButton, { label: t('calendar.label'), description: parsedDates
|
|
11183
11172
|
? parsedDates
|
|
11184
11173
|
: selectedPath === Pages.ROOMS
|
|
@@ -11188,7 +11177,7 @@ function FilterBar(_a) {
|
|
|
11188
11177
|
React__default.createElement(Divider, null),
|
|
11189
11178
|
React__default.createElement(SelectButton, { label: t('guests.label'), description: parsedGuests.content, onClick: function () { return handleSelectedFilter(FilterSections.GUESTS); }, active: !!parsedGuests.data.total }))),
|
|
11190
11179
|
React__default.createElement(SubmitButton, { onClick: handleSubmit })),
|
|
11191
|
-
selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'dark'), style:
|
|
11180
|
+
selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'dark'), style: tabs && tabs.length === 1 && !isMobile ? { top: 66 } : {} },
|
|
11192
11181
|
React__default.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
|
|
11193
11182
|
selectedFilter === FilterSections.CALENDAR && (React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, ref: filtersRef, calendarOffset: calendarOffset, selectedPath: selectedPath, locale: language })),
|
|
11194
11183
|
selectedFilter === FilterSections.GUESTS && (React__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef })),
|