willba-component-library 0.2.64 → 0.2.67
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/index.esm.js +86 -26
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +86 -26
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +86 -26
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FilterCalendar/FilterCalendar.stories.tsx +50 -50
- package/src/components/FilterCalendar/FilterCalendar.tsx +1 -3
- package/src/components/FilterCalendar/hooks/useFilterCalendar.ts +16 -3
- package/src/core/components/calendar/Calendar.tsx +21 -6
- package/src/core/components/calendar/hooks/useUpdateDisabledDates.tsx +0 -4
- package/src/core/components/calendar/utils/calendarSelectionRules.tsx +3 -1
- package/src/core/components/calendar/utils/handleRangeContextDisabledDates.tsx +16 -11
package/lib/index.esm.js
CHANGED
|
@@ -3590,6 +3590,53 @@ function min(dirtyDatesArray) {
|
|
|
3590
3590
|
return result || new Date(NaN);
|
|
3591
3591
|
}
|
|
3592
3592
|
|
|
3593
|
+
/**
|
|
3594
|
+
* @name compareAsc
|
|
3595
|
+
* @category Common Helpers
|
|
3596
|
+
* @summary Compare the two dates and return -1, 0 or 1.
|
|
3597
|
+
*
|
|
3598
|
+
* @description
|
|
3599
|
+
* Compare the two dates and return 1 if the first date is after the second,
|
|
3600
|
+
* -1 if the first date is before the second or 0 if dates are equal.
|
|
3601
|
+
*
|
|
3602
|
+
* @param {Date|Number} dateLeft - the first date to compare
|
|
3603
|
+
* @param {Date|Number} dateRight - the second date to compare
|
|
3604
|
+
* @returns {Number} the result of the comparison
|
|
3605
|
+
* @throws {TypeError} 2 arguments required
|
|
3606
|
+
*
|
|
3607
|
+
* @example
|
|
3608
|
+
* // Compare 11 February 1987 and 10 July 1989:
|
|
3609
|
+
* const result = compareAsc(new Date(1987, 1, 11), new Date(1989, 6, 10))
|
|
3610
|
+
* //=> -1
|
|
3611
|
+
*
|
|
3612
|
+
* @example
|
|
3613
|
+
* // Sort the array of dates:
|
|
3614
|
+
* const result = [
|
|
3615
|
+
* new Date(1995, 6, 2),
|
|
3616
|
+
* new Date(1987, 1, 11),
|
|
3617
|
+
* new Date(1989, 6, 10)
|
|
3618
|
+
* ].sort(compareAsc)
|
|
3619
|
+
* //=> [
|
|
3620
|
+
* // Wed Feb 11 1987 00:00:00,
|
|
3621
|
+
* // Mon Jul 10 1989 00:00:00,
|
|
3622
|
+
* // Sun Jul 02 1995 00:00:00
|
|
3623
|
+
* // ]
|
|
3624
|
+
*/
|
|
3625
|
+
function compareAsc(dirtyDateLeft, dirtyDateRight) {
|
|
3626
|
+
requiredArgs(2, arguments);
|
|
3627
|
+
var dateLeft = toDate(dirtyDateLeft);
|
|
3628
|
+
var dateRight = toDate(dirtyDateRight);
|
|
3629
|
+
var diff = dateLeft.getTime() - dateRight.getTime();
|
|
3630
|
+
if (diff < 0) {
|
|
3631
|
+
return -1;
|
|
3632
|
+
} else if (diff > 0) {
|
|
3633
|
+
return 1;
|
|
3634
|
+
// Return 0 if diff is 0; return NaN if diff is NaN
|
|
3635
|
+
} else {
|
|
3636
|
+
return diff;
|
|
3637
|
+
}
|
|
3638
|
+
}
|
|
3639
|
+
|
|
3593
3640
|
/**
|
|
3594
3641
|
* @name isSameDay
|
|
3595
3642
|
* @category Day Helpers
|
|
@@ -11139,10 +11186,11 @@ var calendarSelectionRules = function (_a) {
|
|
|
11139
11186
|
var disableFutureDates = function (_a) {
|
|
11140
11187
|
var rangeFrom = _a.rangeFrom, checkOutRange = _a.checkOutRange, setDisabledDates = _a.setDisabledDates, newDisableCalendarDates = _a.newDisableCalendarDates;
|
|
11141
11188
|
if (rangeFrom && checkOutRange && setDisabledDates) {
|
|
11142
|
-
// Get
|
|
11189
|
+
// Get parse data
|
|
11143
11190
|
var checkIn = addDays(checkOutRange.checkIn, 1);
|
|
11144
11191
|
var firstCheckOut = addDays(checkOutRange.firstCheckOut, -1);
|
|
11145
11192
|
var noDatesRange = isEqual(checkIn, checkOutRange.firstCheckOut);
|
|
11193
|
+
console.log('test update', { newDisableCalendarDates: newDisableCalendarDates });
|
|
11146
11194
|
setDisabledDates(__spreadArray$1(__spreadArray$1([], __read(((newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) || [])), false), [
|
|
11147
11195
|
{
|
|
11148
11196
|
from: noDatesRange ? undefined : checkIn,
|
|
@@ -11278,11 +11326,16 @@ var handleRangeContextDisabledDates = function (_a) {
|
|
|
11278
11326
|
var findLastPossibleRangeContextCheckOut;
|
|
11279
11327
|
var firstPossibleRangeContextCheckIn = [];
|
|
11280
11328
|
var lastPossibleRangeContextCheckOut = [];
|
|
11329
|
+
// Parse data
|
|
11330
|
+
var rangeContextFrom = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from) && endOfDay(rangeContext.from);
|
|
11331
|
+
var rangeContextTo = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to) && endOfDay(rangeContext.to);
|
|
11332
|
+
var calendarRangeFrom = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) && endOfDay(calendarRange.from);
|
|
11281
11333
|
if (rangeContext && (availableDates === null || availableDates === void 0 ? void 0 : availableDates.length)) {
|
|
11282
11334
|
// Find the first possible check-in after the last date gap till the range context
|
|
11283
11335
|
findFirstPossibleRangeContextCheckIn = availableDates === null || availableDates === void 0 ? void 0 : availableDates.find(function (date) {
|
|
11284
|
-
return
|
|
11285
|
-
date.
|
|
11336
|
+
return rangeContextFrom &&
|
|
11337
|
+
endOfDay(date.checkIn) < rangeContextFrom &&
|
|
11338
|
+
endOfDay(date.lastCheckOut) >= rangeContextFrom;
|
|
11286
11339
|
});
|
|
11287
11340
|
if (findFirstPossibleRangeContextCheckIn === null || findFirstPossibleRangeContextCheckIn === void 0 ? void 0 : findFirstPossibleRangeContextCheckIn.checkIn) {
|
|
11288
11341
|
firstPossibleRangeContextCheckIn.push({
|
|
@@ -11291,7 +11344,7 @@ var handleRangeContextDisabledDates = function (_a) {
|
|
|
11291
11344
|
}
|
|
11292
11345
|
// Find the last possible checkout before the first date gap till the range context
|
|
11293
11346
|
findLastPossibleRangeContextCheckOut = availableDates === null || availableDates === void 0 ? void 0 : availableDates.find(function (date) {
|
|
11294
|
-
return isEqual(
|
|
11347
|
+
return rangeContextTo && isEqual(rangeContextTo, endOfDay(date.checkIn));
|
|
11295
11348
|
});
|
|
11296
11349
|
if (findLastPossibleRangeContextCheckOut === null || findLastPossibleRangeContextCheckOut === void 0 ? void 0 : findLastPossibleRangeContextCheckOut.checkIn) {
|
|
11297
11350
|
lastPossibleRangeContextCheckOut.push({
|
|
@@ -11301,11 +11354,9 @@ var handleRangeContextDisabledDates = function (_a) {
|
|
|
11301
11354
|
}
|
|
11302
11355
|
// Get last possible check-out dates for current check-in
|
|
11303
11356
|
var currentSelectionLastCheckoutDate = availableDates === null || availableDates === void 0 ? void 0 : availableDates.find(function (date) {
|
|
11304
|
-
|
|
11305
|
-
?
|
|
11306
|
-
:
|
|
11307
|
-
var itemCheckIn = format(date.checkIn, 'dd.MM.yyyy');
|
|
11308
|
-
return calendarCheckIn ? itemCheckIn === calendarCheckIn : false;
|
|
11357
|
+
return calendarRangeFrom
|
|
11358
|
+
? isEqual(endOfDay(date.checkIn), calendarRangeFrom)
|
|
11359
|
+
: false;
|
|
11309
11360
|
});
|
|
11310
11361
|
return {
|
|
11311
11362
|
findFirstPossibleRangeContextCheckIn: findFirstPossibleRangeContextCheckIn,
|
|
@@ -11477,9 +11528,6 @@ var useUpdateDisabledDates = function (_a) {
|
|
|
11477
11528
|
return __spreadArray$1(__spreadArray$1([], __read(prev), false), __read(newOverlappingDates_1), false);
|
|
11478
11529
|
});
|
|
11479
11530
|
}
|
|
11480
|
-
if (newOverlappingDates_1.length) {
|
|
11481
|
-
console.log(newOverlappingDates_1);
|
|
11482
|
-
}
|
|
11483
11531
|
var newDisableCalendarDates_1 = __assign$2(__assign$2({}, disableCalendarDates), { disabledDates: updatedDisabledDates });
|
|
11484
11532
|
return newDisableCalendarDates_1;
|
|
11485
11533
|
}
|
|
@@ -11500,7 +11548,7 @@ var css_248z$8 = ".will-calendar-filter-container {\n display: flex;\n justify
|
|
|
11500
11548
|
styleInject(css_248z$8);
|
|
11501
11549
|
|
|
11502
11550
|
var Calendar = forwardRef(function (_a, ref) {
|
|
11503
|
-
var _b, _c;
|
|
11551
|
+
var _b, _c, _d;
|
|
11504
11552
|
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;
|
|
11505
11553
|
// Translations
|
|
11506
11554
|
var t = useTranslation('common').t;
|
|
@@ -11508,15 +11556,13 @@ var Calendar = forwardRef(function (_a, ref) {
|
|
|
11508
11556
|
var today = startOfDay(new Date());
|
|
11509
11557
|
var selectedStartDate = calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from;
|
|
11510
11558
|
var rangeContextStartDate = rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from;
|
|
11511
|
-
console.log({ disableCalendarDates: disableCalendarDates });
|
|
11512
11559
|
// Handle initial disable dates including overlapping availableDates.lastCheckOut and disabledDates.start
|
|
11513
|
-
var
|
|
11560
|
+
var _e = useUpdateDisabledDates({
|
|
11514
11561
|
disableCalendarDates: disableCalendarDates,
|
|
11515
11562
|
calendarRange: calendarRange,
|
|
11516
11563
|
updateCalendarMonthNavigation: updateCalendarMonthNavigation,
|
|
11517
11564
|
updateCalendarDefaultMonth: updateCalendarDefaultMonth,
|
|
11518
|
-
}), newDisableCalendarDates =
|
|
11519
|
-
console.log({ newDisableCalendarDates: newDisableCalendarDates });
|
|
11565
|
+
}), newDisableCalendarDates = _e.newDisableCalendarDates, overlappingDate = _e.overlappingDate, lastPossibleCheckout = _e.lastPossibleCheckout;
|
|
11520
11566
|
// Handle disable dates by page
|
|
11521
11567
|
var disabledDatesByPage$1 = disabledDatesByPage({
|
|
11522
11568
|
today: today,
|
|
@@ -11546,13 +11592,12 @@ var Calendar = forwardRef(function (_a, ref) {
|
|
|
11546
11592
|
});
|
|
11547
11593
|
setUpdatedForSubmit && setUpdatedForSubmit(true);
|
|
11548
11594
|
};
|
|
11549
|
-
console.log({ disabledDates: disabledDates });
|
|
11550
11595
|
// Handle disabled dates for range context
|
|
11551
|
-
var
|
|
11596
|
+
var _f = handleRangeContextDisabledDates({
|
|
11552
11597
|
rangeContext: rangeContext,
|
|
11553
11598
|
availableDates: newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.availableDates,
|
|
11554
11599
|
calendarRange: calendarRange,
|
|
11555
|
-
}), findFirstPossibleRangeContextCheckIn =
|
|
11600
|
+
}), findFirstPossibleRangeContextCheckIn = _f.findFirstPossibleRangeContextCheckIn, findLastPossibleRangeContextCheckOut = _f.findLastPossibleRangeContextCheckOut, firstPossibleRangeContextCheckIn = _f.firstPossibleRangeContextCheckIn, lastPossibleRangeContextCheckOut = _f.lastPossibleRangeContextCheckOut, currentSelectionLastCheckoutDate = _f.currentSelectionLastCheckoutDate;
|
|
11556
11601
|
// Handle check for continuous selection in the range context
|
|
11557
11602
|
checkForContinuousSelection({
|
|
11558
11603
|
setCalendarHasError: setCalendarHasError,
|
|
@@ -11560,19 +11605,28 @@ var Calendar = forwardRef(function (_a, ref) {
|
|
|
11560
11605
|
calendarRange: calendarRange,
|
|
11561
11606
|
calendarHasError: calendarHasError,
|
|
11562
11607
|
});
|
|
11608
|
+
console.log('test', disabledDatesByPage$1.length
|
|
11609
|
+
? disabledDatesByPage$1
|
|
11610
|
+
: (disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.length)
|
|
11611
|
+
? __spreadArray$1(__spreadArray$1(__spreadArray$1([
|
|
11612
|
+
lastPossibleCheckout && lastPossibleCheckout
|
|
11613
|
+
], __read(disabledDates), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false) : ((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.length)
|
|
11614
|
+
? __spreadArray$1(__spreadArray$1(__spreadArray$1([
|
|
11615
|
+
lastPossibleCheckout && lastPossibleCheckout
|
|
11616
|
+
], __read(newDisableCalendarDates.disabledDates), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false) : []);
|
|
11563
11617
|
return (React__default__default.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
|
|
11564
11618
|
React__default__default.createElement("div", { className: "will-calendar-filter-container" },
|
|
11565
11619
|
React__default__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) ||
|
|
11566
11620
|
selectedStartDate ||
|
|
11567
11621
|
rangeContextStartDate ||
|
|
11568
|
-
(((
|
|
11622
|
+
(((_c = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _c === void 0 ? void 0 : _c.length)
|
|
11569
11623
|
? newDisableCalendarDates.disabledDates[0].from
|
|
11570
11624
|
: today), disabled: disabledDatesByPage$1.length
|
|
11571
11625
|
? disabledDatesByPage$1
|
|
11572
11626
|
: (disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.length)
|
|
11573
11627
|
? __spreadArray$1(__spreadArray$1(__spreadArray$1([
|
|
11574
11628
|
lastPossibleCheckout && lastPossibleCheckout
|
|
11575
|
-
], __read(disabledDates), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false) : ((
|
|
11629
|
+
], __read(disabledDates), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false) : ((_d = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _d === void 0 ? void 0 : _d.length)
|
|
11576
11630
|
? __spreadArray$1(__spreadArray$1(__spreadArray$1([
|
|
11577
11631
|
lastPossibleCheckout && lastPossibleCheckout
|
|
11578
11632
|
], __read(newDisableCalendarDates.disabledDates), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false) : [], fromMonth: today, onMonthChange: function (val) {
|
|
@@ -12007,8 +12061,16 @@ var useFilterCalendar = function (_a) {
|
|
|
12007
12061
|
// Lifecycle
|
|
12008
12062
|
// Handle update component with new data
|
|
12009
12063
|
useEffect(function () {
|
|
12010
|
-
if (outerDisableCalendarDates) {
|
|
12011
|
-
setDisableCalendarDates(
|
|
12064
|
+
if (outerDisableCalendarDates === null || outerDisableCalendarDates === void 0 ? void 0 : outerDisableCalendarDates.availableDates) {
|
|
12065
|
+
setDisableCalendarDates({
|
|
12066
|
+
availableDates: __spreadArray$1([], __read(outerDisableCalendarDates.availableDates.sort(function (a, b) {
|
|
12067
|
+
return compareAsc(a.checkIn, b.checkIn);
|
|
12068
|
+
})), false),
|
|
12069
|
+
disabledDates: outerDisableCalendarDates.disabledDates
|
|
12070
|
+
? __spreadArray$1([], __read(outerDisableCalendarDates.disabledDates.sort(function (a, b) {
|
|
12071
|
+
return compareAsc(a.from, b.from);
|
|
12072
|
+
})), false) : [],
|
|
12073
|
+
});
|
|
12012
12074
|
}
|
|
12013
12075
|
}, [outerDisableCalendarDates]);
|
|
12014
12076
|
// Handle Range Context initial selections
|
|
@@ -12105,7 +12167,6 @@ function FilterCalendar(_a) {
|
|
|
12105
12167
|
useUpdateTranslations({ language: language });
|
|
12106
12168
|
var t = useTranslation().t;
|
|
12107
12169
|
var isMobile = reactResponsiveExports.useMediaQuery({ maxWidth: 690 });
|
|
12108
|
-
console.log('1', { outerDisableCalendarDates: outerDisableCalendarDates });
|
|
12109
12170
|
var _b = useFilterCalendar({
|
|
12110
12171
|
onSubmit: onSubmit,
|
|
12111
12172
|
setToggleCalendar: setToggleCalendar,
|
|
@@ -12114,7 +12175,6 @@ function FilterCalendar(_a) {
|
|
|
12114
12175
|
outerRangeContext: outerRangeContext,
|
|
12115
12176
|
outerDisableCalendarDates: outerDisableCalendarDates,
|
|
12116
12177
|
}), 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, disableCalendarDates = _b.disableCalendarDates;
|
|
12117
|
-
console.log('1', { disableCalendarDates: disableCalendarDates });
|
|
12118
12178
|
// Display component after fully loaded
|
|
12119
12179
|
useAwaitRender();
|
|
12120
12180
|
// Handle close filter section
|