Merge pull request #190 from Spendesk/fix-null-value

Unselection by passing falsy value in props
onefinestay · Apr 26, 2018 · ecc473a · ecc473a
2 parents fa06e53 + 94cf85e
commit ecc473a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/src/DateRangePicker.jsx b/src/DateRangePicker.jsx
@@ -108,9 +108,7 @@ const DateRangePicker = createClass({
     };
 
     if (hasUpdatedValue(this.props, nextProps)) {
-      const isNewValueVisible = this.isStartOrEndVisible(nextProps);
-
-      if (!isNewValueVisible) {
+      if (!nextProps.value || !this.isStartOrEndVisible(nextProps)) {
         const yearMonth = getYearMonthProps(nextProps);
 
         updatedState.year = yearMonth.year;

diff --git a/src/tests/DateRangePicker.spec.js b/src/tests/DateRangePicker.spec.js
@@ -698,17 +698,15 @@ describe('The DateRangePicker component', function () {
 
   describe('#componentWillReceiveProps', function () {
     describe('updating date states', function () {
-      beforeEach( function () {
+      it('updates state.dateStates if data provided in the props', function () {
         this.useDocumentRenderer({
           initialYear: 2000,
           initialMonth: 6,
         });
         spyOn(this.renderedComponent, 'render').and.callFake(function () {
           return <div />;
         });
-      });
 
-      it('updates state.dateStates if data provided in the props', function () {
         var newDateStates = ['newDateStates'];
         spyOn(this.renderedComponent, 'getDateStates').and.returnValue(newDateStates);
         spyOn(this.renderedComponent, 'getEnabledRange').and.returnValue('newEnabledRange');
@@ -718,6 +716,25 @@ describe('The DateRangePicker component', function () {
         this.renderedComponent.componentWillReceiveProps({});
         expect(this.renderedComponent.state.dateStates).toBe(newDateStates);
       });
+
+      it('returns to initial view if data provided goes from a date range to a falsy value', function () {
+        var initialYear = 2000;
+        var initialMonth = 6;
+        var value = moment.range(moment(new Date('1982/07/03')), moment(new Date('1982/07/21')));
+        this.useDocumentRenderer({
+          initialYear,
+          initialMonth,
+          value,
+        });
+        spyOn(this.renderedComponent, 'render').and.callFake(function () {
+          return <div />;
+        });
+        const newProps = Object.assign({}, this.renderedComponent.props, { value: null });
+        this.renderedComponent.componentWillReceiveProps(newProps);
+
+        expect(this.renderedComponent.state.year).toBe(initialYear);
+        expect(this.renderedComponent.state.month).toBe(initialMonth);
+      });
     });
 
     describe('updating the value', function () {

diff --git a/src/utils/getYearMonth.js b/src/utils/getYearMonth.js
@@ -9,7 +9,7 @@ export function getYearMonth(date) {
 export const getYearMonthProps = function (props) {
   const { selectionType, value } = props;
   if (!value) {
-    return undefined;
+    return { year: props.initialYear, month: props.initialMonth };
   }
 
   if (selectionType === 'single') {