willba-component-library 0.2.58 → 0.2.59
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/FilterCalendar/FilterCalendar.d.ts +1 -1
- package/lib/components/FilterCalendar/hooks/useFilterCalendar.d.ts +5 -2
- package/lib/core/components/calendar/CalendarTypes.d.ts +1 -1
- package/lib/core/components/calendar/hooks/useCalendarLoadingSpinner.d.ts +1 -3
- package/lib/core/components/calendar/hooks/useCalendarTooltips.d.ts +1 -6
- package/lib/core/components/calendar/hooks/useUpdateDisabledDates.d.ts +2 -2
- package/lib/index.d.ts +2 -2
- package/lib/index.esm.js +39 -33
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +39 -33
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +39 -33
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FilterCalendar/FilterCalendar.stories.tsx +411 -364
- package/src/components/FilterCalendar/FilterCalendar.tsx +6 -4
- package/src/components/FilterCalendar/hooks/useFilterCalendar.ts +11 -3
- package/src/core/components/calendar/Calendar.tsx +6 -10
- package/src/core/components/calendar/CalendarTypes.ts +1 -1
- package/src/core/components/calendar/hooks/useCalendarLoadingSpinner.tsx +2 -8
- package/src/core/components/calendar/hooks/useCalendarTooltips.tsx +3 -18
- package/src/core/components/calendar/hooks/useUpdateDisabledDates.tsx +3 -3
- package/src/core/components/calendar/utils/calendarSelectionRules.tsx +14 -2
package/lib/index.js
CHANGED
|
@@ -10998,6 +10998,8 @@ var calendarSelectionRules = function (_a) {
|
|
|
10998
10998
|
? endOfDay(rangeContext.from)
|
|
10999
10999
|
: null;
|
|
11000
11000
|
var rangeContextTo = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to) ? endOfDay(rangeContext.to) : null;
|
|
11001
|
+
// When some dates are not available for selection, the earliest date will be available only for "end"
|
|
11002
|
+
// and the latest date will only be available for "start"
|
|
11001
11003
|
var overlappingDateFrom = (overlappingDate === null || overlappingDate === void 0 ? void 0 : overlappingDate.length)
|
|
11002
11004
|
? overlappingDate.find(function (date) {
|
|
11003
11005
|
return !!(date.from && rangeFrom)
|
|
@@ -11005,6 +11007,12 @@ var calendarSelectionRules = function (_a) {
|
|
|
11005
11007
|
: false;
|
|
11006
11008
|
})
|
|
11007
11009
|
: null;
|
|
11010
|
+
var overlappingDateTo = (overlappingDate === null || overlappingDate === void 0 ? void 0 : overlappingDate.length)
|
|
11011
|
+
? overlappingDate.find(function (date) {
|
|
11012
|
+
return !!(date.from && rangeTo) ? isEqual(endOfDay(date.from), rangeTo) : false;
|
|
11013
|
+
})
|
|
11014
|
+
: null;
|
|
11015
|
+
//----------
|
|
11008
11016
|
var checkOutRange = ((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.availableDates) === null || _b === void 0 ? void 0 : _b.length)
|
|
11009
11017
|
? newDisableCalendarDates.availableDates.find(function (checkInDate) {
|
|
11010
11018
|
return !!(checkInDate.checkIn && rangeFrom)
|
|
@@ -11022,7 +11030,9 @@ var calendarSelectionRules = function (_a) {
|
|
|
11022
11030
|
// Calendar selection rules: The cases are handled sequentially, starting from simple selections to more complex contextual selections.
|
|
11023
11031
|
// The rules are processed in a specific order, so one case is handled before another.
|
|
11024
11032
|
// Changing the order will cause the rules to break or not work properly.
|
|
11025
|
-
|
|
11033
|
+
console.log(overlappingDateTo);
|
|
11034
|
+
if (!!overlappingDateFrom ||
|
|
11035
|
+
(calendarRangeFrom && calendarRangeTo && overlappingDateTo)) {
|
|
11026
11036
|
// 1. If dates overlap, clear the selection.
|
|
11027
11037
|
return setCalendarRange(undefined);
|
|
11028
11038
|
}
|
|
@@ -11263,8 +11273,9 @@ var checkForContinuousSelection = function (_a) {
|
|
|
11263
11273
|
};
|
|
11264
11274
|
|
|
11265
11275
|
var useCalendarTooltips = function (_a) {
|
|
11266
|
-
var
|
|
11276
|
+
var showFeedback = _a.showFeedback;
|
|
11267
11277
|
return React__default.useEffect(function () {
|
|
11278
|
+
console.log('3');
|
|
11268
11279
|
if (typeof document === 'undefined' || !showFeedback)
|
|
11269
11280
|
return;
|
|
11270
11281
|
// Children
|
|
@@ -11330,16 +11341,11 @@ var useCalendarTooltips = function (_a) {
|
|
|
11330
11341
|
tooltipClonesSpinner.forEach(function (clone) { return clone.remove(); });
|
|
11331
11342
|
tooltipClonesOverlappingDates.forEach(function (clone) { return clone.remove(); });
|
|
11332
11343
|
};
|
|
11333
|
-
}
|
|
11334
|
-
calendarRange,
|
|
11335
|
-
updateCalendarMonthNavigation,
|
|
11336
|
-
overlappingDate,
|
|
11337
|
-
updateCalendarDefaultMoth,
|
|
11338
|
-
]);
|
|
11344
|
+
});
|
|
11339
11345
|
};
|
|
11340
11346
|
|
|
11341
11347
|
var useCalendarLoadingSpinner = function (_a) {
|
|
11342
|
-
var loadingData = _a.loadingData
|
|
11348
|
+
var loadingData = _a.loadingData;
|
|
11343
11349
|
return React__default.useEffect(function () {
|
|
11344
11350
|
if (typeof document === 'undefined')
|
|
11345
11351
|
return;
|
|
@@ -11352,11 +11358,11 @@ var useCalendarLoadingSpinner = function (_a) {
|
|
|
11352
11358
|
if (loadingSpinner)
|
|
11353
11359
|
loadingSpinner.style.display = 'none';
|
|
11354
11360
|
}
|
|
11355
|
-
}
|
|
11361
|
+
});
|
|
11356
11362
|
};
|
|
11357
11363
|
|
|
11358
11364
|
var useUpdateDisabledDates = function (_a) {
|
|
11359
|
-
var disableCalendarDates = _a.disableCalendarDates, calendarRange = _a.calendarRange, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation,
|
|
11365
|
+
var disableCalendarDates = _a.disableCalendarDates, calendarRange = _a.calendarRange, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation, updateCalendarDefaultMonth = _a.updateCalendarDefaultMonth;
|
|
11360
11366
|
var _b = __read(React__default.useState(undefined), 2), overlappingDate = _b[0], setOverlappingDate = _b[1];
|
|
11361
11367
|
var newDisableCalendarDates = React__default.useMemo(function () {
|
|
11362
11368
|
if (disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.availableDates) {
|
|
@@ -11400,7 +11406,7 @@ var useUpdateDisabledDates = function (_a) {
|
|
|
11400
11406
|
disableCalendarDates,
|
|
11401
11407
|
calendarRange,
|
|
11402
11408
|
updateCalendarMonthNavigation,
|
|
11403
|
-
|
|
11409
|
+
updateCalendarDefaultMonth,
|
|
11404
11410
|
]);
|
|
11405
11411
|
return { newDisableCalendarDates: newDisableCalendarDates, overlappingDate: overlappingDate };
|
|
11406
11412
|
};
|
|
@@ -11413,7 +11419,7 @@ styleInject(css_248z$8);
|
|
|
11413
11419
|
|
|
11414
11420
|
var Calendar = React__default.forwardRef(function (_a, ref) {
|
|
11415
11421
|
var _b, _c;
|
|
11416
|
-
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, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation = _a.setUpdateCalendarMonthNavigation,
|
|
11422
|
+
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, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation = _a.setUpdateCalendarMonthNavigation, updateCalendarDefaultMonth = _a.updateCalendarDefaultMonth, loadingData = _a.loadingData, showFeedback = _a.showFeedback, palette = _a.palette, setCalendarHasError = _a.setCalendarHasError, setUpdatedForSubmit = _a.setUpdatedForSubmit, rangeContext = _a.rangeContext, calendarHasError = _a.calendarHasError;
|
|
11417
11423
|
// Translations
|
|
11418
11424
|
var t = useTranslation('common').t;
|
|
11419
11425
|
var isTablet = reactResponsiveExports.useMediaQuery({ maxWidth: 960 });
|
|
@@ -11425,7 +11431,7 @@ var Calendar = React__default.forwardRef(function (_a, ref) {
|
|
|
11425
11431
|
disableCalendarDates: disableCalendarDates,
|
|
11426
11432
|
calendarRange: calendarRange,
|
|
11427
11433
|
updateCalendarMonthNavigation: updateCalendarMonthNavigation,
|
|
11428
|
-
|
|
11434
|
+
updateCalendarDefaultMonth: updateCalendarDefaultMonth,
|
|
11429
11435
|
}), newDisableCalendarDates = _d.newDisableCalendarDates, overlappingDate = _d.overlappingDate;
|
|
11430
11436
|
// Handle disable dates by page
|
|
11431
11437
|
var disabledDatesByPage$1 = disabledDatesByPage({
|
|
@@ -11433,19 +11439,14 @@ var Calendar = React__default.forwardRef(function (_a, ref) {
|
|
|
11433
11439
|
selectedPath: selectedPath,
|
|
11434
11440
|
newDisableCalendarDates: newDisableCalendarDates,
|
|
11435
11441
|
});
|
|
11442
|
+
console.log('2', t('noCheckIn'));
|
|
11436
11443
|
// Handle tooltip
|
|
11437
11444
|
useCalendarTooltips({
|
|
11438
|
-
calendarRange: calendarRange,
|
|
11439
|
-
updateCalendarMonthNavigation: updateCalendarMonthNavigation,
|
|
11440
|
-
overlappingDate: overlappingDate,
|
|
11441
|
-
updateCalendarDefaultMoth: updateCalendarDefaultMoth,
|
|
11442
11445
|
showFeedback: showFeedback,
|
|
11443
11446
|
});
|
|
11444
11447
|
// Handle loading spinner
|
|
11445
11448
|
useCalendarLoadingSpinner({
|
|
11446
11449
|
loadingData: loadingData,
|
|
11447
|
-
updateCalendarMonthNavigation: updateCalendarMonthNavigation,
|
|
11448
|
-
updateCalendarDefaultMoth: updateCalendarDefaultMoth,
|
|
11449
11450
|
});
|
|
11450
11451
|
// Handle the date selection and availability for selection logic.
|
|
11451
11452
|
var handleOnSelect = function (range) {
|
|
@@ -11477,7 +11478,7 @@ var Calendar = React__default.forwardRef(function (_a, ref) {
|
|
|
11477
11478
|
});
|
|
11478
11479
|
return (React__default.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
|
|
11479
11480
|
React__default.createElement("div", { className: "will-calendar-filter-container" },
|
|
11480
|
-
React__default.createElement(DayPicker, { key:
|
|
11481
|
+
React__default.createElement(DayPicker, { key: updateCalendarDefaultMonth, id: "will-calendar", mode: "range", locale: language === 'en' ? enUS : fi, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: function (range) { return handleOnSelect(range); }, captionLayout: "dropdown-buttons", defaultMonth: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ||
|
|
11481
11482
|
selectedStartDate ||
|
|
11482
11483
|
rangeContextStartDate ||
|
|
11483
11484
|
(((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.length)
|
|
@@ -11903,15 +11904,16 @@ var AGE_CATEGORIES_FALLBACK = [
|
|
|
11903
11904
|
var REDIRECT_URL_FALLBACK = 'http://localhost:3000/';
|
|
11904
11905
|
|
|
11905
11906
|
var useFilterCalendar = function (_a) {
|
|
11906
|
-
var onSubmit = _a.onSubmit, setToggleCalendar = _a.setToggleCalendar, noActiveSelection = _a.noActiveSelection, toggleCalendar = _a.toggleCalendar;
|
|
11907
|
+
var onSubmit = _a.onSubmit, setToggleCalendar = _a.setToggleCalendar, noActiveSelection = _a.noActiveSelection, toggleCalendar = _a.toggleCalendar, outerRangeContext = _a.outerRangeContext;
|
|
11907
11908
|
// State
|
|
11908
11909
|
var _b = __read(React__default.useState(), 2), calendarRange = _b[0], setCalendarRange = _b[1];
|
|
11909
|
-
var _c = __read(React__default.useState(), 2),
|
|
11910
|
-
var _d = __read(React__default.useState(
|
|
11911
|
-
var _e = __read(React__default.useState(
|
|
11912
|
-
var _f = __read(React__default.useState(
|
|
11913
|
-
var _g = __read(React__default.useState(
|
|
11914
|
-
var _h = __read(React__default.useState(false), 2),
|
|
11910
|
+
var _c = __read(React__default.useState(outerRangeContext), 2), rangeContext = _c[0], setRangeContext = _c[1];
|
|
11911
|
+
var _d = __read(React__default.useState(), 2), initialCalendarRange = _d[0], setInitialCalendarRange = _d[1];
|
|
11912
|
+
var _e = __read(React__default.useState([]), 2), disabledDates = _e[0], setDisabledDates = _e[1];
|
|
11913
|
+
var _f = __read(React__default.useState(false), 2), updateCalendarMonthNavigation = _f[0], setUpdateCalendarMonthNavigation = _f[1];
|
|
11914
|
+
var _g = __read(React__default.useState(0), 2), updateCalendarDefaultMonth = _g[0], setUpdateCalendarDefaultMonth = _g[1];
|
|
11915
|
+
var _h = __read(React__default.useState(false), 2), calendarHasError = _h[0], setCalendarHasError = _h[1];
|
|
11916
|
+
var _j = __read(React__default.useState(false), 2), updatedForSubmit = _j[0], setUpdatedForSubmit = _j[1];
|
|
11915
11917
|
// Lifecycle
|
|
11916
11918
|
React__default.useEffect(function () {
|
|
11917
11919
|
if (typeof window === 'undefined')
|
|
@@ -11922,8 +11924,9 @@ var useFilterCalendar = function (_a) {
|
|
|
11922
11924
|
if (startDateParam && endDateParam) {
|
|
11923
11925
|
if (noActiveSelection) {
|
|
11924
11926
|
handleClearDates();
|
|
11925
|
-
|
|
11927
|
+
setUpdateCalendarDefaultMonth(function (prev) { return prev + 1; });
|
|
11926
11928
|
setUpdatedForSubmit(false);
|
|
11929
|
+
setRangeContext(outerRangeContext);
|
|
11927
11930
|
setInitialCalendarRange({
|
|
11928
11931
|
from: new Date(startDateParam),
|
|
11929
11932
|
to: new Date(endDateParam),
|
|
@@ -11985,10 +11988,11 @@ var useFilterCalendar = function (_a) {
|
|
|
11985
11988
|
calendarRange: calendarRange,
|
|
11986
11989
|
disabledDates: disabledDates,
|
|
11987
11990
|
updateCalendarMonthNavigation: updateCalendarMonthNavigation,
|
|
11988
|
-
|
|
11991
|
+
updateCalendarDefaultMonth: updateCalendarDefaultMonth,
|
|
11989
11992
|
calendarHasError: calendarHasError,
|
|
11990
11993
|
setCalendarHasError: setCalendarHasError,
|
|
11991
11994
|
setUpdatedForSubmit: setUpdatedForSubmit,
|
|
11995
|
+
rangeContext: rangeContext,
|
|
11992
11996
|
};
|
|
11993
11997
|
};
|
|
11994
11998
|
|
|
@@ -11996,17 +12000,19 @@ var css_248z = ".will-root .will-calendar-wrapper {\n box-shadow: var(--will-
|
|
|
11996
12000
|
styleInject(css_248z);
|
|
11997
12001
|
|
|
11998
12002
|
function FilterCalendar(_a) {
|
|
11999
|
-
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, showFeedback = _a.showFeedback, noActiveSelection = _a.noActiveSelection,
|
|
12003
|
+
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, showFeedback = _a.showFeedback, noActiveSelection = _a.noActiveSelection, outerRangeContext = _a.rangeContext;
|
|
12000
12004
|
var themePalette = useTheme({ palette: palette });
|
|
12001
12005
|
// Translations
|
|
12002
12006
|
useUpdateTranslations({ language: language });
|
|
12003
12007
|
var t = useTranslation().t;
|
|
12008
|
+
console.log('1', t('noCheckIn'));
|
|
12004
12009
|
var _b = useFilterCalendar({
|
|
12005
12010
|
onSubmit: onSubmit,
|
|
12006
12011
|
setToggleCalendar: setToggleCalendar,
|
|
12007
12012
|
noActiveSelection: noActiveSelection,
|
|
12008
12013
|
toggleCalendar: toggleCalendar,
|
|
12009
|
-
|
|
12014
|
+
outerRangeContext: outerRangeContext,
|
|
12015
|
+
}), setCalendarRange = _b.setCalendarRange, handleClearDates = _b.handleClearDates, calendarRange = _b.calendarRange, disabledDates = _b.disabledDates, setDisabledDates = _b.setDisabledDates, updateCalendarMonthNavigation = _b.updateCalendarMonthNavigation, updateCalendarDefaultMonth = _b.updateCalendarDefaultMonth, setUpdateCalendarMonthNavigation = _b.setUpdateCalendarMonthNavigation, calendarHasError = _b.calendarHasError, setCalendarHasError = _b.setCalendarHasError, setUpdatedForSubmit = _b.setUpdatedForSubmit, rangeContext = _b.rangeContext;
|
|
12010
12016
|
// Display component after fully loaded
|
|
12011
12017
|
useAwaitRender();
|
|
12012
12018
|
// Handle close filter section
|
|
@@ -12021,7 +12027,7 @@ function FilterCalendar(_a) {
|
|
|
12021
12027
|
React__default.createElement("h2", null, t('filterBar:calendar.title')),
|
|
12022
12028
|
React__default.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
|
|
12023
12029
|
React__default.createElement("div", { className: "will-calendar-main" },
|
|
12024
|
-
React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, disableCalendarDates: disableCalendarDates, requestDates: requestDates, disabledDates: disabledDates, setDisabledDates: setDisabledDates, updateCalendarMonthNavigation: updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation: setUpdateCalendarMonthNavigation,
|
|
12030
|
+
React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, disableCalendarDates: disableCalendarDates, requestDates: requestDates, disabledDates: disabledDates, setDisabledDates: setDisabledDates, updateCalendarMonthNavigation: updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation: setUpdateCalendarMonthNavigation, updateCalendarDefaultMonth: updateCalendarDefaultMonth, loadingData: loadingData, showFeedback: showFeedback, noActiveSelection: noActiveSelection, palette: palette, setCalendarHasError: setCalendarHasError, setUpdatedForSubmit: setUpdatedForSubmit, rangeContext: rangeContext, calendarHasError: calendarHasError })),
|
|
12025
12031
|
React__default.createElement("div", { className: "will-calendar-footer" },
|
|
12026
12032
|
React__default.createElement("div", { className: "will-calendar-footer-actions-wrapper" },
|
|
12027
12033
|
React__default.createElement("div", { className: "will-calendar-footer-dates" },
|