1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 | import { __assign, __extends, __spreadArray } from "tslib";
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 | import classNames from "classnames";
|
24 | import * as React from "react";
|
25 | import DayPicker, {} from "react-day-picker";
|
26 | import { AbstractPureComponent, Boundary, DISPLAYNAME_PREFIX, Divider } from "@blueprintjs/core";
|
27 | import { Classes, DateUtils } from "../../common";
|
28 | import { DateRangeSelectionStrategy } from "../../common/dateRangeSelectionStrategy";
|
29 | import * as Errors from "../../common/errors";
|
30 | import { MonthAndYear } from "../../common/monthAndYear";
|
31 | import { DatePickerCaption } from "../date-picker/datePickerCaption";
|
32 | import { combineModifiers, getDefaultMaxDate, getDefaultMinDate, HOVERED_RANGE_MODIFIER, SELECTED_RANGE_MODIFIER, } from "../date-picker/datePickerCore";
|
33 | import { DatePickerNavbar } from "../date-picker/datePickerNavbar";
|
34 | import { DatePickerShortcutMenu } from "../shortcuts/shortcuts";
|
35 | import { TimePicker } from "../time-picker/timePicker";
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 | var DateRangePicker = (function (_super) {
|
43 | __extends(DateRangePicker, _super);
|
44 | function DateRangePicker(props) {
|
45 | var _a;
|
46 | var _this = _super.call(this, props) || this;
|
47 |
|
48 | _this.modifiers = (_a = {},
|
49 | _a[SELECTED_RANGE_MODIFIER] = function (day) {
|
50 | var value = _this.state.value;
|
51 | return value[0] != null && value[1] != null && DateUtils.isDayInRange(day, value, true);
|
52 | },
|
53 | _a["".concat(SELECTED_RANGE_MODIFIER, "-start")] = function (day) { return DateUtils.isSameDay(_this.state.value[0], day); },
|
54 | _a["".concat(SELECTED_RANGE_MODIFIER, "-end")] = function (day) { return DateUtils.isSameDay(_this.state.value[1], day); },
|
55 | _a[HOVERED_RANGE_MODIFIER] = function (day) {
|
56 | var _a = _this.state, hoverValue = _a.hoverValue, _b = _a.value, selectedStart = _b[0], selectedEnd = _b[1];
|
57 | if (selectedStart == null && selectedEnd == null) {
|
58 | return false;
|
59 | }
|
60 | if (hoverValue == null || hoverValue[0] == null || hoverValue[1] == null) {
|
61 | return false;
|
62 | }
|
63 | return DateUtils.isDayInRange(day, hoverValue, true);
|
64 | },
|
65 | _a["".concat(HOVERED_RANGE_MODIFIER, "-start")] = function (day) {
|
66 | var hoverValue = _this.state.hoverValue;
|
67 | if (hoverValue == null || hoverValue[0] == null) {
|
68 | return false;
|
69 | }
|
70 | return DateUtils.isSameDay(hoverValue[0], day);
|
71 | },
|
72 | _a["".concat(HOVERED_RANGE_MODIFIER, "-end")] = function (day) {
|
73 | var hoverValue = _this.state.hoverValue;
|
74 | if (hoverValue == null || hoverValue[1] == null) {
|
75 | return false;
|
76 | }
|
77 | return DateUtils.isSameDay(hoverValue[1], day);
|
78 | },
|
79 | _a);
|
80 | _this.shouldHighlightCurrentDay = function (date) {
|
81 | var highlightCurrentDay = _this.props.highlightCurrentDay;
|
82 | return highlightCurrentDay && DateUtils.isToday(date);
|
83 | };
|
84 | _this.getDateRangePickerModifiers = function () {
|
85 | var modifiers = _this.props.modifiers;
|
86 | return combineModifiers(_this.modifiers, __assign({ isToday: _this.shouldHighlightCurrentDay }, modifiers));
|
87 | };
|
88 | _this.renderDay = function (day) {
|
89 | var date = day.getDate();
|
90 | return React.createElement("div", { className: Classes.DATEPICKER_DAY_WRAPPER }, date);
|
91 | };
|
92 | _this.disabledDays = function (day) { return !DateUtils.isDayInRange(day, [_this.props.minDate, _this.props.maxDate]); };
|
93 | _this.getDisabledDaysModifier = function () {
|
94 | var disabledDays = _this.props.dayPickerProps.disabledDays;
|
95 | return disabledDays instanceof Array ? __spreadArray([_this.disabledDays], disabledDays, true) : [_this.disabledDays, disabledDays];
|
96 | };
|
97 | _this.handleTimeChange = function (newTime, dateIndex) {
|
98 | var _a, _b, _c, _d;
|
99 | (_b = (_a = _this.props.timePickerProps) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, newTime);
|
100 | var _e = _this.state, value = _e.value, time = _e.time;
|
101 | var newValue = DateUtils.getDateTime(value[dateIndex] != null ? DateUtils.clone(value[dateIndex]) : new Date(), newTime);
|
102 | var newDateRange = [value[0], value[1]];
|
103 | newDateRange[dateIndex] = newValue;
|
104 | var newTimeRange = [time[0], time[1]];
|
105 | newTimeRange[dateIndex] = newTime;
|
106 | (_d = (_c = _this.props).onChange) === null || _d === void 0 ? void 0 : _d.call(_c, newDateRange);
|
107 | _this.setState({ value: newDateRange, time: newTimeRange });
|
108 | };
|
109 | _this.handleTimeChangeLeftCalendar = function (time) {
|
110 | _this.handleTimeChange(time, 0);
|
111 | };
|
112 | _this.handleTimeChangeRightCalendar = function (time) {
|
113 | _this.handleTimeChange(time, 1);
|
114 | };
|
115 | _this.renderSingleNavbar = function (navbarProps) { return (React.createElement(DatePickerNavbar, __assign({}, navbarProps, { maxDate: _this.props.maxDate, minDate: _this.props.minDate }))); };
|
116 | _this.renderLeftNavbar = function (navbarProps) { return (React.createElement(DatePickerNavbar, __assign({}, navbarProps, { hideRightNavButton: _this.props.contiguousCalendarMonths, maxDate: _this.props.maxDate, minDate: _this.props.minDate }))); };
|
117 | _this.renderRightNavbar = function (navbarProps) { return (React.createElement(DatePickerNavbar, __assign({}, navbarProps, { hideLeftNavButton: _this.props.contiguousCalendarMonths, maxDate: _this.props.maxDate, minDate: _this.props.minDate }))); };
|
118 | _this.renderSingleCaption = function (captionProps) { return (React.createElement(DatePickerCaption, __assign({}, captionProps, { maxDate: _this.props.maxDate, minDate: _this.props.minDate, onMonthChange: _this.handleLeftMonthSelectChange, onYearChange: _this.handleLeftYearSelectChange, reverseMonthAndYearMenus: _this.props.reverseMonthAndYearMenus }))); };
|
119 | _this.renderLeftCaption = function (captionProps) { return (React.createElement(DatePickerCaption, __assign({}, captionProps, { maxDate: DateUtils.getDatePreviousMonth(_this.props.maxDate), minDate: _this.props.minDate, onMonthChange: _this.handleLeftMonthSelectChange, onYearChange: _this.handleLeftYearSelectChange, reverseMonthAndYearMenus: _this.props.reverseMonthAndYearMenus }))); };
|
120 | _this.renderRightCaption = function (captionProps) { return (React.createElement(DatePickerCaption, __assign({}, captionProps, { maxDate: _this.props.maxDate, minDate: DateUtils.getDateNextMonth(_this.props.minDate), onMonthChange: _this.handleRightMonthSelectChange, onYearChange: _this.handleRightYearSelectChange, reverseMonthAndYearMenus: _this.props.reverseMonthAndYearMenus }))); };
|
121 | _this.handleDayMouseEnter = function (day, modifiers, e) {
|
122 | var _a, _b, _c, _d;
|
123 | (_b = (_a = _this.props.dayPickerProps).onDayMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, day, modifiers, e);
|
124 | if (modifiers.disabled) {
|
125 | return;
|
126 | }
|
127 | var _e = DateRangeSelectionStrategy.getNextState(_this.state.value, day, _this.props.allowSingleDayRange, _this.props.boundaryToModify), dateRange = _e.dateRange, boundary = _e.boundary;
|
128 | _this.setState({ hoverValue: dateRange });
|
129 | (_d = (_c = _this.props).onHoverChange) === null || _d === void 0 ? void 0 : _d.call(_c, dateRange, day, boundary);
|
130 | };
|
131 | _this.handleDayMouseLeave = function (day, modifiers, e) {
|
132 | var _a, _b, _c, _d;
|
133 | (_b = (_a = _this.props.dayPickerProps).onDayMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, day, modifiers, e);
|
134 | if (modifiers.disabled) {
|
135 | return;
|
136 | }
|
137 | _this.setState({ hoverValue: undefined });
|
138 | (_d = (_c = _this.props).onHoverChange) === null || _d === void 0 ? void 0 : _d.call(_c, undefined, day, undefined);
|
139 | };
|
140 | _this.handleDayClick = function (day, modifiers, e) {
|
141 | var _a, _b;
|
142 | (_b = (_a = _this.props.dayPickerProps).onDayClick) === null || _b === void 0 ? void 0 : _b.call(_a, day, modifiers, e);
|
143 | if (modifiers.disabled) {
|
144 |
|
145 | _this.forceUpdate();
|
146 | return;
|
147 | }
|
148 | var nextValue = DateRangeSelectionStrategy.getNextState(_this.state.value, day, _this.props.allowSingleDayRange, _this.props.boundaryToModify).dateRange;
|
149 |
|
150 |
|
151 | _this.handleDayMouseEnter(day, modifiers, e);
|
152 | _this.handleNextState(nextValue);
|
153 | };
|
154 | _this.handleShortcutClick = function (shortcut, selectedShortcutIndex) {
|
155 | var _a = _this.props, onChange = _a.onChange, contiguousCalendarMonths = _a.contiguousCalendarMonths, onShortcutChange = _a.onShortcutChange;
|
156 | var dateRange = shortcut.dateRange, includeTime = shortcut.includeTime;
|
157 | if (includeTime) {
|
158 | var newDateRange = [dateRange[0], dateRange[1]];
|
159 | var newTimeRange = [dateRange[0], dateRange[1]];
|
160 | var nextState = getStateChange(_this.state.value, dateRange, _this.state, contiguousCalendarMonths);
|
161 | _this.setState(__assign(__assign({}, nextState), { time: newTimeRange }));
|
162 | onChange === null || onChange === void 0 ? void 0 : onChange(newDateRange);
|
163 | }
|
164 | else {
|
165 | _this.handleNextState(dateRange);
|
166 | }
|
167 | if (_this.props.selectedShortcutIndex === undefined) {
|
168 | _this.setState({ selectedShortcutIndex: selectedShortcutIndex });
|
169 | }
|
170 | onShortcutChange === null || onShortcutChange === void 0 ? void 0 : onShortcutChange(shortcut, selectedShortcutIndex);
|
171 | };
|
172 | _this.handleNextState = function (nextValue) {
|
173 | var _a, _b;
|
174 | var value = _this.state.value;
|
175 | nextValue[0] = DateUtils.getDateTime(nextValue[0], _this.state.time[0]);
|
176 | nextValue[1] = DateUtils.getDateTime(nextValue[1], _this.state.time[1]);
|
177 | var nextState = getStateChange(value, nextValue, _this.state, _this.props.contiguousCalendarMonths);
|
178 | if (_this.props.value == null) {
|
179 | _this.setState(nextState);
|
180 | }
|
181 | (_b = (_a = _this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, nextValue);
|
182 | };
|
183 | _this.handleLeftMonthChange = function (newDate) {
|
184 | var _a, _b;
|
185 | var leftView = MonthAndYear.fromDate(newDate);
|
186 | (_b = (_a = _this.props.dayPickerProps).onMonthChange) === null || _b === void 0 ? void 0 : _b.call(_a, leftView.getFullDate());
|
187 | _this.updateLeftView(leftView);
|
188 | };
|
189 | _this.handleRightMonthChange = function (newDate) {
|
190 | var _a, _b;
|
191 | var rightView = MonthAndYear.fromDate(newDate);
|
192 | (_b = (_a = _this.props.dayPickerProps).onMonthChange) === null || _b === void 0 ? void 0 : _b.call(_a, rightView.getFullDate());
|
193 | _this.updateRightView(rightView);
|
194 | };
|
195 | _this.handleLeftMonthSelectChange = function (leftMonth) {
|
196 | var _a, _b;
|
197 | var leftView = new MonthAndYear(leftMonth, _this.state.leftView.getYear());
|
198 | (_b = (_a = _this.props.dayPickerProps).onMonthChange) === null || _b === void 0 ? void 0 : _b.call(_a, leftView.getFullDate());
|
199 | _this.updateLeftView(leftView);
|
200 | };
|
201 | _this.handleRightMonthSelectChange = function (rightMonth) {
|
202 | var _a, _b;
|
203 | var rightView = new MonthAndYear(rightMonth, _this.state.rightView.getYear());
|
204 | (_b = (_a = _this.props.dayPickerProps).onMonthChange) === null || _b === void 0 ? void 0 : _b.call(_a, rightView.getFullDate());
|
205 | _this.updateRightView(rightView);
|
206 | };
|
207 | |
208 |
|
209 |
|
210 |
|
211 |
|
212 |
|
213 |
|
214 | _this.handleLeftYearSelectChange = function (leftDisplayYear) {
|
215 | var _a, _b;
|
216 | var leftView = new MonthAndYear(_this.state.leftView.getMonth(), leftDisplayYear);
|
217 | (_b = (_a = _this.props.dayPickerProps).onMonthChange) === null || _b === void 0 ? void 0 : _b.call(_a, leftView.getFullDate());
|
218 | var _c = _this.props, minDate = _c.minDate, maxDate = _c.maxDate;
|
219 | var adjustedMaxDate = DateUtils.getDatePreviousMonth(maxDate);
|
220 | var minMonthAndYear = new MonthAndYear(minDate.getMonth(), minDate.getFullYear());
|
221 | var maxMonthAndYear = new MonthAndYear(adjustedMaxDate.getMonth(), adjustedMaxDate.getFullYear());
|
222 | if (leftView.isBefore(minMonthAndYear)) {
|
223 | leftView = minMonthAndYear;
|
224 | }
|
225 | else if (leftView.isAfter(maxMonthAndYear)) {
|
226 | leftView = maxMonthAndYear;
|
227 | }
|
228 | var rightView = _this.state.rightView.clone();
|
229 | if (!leftView.isBefore(rightView) || _this.props.contiguousCalendarMonths) {
|
230 | rightView = leftView.getNextMonth();
|
231 | }
|
232 | _this.setViews(leftView, rightView);
|
233 | };
|
234 | _this.handleRightYearSelectChange = function (rightDisplayYear) {
|
235 | var _a, _b;
|
236 | var rightView = new MonthAndYear(_this.state.rightView.getMonth(), rightDisplayYear);
|
237 | (_b = (_a = _this.props.dayPickerProps).onMonthChange) === null || _b === void 0 ? void 0 : _b.call(_a, rightView.getFullDate());
|
238 | var _c = _this.props, minDate = _c.minDate, maxDate = _c.maxDate;
|
239 | var adjustedMinDate = DateUtils.getDateNextMonth(minDate);
|
240 | var minMonthAndYear = MonthAndYear.fromDate(adjustedMinDate);
|
241 | var maxMonthAndYear = MonthAndYear.fromDate(maxDate);
|
242 | if (rightView.isBefore(minMonthAndYear)) {
|
243 | rightView = minMonthAndYear;
|
244 | }
|
245 | else if (rightView.isAfter(maxMonthAndYear)) {
|
246 | rightView = maxMonthAndYear;
|
247 | }
|
248 | var leftView = _this.state.leftView.clone();
|
249 | if (!rightView.isAfter(leftView) || _this.props.contiguousCalendarMonths) {
|
250 | leftView = rightView.getPreviousMonth();
|
251 | }
|
252 | _this.setViews(leftView, rightView);
|
253 | };
|
254 | var value = getInitialValue(props);
|
255 | var time = value;
|
256 | var initialMonth = getInitialMonth(props, value);
|
257 |
|
258 |
|
259 |
|
260 |
|
261 | var initialMonthEqualsMinMonth = DateUtils.isSameMonth(initialMonth, props.minDate);
|
262 | var initalMonthEqualsMaxMonth = DateUtils.isSameMonth(initialMonth, props.maxDate);
|
263 | if (!props.singleMonthOnly && !initialMonthEqualsMinMonth && initalMonthEqualsMaxMonth) {
|
264 | initialMonth.setMonth(initialMonth.getMonth() - 1);
|
265 | }
|
266 |
|
267 |
|
268 |
|
269 | var leftView = MonthAndYear.fromDate(initialMonth);
|
270 | var rightDate = value[1];
|
271 | var rightView = !props.contiguousCalendarMonths && rightDate != null && !DateUtils.isSameMonth(initialMonth, rightDate)
|
272 | ? MonthAndYear.fromDate(rightDate)
|
273 | : leftView.getNextMonth();
|
274 | _this.state = {
|
275 | hoverValue: [null, null],
|
276 | leftView: leftView,
|
277 | rightView: rightView,
|
278 | selectedShortcutIndex: _this.props.selectedShortcutIndex !== undefined ? _this.props.selectedShortcutIndex : -1,
|
279 | time: time,
|
280 | value: value,
|
281 | };
|
282 | return _this;
|
283 | }
|
284 | DateRangePicker.prototype.render = function () {
|
285 | var _a;
|
286 | var _b = this.props, className = _b.className, contiguousCalendarMonths = _b.contiguousCalendarMonths, singleMonthOnly = _b.singleMonthOnly, footerElement = _b.footerElement;
|
287 | var isShowingOneMonth = singleMonthOnly || DateUtils.isSameMonth(this.props.minDate, this.props.maxDate);
|
288 | var classes = classNames(Classes.DATEPICKER, Classes.DATERANGEPICKER, className, (_a = {},
|
289 | _a[Classes.DATERANGEPICKER_CONTIGUOUS] = contiguousCalendarMonths,
|
290 | _a[Classes.DATERANGEPICKER_SINGLE_MONTH] = isShowingOneMonth,
|
291 | _a));
|
292 |
|
293 | return (React.createElement("div", { className: classes },
|
294 | this.maybeRenderShortcuts(),
|
295 | React.createElement("div", { className: Classes.DATEPICKER_CONTENT },
|
296 | this.renderCalendars(isShowingOneMonth),
|
297 | this.maybeRenderTimePickers(isShowingOneMonth),
|
298 | footerElement)));
|
299 | };
|
300 | DateRangePicker.prototype.componentDidUpdate = function (prevProps, prevState) {
|
301 | _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
|
302 | if (!DateUtils.areRangesEqual(prevProps.value, this.props.value) ||
|
303 | prevProps.contiguousCalendarMonths !== this.props.contiguousCalendarMonths) {
|
304 | var nextState = getStateChange(prevProps.value, this.props.value, this.state, prevProps.contiguousCalendarMonths);
|
305 | this.setState(nextState);
|
306 | }
|
307 | if (this.props.selectedShortcutIndex !== prevProps.selectedShortcutIndex) {
|
308 | this.setState({ selectedShortcutIndex: this.props.selectedShortcutIndex });
|
309 | }
|
310 | };
|
311 | DateRangePicker.prototype.validateProps = function (props) {
|
312 | var defaultValue = props.defaultValue, initialMonth = props.initialMonth, maxDate = props.maxDate, minDate = props.minDate, boundaryToModify = props.boundaryToModify, value = props.value;
|
313 | var dateRange = [minDate, maxDate];
|
314 | if (defaultValue != null && !DateUtils.isDayRangeInRange(defaultValue, dateRange)) {
|
315 | console.error(Errors.DATERANGEPICKER_DEFAULT_VALUE_INVALID);
|
316 | }
|
317 | if (initialMonth != null && !DateUtils.isMonthInRange(initialMonth, dateRange)) {
|
318 | console.error(Errors.DATERANGEPICKER_INITIAL_MONTH_INVALID);
|
319 | }
|
320 | if (maxDate != null && minDate != null && maxDate < minDate && !DateUtils.isSameDay(maxDate, minDate)) {
|
321 | console.error(Errors.DATERANGEPICKER_MAX_DATE_INVALID);
|
322 | }
|
323 | if (value != null && !DateUtils.isDayRangeInRange(value, dateRange)) {
|
324 | console.error(Errors.DATERANGEPICKER_VALUE_INVALID);
|
325 | }
|
326 | if (boundaryToModify != null && boundaryToModify !== Boundary.START && boundaryToModify !== Boundary.END) {
|
327 | console.error(Errors.DATERANGEPICKER_PREFERRED_BOUNDARY_TO_MODIFY_INVALID);
|
328 | }
|
329 | };
|
330 | DateRangePicker.prototype.maybeRenderShortcuts = function () {
|
331 | var shortcuts = this.props.shortcuts;
|
332 | if (shortcuts == null || shortcuts === false) {
|
333 | return null;
|
334 | }
|
335 | var selectedShortcutIndex = this.state.selectedShortcutIndex;
|
336 | var _a = this.props, allowSingleDayRange = _a.allowSingleDayRange, maxDate = _a.maxDate, minDate = _a.minDate, timePrecision = _a.timePrecision;
|
337 | return [
|
338 | React.createElement(DatePickerShortcutMenu, { key: "shortcuts", allowSingleDayRange: allowSingleDayRange, maxDate: maxDate, minDate: minDate, selectedShortcutIndex: selectedShortcutIndex, shortcuts: shortcuts, timePrecision: timePrecision, onShortcutClick: this.handleShortcutClick }),
|
339 | React.createElement(Divider, { key: "div" }),
|
340 | ];
|
341 | };
|
342 | DateRangePicker.prototype.maybeRenderTimePickers = function (isShowingOneMonth) {
|
343 | var _a = this.props, timePrecision = _a.timePrecision, timePickerProps = _a.timePickerProps;
|
344 | if (timePrecision == null && timePickerProps === DateRangePicker.defaultProps.timePickerProps) {
|
345 | return null;
|
346 | }
|
347 | if (isShowingOneMonth) {
|
348 | return (React.createElement(TimePicker, __assign({ precision: timePrecision }, timePickerProps, { onChange: this.handleTimeChangeLeftCalendar, value: this.state.time[0] })));
|
349 | }
|
350 | else {
|
351 | return (React.createElement("div", { className: Classes.DATERANGEPICKER_TIMEPICKERS },
|
352 | React.createElement(TimePicker, __assign({ precision: timePrecision }, timePickerProps, { onChange: this.handleTimeChangeLeftCalendar, value: this.state.time[0] })),
|
353 | React.createElement(TimePicker, __assign({ precision: timePrecision }, timePickerProps, { onChange: this.handleTimeChangeRightCalendar, value: this.state.time[1] }))));
|
354 | }
|
355 | };
|
356 | DateRangePicker.prototype.renderCalendars = function (isShowingOneMonth) {
|
357 | var _a, _b, _c;
|
358 | var _d = this.props, dayPickerProps = _d.dayPickerProps, locale = _d.locale, localeUtils = _d.localeUtils, maxDate = _d.maxDate, minDate = _d.minDate;
|
359 | var dayPickerBaseProps = __assign(__assign({ locale: locale, localeUtils: localeUtils, modifiers: this.getDateRangePickerModifiers(), showOutsideDays: true }, dayPickerProps), { disabledDays: this.getDisabledDaysModifier(), onDayClick: this.handleDayClick, onDayMouseEnter: this.handleDayMouseEnter, onDayMouseLeave: this.handleDayMouseLeave, selectedDays: this.state.value });
|
360 | if (isShowingOneMonth) {
|
361 | return (React.createElement(DayPicker, __assign({}, dayPickerBaseProps, { captionElement: this.renderSingleCaption, navbarElement: this.renderSingleNavbar, fromMonth: minDate, month: this.state.leftView.getFullDate(), numberOfMonths: 1, onMonthChange: this.handleLeftMonthChange, toMonth: maxDate, renderDay: (_a = dayPickerProps === null || dayPickerProps === void 0 ? void 0 : dayPickerProps.renderDay) !== null && _a !== void 0 ? _a : this.renderDay })));
|
362 | }
|
363 | else {
|
364 | return (React.createElement("div", { className: Classes.DATERANGEPICKER_CALENDARS },
|
365 | React.createElement(DayPicker, __assign({ key: "left" }, dayPickerBaseProps, { canChangeMonth: true, captionElement: this.renderLeftCaption, navbarElement: this.renderLeftNavbar, fromMonth: minDate, month: this.state.leftView.getFullDate(), numberOfMonths: 1, onMonthChange: this.handleLeftMonthChange, toMonth: DateUtils.getDatePreviousMonth(maxDate), renderDay: (_b = dayPickerProps === null || dayPickerProps === void 0 ? void 0 : dayPickerProps.renderDay) !== null && _b !== void 0 ? _b : this.renderDay })),
|
366 | React.createElement(DayPicker, __assign({ key: "right" }, dayPickerBaseProps, { canChangeMonth: true, captionElement: this.renderRightCaption, navbarElement: this.renderRightNavbar, fromMonth: DateUtils.getDateNextMonth(minDate), month: this.state.rightView.getFullDate(), numberOfMonths: 1, onMonthChange: this.handleRightMonthChange, toMonth: maxDate, renderDay: (_c = dayPickerProps === null || dayPickerProps === void 0 ? void 0 : dayPickerProps.renderDay) !== null && _c !== void 0 ? _c : this.renderDay }))));
|
367 | }
|
368 | };
|
369 | DateRangePicker.prototype.updateLeftView = function (leftView) {
|
370 | var rightView = this.state.rightView.clone();
|
371 | if (!leftView.isBefore(rightView) || this.props.contiguousCalendarMonths) {
|
372 | rightView = leftView.getNextMonth();
|
373 | }
|
374 | this.setViews(leftView, rightView);
|
375 | };
|
376 | DateRangePicker.prototype.updateRightView = function (rightView) {
|
377 | var leftView = this.state.leftView.clone();
|
378 | if (!rightView.isAfter(leftView) || this.props.contiguousCalendarMonths) {
|
379 | leftView = rightView.getPreviousMonth();
|
380 | }
|
381 | this.setViews(leftView, rightView);
|
382 | };
|
383 | DateRangePicker.prototype.setViews = function (leftView, rightView) {
|
384 | this.setState({ leftView: leftView, rightView: rightView });
|
385 | };
|
386 | DateRangePicker.defaultProps = {
|
387 | allowSingleDayRange: false,
|
388 | contiguousCalendarMonths: true,
|
389 | dayPickerProps: {},
|
390 | maxDate: getDefaultMaxDate(),
|
391 | minDate: getDefaultMinDate(),
|
392 | reverseMonthAndYearMenus: false,
|
393 | shortcuts: true,
|
394 | singleMonthOnly: false,
|
395 | timePickerProps: {},
|
396 | };
|
397 | DateRangePicker.displayName = "".concat(DISPLAYNAME_PREFIX, ".DateRangePicker");
|
398 | return DateRangePicker;
|
399 | }(AbstractPureComponent));
|
400 | export { DateRangePicker };
|
401 | function getStateChange(value, nextValue, state, contiguousCalendarMonths) {
|
402 | if (value != null && nextValue == null) {
|
403 | return { value: [null, null] };
|
404 | }
|
405 | else if (nextValue != null) {
|
406 | var leftView = state.leftView.clone();
|
407 | var rightView = state.rightView.clone();
|
408 | var nextValueStartView = MonthAndYear.fromDate(nextValue[0]);
|
409 | var nextValueEndView = MonthAndYear.fromDate(nextValue[1]);
|
410 |
|
411 |
|
412 |
|
413 |
|
414 | if (nextValueStartView == null && nextValueEndView != null) {
|
415 | if (!nextValueEndView.isSame(leftView) && !nextValueEndView.isSame(rightView)) {
|
416 | rightView = nextValueEndView;
|
417 | if (!leftView.isBefore(rightView)) {
|
418 | leftView = rightView.getPreviousMonth();
|
419 | }
|
420 | }
|
421 | }
|
422 | else if (nextValueStartView != null && nextValueEndView == null) {
|
423 |
|
424 |
|
425 |
|
426 |
|
427 | if (!nextValueStartView.isSame(leftView) && !nextValueStartView.isSame(rightView)) {
|
428 | leftView = nextValueStartView;
|
429 | if (!rightView.isAfter(leftView)) {
|
430 | rightView = leftView.getNextMonth();
|
431 | }
|
432 | }
|
433 | }
|
434 | else if (nextValueStartView != null && nextValueEndView != null) {
|
435 |
|
436 |
|
437 |
|
438 |
|
439 | if (nextValueStartView.isSame(nextValueEndView)) {
|
440 | if (leftView.isSame(nextValueStartView) || rightView.isSame(nextValueStartView)) {
|
441 |
|
442 | }
|
443 | else {
|
444 | leftView = nextValueStartView;
|
445 | rightView = nextValueStartView.getNextMonth();
|
446 | }
|
447 | }
|
448 | else {
|
449 |
|
450 | if (!leftView.isSame(nextValueStartView)) {
|
451 | leftView = nextValueStartView;
|
452 | rightView = nextValueStartView.getNextMonth();
|
453 | }
|
454 | if (contiguousCalendarMonths === false && !rightView.isSame(nextValueEndView)) {
|
455 | rightView = nextValueEndView;
|
456 | }
|
457 | }
|
458 | }
|
459 | return {
|
460 | leftView: leftView,
|
461 | rightView: rightView,
|
462 | value: nextValue,
|
463 | };
|
464 | }
|
465 | else if (contiguousCalendarMonths === true) {
|
466 |
|
467 |
|
468 | if (!state.leftView.getNextMonth().isSameMonth(state.rightView)) {
|
469 | var nextRightView = state.leftView.getNextMonth();
|
470 | return { rightView: nextRightView };
|
471 | }
|
472 | }
|
473 | return {};
|
474 | }
|
475 | function getInitialValue(props) {
|
476 | if (props.value != null) {
|
477 | return props.value;
|
478 | }
|
479 | if (props.defaultValue != null) {
|
480 | return props.defaultValue;
|
481 | }
|
482 | return [null, null];
|
483 | }
|
484 | function getInitialMonth(props, value) {
|
485 | var today = new Date();
|
486 |
|
487 | if (props.initialMonth != null) {
|
488 | return props.initialMonth;
|
489 | }
|
490 | else if (value[0] != null) {
|
491 | return DateUtils.clone(value[0]);
|
492 | }
|
493 | else if (value[1] != null) {
|
494 | var month = DateUtils.clone(value[1]);
|
495 | if (!DateUtils.isSameMonth(month, props.minDate)) {
|
496 | month.setMonth(month.getMonth() - 1);
|
497 | }
|
498 | return month;
|
499 | }
|
500 | else if (DateUtils.isDayInRange(today, [props.minDate, props.maxDate])) {
|
501 | return today;
|
502 | }
|
503 | else {
|
504 | return DateUtils.getDateBetween([props.minDate, props.maxDate]);
|
505 | }
|
506 | }
|
507 |
|
\ | No newline at end of file |