UNPKG

30.7 kBJavaScriptView Raw
1/*
2 * Copyright 2016 Palantir Technologies, Inc. All rights reserved.
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16import { __assign, __extends, __spreadArray } from "tslib";
17/**
18 * @fileoverview This component is DEPRECATED, and the code is frozen.
19 * All changes & bugfixes should be made to DateRangePicker3 in the datetime2
20 * package instead.
21 */
22/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */
23import classNames from "classnames";
24import * as React from "react";
25import DayPicker, {} from "react-day-picker";
26import { AbstractPureComponent, Boundary, DISPLAYNAME_PREFIX, Divider } from "@blueprintjs/core";
27import { Classes, DateUtils } from "../../common";
28import { DateRangeSelectionStrategy } from "../../common/dateRangeSelectionStrategy";
29import * as Errors from "../../common/errors";
30import { MonthAndYear } from "../../common/monthAndYear";
31import { DatePickerCaption } from "../date-picker/datePickerCaption";
32import { combineModifiers, getDefaultMaxDate, getDefaultMinDate, HOVERED_RANGE_MODIFIER, SELECTED_RANGE_MODIFIER, } from "../date-picker/datePickerCore";
33import { DatePickerNavbar } from "../date-picker/datePickerNavbar";
34import { DatePickerShortcutMenu } from "../shortcuts/shortcuts";
35import { TimePicker } from "../time-picker/timePicker";
36/**
37 * Date range picker component.
38 *
39 * @see https://blueprintjs.com/docs/#datetime/daterangepicker
40 * @deprecated use `{ DateRangePicker3 } from "@blueprintjs/datetime2"` instead
41 */
42var DateRangePicker = /** @class */ (function (_super) {
43 __extends(DateRangePicker, _super);
44 function DateRangePicker(props) {
45 var _a;
46 var _this = _super.call(this, props) || this;
47 // these will get merged with the user's own
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 // rerender base component to get around bug where you can navigate past bounds by clicking days
145 _this.forceUpdate();
146 return;
147 }
148 var nextValue = DateRangeSelectionStrategy.getNextState(_this.state.value, day, _this.props.allowSingleDayRange, _this.props.boundaryToModify).dateRange;
149 // update the hovered date range after click to show the newly selected
150 // state, at leasts until the mouse moves again
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 * The min / max months are offset by one because we are showing two months.
209 * We do a comparison check to see if
210 * a) the proposed [Month, Year] change throws the two calendars out of order
211 * b) the proposed [Month, Year] goes beyond the min / max months
212 * and rectify appropriately.
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 // if the initial month is the last month of the picker's
258 // allowable range, the react-day-picker library will show
259 // the max month on the left and the *min* month on the right.
260 // subtracting one avoids that weird, wraparound state (#289).
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 // show the selected end date's encompassing month in the right view if
267 // the calendars don't have to be contiguous.
268 // if left view and right view months are the same, show next month in the right view.
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 // use the left DayPicker when we only need one
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));
400export { DateRangePicker };
401function 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 // Only end date selected.
411 // If the newly selected end date isn't in either of the displayed months, then
412 // - set the right DayPicker to the month of the selected end date
413 // - ensure the left DayPicker is before the right, changing if needed
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 // Only start date selected.
424 // If the newly selected start date isn't in either of the displayed months, then
425 // - set the left DayPicker to the month of the selected start date
426 // - ensure the right DayPicker is before the left, changing if needed
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 // Both start and end date months are identical
436 // If the selected month isn't in either of the displayed months, then
437 // - set the left DayPicker to be the selected month
438 // - set the right DayPicker to +1
439 if (nextValueStartView.isSame(nextValueEndView)) {
440 if (leftView.isSame(nextValueStartView) || rightView.isSame(nextValueStartView)) {
441 // do nothing
442 }
443 else {
444 leftView = nextValueStartView;
445 rightView = nextValueStartView.getNextMonth();
446 }
447 }
448 else {
449 // Different start and end date months, adjust display months.
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 // contiguousCalendarMonths is toggled on.
467 // If the previous leftView and rightView are not contiguous, then set the right DayPicker to left + 1
468 if (!state.leftView.getNextMonth().isSameMonth(state.rightView)) {
469 var nextRightView = state.leftView.getNextMonth();
470 return { rightView: nextRightView };
471 }
472 }
473 return {};
474}
475function 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}
484function getInitialMonth(props, value) {
485 var today = new Date();
486 // != because we must have a real `Date` to begin the calendar on.
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//# sourceMappingURL=dateRangePicker.js.map
\No newline at end of file