Skip to content

Commit

Permalink
[Fix] DayPicker: update calendarMonthWeeks if numberOfMonths is cha…
Browse files Browse the repository at this point in the history 
…nged

Fixes #1394.

Co-authored-by: Lee Mulvey <lmulvey@me.com>
Co-authored-by: Jonathan Hao <haojonat@amazon.com>
  • Loading branch information
@haojonat @LMulvey @ljharb
2 people authored and ljharb committed Feb 22, 2021
1 parent e78b84e commit 42e5996
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 20 deletions.
9 changes: 9 additions & 0 deletions src/components/DayPicker.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
58 changes: 38 additions & 20 deletions test/components/DayPicker_spec.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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(() => {
Expand Down Expand Up @@ -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} />);
Expand All @@ -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);
Expand All @@ -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');
Expand All @@ -966,39 +963,40 @@ describe('DayPicker', () => {

describe('#componentDidUpdate', () => {
let updateStateAfterMonthTransitionSpy;

beforeEach(() => {
updateStateAfterMonthTransitionSpy = sinon.stub(
DayPicker.prototype,
PureDayPicker.prototype,
'updateStateAfterMonthTransition',
);
});

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,
Expand All @@ -1007,24 +1005,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({
Expand Down Expand Up @@ -1075,7 +1093,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} />);
Expand All @@ -1097,7 +1115,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 };

Expand Down

0 comments on commit 42e5996

Please sign in to comment.