willba-component-library 0.1.41 → 0.1.43
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/hooks/useFilterBar.d.ts +3 -2
- package/lib/index.esm.js +43 -22
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +43 -22
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +43 -22
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FilterBar/FilterBar.stories.tsx +1 -1
- package/src/components/FilterBar/FilterBar.tsx +1 -1
- package/src/components/FilterBar/components/calendar/Calendar.tsx +1 -1
- package/src/components/FilterBar/components/guests/GuestCount/GuestCount.tsx +2 -6
- package/src/components/FilterBar/components/guests/Guests.tsx +1 -1
- package/src/components/FilterBar/hooks/useFilterBar.tsx +56 -15
package/lib/index.js
CHANGED
|
@@ -3921,7 +3921,7 @@ var parseGuests = function (_a) {
|
|
|
3921
3921
|
};
|
|
3922
3922
|
|
|
3923
3923
|
var useFilterBar = function (_a) {
|
|
3924
|
-
var redirectUrl = _a.redirectUrl, currentViewApply = _a.currentViewApply;
|
|
3924
|
+
var redirectUrl = _a.redirectUrl, currentViewApply = _a.currentViewApply, ageCategories = _a.ageCategories;
|
|
3925
3925
|
var _b = __read(React__default.useState('/events'), 2), selectedPath = _b[0], setSelectedPath = _b[1];
|
|
3926
3926
|
var _c = __read(React__default.useState(false), 2), selectedFilter = _c[0], setSelectedFilter = _c[1];
|
|
3927
3927
|
var _d = __read(React__default.useState(), 2), calendarRange = _d[0], setCalendarRange = _d[1];
|
|
@@ -3943,6 +3943,7 @@ var useFilterBar = function (_a) {
|
|
|
3943
3943
|
setCategories(parsedCategories);
|
|
3944
3944
|
}, []);
|
|
3945
3945
|
React__default.useEffect(function () {
|
|
3946
|
+
// Handle hide scroll bar on mobile
|
|
3946
3947
|
if (typeof window === 'undefined')
|
|
3947
3948
|
return;
|
|
3948
3949
|
document.body.style.overflow =
|
|
@@ -3952,15 +3953,15 @@ var useFilterBar = function (_a) {
|
|
|
3952
3953
|
};
|
|
3953
3954
|
}, [selectedFilter]);
|
|
3954
3955
|
React__default.useEffect(function () {
|
|
3955
|
-
|
|
3956
|
-
|
|
3957
|
-
|
|
3958
|
-
|
|
3959
|
-
|
|
3960
|
-
|
|
3961
|
-
|
|
3962
|
-
|
|
3963
|
-
|
|
3956
|
+
// Handle default selected tab
|
|
3957
|
+
if (typeof window === 'undefined')
|
|
3958
|
+
return;
|
|
3959
|
+
var currentPath = window.location.pathname.includes('/events')
|
|
3960
|
+
? '/events'
|
|
3961
|
+
: window.location.pathname.includes('/rooms')
|
|
3962
|
+
? '/rooms'
|
|
3963
|
+
: '/events';
|
|
3964
|
+
setSelectedPath(currentPath);
|
|
3964
3965
|
}, []);
|
|
3965
3966
|
var updateGuestsCount = function (id, newCount) {
|
|
3966
3967
|
setAgeCategoryCounts(function (prevCounts) {
|
|
@@ -3979,9 +3980,10 @@ var useFilterBar = function (_a) {
|
|
|
3979
3980
|
: '',
|
|
3980
3981
|
endDate: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? format(calendarRange.to, 'yyyy-MM-dd') : '',
|
|
3981
3982
|
categories: categories,
|
|
3982
|
-
ageCategoryCounts:
|
|
3983
|
-
|
|
3984
|
-
:
|
|
3983
|
+
ageCategoryCounts: handleAgeCategoryRules({
|
|
3984
|
+
ageCategoryCounts: ageCategoryCounts,
|
|
3985
|
+
ageCategories: ageCategories,
|
|
3986
|
+
}),
|
|
3985
3987
|
};
|
|
3986
3988
|
if (currentViewApply) {
|
|
3987
3989
|
var currentSearchParams = new URLSearchParams(window.location.search);
|
|
@@ -4065,6 +4067,27 @@ var useFilterBar = function (_a) {
|
|
|
4065
4067
|
setSelectedPath: setSelectedPath,
|
|
4066
4068
|
};
|
|
4067
4069
|
};
|
|
4070
|
+
////////////
|
|
4071
|
+
var handleAgeCategoryRules = function (_a) {
|
|
4072
|
+
var ageCategoryCounts = _a.ageCategoryCounts, ageCategories = _a.ageCategories;
|
|
4073
|
+
if (ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.length) {
|
|
4074
|
+
ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (a) {
|
|
4075
|
+
if (a.minVal) {
|
|
4076
|
+
// Age categories rules
|
|
4077
|
+
Object.entries(ageCategoryCounts).reduce(function (acc, c) {
|
|
4078
|
+
return acc + c[1];
|
|
4079
|
+
}, 0);
|
|
4080
|
+
var ageCategory = ageCategoryCounts["guests-".concat(a.id)];
|
|
4081
|
+
if (!ageCategory) {
|
|
4082
|
+
ageCategoryCounts["guests-".concat(a.id)] = a.minVal;
|
|
4083
|
+
}
|
|
4084
|
+
}
|
|
4085
|
+
});
|
|
4086
|
+
}
|
|
4087
|
+
return Object.entries(ageCategoryCounts).length
|
|
4088
|
+
? JSON.stringify(ageCategoryCounts)
|
|
4089
|
+
: '';
|
|
4090
|
+
};
|
|
4068
4091
|
|
|
4069
4092
|
var useScrollInToView = function (_a) {
|
|
4070
4093
|
var selectedFilter = _a.selectedFilter;
|
|
@@ -6597,10 +6620,6 @@ styleInject(css_248z$6);
|
|
|
6597
6620
|
|
|
6598
6621
|
function GuestCount(_a) {
|
|
6599
6622
|
var label = _a.label, sortOrder = _a.sortOrder, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
|
|
6600
|
-
React__default.useEffect(function () {
|
|
6601
|
-
if (minVal)
|
|
6602
|
-
updateGuestsCount("guests-".concat(id), minVal);
|
|
6603
|
-
}, []);
|
|
6604
6623
|
var handleDecrement = function () {
|
|
6605
6624
|
if (count > minVal) {
|
|
6606
6625
|
updateGuestsCount("guests-".concat(id), count - 1);
|
|
@@ -6612,8 +6631,8 @@ function GuestCount(_a) {
|
|
|
6612
6631
|
return (React__default.createElement("div", { className: "will-guests-filter-inner", style: { order: "".concat(sortOrder) } },
|
|
6613
6632
|
React__default.createElement("p", { className: "will-guests-filter-label" }, label),
|
|
6614
6633
|
React__default.createElement("div", { className: "will-guests-filter-counter" },
|
|
6615
|
-
React__default.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleDecrement, disabled: minVal && count
|
|
6616
|
-
cursor: minVal && count
|
|
6634
|
+
React__default.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleDecrement, disabled: minVal && count <= minVal ? true : false, style: {
|
|
6635
|
+
cursor: minVal && count <= minVal
|
|
6617
6636
|
? 'initial'
|
|
6618
6637
|
: !minVal && count < 1
|
|
6619
6638
|
? 'initial'
|
|
@@ -6632,7 +6651,7 @@ var Guests = React__default.forwardRef(function (_a, ref) {
|
|
|
6632
6651
|
var t = useTranslation('filterBar').t;
|
|
6633
6652
|
return (React__default.createElement("div", { className: "will-filter-bar-guests", ref: ref },
|
|
6634
6653
|
React__default.createElement("h3", { className: "will-guests-filter-title" }, t('guests.title')),
|
|
6635
|
-
React__default.createElement("div", { className: "will-guests-filter-container" }, ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (React__default.createElement(GuestCount, { key: category.id, id: parseInt(category.id), label: category.name, minVal: category.minVal, sortOrder: category.sortOrder, updateGuestsCount: updateGuestsCount, count: ageCategoryCounts["guests-".concat(category.id)] ||
|
|
6654
|
+
React__default.createElement("div", { className: "will-guests-filter-container" }, ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (React__default.createElement(GuestCount, { key: category.id, id: parseInt(category.id), label: category.name, minVal: category.minVal, sortOrder: category.sortOrder, updateGuestsCount: updateGuestsCount, count: ageCategoryCounts["guests-".concat(category.id)] || 0 })); }))));
|
|
6636
6655
|
});
|
|
6637
6656
|
|
|
6638
6657
|
/******************************************************************************
|
|
@@ -10625,7 +10644,9 @@ var Calendar = React__default.forwardRef(function (_a, ref) {
|
|
|
10625
10644
|
}, []);
|
|
10626
10645
|
return (React__default.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
|
|
10627
10646
|
React__default.createElement("div", { className: "will-calendar-filter-container" },
|
|
10628
|
-
React__default.createElement(DayPicker, { id: "will-calendar", mode: "range",
|
|
10647
|
+
React__default.createElement(DayPicker, { id: "will-calendar", mode: "range",
|
|
10648
|
+
//showOutsideDays
|
|
10649
|
+
numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: setCalendarRange, modifiersClassNames: {
|
|
10629
10650
|
today: 'my-today',
|
|
10630
10651
|
}, modifiersStyles: {
|
|
10631
10652
|
disabled: { opacity: '0.2' },
|
|
@@ -10673,7 +10694,7 @@ function FilterBar(_a) {
|
|
|
10673
10694
|
useUpdateTranslations({ language: language });
|
|
10674
10695
|
var t = useTranslation('filterBar').t;
|
|
10675
10696
|
// Filters
|
|
10676
|
-
var _d = useFilterBar({ redirectUrl: redirectUrl, currentViewApply: currentViewApply }), 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;
|
|
10697
|
+
var _d = useFilterBar({ redirectUrl: redirectUrl, currentViewApply: currentViewApply, ageCategories: ageCategories }), 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;
|
|
10677
10698
|
// Default selected tab
|
|
10678
10699
|
React__default.useEffect(function () {
|
|
10679
10700
|
if (currentViewApply === 'roomFilters') {
|