[Fix] DayPicker: update calendarMonthWeeks if numberOfMonths is changed

Fixes #1394.

Co-authored-by: Lee Mulvey <lmulvey@me.com>
Co-authored-by: Jonathan Hao <haojonat@amazon.com>

Author: 2 people

src/components/DayPicker.jsx

@@ -391,10 +391,19 @@ class DayPicker extends React.PureComponent {
       monthTitleHeight,
     } = this.state;
 
+    let shouldAdjustHeight = false;
+    if (numberOfMonths !== prevProps.numberOfMonths) {
+      this.setCalendarMonthWeeks(currentMonth);
+      shouldAdjustHeight = true;
+    }
     if (
       this.isHorizontal()
       && (orientation !== prevProps.orientation || daySize !== prevProps.daySize)
     ) {
+      shouldAdjustHeight = true;
+    }
+
+    if (shouldAdjustHeight) {
       const visibleCalendarWeeks = this.calendarMonthWeeks.slice(1, numberOfMonths + 1);
       const calendarMonthWeeksHeight = Math.max(0, ...visibleCalendarWeeks) * (daySize - 1);
       const newMonthHeight = monthTitleHeight + calendarMonthWeeksHeight + 1;

test/components/DayPicker_spec.jsx

@@ -12,6 +12,7 @@ import CalendarMonthGrid from '../../src/components/CalendarMonthGrid';
 import DayPickerNavigation from '../../src/components/DayPickerNavigation';
 import DayPickerKeyboardShortcuts from '../../src/components/DayPickerKeyboardShortcuts';
 import {
+  DAY_SIZE,
   HORIZONTAL_ORIENTATION,
   VERTICAL_ORIENTATION,
   VERTICAL_SCROLLABLE,
@@ -22,8 +23,9 @@ const today = moment().locale('en');
 const event = { preventDefault() {}, stopPropagation() {} };
 
 describe('DayPicker', () => {
+  let adjustDayPickerHeightSpy;
   beforeEach(() => {
-    sinon.stub(PureDayPicker.prototype, 'adjustDayPickerHeight');
+    adjustDayPickerHeightSpy = sinon.stub(PureDayPicker.prototype, 'adjustDayPickerHeight');
   });
 
   afterEach(() => {
@@ -907,13 +909,8 @@ describe('DayPicker', () => {
     });
   });
 
-  describe.skip('life cycle methods', () => {
-    let adjustDayPickerHeightSpy;
-    beforeEach(() => {
-      adjustDayPickerHeightSpy = sinon.stub(PureDayPicker.prototype, 'adjustDayPickerHeight');
-    });
-
-    describe('#componentDidMount', () => {
+  describe('life cycle methods', () => {
+    describe.skip('#componentDidMount', () => {
       describe('props.orientation === HORIZONTAL_ORIENTATION', () => {
         it('calls adjustDayPickerHeight', () => {
           mount(<DayPicker orientation={HORIZONTAL_ORIENTATION} />);
@@ -927,7 +924,7 @@ describe('DayPicker', () => {
         });
       });
 
-      describe('props.orientation === VERTICAL_ORIENTATION', () => {
+      describe.skip('props.orientation === VERTICAL_ORIENTATION', () => {
         it('does not call adjustDayPickerHeight', () => {
           mount(<DayPicker orientation={VERTICAL_ORIENTATION} />);
           expect(adjustDayPickerHeightSpy.called).to.equal(false);
@@ -949,7 +946,7 @@ describe('DayPicker', () => {
       });
     });
 
-    describe('#componentWillReceiveProps', () => {
+    describe.skip('#componentWillReceiveProps', () => {
       describe('props.orientation === VERTICAL_SCROLLABLE', () => {
         it('updates state.currentMonthScrollTop', () => {
           sinon.spy(DayPicker.prototype, 'setTransitionContainerRef');
@@ -966,39 +963,45 @@ describe('DayPicker', () => {
 
     describe('#componentDidUpdate', () => {
       let updateStateAfterMonthTransitionSpy;
+      let setCalendarMonthWeeksSpy;
+
       beforeEach(() => {
         updateStateAfterMonthTransitionSpy = sinon.stub(
-          DayPicker.prototype,
+          PureDayPicker.prototype,
           'updateStateAfterMonthTransition',
         );
+        setCalendarMonthWeeksSpy = sinon.stub(
+          PureDayPicker.prototype,
+          'setCalendarMonthWeeks',
+        );
       });
 
       describe('props.orientation === HORIZONTAL_ORIENTATION', () => {
-        it('calls adjustDayPickerHeight if state.monthTransition is truthy', () => {
+        it.skip('calls adjustDayPickerHeight if state.monthTransition is truthy', () => {
           const wrapper = mount(<DayPicker orientation={HORIZONTAL_ORIENTATION} />);
           wrapper.setState({
             monthTransition: 'foo',
           });
           expect(adjustDayPickerHeightSpy).to.have.property('callCount', 2);
         });
 
-        it('does not call adjustDayPickerHeight if state.monthTransition is falsy', () => {
+        it.skip('does not call adjustDayPickerHeight if state.monthTransition is falsy', () => {
           const wrapper = mount(<DayPicker orientation={HORIZONTAL_ORIENTATION} />);
           wrapper.setState({
             monthTransition: null,
           });
           expect(adjustDayPickerHeightSpy.calledTwice).to.equal(false);
         });
 
-        it('calls adjustDayPickerHeight if orientation has changed from HORIZONTAL_ORIENTATION to VERTICAL_ORIENTATION', () => {
+        it.skip('calls adjustDayPickerHeight if orientation has changed from HORIZONTAL_ORIENTATION to VERTICAL_ORIENTATION', () => {
           const wrapper = mount(<DayPicker orientation={HORIZONTAL_ORIENTATION} />);
           wrapper.setState({
             orientation: VERTICAL_ORIENTATION,
           });
           expect(adjustDayPickerHeightSpy).to.have.property('callCount', 2);
         });
 
-        it('calls adjustDayPickerHeight if daySize has changed', () => {
+        it.skip('calls adjustDayPickerHeight if daySize has changed', () => {
           const wrapper = mount(<DayPicker daySize={39} orientation={HORIZONTAL_ORIENTATION} />);
           wrapper.setState({
             daySize: 40,
@@ -1007,24 +1010,44 @@ describe('DayPicker', () => {
           expect(adjustDayPickerHeightSpy).to.have.property('callCount', 2);
         });
 
-        it('calls updateStateAfterMonthTransition if state.monthTransition is truthy', () => {
+        it.skip('calls updateStateAfterMonthTransition if state.monthTransition is truthy', () => {
           const wrapper = mount(<DayPicker orientation={HORIZONTAL_ORIENTATION} />);
           wrapper.setState({
             monthTransition: 'foo',
           });
           expect(updateStateAfterMonthTransitionSpy).to.have.property('callCount', 1);
         });
 
-        it('does not call updateStateAfterMonthTransition if state.monthTransition is falsy', () => {
+        it.skip('does not call updateStateAfterMonthTransition if state.monthTransition is falsy', () => {
           const wrapper = mount(<DayPicker orientation={HORIZONTAL_ORIENTATION} />);
           wrapper.setState({
             monthTransition: null,
           });
           expect(updateStateAfterMonthTransitionSpy.calledOnce).to.equal(false);
         });
+
+        it('calls adjustDayPickerHeightSpy if props.numberOfMonths changes', () => {
+          const wrapper = shallow(<DayPicker numberOfMonths={2} />).dive();
+          wrapper.instance().componentDidUpdate({
+            daySize: DAY_SIZE,
+            numberOfMonths: 3,
+            orientation: HORIZONTAL_ORIENTATION,
+          });
+          expect(adjustDayPickerHeightSpy.callCount).to.equal(1);
+        });
+
+        it('does not call adjustDayPickerHeightSpy if props.numberOfMonths does not change', () => {
+          const wrapper = shallow(<DayPicker numberOfMonths={2} />).dive();
+          wrapper.instance().componentDidUpdate({
+            daySize: DAY_SIZE,
+            numberOfMonths: 2,
+            orientation: HORIZONTAL_ORIENTATION,
+          });
+          expect(adjustDayPickerHeightSpy.called).to.equal(false);
+        });
       });
 
-      describe('props.orientation === VERTICAL_ORIENTATION', () => {
+      describe.skip('props.orientation === VERTICAL_ORIENTATION', () => {
         it('does not call adjustDayPickerHeight if state.monthTransition is truthy', () => {
           const wrapper = mount(<DayPicker orientation={VERTICAL_ORIENTATION} />);
           wrapper.setState({
@@ -1075,7 +1098,7 @@ describe('DayPicker', () => {
         });
       });
 
-      describe('props.orientation === VERTICAL_SCROLLABLE', () => {
+      describe.skip('props.orientation === VERTICAL_SCROLLABLE', () => {
         it('does not update transitionContainer ref`s scrollTop currentMonth stays the same', () => {
           sinon.spy(DayPicker.prototype, 'setTransitionContainerRef');
           const wrapper = mount(<DayPicker orientation={VERTICAL_SCROLLABLE} />);
@@ -1097,7 +1120,7 @@ describe('DayPicker', () => {
         });
       });
 
-      describe('when isFocused is updated to true', () => {
+      describe.skip('when isFocused is updated to true', () => {
         const prevProps = { isFocused: false };
         const newProps = { isFocused: true };