@uxf/datepicker 11.96.0-canary.1 → 11.99.0
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/hooks/use-date-picker-navigation.js +12 -12
- package/hooks/use-date-picker.js +5 -5
- package/hooks/use-date-picker.test.js +1 -1
- package/hooks/use-date-range-picker.js +29 -51
- package/hooks/use-date-range-picker.test.js +2 -2
- package/hooks/use-day.js +11 -13
- package/hooks/use-day.test.js +5 -5
- package/hooks/use-decade.js +5 -5
- package/hooks/use-decade.test.js +23 -23
- package/hooks/use-month.js +4 -4
- package/hooks/use-month.test.js +83 -83
- package/hooks/use-year.js +3 -3
- package/hooks/use-year.test.js +29 -29
- package/package.json +2 -6
- package/utils/can-select-range.js +7 -7
- package/utils/dayjs-utils.d.ts +4 -0
- package/utils/{dayjs-en.js → dayjs-utils.js} +8 -5
- package/utils/get-current-year-month-and-date.js +2 -2
- package/utils/get-current-year-month-and-date.test.js +2 -2
- package/utils/get-date-intervals.test.js +12 -8
- package/utils/get-date-invervals.js +3 -3
- package/utils/get-date-month-and-year.js +4 -4
- package/utils/get-date-month-and-year.test.js +2 -2
- package/utils/get-days.js +9 -9
- package/utils/get-days.test.js +123 -126
- package/utils/get-each.js +7 -29
- package/utils/get-each.test.js +17 -17
- package/utils/get-initial-months.js +2 -2
- package/utils/get-initial-months.test.js +4 -4
- package/utils/get-months.js +4 -4
- package/utils/get-months.test.js +27 -30
- package/utils/get-next-active-month.js +3 -3
- package/utils/get-next-active-month.test.js +14 -14
- package/utils/get-weekday-labels.js +4 -4
- package/utils/get-weekday-labels.test.js +3 -3
- package/utils/get-years.js +2 -2
- package/utils/get-years.test.js +12 -15
- package/utils/is-date-blocked.js +4 -4
- package/utils/is-date-hovered.d.ts +1 -1
- package/utils/is-date-hovered.js +23 -38
- package/utils/is-date-inside-range.js +2 -7
- package/utils/is-end-date.js +2 -2
- package/utils/is-first-or-last-selected-date.js +3 -10
- package/utils/is-in-unavailable-dates.js +2 -4
- package/utils/is-start-date.js +2 -2
- package/utils/dayjs-en.d.ts +0 -4
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useDatePickerNavigation = useDatePickerNavigation;
|
|
4
4
|
const react_1 = require("react");
|
|
5
|
-
const
|
|
5
|
+
const dayjs_utils_1 = require("../utils/dayjs-utils");
|
|
6
6
|
const get_initial_months_1 = require("../utils/get-initial-months");
|
|
7
7
|
const get_next_active_month_1 = require("../utils/get-next-active-month");
|
|
8
8
|
function useDatePickerNavigation({ activeMonths, setActiveMonths, setFocusedDate, minBookingDate, maxBookingDate, numberOfMonths, }) {
|
|
@@ -50,34 +50,34 @@ function useDatePickerNavigation({ activeMonths, setActiveMonths, setFocusedDate
|
|
|
50
50
|
return newActiveMonths;
|
|
51
51
|
}, [activeMonths, numberOfMonths, setActiveMonths, setFocusedDate]);
|
|
52
52
|
const canGoToPrevMonth = minBookingDate
|
|
53
|
-
? !(0,
|
|
53
|
+
? !(0, dayjs_utils_1.dayjsEnRaw)((_b = (_a = activeMonths.at(0)) === null || _a === void 0 ? void 0 : _a.date) !== null && _b !== void 0 ? _b : new Date()).isBefore((0, dayjs_utils_1.dayjsEnRaw)(minBookingDate))
|
|
54
54
|
: true;
|
|
55
55
|
const canGoToNextMonth = maxBookingDate
|
|
56
|
-
? !(0,
|
|
56
|
+
? !(0, dayjs_utils_1.dayjsEnWithTz)(activeMonths[activeMonths.length - 1].date)
|
|
57
57
|
.endOf("month")
|
|
58
|
-
.isAfter((0,
|
|
58
|
+
.isAfter((0, dayjs_utils_1.dayjsEnWithTz)(maxBookingDate))
|
|
59
59
|
: true;
|
|
60
60
|
const canGoToPrevYear = minBookingDate
|
|
61
|
-
? !(0,
|
|
61
|
+
? !(0, dayjs_utils_1.dayjsEnWithTz)((_d = (_c = activeMonths.at(0)) === null || _c === void 0 ? void 0 : _c.date) !== null && _d !== void 0 ? _d : new Date())
|
|
62
62
|
.startOf("year")
|
|
63
|
-
.isBefore((0,
|
|
63
|
+
.isBefore((0, dayjs_utils_1.dayjsEnWithTz)(minBookingDate))
|
|
64
64
|
: true;
|
|
65
65
|
const canGoToNextYear = maxBookingDate
|
|
66
|
-
? !(0,
|
|
66
|
+
? !(0, dayjs_utils_1.dayjsEnWithTz)(activeMonths[activeMonths.length - 1].date)
|
|
67
67
|
.endOf("year")
|
|
68
|
-
.isAfter((0,
|
|
68
|
+
.isAfter((0, dayjs_utils_1.dayjsEnWithTz)(maxBookingDate))
|
|
69
69
|
: true;
|
|
70
70
|
const canGoTo = (0, react_1.useCallback)((month, type) => {
|
|
71
71
|
if (minBookingDate || maxBookingDate) {
|
|
72
72
|
if (minBookingDate && maxBookingDate) {
|
|
73
|
-
return ((0,
|
|
74
|
-
(0,
|
|
73
|
+
return ((0, dayjs_utils_1.dayjsEnWithTz)(month).endOf(type).add(1, "day").isAfter(minBookingDate, "day") &&
|
|
74
|
+
(0, dayjs_utils_1.dayjsEnWithTz)(month).startOf(type).subtract(1, "day").isBefore(maxBookingDate, "day"));
|
|
75
75
|
}
|
|
76
76
|
if (minBookingDate) {
|
|
77
|
-
return (0,
|
|
77
|
+
return (0, dayjs_utils_1.dayjsEnWithTz)(month).endOf(type).add(1, "day").isAfter(minBookingDate, "day");
|
|
78
78
|
}
|
|
79
79
|
if (maxBookingDate) {
|
|
80
|
-
return (0,
|
|
80
|
+
return (0, dayjs_utils_1.dayjsEnWithTz)(month).startOf(type).subtract(1, "day").isBefore(maxBookingDate, "day");
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
83
|
return true;
|
package/hooks/use-date-picker.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useDatePicker = useDatePicker;
|
|
4
4
|
const react_1 = require("react");
|
|
5
|
-
const
|
|
5
|
+
const dayjs_utils_1 = require("../utils/dayjs-utils");
|
|
6
6
|
const get_initial_months_1 = require("../utils/get-initial-months");
|
|
7
7
|
const is_date_blocked_1 = require("../utils/is-date-blocked");
|
|
8
8
|
const is_date_hovered_1 = require("../utils/is-date-hovered");
|
|
@@ -22,7 +22,7 @@ function useDatePicker({ datesConfig = [], firstDayOfWeek = 0, initialVisibleMon
|
|
|
22
22
|
};
|
|
23
23
|
const onDateFocus = (0, react_1.useCallback)((date) => {
|
|
24
24
|
setFocusedDate(date);
|
|
25
|
-
if (!focusedDate || !activeMonths.map((m) => m.month).includes((0,
|
|
25
|
+
if (!focusedDate || !activeMonths.map((m) => m.month).includes((0, dayjs_utils_1.dayjsEnRaw)(date).month())) {
|
|
26
26
|
setActiveMonths((0, get_initial_months_1.getInitialMonths)(numberOfMonths, date));
|
|
27
27
|
}
|
|
28
28
|
}, [activeMonths, focusedDate, numberOfMonths]);
|
|
@@ -36,7 +36,7 @@ function useDatePicker({ datesConfig = [], firstDayOfWeek = 0, initialVisibleMon
|
|
|
36
36
|
minBookingDays: 1,
|
|
37
37
|
isDateBlockedFn: disabledDatesByUser,
|
|
38
38
|
});
|
|
39
|
-
const isDateFocused = (date) => (focusedDate ? (0,
|
|
39
|
+
const isDateFocused = (date) => (focusedDate ? (0, dayjs_utils_1.dayjsEnRaw)(date).isSame(focusedDate, "day") : false);
|
|
40
40
|
const _isDateHovered = (date) => (0, is_date_hovered_1.isDateHovered)({
|
|
41
41
|
date,
|
|
42
42
|
hoveredDate,
|
|
@@ -65,7 +65,7 @@ function useDatePicker({ datesConfig = [], firstDayOfWeek = 0, initialVisibleMon
|
|
|
65
65
|
onDateChange(null);
|
|
66
66
|
}, [onDateChange]);
|
|
67
67
|
function onDateSelect(date) {
|
|
68
|
-
if (!(0,
|
|
68
|
+
if (!(0, dayjs_utils_1.dayjsEnRaw)(date).isSame(selectedDate)) {
|
|
69
69
|
onDateChange(date);
|
|
70
70
|
}
|
|
71
71
|
else {
|
|
@@ -77,7 +77,7 @@ function useDatePicker({ datesConfig = [], firstDayOfWeek = 0, initialVisibleMon
|
|
|
77
77
|
setHoveredDate(null);
|
|
78
78
|
}
|
|
79
79
|
else {
|
|
80
|
-
const isNotBlocked = !_isDateBlocked(date) || (selectedDate && (0,
|
|
80
|
+
const isNotBlocked = !_isDateBlocked(date) || (selectedDate && (0, dayjs_utils_1.dayjsEnRaw)(date).isSame(selectedDate, "day"));
|
|
81
81
|
if (isNotBlocked) {
|
|
82
82
|
setHoveredDate(date);
|
|
83
83
|
}
|
|
@@ -15,7 +15,7 @@ test("base data", () => {
|
|
|
15
15
|
expect(result.current.hoveredDate).toBe(null);
|
|
16
16
|
expect(result.current.activeMonths).toStrictEqual([
|
|
17
17
|
{
|
|
18
|
-
date: new Date("2021-09-01T00:00:
|
|
18
|
+
date: new Date("2021-09-01T00:00:00Z"),
|
|
19
19
|
month: 8,
|
|
20
20
|
year: 2021,
|
|
21
21
|
},
|
|
@@ -2,11 +2,9 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.END_DATE = exports.START_DATE = void 0;
|
|
4
4
|
exports.useDateRangePicker = useDateRangePicker;
|
|
5
|
-
const tz_1 = require("@date-fns/tz");
|
|
6
|
-
const date_fns_1 = require("date-fns");
|
|
7
5
|
const react_1 = require("react");
|
|
8
6
|
const can_select_range_1 = require("../utils/can-select-range");
|
|
9
|
-
const
|
|
7
|
+
const dayjs_utils_1 = require("../utils/dayjs-utils");
|
|
10
8
|
const get_initial_months_1 = require("../utils/get-initial-months");
|
|
11
9
|
const is_date_blocked_1 = require("../utils/is-date-blocked");
|
|
12
10
|
const is_date_hovered_1 = require("../utils/is-date-hovered");
|
|
@@ -18,10 +16,7 @@ const is_start_date_1 = require("../utils/is-start-date");
|
|
|
18
16
|
const use_date_picker_navigation_1 = require("./use-date-picker-navigation");
|
|
19
17
|
exports.START_DATE = "startDate";
|
|
20
18
|
exports.END_DATE = "endDate";
|
|
21
|
-
function
|
|
22
|
-
return (0, date_fns_1.isAfter)(date, start) && (0, date_fns_1.isBefore)(date, end);
|
|
23
|
-
}
|
|
24
|
-
function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [], endDate, exactMinBookingDays = false, firstDayOfWeek = 0, focusedInput, initialVisibleMonth, isDateBlocked: isDateBlockedProps, maxBookingDate, minBookingDate, minBookingDays = 1, numberOfMonths = 2, onDatesChange, startDate, unavailableDates = [], }) {
|
|
19
|
+
function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [], endDate, exactMinBookingDays = false, firstDayOfWeek = 0, focusedInput, initialVisibleMonth, isDateBlocked: isDateBlockedProps = () => false, maxBookingDate, minBookingDate, minBookingDays = 1, numberOfMonths = 2, onDatesChange, startDate, unavailableDates = [], }) {
|
|
25
20
|
const disabledDatesFromConfig = datesConfig.filter((config) => config.isDisabled).flatMap((config) => config.dates);
|
|
26
21
|
const disabledDates = [...unavailableDates, ...disabledDatesFromConfig];
|
|
27
22
|
const [activeMonths, setActiveMonths] = (0, react_1.useState)(() => startDate
|
|
@@ -29,16 +24,12 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
|
|
|
29
24
|
: (0, get_initial_months_1.getInitialMonths)(numberOfMonths, initialVisibleMonth || null));
|
|
30
25
|
const [hoveredDate, setHoveredDate] = (0, react_1.useState)(null);
|
|
31
26
|
const [focusedDate, setFocusedDate] = (0, react_1.useState)(startDate);
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
var _a;
|
|
36
|
-
return (0, is_in_unavailable_dates_1.isInUnavailableDates)(disabledDates, date) || ((_a = isDateBlockedProps === null || isDateBlockedProps === void 0 ? void 0 : isDateBlockedProps(date)) !== null && _a !== void 0 ? _a : false);
|
|
37
|
-
}
|
|
38
|
-
: undefined;
|
|
27
|
+
const disabledDatesByUser = (date) => {
|
|
28
|
+
return (0, is_in_unavailable_dates_1.isInUnavailableDates)(disabledDates, date) || isDateBlockedProps(date);
|
|
29
|
+
};
|
|
39
30
|
const onDateFocus = (0, react_1.useCallback)((date) => {
|
|
40
31
|
setFocusedDate(date);
|
|
41
|
-
if (!focusedDate || !activeMonths.map((m) => m.month).includes((0,
|
|
32
|
+
if (!focusedDate || !activeMonths.map((m) => m.month).includes((0, dayjs_utils_1.dayjsEnRaw)(date).month())) {
|
|
42
33
|
setActiveMonths((0, get_initial_months_1.getInitialMonths)(numberOfMonths, date));
|
|
43
34
|
}
|
|
44
35
|
}, [activeMonths, focusedDate, numberOfMonths]);
|
|
@@ -55,7 +46,7 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
|
|
|
55
46
|
minBookingDays,
|
|
56
47
|
isDateBlockedFn: disabledDatesByUser,
|
|
57
48
|
});
|
|
58
|
-
const isDateFocused = (date) => focusedDate ? (0,
|
|
49
|
+
const isDateFocused = (date) => (focusedDate ? (0, dayjs_utils_1.dayjsEnRaw)(date).isSame(focusedDate, "day") : false);
|
|
59
50
|
const _isDateHovered = (date) => (0, is_date_hovered_1.isDateHovered)({
|
|
60
51
|
date,
|
|
61
52
|
hoveredDate,
|
|
@@ -97,35 +88,30 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
|
|
|
97
88
|
exactMinBookingDays,
|
|
98
89
|
minBookingDate,
|
|
99
90
|
maxBookingDate,
|
|
100
|
-
isDateBlocked: disabledDatesByUser
|
|
91
|
+
isDateBlocked: disabledDatesByUser,
|
|
101
92
|
startDate: date,
|
|
102
93
|
endDate: null,
|
|
103
94
|
})) {
|
|
104
95
|
onDatesChange({
|
|
105
96
|
startDate: date,
|
|
106
|
-
endDate: (0,
|
|
97
|
+
endDate: (0, dayjs_utils_1.dayjsEnRaw)(date)
|
|
107
98
|
.add(minBookingDays - 1, "day")
|
|
108
99
|
.toDate(),
|
|
109
100
|
focusedInput: null,
|
|
110
101
|
});
|
|
111
102
|
}
|
|
112
|
-
else if ((((focusedInput === exports.END_DATE && startDate && (0,
|
|
113
|
-
(focusedInput === exports.START_DATE && endDate && (0,
|
|
103
|
+
else if ((((focusedInput === exports.END_DATE && startDate && (0, dayjs_utils_1.dayjsEnRaw)(date).isBefore(startDate)) ||
|
|
104
|
+
(focusedInput === exports.START_DATE && endDate && (0, dayjs_utils_1.dayjsEnRaw)(date).isAfter(endDate))) &&
|
|
114
105
|
!exactMinBookingDays &&
|
|
115
106
|
(0, can_select_range_1.canSelectRange)({
|
|
116
107
|
minBookingDays,
|
|
117
|
-
isDateBlocked: disabledDatesByUser
|
|
108
|
+
isDateBlocked: disabledDatesByUser,
|
|
118
109
|
startDate: date,
|
|
119
110
|
endDate: null,
|
|
120
111
|
})) ||
|
|
121
112
|
(focusedInput === exports.START_DATE &&
|
|
122
113
|
!exactMinBookingDays &&
|
|
123
|
-
(0, can_select_range_1.canSelectRange)({
|
|
124
|
-
minBookingDays,
|
|
125
|
-
isDateBlocked: disabledDatesByUser !== null && disabledDatesByUser !== void 0 ? disabledDatesByUser : (() => false),
|
|
126
|
-
endDate,
|
|
127
|
-
startDate: date,
|
|
128
|
-
}))) {
|
|
114
|
+
(0, can_select_range_1.canSelectRange)({ minBookingDays, isDateBlocked: disabledDatesByUser, endDate, startDate: date }))) {
|
|
129
115
|
onDatesChange({
|
|
130
116
|
endDate: null,
|
|
131
117
|
startDate: date,
|
|
@@ -136,7 +122,7 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
|
|
|
136
122
|
!exactMinBookingDays &&
|
|
137
123
|
(0, can_select_range_1.canSelectRange)({
|
|
138
124
|
minBookingDays,
|
|
139
|
-
isDateBlocked: disabledDatesByUser
|
|
125
|
+
isDateBlocked: disabledDatesByUser,
|
|
140
126
|
endDate: null,
|
|
141
127
|
startDate: date,
|
|
142
128
|
})) {
|
|
@@ -148,14 +134,9 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
|
|
|
148
134
|
}
|
|
149
135
|
else if (focusedInput === exports.END_DATE &&
|
|
150
136
|
startDate &&
|
|
151
|
-
!(0,
|
|
137
|
+
!(0, dayjs_utils_1.dayjsEnRaw)(date).isBefore(startDate) &&
|
|
152
138
|
!exactMinBookingDays &&
|
|
153
|
-
(0, can_select_range_1.canSelectRange)({
|
|
154
|
-
minBookingDays,
|
|
155
|
-
isDateBlocked: disabledDatesByUser !== null && disabledDatesByUser !== void 0 ? disabledDatesByUser : (() => false),
|
|
156
|
-
startDate,
|
|
157
|
-
endDate: date,
|
|
158
|
-
})) {
|
|
139
|
+
(0, can_select_range_1.canSelectRange)({ minBookingDays, isDateBlocked: disabledDatesByUser, startDate, endDate: date })) {
|
|
159
140
|
onDatesChange({
|
|
160
141
|
startDate,
|
|
161
142
|
endDate: date,
|
|
@@ -163,7 +144,7 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
|
|
|
163
144
|
});
|
|
164
145
|
}
|
|
165
146
|
if (focusedInput !== exports.END_DATE &&
|
|
166
|
-
(!focusedDate || !(0,
|
|
147
|
+
(!focusedDate || !(0, dayjs_utils_1.dayjsEnRaw)(date).isSame(focusedDate, "month")) &&
|
|
167
148
|
changeActiveMonthOnSelect) {
|
|
168
149
|
setActiveMonths((0, get_initial_months_1.getInitialMonths)(numberOfMonths, date));
|
|
169
150
|
}
|
|
@@ -174,7 +155,7 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
|
|
|
174
155
|
exactMinBookingDays,
|
|
175
156
|
minBookingDate,
|
|
176
157
|
maxBookingDate,
|
|
177
|
-
isDateBlocked: disabledDatesByUser
|
|
158
|
+
isDateBlocked: disabledDatesByUser,
|
|
178
159
|
startDate: start,
|
|
179
160
|
endDate: end,
|
|
180
161
|
})) {
|
|
@@ -185,7 +166,7 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
|
|
|
185
166
|
});
|
|
186
167
|
}
|
|
187
168
|
if (focusedInput !== exports.END_DATE &&
|
|
188
|
-
(!focusedDate || !(0,
|
|
169
|
+
(!focusedDate || !(0, dayjs_utils_1.dayjsEnRaw)(start).isSame(focusedDate, "month")) &&
|
|
189
170
|
changeActiveMonthOnSelect) {
|
|
190
171
|
setActiveMonths((0, get_initial_months_1.getInitialMonths)(numberOfMonths, start));
|
|
191
172
|
}
|
|
@@ -196,21 +177,20 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
|
|
|
196
177
|
setHoveredDate(null);
|
|
197
178
|
}
|
|
198
179
|
else {
|
|
199
|
-
const isNotBlocked = !_isDateBlocked(date) ||
|
|
200
|
-
(startDate && (0, date_fns_1.isSameDay)(new tz_1.TZDate(date, dayjs_en_1.DEFAULT_TIMEZONE), new tz_1.TZDate(startDate, dayjs_en_1.DEFAULT_TIMEZONE)));
|
|
180
|
+
const isNotBlocked = !_isDateBlocked(date) || (startDate && (0, dayjs_utils_1.dayjsEnRaw)(date).isSame(startDate, "day"));
|
|
201
181
|
const isHoveredDateAfterOrEqualMinDate = minBookingDate
|
|
202
|
-
? !(0,
|
|
203
|
-
: true;
|
|
204
|
-
const isHoveredDateBeforeOrEqualMaxDate = maxBookingDate
|
|
205
|
-
? !(0, date_fns_1.isAfter)(new tz_1.TZDate(date, dayjs_en_1.DEFAULT_TIMEZONE), new tz_1.TZDate(maxBookingDate, dayjs_en_1.DEFAULT_TIMEZONE))
|
|
182
|
+
? !(0, dayjs_utils_1.dayjsEnRaw)(date).isBefore((0, dayjs_utils_1.dayjsEnRaw)(minBookingDate).subtract(1, "day"))
|
|
206
183
|
: true;
|
|
184
|
+
const isHoveredDateBeforeOrEqualMaxDate = maxBookingDate ? !(0, dayjs_utils_1.dayjsEnRaw)(date).isAfter(maxBookingDate) : true;
|
|
207
185
|
// Exact minimal booking days
|
|
208
|
-
const potentialEndDate = (0,
|
|
186
|
+
const potentialEndDate = (0, dayjs_utils_1.dayjsEnRaw)(date)
|
|
187
|
+
.add(minBookingDays - 1, "day")
|
|
188
|
+
.toDate();
|
|
209
189
|
const isPotentialEndDateAfterOrEqualMinDate = minBookingDate
|
|
210
|
-
? !(0,
|
|
190
|
+
? !(0, dayjs_utils_1.dayjsEnRaw)(potentialEndDate).isBefore(minBookingDate)
|
|
211
191
|
: true;
|
|
212
192
|
const isPotentialEndDateBeforeOrEqualMaxDate = maxBookingDate
|
|
213
|
-
? !(0,
|
|
193
|
+
? !(0, dayjs_utils_1.dayjsEnRaw)(potentialEndDate).isAfter(maxBookingDate)
|
|
214
194
|
: true;
|
|
215
195
|
const isExactAndInRange = exactMinBookingDays &&
|
|
216
196
|
minBookingDays > 1 &&
|
|
@@ -226,11 +206,9 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
|
|
|
226
206
|
isHoveredDateBeforeOrEqualMaxDate;
|
|
227
207
|
// Is start date hovered and in range
|
|
228
208
|
const isMinBookingDaysInRange = minBookingDays > 1 && startDate
|
|
229
|
-
?
|
|
209
|
+
? (0, dayjs_utils_1.dayjsEnRaw)(date).isBetween(startDate, (0, dayjs_utils_1.dayjsEnRaw)(startDate).add(minBookingDays - 2, "day"))
|
|
230
210
|
: true;
|
|
231
|
-
const isStartDateHoveredAndInRange = startDate &&
|
|
232
|
-
(0, date_fns_1.isSameDay)(new tz_1.TZDate(date, dayjs_en_1.DEFAULT_TIMEZONE), new tz_1.TZDate(startDate, dayjs_en_1.DEFAULT_TIMEZONE)) &&
|
|
233
|
-
isMinBookingDaysInRange;
|
|
211
|
+
const isStartDateHoveredAndInRange = startDate && (0, dayjs_utils_1.dayjsEnRaw)(date).isSame(startDate, "day") && isMinBookingDaysInRange;
|
|
234
212
|
if (isNotBlocked && (isExactAndInRange || isInRange || isStartDateHoveredAndInRange)) {
|
|
235
213
|
setHoveredDate(date);
|
|
236
214
|
}
|
|
@@ -19,8 +19,8 @@ test("base data", () => {
|
|
|
19
19
|
expect(result.current.focusedDate).toBe(null);
|
|
20
20
|
expect(result.current.hoveredDate).toBe(null);
|
|
21
21
|
expect(result.current.activeMonths).toStrictEqual([
|
|
22
|
-
{ date: new Date("2021-09-01T00:00:
|
|
23
|
-
{ date: new Date("2021-10-01T00:00:
|
|
22
|
+
{ date: new Date("2021-09-01T00:00:00Z"), month: 8, year: 2021 },
|
|
23
|
+
{ date: new Date("2021-10-01T00:00:00Z"), month: 9, year: 2021 },
|
|
24
24
|
]);
|
|
25
25
|
expect(result.current.isDateBlocked(new Date("2020-01-01"))).toBe(false);
|
|
26
26
|
expect(result.current.isDateBlocked(new Date("2019-12-31"))).toBe(true);
|
package/hooks/use-day.js
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useDay = useDay;
|
|
4
|
-
const tz_1 = require("@date-fns/tz");
|
|
5
4
|
const empty_array_1 = require("@uxf/core/constants/empty-array");
|
|
6
|
-
const date_fns_1 = require("date-fns");
|
|
7
5
|
const react_1 = require("react");
|
|
8
|
-
const
|
|
6
|
+
const dayjs_utils_1 = require("../utils/dayjs-utils");
|
|
9
7
|
const get_date_invervals_1 = require("../utils/get-date-invervals");
|
|
10
8
|
function useDay({ date, datesConfig, dayRef, focusedDate, isDateBlocked, isDateFocused, isDateHovered, isDateInsideRange, isDateSelected, onDateFocus, onDateHover, onDateSelect, preventScroll, unavailableDates, }) {
|
|
11
9
|
var _a;
|
|
@@ -15,7 +13,7 @@ function useDay({ date, datesConfig, dayRef, focusedDate, isDateBlocked, isDateF
|
|
|
15
13
|
const onClick = (0, react_1.useCallback)(() => onDateSelect(date), [date, onDateSelect]);
|
|
16
14
|
const onMouseEnter = (0, react_1.useCallback)(() => onDateHover(date), [date, onDateHover]);
|
|
17
15
|
const disabled = isDateBlocked(date) && !isDateHovered(date);
|
|
18
|
-
const isToday = (0,
|
|
16
|
+
const isToday = (0, dayjs_utils_1.dayjsEnWithTz)().isSame(date, "day");
|
|
19
17
|
(0, react_1.useEffect)(() => {
|
|
20
18
|
if (dayRef && dayRef.current && isDateFocused(date)) {
|
|
21
19
|
dayRef.current.focus({
|
|
@@ -28,28 +26,28 @@ function useDay({ date, datesConfig, dayRef, focusedDate, isDateBlocked, isDateF
|
|
|
28
26
|
e.preventDefault();
|
|
29
27
|
switch (e.key) {
|
|
30
28
|
case "ArrowRight":
|
|
31
|
-
onDateFocus((0,
|
|
29
|
+
onDateFocus((0, dayjs_utils_1.dayjsEnRaw)(date).add(1, "day").toDate());
|
|
32
30
|
break;
|
|
33
31
|
case "ArrowLeft":
|
|
34
|
-
onDateFocus((0,
|
|
32
|
+
onDateFocus((0, dayjs_utils_1.dayjsEnRaw)(date).subtract(1, "day").toDate());
|
|
35
33
|
break;
|
|
36
34
|
case "ArrowUp":
|
|
37
|
-
onDateFocus((0,
|
|
35
|
+
onDateFocus((0, dayjs_utils_1.dayjsEnRaw)(date).subtract(7, "day").toDate());
|
|
38
36
|
break;
|
|
39
37
|
case "ArrowDown":
|
|
40
|
-
onDateFocus((0,
|
|
38
|
+
onDateFocus((0, dayjs_utils_1.dayjsEnRaw)(date).add(7, "day").toDate());
|
|
41
39
|
break;
|
|
42
40
|
}
|
|
43
41
|
}
|
|
44
42
|
}, [date, onDateFocus]);
|
|
45
43
|
const dateIntervals = (0, get_date_invervals_1.getDateIntervals)(disabledDates);
|
|
46
44
|
const _isFirstUnavailableDate = () => {
|
|
47
|
-
return dateIntervals.some((interval) => (0,
|
|
45
|
+
return dateIntervals.some((interval) => (0, dayjs_utils_1.dayjsEnRaw)(interval.start).isSame(date, "day"));
|
|
48
46
|
};
|
|
49
47
|
const _isLastUnavailableDate = () => {
|
|
50
|
-
return dateIntervals.some((interval) => (0,
|
|
48
|
+
return dateIntervals.some((interval) => (0, dayjs_utils_1.dayjsEnRaw)(interval.end).isSame(date, "day"));
|
|
51
49
|
};
|
|
52
|
-
const applicableDatesConfigs = datesConfig === null || datesConfig === void 0 ? void 0 : datesConfig.filter((config) => config.dates.some((configDay) => (0,
|
|
50
|
+
const applicableDatesConfigs = datesConfig === null || datesConfig === void 0 ? void 0 : datesConfig.filter((config) => config.dates.some((configDay) => (0, dayjs_utils_1.dayjsEnRaw)(configDay).isSame(date, "day")));
|
|
53
51
|
const flags = applicableDatesConfigs === null || applicableDatesConfigs === void 0 ? void 0 : applicableDatesConfigs.reduce((acc, curr) => {
|
|
54
52
|
if (!curr.flag) {
|
|
55
53
|
return acc;
|
|
@@ -57,8 +55,8 @@ function useDay({ date, datesConfig, dayRef, focusedDate, isDateBlocked, isDateF
|
|
|
57
55
|
const intervals = (0, get_date_invervals_1.getDateIntervals)(curr.dates);
|
|
58
56
|
acc.push({
|
|
59
57
|
flag: curr.flag,
|
|
60
|
-
isFirst: intervals.some((interval) => (0,
|
|
61
|
-
isLast: intervals.some((interval) => (0,
|
|
58
|
+
isFirst: intervals.some((interval) => (0, dayjs_utils_1.dayjsEnRaw)(interval.start).isSame(date, "day")),
|
|
59
|
+
isLast: intervals.some((interval) => (0, dayjs_utils_1.dayjsEnRaw)(interval.end).isSame(date, "day")),
|
|
62
60
|
});
|
|
63
61
|
return acc;
|
|
64
62
|
}, []);
|
package/hooks/use-day.test.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const react_1 = require("@testing-library/react");
|
|
4
4
|
const react_2 = require("react");
|
|
5
|
-
const
|
|
5
|
+
const dayjs_utils_1 = require("../utils/dayjs-utils");
|
|
6
6
|
const use_day_1 = require("./use-day");
|
|
7
7
|
const e = { preventDefault: () => undefined, key: undefined };
|
|
8
8
|
beforeAll(() => {
|
|
@@ -97,10 +97,10 @@ test("actions", () => {
|
|
|
97
97
|
dayRef: ref.current,
|
|
98
98
|
focusedDate: null,
|
|
99
99
|
isDateBlocked: () => false,
|
|
100
|
-
isDateFocused: (date) => (0,
|
|
101
|
-
isDateHovered: (date) => (0,
|
|
102
|
-
isDateInsideRange: (date) => (0,
|
|
103
|
-
isDateSelected: (date) => (0,
|
|
100
|
+
isDateFocused: (date) => (0, dayjs_utils_1.dayjsEnWithTz)(date).isSame(focusedDate, "day"),
|
|
101
|
+
isDateHovered: (date) => (0, dayjs_utils_1.dayjsEnWithTz)(date).isSame(hoveredDate, "day"),
|
|
102
|
+
isDateInsideRange: (date) => (0, dayjs_utils_1.dayjsEnWithTz)(date).isSame(insideRangeDate, "day"),
|
|
103
|
+
isDateSelected: (date) => (0, dayjs_utils_1.dayjsEnWithTz)(date).isSame(selectedDate, "day"),
|
|
104
104
|
onDateFocus: (date) => (focusedDate = date),
|
|
105
105
|
onDateHover: (date) => (hoveredDate = date),
|
|
106
106
|
onDateSelect: (date) => (selectedDate = date),
|
package/hooks/use-decade.js
CHANGED
|
@@ -4,16 +4,16 @@ exports.decadeLabelFormatFn = exports.yearLabelFormatFn = void 0;
|
|
|
4
4
|
exports.useDecade = useDecade;
|
|
5
5
|
const react_1 = require("react");
|
|
6
6
|
const create_date_string_1 = require("../utils/create-date-string");
|
|
7
|
-
const
|
|
7
|
+
const dayjs_utils_1 = require("../utils/dayjs-utils");
|
|
8
8
|
const get_years_1 = require("../utils/get-years");
|
|
9
|
-
const yearLabelFormatFn = (date) => (0,
|
|
9
|
+
const yearLabelFormatFn = (date) => (0, dayjs_utils_1.dayjsEnWithTz)(date).format("YYYY");
|
|
10
10
|
exports.yearLabelFormatFn = yearLabelFormatFn;
|
|
11
|
-
const decadeLabelFormatFn = (start, end) => `${(0,
|
|
11
|
+
const decadeLabelFormatFn = (start, end) => `${(0, dayjs_utils_1.dayjsEnWithTz)(start).format("YYYY")} \u2013 ${(0, dayjs_utils_1.dayjsEnWithTz)(end).format("YYYY")}`;
|
|
12
12
|
exports.decadeLabelFormatFn = decadeLabelFormatFn;
|
|
13
13
|
function useDecade({ yearLabelFormat = exports.yearLabelFormatFn, decadeLabelFormat = exports.decadeLabelFormatFn, year, }) {
|
|
14
14
|
const currentYear = new Date((0, create_date_string_1.createDateString)(year, 0));
|
|
15
|
-
const startYear = (0,
|
|
16
|
-
const endYear = (0,
|
|
15
|
+
const startYear = (0, dayjs_utils_1.dayjsEnWithTz)(currentYear).subtract(4, "years").startOf("year").toDate();
|
|
16
|
+
const endYear = (0, dayjs_utils_1.dayjsEnWithTz)(currentYear).add(4, "years").endOf("year").toDate();
|
|
17
17
|
const years = (0, react_1.useMemo)(() => (0, get_years_1.getYears)({ startYear, endYear, yearLabelFormat }), [endYear, startYear, yearLabelFormat]);
|
|
18
18
|
return {
|
|
19
19
|
years,
|
package/hooks/use-decade.test.js
CHANGED
|
@@ -1,41 +1,41 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const react_1 = require("@testing-library/react");
|
|
4
|
-
const
|
|
4
|
+
const dayjs_utils_1 = require("../utils/dayjs-utils");
|
|
5
5
|
const use_decade_1 = require("./use-decade");
|
|
6
6
|
test("useDecade", () => {
|
|
7
7
|
const { result } = (0, react_1.renderHook)(() => (0, use_decade_1.useDecade)({
|
|
8
8
|
year: 2021,
|
|
9
9
|
}));
|
|
10
10
|
expect(result.current.decadeLabel).toBe("2017 – 2025");
|
|
11
|
-
expect(result.current.years
|
|
12
|
-
{ date: new Date("2017-01-01T00:00:
|
|
13
|
-
{ date: new Date("2018-01-01T00:00:
|
|
14
|
-
{ date: new Date("2019-01-01T00:00:
|
|
15
|
-
{ date: new Date("2020-01-01T00:00:
|
|
16
|
-
{ date: new Date("2021-01-01T00:00:
|
|
17
|
-
{ date: new Date("2022-01-01T00:00:
|
|
18
|
-
{ date: new Date("2023-01-01T00:00:
|
|
19
|
-
{ date: new Date("2024-01-01T00:00:
|
|
20
|
-
{ date: new Date("2025-01-01T00:00:
|
|
11
|
+
expect(result.current.years).toStrictEqual([
|
|
12
|
+
{ date: new Date("2017-01-01T00:00:00Z"), yearLabel: "2017" },
|
|
13
|
+
{ date: new Date("2018-01-01T00:00:00Z"), yearLabel: "2018" },
|
|
14
|
+
{ date: new Date("2019-01-01T00:00:00Z"), yearLabel: "2019" },
|
|
15
|
+
{ date: new Date("2020-01-01T00:00:00Z"), yearLabel: "2020" },
|
|
16
|
+
{ date: new Date("2021-01-01T00:00:00Z"), yearLabel: "2021" },
|
|
17
|
+
{ date: new Date("2022-01-01T00:00:00Z"), yearLabel: "2022" },
|
|
18
|
+
{ date: new Date("2023-01-01T00:00:00Z"), yearLabel: "2023" },
|
|
19
|
+
{ date: new Date("2024-01-01T00:00:00Z"), yearLabel: "2024" },
|
|
20
|
+
{ date: new Date("2025-01-01T00:00:00Z"), yearLabel: "2025" },
|
|
21
21
|
]);
|
|
22
22
|
});
|
|
23
23
|
test("useDecade with custom formats", () => {
|
|
24
24
|
const { result } = (0, react_1.renderHook)(() => (0, use_decade_1.useDecade)({
|
|
25
25
|
year: 2021,
|
|
26
|
-
decadeLabelFormat: (start, end) => `${(0,
|
|
27
|
-
yearLabelFormat: (date) => (0,
|
|
26
|
+
decadeLabelFormat: (start, end) => `${(0, dayjs_utils_1.dayjsEnWithTz)(start).format("YY")} - ${(0, dayjs_utils_1.dayjsEnWithTz)(end).format("YY")}`,
|
|
27
|
+
yearLabelFormat: (date) => (0, dayjs_utils_1.dayjsEnWithTz)(date).format("YY"),
|
|
28
28
|
}));
|
|
29
29
|
expect(result.current.decadeLabel).toBe("17 - 25");
|
|
30
|
-
expect(result.current.years
|
|
31
|
-
{ date: new Date("2017-01-01T00:00:
|
|
32
|
-
{ date: new Date("2018-01-01T00:00:
|
|
33
|
-
{ date: new Date("2019-01-01T00:00:
|
|
34
|
-
{ date: new Date("2020-01-01T00:00:
|
|
35
|
-
{ date: new Date("2021-01-01T00:00:
|
|
36
|
-
{ date: new Date("2022-01-01T00:00:
|
|
37
|
-
{ date: new Date("2023-01-01T00:00:
|
|
38
|
-
{ date: new Date("2024-01-01T00:00:
|
|
39
|
-
{ date: new Date("2025-01-01T00:00:
|
|
30
|
+
expect(result.current.years).toStrictEqual([
|
|
31
|
+
{ date: new Date("2017-01-01T00:00:00Z"), yearLabel: "17" },
|
|
32
|
+
{ date: new Date("2018-01-01T00:00:00Z"), yearLabel: "18" },
|
|
33
|
+
{ date: new Date("2019-01-01T00:00:00Z"), yearLabel: "19" },
|
|
34
|
+
{ date: new Date("2020-01-01T00:00:00Z"), yearLabel: "20" },
|
|
35
|
+
{ date: new Date("2021-01-01T00:00:00Z"), yearLabel: "21" },
|
|
36
|
+
{ date: new Date("2022-01-01T00:00:00Z"), yearLabel: "22" },
|
|
37
|
+
{ date: new Date("2023-01-01T00:00:00Z"), yearLabel: "23" },
|
|
38
|
+
{ date: new Date("2024-01-01T00:00:00Z"), yearLabel: "24" },
|
|
39
|
+
{ date: new Date("2025-01-01T00:00:00Z"), yearLabel: "25" },
|
|
40
40
|
]);
|
|
41
41
|
});
|
package/hooks/use-month.js
CHANGED
|
@@ -4,14 +4,14 @@ exports.monthLabelFormatFn = exports.weekdayLabelFormatFn = exports.dayLabelForm
|
|
|
4
4
|
exports.useMonth = useMonth;
|
|
5
5
|
const react_1 = require("react");
|
|
6
6
|
const create_date_string_1 = require("../utils/create-date-string");
|
|
7
|
-
const
|
|
7
|
+
const dayjs_utils_1 = require("../utils/dayjs-utils");
|
|
8
8
|
const get_days_1 = require("../utils/get-days");
|
|
9
9
|
const get_weekday_labels_1 = require("../utils/get-weekday-labels");
|
|
10
|
-
const dayLabelFormatFn = (date) => (0,
|
|
10
|
+
const dayLabelFormatFn = (date) => (0, dayjs_utils_1.dayjsEnWithTz)(date).format("DD");
|
|
11
11
|
exports.dayLabelFormatFn = dayLabelFormatFn;
|
|
12
|
-
const weekdayLabelFormatFn = (date) => (0,
|
|
12
|
+
const weekdayLabelFormatFn = (date) => (0, dayjs_utils_1.dayjsEnWithTz)(date).format("dd"); // localization
|
|
13
13
|
exports.weekdayLabelFormatFn = weekdayLabelFormatFn;
|
|
14
|
-
const monthLabelFormatFn = (date) => (0,
|
|
14
|
+
const monthLabelFormatFn = (date) => (0, dayjs_utils_1.dayjsEnWithTz)(date).format("MMMM YYYY");
|
|
15
15
|
exports.monthLabelFormatFn = monthLabelFormatFn;
|
|
16
16
|
function useMonth({ dayLabelFormat = exports.dayLabelFormatFn, firstDayOfWeek = 0, month, monthLabelFormat = exports.monthLabelFormatFn, weekdayLabelFormat = exports.weekdayLabelFormatFn, year, }) {
|
|
17
17
|
const days = (0, react_1.useMemo)(() => (0, get_days_1.getDays)({ year, month, firstDayOfWeek, dayLabelFormat }), [year, month, firstDayOfWeek, dayLabelFormat]);
|