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