@uxf/datepicker 11.88.0 → 11.88.2

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.
Files changed (6) hide show
  1. package/hooks/use-date-picker-navigation.test.js +11 -8
  2. package/hooks/use-date-picker.test.js +6 -2
  3. package/hooks/use-date-range-picker.test.js +76 -63
  4. package/hooks/use-time-picker.test.js +21 -13
  5. package/package.json +1 -1
  6. package/utils/get-date-intervals.test.js +5 -5
package/hooks/use-date-picker-navigation.test.js CHANGED
@@ -36,14 +36,17 @@ test("base data with min and max date", () => {
36
36
  });
37
37
  test("actions", () => {
38
38
  const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)([{ month: 8, year: 2021, date: new Date("2021-09-01") }]));
39
- const { result, rerender } = (0, react_1.renderHook)(() => (0, use_date_picker_navigation_1.useDatePickerNavigation)({
40
- activeMonths: state.current[0],
41
- setActiveMonths: (data) => state.current[1](data),
42
- numberOfMonths: 1,
43
- setFocusedDate: () => undefined,
44
- minBookingDate: new Date("2020-12-25"),
45
- maxBookingDate: new Date("2022-03-11"),
46
- }));
39
+ const { result, rerender } = (0, react_1.renderHook)(() => {
40
+ const [activeMonths, setActiveMonths] = state.current;
41
+ return (0, use_date_picker_navigation_1.useDatePickerNavigation)({
42
+ activeMonths,
43
+ setActiveMonths,
44
+ numberOfMonths: 1,
45
+ setFocusedDate: () => undefined,
46
+ minBookingDate: new Date("2020-12-25"),
47
+ maxBookingDate: new Date("2022-03-11"),
48
+ });
49
+ });
47
50
  // go to year 2020
48
51
  expect(result.current.canGoToPrevYear).toBe(true);
49
52
  (0, react_1.act)(() => {
package/hooks/use-date-picker.test.js CHANGED
@@ -26,7 +26,8 @@ test("base data", () => {
26
26
  test("date focus", () => {
27
27
  const BASE_DATE = new Date("2021-09-15");
28
28
  const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)(BASE_DATE));
29
- const { result } = (0, react_1.renderHook)(() => (0, use_date_picker_1.useDatePicker)({ selectedDate: state.current[0], onDateChange: (date) => state.current[1](date) }));
29
+ const [selectedDate, setSelectedDate] = state.current;
30
+ const { result } = (0, react_1.renderHook)(() => (0, use_date_picker_1.useDatePicker)({ selectedDate, onDateChange: setSelectedDate }));
30
31
  const NEW_DATE = new Date("2022-12-22");
31
32
  expect(result.current.isDateFocused(BASE_DATE)).toBe(true);
32
33
  expect(result.current.isDateFocused(NEW_DATE)).toBe(false);
@@ -39,7 +40,10 @@ test("date focus", () => {
39
40
  test("date select", () => {
40
41
  const BASE_DATE = new Date("2021-09-15");
41
42
  const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)(BASE_DATE));
42
- const { result, rerender } = (0, react_1.renderHook)(() => (0, use_date_picker_1.useDatePicker)({ selectedDate: state.current[0], onDateChange: (date) => state.current[1](date) }));
43
+ const { result, rerender } = (0, react_1.renderHook)(() => {
44
+ const [selectedDate, setSelectedDate] = state.current;
45
+ return (0, use_date_picker_1.useDatePicker)({ selectedDate, onDateChange: setSelectedDate });
46
+ });
43
47
  const NEW_DATE = new Date("2022-12-22");
44
48
  expect(result.current.isDateSelected(BASE_DATE)).toBe(true);
45
49
  expect(result.current.isDateSelected(NEW_DATE)).toBe(false);
package/hooks/use-date-range-picker.test.js CHANGED
@@ -19,16 +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
- {
23
- date: new Date("2021-09-01"),
24
- month: 8,
25
- year: 2021,
26
- },
27
- {
28
- date: new Date("2021-10-01"),
29
- month: 9,
30
- year: 2021,
31
- },
22
+ { date: new Date("2021-09-01"), month: 8, year: 2021 },
23
+ { date: new Date("2021-10-01"), month: 9, year: 2021 },
32
24
  ]);
33
25
  expect(result.current.isDateBlocked(new Date("2020-01-01"))).toBe(false);
34
26
  expect(result.current.isDateBlocked(new Date("2019-12-31"))).toBe(true);
@@ -36,11 +28,12 @@ test("base data", () => {
36
28
  test("date focus", () => {
37
29
  const BASE_DATE = new Date("2021-09-15");
38
30
  const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)({ startDate: null, endDate: null, focusedInput: "startDate" }));
31
+ const [{ startDate, endDate, focusedInput }, onDatesChange] = state.current;
39
32
  const { result } = (0, react_1.renderHook)(() => (0, use_date_range_picker_1.useDateRangePicker)({
40
- startDate: state.current[0].startDate,
41
- endDate: state.current[0].endDate,
42
- onDatesChange: (data) => state.current[1](data),
43
- focusedInput: state.current[0].focusedInput,
33
+ startDate,
34
+ endDate,
35
+ onDatesChange,
36
+ focusedInput,
44
37
  minBookingDate: new Date("2020-01-01"),
45
38
  }));
46
39
  const NEW_DATE = new Date("2022-12-22");
@@ -55,13 +48,16 @@ test("date focus", () => {
55
48
  test("date select", () => {
56
49
  const BASE_DATE = new Date("2021-09-15");
57
50
  const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)({ startDate: null, endDate: null, focusedInput: "startDate" }));
58
- const { result, rerender } = (0, react_1.renderHook)(() => (0, use_date_range_picker_1.useDateRangePicker)({
59
- startDate: state.current[0].startDate,
60
- endDate: state.current[0].endDate,
61
- onDatesChange: (data) => state.current[1](data),
62
- focusedInput: state.current[0].focusedInput,
63
- minBookingDate: new Date("2020-01-01"),
64
- }));
51
+ const { result, rerender } = (0, react_1.renderHook)(() => {
52
+ const [{ startDate, endDate, focusedInput }, onDatesChange] = state.current;
53
+ return (0, use_date_range_picker_1.useDateRangePicker)({
54
+ startDate,
55
+ endDate,
56
+ onDatesChange,
57
+ focusedInput,
58
+ minBookingDate: new Date("2020-01-01"),
59
+ });
60
+ });
65
61
  const NEW_DATE = new Date("2022-12-22");
66
62
  expect(result.current.isDateSelected(BASE_DATE)).toBe(false);
67
63
  expect(result.current.isDateSelected(NEW_DATE)).toBe(false);
@@ -87,13 +83,16 @@ test("date select", () => {
87
83
  });
88
84
  test("date range select - valid range", () => {
89
85
  const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)({ startDate: null, endDate: null, focusedInput: "startDate" }));
90
- const { result, rerender } = (0, react_1.renderHook)(() => (0, use_date_range_picker_1.useDateRangePicker)({
91
- startDate: state.current[0].startDate,
92
- endDate: state.current[0].endDate,
93
- onDatesChange: (data) => state.current[1](data),
94
- focusedInput: state.current[0].focusedInput,
95
- minBookingDate: new Date("2020-01-01"),
96
- }));
86
+ const { result, rerender } = (0, react_1.renderHook)(() => {
87
+ const [{ startDate, endDate, focusedInput }, onDatesChange] = state.current;
88
+ return (0, use_date_range_picker_1.useDateRangePicker)({
89
+ startDate,
90
+ endDate,
91
+ onDatesChange,
92
+ focusedInput,
93
+ minBookingDate: new Date("2020-01-01"),
94
+ });
95
+ });
97
96
  const START_DATE = new Date("2021-09-15");
98
97
  const END_DATE = new Date("2021-09-20");
99
98
  (0, react_1.act)(() => {
@@ -106,31 +105,38 @@ test("date range select - valid range", () => {
106
105
  });
107
106
  test("date range select - with null end date", () => {
108
107
  const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)({ startDate: null, endDate: null, focusedInput: "startDate" }));
109
- const { result, rerender } = (0, react_1.renderHook)(() => (0, use_date_range_picker_1.useDateRangePicker)({
110
- startDate: state.current[0].startDate,
111
- endDate: state.current[0].endDate,
112
- onDatesChange: (data) => state.current[1](data),
113
- focusedInput: state.current[0].focusedInput,
114
- minBookingDate: new Date("2020-01-01"),
115
- }));
108
+ const { result, rerender } = (0, react_1.renderHook)(() => {
109
+ const [{ startDate, endDate, focusedInput }, onDatesChange] = state.current;
110
+ return (0, use_date_range_picker_1.useDateRangePicker)({
111
+ startDate,
112
+ endDate,
113
+ onDatesChange,
114
+ focusedInput,
115
+ minBookingDate: new Date("2020-01-01"),
116
+ });
117
+ });
116
118
  const START_DATE = new Date("2021-09-15");
117
119
  (0, react_1.act)(() => {
118
120
  result.current.onDatesSelect(START_DATE, null);
119
121
  rerender();
120
122
  });
121
123
  expect(result.current.isStartDate(START_DATE)).toBe(true);
122
- expect(state.current[0].endDate).toBe(null);
124
+ const [{ endDate: newEndDate }] = state.current;
125
+ expect(newEndDate).toBe(null);
123
126
  });
124
127
  test("date range select - with minBookingDays", () => {
125
128
  const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)({ startDate: null, endDate: null, focusedInput: "startDate" }));
126
- const { result, rerender } = (0, react_1.renderHook)(() => (0, use_date_range_picker_1.useDateRangePicker)({
127
- startDate: state.current[0].startDate,
128
- endDate: state.current[0].endDate,
129
- onDatesChange: (data) => state.current[1](data),
130
- focusedInput: state.current[0].focusedInput,
131
- minBookingDate: new Date("2020-01-01"),
132
- minBookingDays: 3,
133
- }));
129
+ const { result, rerender } = (0, react_1.renderHook)(() => {
130
+ const [{ startDate, endDate, focusedInput }, onDatesChange] = state.current;
131
+ return (0, use_date_range_picker_1.useDateRangePicker)({
132
+ startDate,
133
+ endDate,
134
+ onDatesChange,
135
+ focusedInput,
136
+ minBookingDate: new Date("2020-01-01"),
137
+ minBookingDays: 3,
138
+ });
139
+ });
134
140
  const START_DATE = new Date("2021-09-15");
135
141
  const END_DATE = new Date("2021-09-17");
136
142
  (0, react_1.act)(() => {
@@ -160,15 +166,18 @@ test("date range select - invalid range with minBookingDays", () => {
160
166
  });
161
167
  test("date range select - with exactMinBookingDays", () => {
162
168
  const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)({ startDate: null, endDate: null, focusedInput: "startDate" }));
163
- const { result, rerender } = (0, react_1.renderHook)(() => (0, use_date_range_picker_1.useDateRangePicker)({
164
- startDate: state.current[0].startDate,
165
- endDate: state.current[0].endDate,
166
- onDatesChange: (data) => state.current[1](data),
167
- focusedInput: state.current[0].focusedInput,
168
- minBookingDate: new Date("2020-01-01"),
169
- minBookingDays: 3,
170
- exactMinBookingDays: true,
171
- }));
169
+ const { result, rerender } = (0, react_1.renderHook)(() => {
170
+ const [{ startDate, endDate, focusedInput }, onDatesChange] = state.current;
171
+ return (0, use_date_range_picker_1.useDateRangePicker)({
172
+ startDate,
173
+ endDate,
174
+ onDatesChange,
175
+ focusedInput,
176
+ minBookingDate: new Date("2020-01-01"),
177
+ minBookingDays: 3,
178
+ exactMinBookingDays: true,
179
+ });
180
+ });
172
181
  const START_DATE = new Date("2021-09-15");
173
182
  const END_DATE = new Date("2021-09-17");
174
183
  (0, react_1.act)(() => {
@@ -197,15 +206,19 @@ test("date range select - blocked dates in range", () => {
197
206
  expect(onDatesChange).not.toHaveBeenCalled();
198
207
  });
199
208
  test("date range select - with changeActiveMonthOnSelect", () => {
209
+ var _a, _b;
200
210
  const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)({ startDate: null, endDate: null, focusedInput: "startDate" }));
201
- const { result, rerender } = (0, react_1.renderHook)(() => (0, use_date_range_picker_1.useDateRangePicker)({
202
- startDate: state.current[0].startDate,
203
- endDate: state.current[0].endDate,
204
- onDatesChange: (data) => state.current[1](data),
205
- focusedInput: state.current[0].focusedInput,
206
- minBookingDate: new Date("2020-01-01"),
207
- changeActiveMonthOnSelect: true,
208
- }));
211
+ const { result, rerender } = (0, react_1.renderHook)(() => {
212
+ const [{ startDate, endDate, focusedInput }, onDatesChange] = state.current;
213
+ return (0, use_date_range_picker_1.useDateRangePicker)({
214
+ startDate,
215
+ endDate,
216
+ onDatesChange,
217
+ focusedInput,
218
+ minBookingDate: new Date("2020-01-01"),
219
+ changeActiveMonthOnSelect: true,
220
+ });
221
+ });
209
222
  const START_DATE = new Date("2022-12-15");
210
223
  const END_DATE = new Date("2022-12-20");
211
224
  const initialActiveMonths = result.current.activeMonths;
@@ -214,8 +227,8 @@ test("date range select - with changeActiveMonthOnSelect", () => {
214
227
  rerender();
215
228
  });
216
229
  // Active months should change to the selected date's month
217
- expect(result.current.activeMonths[0].year).toBe(2022);
218
- expect(result.current.activeMonths[0].month).toBe(11); // December is month 11
230
+ expect((_a = result.current.activeMonths.at(0)) === null || _a === void 0 ? void 0 : _a.year).toBe(2022);
231
+ expect((_b = result.current.activeMonths.at(0)) === null || _b === void 0 ? void 0 : _b.month).toBe(11); // December is month 11
219
232
  expect(result.current.activeMonths).not.toEqual(initialActiveMonths);
220
233
  });
221
234
  test("date range select - respects maxBookingDate", () => {
package/hooks/use-time-picker.test.js CHANGED
@@ -5,17 +5,15 @@ const react_2 = require("react");
5
5
  const use_time_picker_1 = require("./use-time-picker");
6
6
  test("base data", () => {
7
7
  const BASE_TIME = { hour: 12, minute: 57 };
8
- const { result } = (0, react_1.renderHook)(() => (0, use_time_picker_1.useTimePicker)({
9
- selectedTime: BASE_TIME,
10
- onTimeChange: () => undefined,
11
- }));
8
+ const { result } = (0, react_1.renderHook)(() => (0, use_time_picker_1.useTimePicker)({ selectedTime: BASE_TIME, onTimeChange: () => undefined }));
12
9
  expect(result.current.focusedHour).toBe(BASE_TIME.hour);
13
10
  expect(result.current.focusedMinute).toBe(BASE_TIME.minute);
14
11
  });
15
12
  test("time focus", () => {
16
13
  const BASE_TIME = { hour: 12, minute: 57 };
17
14
  const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)(BASE_TIME));
18
- const { result } = (0, react_1.renderHook)(() => (0, use_time_picker_1.useTimePicker)({ selectedTime: state.current[0], onTimeChange: (time) => state.current[1](time) }));
15
+ const [selectedTime, setSelectedTime] = state.current;
16
+ const { result } = (0, react_1.renderHook)(() => (0, use_time_picker_1.useTimePicker)({ selectedTime, onTimeChange: (time) => setSelectedTime(time) }));
19
17
  const NEW_TIME = { hour: 13, minute: 15 };
20
18
  expect(result.current.isHourFocused(BASE_TIME.hour)).toBe(true);
21
19
  expect(result.current.isHourFocused(NEW_TIME.hour)).toBe(false);
@@ -33,7 +31,10 @@ test("time focus", () => {
33
31
  test("time select", () => {
34
32
  const BASE_TIME = { hour: 12, minute: 57 };
35
33
  const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)(BASE_TIME));
36
- const { result, rerender } = (0, react_1.renderHook)(() => (0, use_time_picker_1.useTimePicker)({ selectedTime: state.current[0], onTimeChange: (time) => state.current[1](time) }));
34
+ const { result, rerender } = (0, react_1.renderHook)(() => {
35
+ const [selectedTime, setSelectedTime] = state.current;
36
+ return (0, use_time_picker_1.useTimePicker)({ selectedTime, onTimeChange: (time) => setSelectedTime(time) });
37
+ });
37
38
  const NEW_TIME = { hour: 13, minute: 15 };
38
39
  expect(result.current.isHourSelected(BASE_TIME.hour)).toBe(true);
39
40
  expect(result.current.isHourSelected(NEW_TIME.hour)).toBe(false);
@@ -51,35 +52,42 @@ test("time select", () => {
51
52
  test("time navigation", () => {
52
53
  const BASE_TIME = { hour: 1, minute: 58 };
53
54
  const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)(BASE_TIME));
54
- const { result, rerender } = (0, react_1.renderHook)(() => (0, use_time_picker_1.useTimePicker)({ selectedTime: state.current[0], onTimeChange: (time) => state.current[1](time) }));
55
+ const { result, rerender } = (0, react_1.renderHook)(() => {
56
+ const [selectedTime, setSelectedTime] = state.current;
57
+ return (0, use_time_picker_1.useTimePicker)({ selectedTime, onTimeChange: (time) => setSelectedTime(time) });
58
+ });
59
+ const getSelectedTime = () => {
60
+ const [selectedTime] = state.current;
61
+ return selectedTime;
62
+ };
55
63
  (0, react_1.act)(() => {
56
64
  result.current.goToPrevHour();
57
65
  rerender();
58
66
  });
59
- expect(state.current[0]).toStrictEqual({ hour: 0, minute: 58 });
67
+ expect(getSelectedTime()).toStrictEqual({ hour: 0, minute: 58 });
60
68
  (0, react_1.act)(() => {
61
69
  result.current.goToNextMinute();
62
70
  rerender();
63
71
  });
64
- expect(state.current[0]).toStrictEqual({ hour: 0, minute: 59 });
72
+ expect(getSelectedTime()).toStrictEqual({ hour: 0, minute: 59 });
65
73
  (0, react_1.act)(() => {
66
74
  result.current.goToPrevHour();
67
75
  rerender();
68
76
  });
69
- expect(state.current[0]).toStrictEqual({ hour: 23, minute: 59 });
77
+ expect(getSelectedTime()).toStrictEqual({ hour: 23, minute: 59 });
70
78
  (0, react_1.act)(() => {
71
79
  result.current.goToNextHour();
72
80
  rerender();
73
81
  });
74
- expect(state.current[0]).toStrictEqual({ hour: 0, minute: 59 });
82
+ expect(getSelectedTime()).toStrictEqual({ hour: 0, minute: 59 });
75
83
  (0, react_1.act)(() => {
76
84
  result.current.goToNextMinute();
77
85
  rerender();
78
86
  });
79
- expect(state.current[0]).toStrictEqual({ hour: 1, minute: 0 });
87
+ expect(getSelectedTime()).toStrictEqual({ hour: 1, minute: 0 });
80
88
  (0, react_1.act)(() => {
81
89
  result.current.goToPrevMinute();
82
90
  rerender();
83
91
  });
84
- expect(state.current[0]).toStrictEqual({ hour: 0, minute: 59 });
92
+ expect(getSelectedTime()).toStrictEqual({ hour: 0, minute: 59 });
85
93
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/datepicker",
3
- "version": "11.88.0",
3
+ "version": "11.88.2",
4
4
  "description": "A set of React hooks to create an awesome datepicker.",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/utils/get-date-intervals.test.js CHANGED
@@ -22,17 +22,17 @@ describe("getDateIntervals", () => {
22
22
  (0, dayjs_1.default)("2023-10-17").toDate(),
23
23
  ];
24
24
  const expected = [
25
- { start: dates[0], end: dates[2] },
26
- { start: dates[3], end: dates[4] },
25
+ { start: dates.at(0), end: dates.at(2) },
26
+ { start: dates.at(3), end: dates.at(4) },
27
27
  ];
28
28
  expect((0, get_date_invervals_1.getDateIntervals)(dates)).toStrictEqual(expected);
29
29
  });
30
30
  it("should handle non-contiguous dates", () => {
31
31
  const dates = [(0, dayjs_1.default)("2023-10-12").toDate(), (0, dayjs_1.default)("2023-10-14").toDate(), (0, dayjs_1.default)("2023-10-16").toDate()];
32
32
  const expected = [
33
- { start: dates[0], end: dates[0] },
34
- { start: dates[1], end: dates[1] },
35
- { start: dates[2], end: dates[2] },
33
+ { start: dates.at(0), end: dates.at(0) },
34
+ { start: dates.at(1), end: dates.at(1) },
35
+ { start: dates.at(2), end: dates.at(2) },
36
36
  ];
37
37
  expect((0, get_date_invervals_1.getDateIntervals)(dates)).toStrictEqual(expected);
38
38
  });