@blueprintjs/datetime - npm Package Compare versions

Comparing version 1.10.0 to 1.11.0

dist/common/dateUtils.d.ts

@@ -9,2 +9,3 @@ import * as moment from "moment";
 export declare function areEqual(date1: Date, date2: Date): boolean;
+export declare function areRangesEqual(dateRange1: DateRange, dateRange2: DateRange): boolean;
 export declare function areSameDay(date1: Date, date2: Date): boolean;
@@ -11,0 +12,0 @@ export declare function areSameMonth(date1: Date, date2: Date): boolean;

dist/common/dateUtils.js

@@ -28,2 +28,18 @@ /*
 exports.areEqual = areEqual;
+function areRangesEqual(dateRange1, dateRange2) {
+    if (dateRange1 == null && dateRange2 == null) {
+        return true;
+    }
+    else if (dateRange1 == null || dateRange2 == null) {
+        return false;
+    }
+    else {
+        var start1 = dateRange1[0], end1 = dateRange1[1];
+        var start2 = dateRange2[0], end2 = dateRange2[1];
+        var areStartsEqual = (start1 == null && start2 == null) || areSameDay(start1, start2);
+        var areEndsEqual = (end1 == null && end2 == null) || areSameDay(end1, end2);
+        return areStartsEqual && areEndsEqual;
+    }
+}
+exports.areRangesEqual = areRangesEqual;
 function areSameDay(date1, date2) {
@@ -30,0 +46,0 @@ return date1 != null

dist/dateInput.d.ts

@@ -64,2 +64,6 @@ /// <reference types="react" />
     /**
+     * Element to render on right side of input.
+     */
+    rightElement?: JSX.Element;
+    /**
      * The currently selected day. If this prop is provided, the component acts in a controlled manner.
@@ -89,3 +93,2 @@ * To display no date in the input field, pass `null` to the value prop. To display an invalid date error
     private handleDateChange;
-    private handleIconClick;
     private handleInputFocus;
@@ -92,0 +95,0 @@ private handleInputClick;

dist/dateInput.js

@@ -53,16 +53,2 @@ /*
         };
-        _this.handleIconClick = function (e) {
-            if (_this.state.isOpen) {
-                if (_this.inputRef != null) {
-                    _this.inputRef.blur();
-                }
-            }
-            else {
-                _this.setState({ isOpen: true });
-                e.stopPropagation();
-                if (_this.inputRef != null) {
-                    _this.inputRef.focus();
-                }
-            }
-        };
         _this.handleInputFocus = function () {
@@ -151,5 +137,4 @@ var valueString = dateUtils_1.isMomentNull(_this.state.value) ? "" : _this.state.value.format(_this.props.format);
         });
-        var calendarIcon = (React.createElement(core_1.Button, { className: core_1.Classes.MINIMAL, disabled: this.props.disabled, iconName: "calendar", intent: core_1.Intent.PRIMARY, onClick: this.handleIconClick }));
         return (React.createElement(core_1.Popover, { autoFocus: false, content: popoverContent, enforceFocus: false, inline: true, isOpen: this.state.isOpen, onClose: this.handleClosePopover, popoverClassName: "pt-dateinput-popover", position: this.props.popoverPosition },
-            React.createElement(core_1.InputGroup, { className: inputClasses, disabled: this.props.disabled, inputRef: this.setInputRef, type: "text", onBlur: this.handleInputBlur, onChange: this.handleInputChange, onClick: this.handleInputClick, onFocus: this.handleInputFocus, placeholder: this.props.format, rightElement: calendarIcon, value: dateString })));
+            React.createElement(core_1.InputGroup, { className: inputClasses, disabled: this.props.disabled, inputRef: this.setInputRef, type: "text", onBlur: this.handleInputBlur, onChange: this.handleInputChange, onClick: this.handleInputClick, onFocus: this.handleInputFocus, placeholder: this.props.format, rightElement: this.props.rightElement, value: dateString })));
     };
@@ -156,0 +141,0 @@ DateInput.prototype.componentWillReceiveProps = function (nextProps) {

dist/dateRangeInput.d.ts

@@ -8,2 +8,9 @@ /// <reference types="react" />
     /**
+     * Whether the start and end dates of the range can be the same day.
+     * If `true`, clicking a selected date will create a one-day range.
+     * If `false`, clicking a selected date will clear the selection.
+     * @default false
+     */
+    allowSingleDayRange?: boolean;
+    /**
      * Whether the calendar popover should close when a date range is fully selected.
@@ -65,2 +72,7 @@ * @default true
     /**
+     * Whether the entire text field should be selected on focus.
+     * @default false
+     */
+    selectAllOnFocus?: boolean;
+    /**
      * Props to pass to the start-date input.
@@ -82,2 +94,4 @@ */
     lastFocusedField?: DateRangeBoundary;
+    formattedMinDateString?: string;
+    formattedMaxDateString?: string;
     isStartInputFocused?: boolean;
@@ -91,2 +105,3 @@ isEndInputFocused?: boolean;
     selectedStart?: moment.Moment;
+    shouldSelectAfterUpdate?: boolean;
     wasLastFocusChangeDueToHover?: boolean;
@@ -123,3 +138,5 @@ }
     private getSelectedRange;
+    private getInputClasses;
     private getInputDisplayString;
+    private getInputPlaceholderString;
     private getFormattedDateString;
@@ -130,3 +147,2 @@ private getStateKeysAndValuesForBoundary;
     private getOtherBoundary;
-    private areSameDay;
     private doBoundaryDatesOverlap;
@@ -145,2 +161,3 @@ /**
     private isNextDateRangeValid(nextMomentDate, boundary);
+    private getFormattedMinMaxDateString(props, propName);
 }

dist/dateRangeInput.js

@@ -91,3 +91,3 @@ /*
         };
-        _this.handleDateRangePickerHoverChange = function (hoveredRange) {
+        _this.handleDateRangePickerHoverChange = function (hoveredRange, day) {
             // ignore mouse events in the date-range picker if the popover is animating closed.
@@ -114,6 +114,10 @@ if (!_this.state.isOpen) {
             var _b = dateUtils_1.fromDateRangeToMomentDateRange(hoveredRange), hoveredStart = _b[0], hoveredEnd = _b[1];
-            var _c = [hoveredStart, hoveredEnd].map(_this.getFormattedDateString), startHoverString = _c[0], endHoverString = _c[1];
+            var _c = [hoveredStart, hoveredEnd].map(function (momentDate) {
+                return _this.getFormattedDateString(momentDate);
+            }), startHoverString = _c[0], endHoverString = _c[1];
             var _d = [hoveredStart, hoveredEnd].map(function (d) { return !dateUtils_1.isMomentNull(d); }), isHoveredStartDefined = _d[0], isHoveredEndDefined = _d[1];
             var _f = [selectedStart, selectedEnd].map(function (d) { return !dateUtils_1.isMomentNull(d); }), isStartDateSelected = _f[0], isEndDateSelected = _f[1];
             var isModifyingStartBoundary = boundaryToModify === dateUtils_1.DateRangeBoundary.START;
+            var isModifyingEndBoundary = !isModifyingStartBoundary;
+            var hoveredDay = dateUtils_1.fromDateToMoment(day);
             // pull the existing values from state; we may not overwrite them.
@@ -123,3 +127,3 @@ var _g = _this.state, isStartInputFocused = _g.isStartInputFocused, isEndInputFocused = _g.isEndInputFocused;
                 if (isHoveredStartDefined && isHoveredEndDefined) {
-                    if (_this.areSameDay(hoveredStart, selectedStart)) {
+                    if (hoveredStart.isSame(selectedStart, "day")) {
                         // we'd be modifying the end date on click
@@ -129,3 +133,3 @@ isStartInputFocused = false;
                     }
-                    else if (_this.areSameDay(hoveredEnd, selectedEnd)) {
+                    else if (hoveredEnd.isSame(selectedEnd, "day")) {
                         // we'd be modifying the start date on click
@@ -137,3 +141,8 @@ isStartInputFocused = true;
                 else if (isHoveredStartDefined) {
-                    if (isModifyingStartBoundary) {
+                    if (isModifyingStartBoundary && hoveredDay.isSame(selectedEnd, "day")) {
+                        // we'd be deselecting the end date on click
+                        isStartInputFocused = false;
+                        isEndInputFocused = true;
+                    }
+                    else if (isModifyingStartBoundary) {
                         // we'd be specifying a new start date and clearing the end date on click
@@ -150,3 +159,3 @@ isStartInputFocused = true;
                 else if (isHoveredEndDefined) {
-                    if (isModifyingStartBoundary) {
+                    if (isModifyingEndBoundary && hoveredDay.isSame(selectedStart, "day")) {
                         // we'd be deselecting the start date on click
@@ -156,3 +165,3 @@ isStartInputFocused = true;
                     }
-                    else {
+                    else if (isModifyingEndBoundary) {
                         // we'd be specifying a new end date (clearing the start date) on click
@@ -162,2 +171,7 @@ isStartInputFocused = false;
                     }
+                    else {
+                        // we'd be deselecting the start date on click
+                        isStartInputFocused = true;
+                        isEndInputFocused = false;
+                    }
                 }
@@ -167,3 +181,3 @@ }
                 if (isHoveredStartDefined && isHoveredEndDefined) {
-                    if (_this.areSameDay(hoveredStart, selectedStart)) {
+                    if (hoveredStart.isSame(selectedStart, "day")) {
                         // we'd be modifying the end date on click, so focus the end field
@@ -173,3 +187,3 @@ isStartInputFocused = false;
                     }
-                    else if (_this.areSameDay(hoveredEnd, selectedStart)) {
+                    else if (hoveredEnd.isSame(selectedStart, "day")) {
                         // we'd be modifying the start date on click, so focus the start field
@@ -190,6 +204,11 @@ isStartInputFocused = true;
                 }
+                else {
+                    // we'd be deselecting start date on click
+                    isStartInputFocused = true;
+                    isEndInputFocused = false;
+                }
             }
             else if (isEndDateSelected) {
                 if (isHoveredStartDefined && isHoveredEndDefined) {
-                    if (_this.areSameDay(hoveredEnd, selectedEnd)) {
+                    if (hoveredEnd.isSame(selectedEnd, "day")) {
                         // we'd be modifying the start date on click
@@ -199,3 +218,3 @@ isStartInputFocused = true;
                     }
-                    else if (_this.areSameDay(hoveredStart, selectedEnd)) {
+                    else if (hoveredStart.isSame(selectedEnd, "day")) {
                         // we'd be modifying the end date on click
@@ -216,2 +235,7 @@ isStartInputFocused = false;
                 }
+                else {
+                    // we'd be deselecting end date on click
+                    isStartInputFocused = false;
+                    isEndInputFocused = true;
+                }
             }
@@ -224,2 +248,3 @@ _this.setState({
                 lastFocusedField: (isStartInputFocused) ? dateUtils_1.DateRangeBoundary.START : dateUtils_1.DateRangeBoundary.END,
+                shouldSelectAfterUpdate: _this.props.selectAllOnFocus,
                 wasLastFocusChangeDueToHover: true,
@@ -302,2 +327,3 @@ });
                 _b.lastFocusedField = boundary,
+                _b.shouldSelectAfterUpdate = _this.props.selectAllOnFocus,
                 _b.wasLastFocusChangeDueToHover = false,
@@ -318,34 +344,22 @@ _b));
             var isValueControlled = _this.isControlled();
+            var nextState = (_b = {},
+                _b[keys.isInputFocused] = false,
+                _b.shouldSelectAfterUpdate = false,
+                _b);
             if (_this.isInputEmpty(values.inputString)) {
                 if (isValueControlled) {
-                    _this.setState((_b = {},
-                        _b[keys.isInputFocused] = false,
-                        _b[keys.inputString] = _this.getFormattedDateString(values.controlledValue),
-                        _b));
+                    nextState = tslib_1.__assign({}, nextState, (_c = {}, _c[keys.inputString] = _this.getFormattedDateString(values.controlledValue), _c));
                 }
                 else {
-                    _this.setState((_c = {},
-                        _c[keys.isInputFocused] = false,
-                        _c[keys.selectedValue] = moment(null),
-                        _c[keys.inputString] = null,
-                        _c));
+                    nextState = tslib_1.__assign({}, nextState, (_d = {}, _d[keys.inputString] = null, _d[keys.selectedValue] = moment(null), _d));
                 }
             }
             else if (!_this.isNextDateRangeValid(maybeNextValue, boundary)) {
-                if (isValueControlled) {
-                    _this.setState((_d = {}, _d[keys.isInputFocused] = false, _d));
+                if (!isValueControlled) {
+                    nextState = tslib_1.__assign({}, nextState, (_f = {}, _f[keys.inputString] = null, _f[keys.selectedValue] = maybeNextValue, _f));
                 }
-                else {
-                    _this.setState((_f = {},
-                        _f[keys.isInputFocused] = false,
-                        _f[keys.inputString] = null,
-                        _f[keys.selectedValue] = maybeNextValue,
-                        _f));
-                }
                 core_1.Utils.safeInvoke(_this.props.onError, _this.getDateRangeForCallback(maybeNextValue, boundary));
             }
-            else {
-                _this.setState((_g = {}, _g[keys.isInputFocused] = false, _g));
-            }
-            var _b, _c, _d, _f, _g;
+            _this.setState(nextState);
+            var _b, _c, _d, _f;
         };
@@ -366,2 +380,3 @@ // Change
             var isValueControlled = _this.isControlled();
+            var nextState = { shouldSelectAfterUpdate: false };
             if (inputString.length === 0) {
@@ -372,6 +387,6 @@ // this case will be relevant when we start showing the hovered
                 if (isValueControlled) {
-                    _this.setState((_a = {}, _a[keys.inputString] = "", _a));
+                    nextState = tslib_1.__assign({}, nextState, (_a = {}, _a[keys.inputString] = "", _a));
                 }
                 else {
-                    _this.setState((_b = {}, _b[keys.inputString] = "", _b[keys.selectedValue] = moment(null), _b));
+                    nextState = tslib_1.__assign({}, nextState, (_b = {}, _b[keys.inputString] = "", _b[keys.selectedValue] = moment(null), _b));
                 }
@@ -386,6 +401,6 @@ core_1.Utils.safeInvoke(_this.props.onChange, _this.getDateRangeForCallback(moment(null), boundary));
                 if (isValueControlled) {
-                    _this.setState((_c = {}, _c[keys.inputString] = inputString, _c));
+                    nextState = tslib_1.__assign({}, nextState, (_c = {}, _c[keys.inputString] = inputString, _c));
                 }
                 else {
-                    _this.setState((_d = {}, _d[keys.inputString] = inputString, _d[keys.selectedValue] = maybeNextValue, _d));
+                    nextState = tslib_1.__assign({}, nextState, (_d = {}, _d[keys.inputString] = inputString, _d[keys.selectedValue] = maybeNextValue, _d));
                 }
@@ -397,4 +412,5 @@ if (_this.isNextDateRangeValid(maybeNextValue, boundary)) {
             else {
-                _this.setState((_f = {}, _f[keys.inputString] = inputString, _f));
+                nextState = tslib_1.__assign({}, nextState, (_f = {}, _f[keys.inputString] = inputString, _f));
             }
+            _this.setState(nextState);
             var _a, _b, _c, _d, _f;
@@ -427,13 +443,20 @@ };
         _this.getSelectedRange = function () {
-            var momentDateRange = [_this.state.selectedStart, _this.state.selectedEnd];
-            var _a = momentDateRange.map(function (selectedBound) {
+            var _a = _this.state, selectedStart = _a.selectedStart, selectedEnd = _a.selectedEnd;
+            // this helper function checks if the provided boundary date *would* overlap the selected
+            // other boundary date. providing the already-selected start date simply tells us if we're
+            // currently in an overlapping state.
+            var doBoundaryDatesOverlap = _this.doBoundaryDatesOverlap(selectedStart, dateUtils_1.DateRangeBoundary.START);
+            var momentDateRange = [selectedStart, doBoundaryDatesOverlap ? moment(null) : selectedEnd];
+            return momentDateRange.map(function (selectedBound) {
                 return _this.isMomentValidAndInRange(selectedBound)
                     ? dateUtils_1.fromMomentToDate(selectedBound)
                     : undefined;
-            }), startDate = _a[0], endDate = _a[1];
-            // show only the start date if the dates overlap
-            // TODO: add different handling for the === case once
-            // allowSingleDayRange is implemented (#249)
-            return [startDate, (startDate >= endDate) ? null : endDate];
+            });
         };
+        _this.getInputClasses = function (boundary, boundaryInputProps) {
+            return classNames(boundaryInputProps.className, (_a = {},
+                _a[core_1.Classes.INTENT_DANGER] = _this.isInputInErrorState(boundary),
+                _a));
+            var _a;
+        };
         _this.getInputDisplayString = function (boundary) {
@@ -462,3 +485,10 @@ var values = _this.getStateKeysAndValuesForBoundary(boundary).values;
         };
-        _this.getFormattedDateString = function (momentDate) {
+        _this.getInputPlaceholderString = function (boundary) {
+            var isInputFocused = _this.getStateKeysAndValuesForBoundary(boundary).values.isInputFocused;
+            var isStartBoundary = boundary === dateUtils_1.DateRangeBoundary.START;
+            var dateString = isStartBoundary ? _this.state.formattedMinDateString : _this.state.formattedMaxDateString;
+            var defaultString = isStartBoundary ? "Start date" : "End date";
+            return isInputFocused ? dateString : defaultString;
+        };
+        _this.getFormattedDateString = function (momentDate, format) {
             if (dateUtils_1.isMomentNull(momentDate)) {
@@ -471,3 +501,3 @@ return "";
             else {
-                return momentDate.format(_this.props.format);
+                return momentDate.format((format != null) ? format : _this.props.format);
             }
@@ -535,14 +565,15 @@ };
         };
-        _this.areSameDay = function (a, b) {
-            return a.diff(b, "days") === 0;
-        };
         _this.doBoundaryDatesOverlap = function (boundaryDate, boundary) {
+            var allowSingleDayRange = _this.props.allowSingleDayRange;
             var otherBoundary = _this.getOtherBoundary(boundary);
             var otherBoundaryDate = _this.getStateKeysAndValuesForBoundary(otherBoundary).values.selectedValue;
-            // TODO: add handling for allowSingleDayRange (#249)
             if (boundary === dateUtils_1.DateRangeBoundary.START) {
-                return boundaryDate.isSameOrAfter(otherBoundaryDate);
+                return allowSingleDayRange
+                    ? boundaryDate.isAfter(otherBoundaryDate, "day")
+                    : boundaryDate.isSameOrAfter(otherBoundaryDate, "day");
             }
             else {
-                return boundaryDate.isSameOrBefore(otherBoundaryDate);
+                return allowSingleDayRange
+                    ? boundaryDate.isBefore(otherBoundaryDate, "day")
+                    : boundaryDate.isSameOrBefore(otherBoundaryDate, "day");
             }
@@ -596,2 +627,4 @@ };
         _this.state = {
+            formattedMaxDateString: _this.getFormattedMinMaxDateString(props, "maxDate"),
+            formattedMinDateString: _this.getFormattedMinMaxDateString(props, "minDate"),
             isOpen: false,
@@ -604,20 +637,21 @@ selectedEnd: selectedEnd,
     DateRangeInput.prototype.componentDidUpdate = function () {
-        if (this.shouldFocusInputRef(this.state.isStartInputFocused, this.startInputRef)) {
+        var _a = this.state, isStartInputFocused = _a.isStartInputFocused, isEndInputFocused = _a.isEndInputFocused, shouldSelectAfterUpdate = _a.shouldSelectAfterUpdate;
+        var shouldFocusStartInput = this.shouldFocusInputRef(isStartInputFocused, this.startInputRef);
+        var shouldFocusEndInput = this.shouldFocusInputRef(isEndInputFocused, this.endInputRef);
+        if (shouldFocusStartInput) {
             this.startInputRef.focus();
         }
-        else if (this.shouldFocusInputRef(this.state.isEndInputFocused, this.endInputRef)) {
+        else if (shouldFocusEndInput) {
             this.endInputRef.focus();
         }
+        if (isStartInputFocused && shouldSelectAfterUpdate) {
+            this.startInputRef.select();
+        }
+        else if (isEndInputFocused && shouldSelectAfterUpdate) {
+            this.endInputRef.select();
+        }
     };
     DateRangeInput.prototype.render = function () {
         var _a = this.props, startInputProps = _a.startInputProps, endInputProps = _a.endInputProps;
-        var startInputString = this.getInputDisplayString(dateUtils_1.DateRangeBoundary.START);
-        var endInputString = this.getInputDisplayString(dateUtils_1.DateRangeBoundary.END);
-        var popoverContent = (React.createElement(dateRangePicker_1.DateRangePicker, { onChange: this.handleDateRangePickerChange, onHoverChange: this.handleDateRangePickerHoverChange, maxDate: this.props.maxDate, minDate: this.props.minDate, boundaryToModify: this.state.boundaryToModify, value: this.getSelectedRange() }));
-        var startInputClasses = classNames(startInputProps.className, (_b = {},
-            _b[core_1.Classes.INTENT_DANGER] = this.isInputInErrorState(dateUtils_1.DateRangeBoundary.START),
-            _b));
-        var endInputClasses = classNames(endInputProps.className, (_c = {},
-            _c[core_1.Classes.INTENT_DANGER] = this.isInputInErrorState(dateUtils_1.DateRangeBoundary.END),
-            _c));
+        var popoverContent = (React.createElement(dateRangePicker_1.DateRangePicker, { allowSingleDayRange: this.props.allowSingleDayRange, onChange: this.handleDateRangePickerChange, onHoverChange: this.handleDateRangePickerHoverChange, maxDate: this.props.maxDate, minDate: this.props.minDate, boundaryToModify: this.state.boundaryToModify, value: this.getSelectedRange() }));
         // allow custom props for each input group, but pass them in an order
@@ -627,12 +661,24 @@ // that guarantees only some props are overridable.
             React.createElement("div", { className: core_1.Classes.CONTROL_GROUP },
-                React.createElement(core_1.InputGroup, tslib_1.__assign({ placeholder: "Start date" }, startInputProps, { className: startInputClasses, disabled: this.props.disabled, inputRef: this.refHandlers.startInputRef, onBlur: this.handleStartInputBlur, onChange: this.handleStartInputChange, onClick: this.handleInputClick, onFocus: this.handleStartInputFocus, onKeyDown: this.handleInputKeyDown, onMouseDown: this.handleInputMouseDown, value: startInputString })),
-                React.createElement(core_1.InputGroup, tslib_1.__assign({ placeholder: "End date" }, endInputProps, { className: endInputClasses, disabled: this.props.disabled, inputRef: this.refHandlers.endInputRef, onBlur: this.handleEndInputBlur, onChange: this.handleEndInputChange, onClick: this.handleInputClick, onFocus: this.handleEndInputFocus, onKeyDown: this.handleInputKeyDown, onMouseDown: this.handleInputMouseDown, value: endInputString })))));
-        var _b, _c;
+                React.createElement(core_1.InputGroup, tslib_1.__assign({}, startInputProps, { className: this.getInputClasses(dateUtils_1.DateRangeBoundary.START, startInputProps), disabled: this.props.disabled, inputRef: this.refHandlers.startInputRef, onBlur: this.handleStartInputBlur, onChange: this.handleStartInputChange, onClick: this.handleInputClick, onFocus: this.handleStartInputFocus, onKeyDown: this.handleInputKeyDown, onMouseDown: this.handleInputMouseDown, placeholder: this.getInputPlaceholderString(dateUtils_1.DateRangeBoundary.START), value: this.getInputDisplayString(dateUtils_1.DateRangeBoundary.START) })),
+                React.createElement(core_1.InputGroup, tslib_1.__assign({}, endInputProps, { className: this.getInputClasses(dateUtils_1.DateRangeBoundary.END, endInputProps), disabled: this.props.disabled, inputRef: this.refHandlers.endInputRef, onBlur: this.handleEndInputBlur, onChange: this.handleEndInputChange, onClick: this.handleInputClick, onFocus: this.handleEndInputFocus, onKeyDown: this.handleInputKeyDown, onMouseDown: this.handleInputMouseDown, placeholder: this.getInputPlaceholderString(dateUtils_1.DateRangeBoundary.END), value: this.getInputDisplayString(dateUtils_1.DateRangeBoundary.END) })))));
     };
     DateRangeInput.prototype.componentWillReceiveProps = function (nextProps) {
         _super.prototype.componentWillReceiveProps.call(this, nextProps);
+        var nextState = {};
         if (nextProps.value !== this.props.value) {
             var _a = this.getInitialRange(nextProps), selectedStart = _a[0], selectedEnd = _a[1];
-            this.setState({ selectedStart: selectedStart, selectedEnd: selectedEnd });
+            nextState = tslib_1.__assign({}, nextState, { selectedStart: selectedStart, selectedEnd: selectedEnd });
         }
+        // we use Moment to format date strings, but min/max dates come in as vanilla JS Dates.
+        // cache the formatted date strings to avoid creating new Moment instances on each render.
+        var didFormatChange = nextProps.format !== this.props.format;
+        if (didFormatChange || nextProps.minDate !== this.props.minDate) {
+            var formattedMinDateString = this.getFormattedMinMaxDateString(nextProps, "minDate");
+            nextState = tslib_1.__assign({}, nextState, { formattedMinDateString: formattedMinDateString });
+        }
+        if (didFormatChange || nextProps.maxDate !== this.props.maxDate) {
+            var formattedMaxDateString = this.getFormattedMinMaxDateString(nextProps, "maxDate");
+            nextState = tslib_1.__assign({}, nextState, { formattedMaxDateString: formattedMaxDateString });
+        }
+        this.setState(nextState);
     };
@@ -648,5 +694,15 @@ // Helpers
     };
+    // this is a slightly kludgy function, but it saves us a good amount of repeated code between
+    // the constructor and componentWillReceiveProps.
+    DateRangeInput.prototype.getFormattedMinMaxDateString = function (props, propName) {
+        var date = props[propName];
+        var defaultDate = DateRangeInput.defaultProps[propName];
+        // default values are applied only if a prop is strictly `undefined`
+        // See: https://facebook.github.io/react/docs/react-component.html#defaultprops
+        return this.getFormattedDateString(moment((date === undefined) ? defaultDate : date), props.format);
+    };
     return DateRangeInput;
 }(core_1.AbstractComponent));
 DateRangeInput.defaultProps = {
+    allowSingleDayRange: false,
     closeOnSelection: true,
@@ -661,2 +717,3 @@ disabled: false,
     overlappingDatesMessage: "Overlapping dates",
+    selectAllOnFocus: false,
     startInputProps: {},
@@ -663,0 +720,0 @@ };

dist/dateRangePicker.d.ts

@@ -49,3 +49,3 @@ /// <reference types="react" />
      */
-    onHoverChange?: (hoveredDates: DateRange) => void;
+    onHoverChange?: (hoveredDates: DateRange, hoveredDay: Date) => void;
     /**
@@ -52,0 +52,0 @@ * Whether shortcuts to quickly select a range of dates are displayed or not.

dist/dateRangePicker.js

@@ -74,5 +74,5 @@ /*
             _this.setState({ hoverValue: nextHoverValue });
-            core_1.Utils.safeInvoke(_this.props.onHoverChange, nextHoverValue);
+            core_1.Utils.safeInvoke(_this.props.onHoverChange, nextHoverValue, day);
         };
-        _this.handleDayMouseLeave = function (_e, _day, modifiers) {
+        _this.handleDayMouseLeave = function (_e, day, modifiers) {
             if (modifiers.disabled) {
@@ -83,3 +83,3 @@ return;
             _this.setState({ hoverValue: nextHoverValue });
-            core_1.Utils.safeInvoke(_this.props.onHoverChange, nextHoverValue);
+            core_1.Utils.safeInvoke(_this.props.onHoverChange, nextHoverValue, day);
         };
@@ -228,4 +228,6 @@ _this.handleDayClick = function (e, day, modifiers) {
         _super.prototype.componentWillReceiveProps.call(this, nextProps);
-        var nextState = getStateChange(this.props.value, nextProps.value, this.state, nextProps.contiguousCalendarMonths);
-        this.setState(nextState);
+        if (!DateUtils.areRangesEqual(this.props.value, nextProps.value)) {
+            var nextState = getStateChange(this.props.value, nextProps.value, this.state, nextProps.contiguousCalendarMonths);
+            this.setState(nextState);
+        }
     };
@@ -296,4 +298,6 @@ DateRangePicker.prototype.validateProps = function (props) {
                 if (DateUtils.areSameDay(day, otherBoundaryDate)) {
-                    var nextOtherBoundaryDate = allowSingleDayRange ? otherBoundaryDate : null;
-                    nextValue = this.createRangeForBoundary(day, nextOtherBoundaryDate, boundary);
+                    var _a = (allowSingleDayRange)
+                        ? [otherBoundaryDate, otherBoundaryDate]
+                        : [null, null], nextBoundaryDate = _a[0], nextOtherBoundaryDate = _a[1];
+                    nextValue = this.createRangeForBoundary(nextBoundaryDate, nextOtherBoundaryDate, boundary);
                 }
@@ -315,4 +319,6 @@ else if (this.isDateOverlappingOtherBoundary(day, otherBoundaryDate, boundary)) {
                 else if (DateUtils.areSameDay(day, otherBoundaryDate)) {
-                    var nextOtherBoundaryDate = (allowSingleDayRange) ? otherBoundaryDate : null;
-                    nextValue = this.createRangeForBoundary(day, nextOtherBoundaryDate, boundary);
+                    var _b = (allowSingleDayRange)
+                        ? [otherBoundaryDate, otherBoundaryDate]
+                        : [boundaryDate, null], nextBoundaryDate = _b[0], nextOtherBoundaryDate = _b[1];
+                    nextValue = this.createRangeForBoundary(nextBoundaryDate, nextOtherBoundaryDate, boundary);
                 }
@@ -319,0 +325,0 @@ else if (this.isDateOverlappingOtherBoundary(day, otherBoundaryDate, boundary)) {

package.json

 {
   "name": "@blueprintjs/datetime",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "Components for interacting with dates and times",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/common/dateUtils.ts

@@ -29,2 +29,16 @@ /*
 
+export function areRangesEqual(dateRange1: DateRange, dateRange2: DateRange) {
+    if (dateRange1 == null && dateRange2 == null) {
+        return true;
+    } else if (dateRange1 == null || dateRange2 == null) {
+        return false;
+    } else {
+        const [start1, end1] = dateRange1;
+        const [start2, end2] = dateRange2;
+        const areStartsEqual = (start1 == null && start2 == null) || areSameDay(start1, start2);
+        const areEndsEqual = (end1 == null && end2 == null) || areSameDay(end1, end2);
+        return areStartsEqual && areEndsEqual;
+    }
+}
+
 export function areSameDay(date1: Date, date2: Date) {
@@ -31,0 +45,0 @@ return date1 != null

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1311505

increased by2.33%

Lines of code

9926

increased by2.59%

No dependency changes