Update conditions when adjustDayPickerHeight is called

* Added checks for daySize and orientation in DayPicker.componentDidUpdate() so that DayPicker height is recalculated if either of these change between renders * Added new tests for DayPicker.componentDidUpdate
react-dates · Jul 1, 2018 · 66dc966 · 66dc966
1 parent 83ec316
commit 66dc966
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
@@ -315,9 +315,15 @@ class DayPicker extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { isFocused } = this.props;
+    const { orientation, daySize, isFocused } = this.props;
     const { focusedDate } = this.state;
 
+    if (orientation !== prevProps.orientation || daySize !== prevProps.daySize) {
+      if (this.isHorizontal()) {
+        this.adjustDayPickerHeight();
+      }
+    }
+
     if (!prevProps.isFocused && isFocused && !focusedDate) {
       this.container.focus();
     }

diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
@@ -796,6 +796,23 @@ describe('DayPicker', () => {
           expect(adjustDayPickerHeightSpy.calledTwice).to.equal(false);
         });
 
+        it('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', () => {
+          const wrapper = mount(<DayPicker daySize={39} orientation={HORIZONTAL_ORIENTATION} />);
+          wrapper.setState({
+            daySize: 40,
+            orientation: HORIZONTAL_ORIENTATION,
+          });
+          expect(adjustDayPickerHeightSpy).to.have.property('callCount', 2);
+        });
+
         it('calls updateStateAfterMonthTransition if state.monthTransition is truthy', () => {
           const wrapper = mount(<DayPicker orientation={HORIZONTAL_ORIENTATION} />);
           wrapper.setState({
@@ -830,6 +847,23 @@ describe('DayPicker', () => {
           expect(adjustDayPickerHeightSpy.called).to.equal(false);
         });
 
+        it('calls adjustDayPickerHeight if orientation has changed from VERTICAL_ORIENTATION to HORIZONTAL_ORIENTATION', () => {
+          const wrapper = mount(<DayPicker orientation={VERTICAL_ORIENTATION} />);
+          wrapper.setState({
+            orientation: HORIZONTAL_ORIENTATION,
+          });
+          expect(adjustDayPickerHeightSpy).to.have.property('callCount', 2);
+        });
+
+        it('calls adjustDayPickerHeight if daySize has changed', () => {
+          const wrapper = mount(<DayPicker daySize={39} orientation={VERTICAL_ORIENTATION} />);
+          wrapper.setState({
+            daySize: 40,
+            orientation: VERTICAL_ORIENTATION,
+          });
+          expect(adjustDayPickerHeightSpy).to.have.property('callCount', 2);
+        });
+
         it('calls updateStateAfterMonthTransition if state.monthTransition is truthy', () => {
           const wrapper = mount(<DayPicker orientation={VERTICAL_ORIENTATION} />);
           wrapper.setState({