Skip to content

Commit

Permalink
Merge pull request #1851 from airbnb/revert-1834-caseklim--update-sta…
Browse files Browse the repository at this point in the history 
…te-if-unvisible-date

Revert "Call getStateForNewMonth when date/startDate/endDate is set to a date that is not visible"
  • Loading branch information
@noratarano
noratarano authored Oct 30, 2019
2 parents 0362c92 + 37803f4 commit 18c8228
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 127 deletions.
20 changes: 3 additions & 17 deletions src/components/DayPickerRangeController.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import isBeforeDay from '../utils/isBeforeDay';
import getVisibleDays from '../utils/getVisibleDays';
import isDayVisible from '../utils/isDayVisible';

import getPooledMoment from '../utils/getPooledMoment';
import getSelectedDateOffset from '../utils/getSelectedDateOffset';

import toISODateString from '../utils/toISODateString';
Expand All @@ -42,6 +41,7 @@ import {
} from '../constants';

import DayPicker from './DayPicker';
import getPooledMoment from '../utils/getPooledMoment';

const propTypes = forbidExtraProps({
startDate: momentPropTypes.momentObj,
Expand Down Expand Up @@ -284,8 +284,6 @@ export default class DayPickerRangeController extends React.PureComponent {
} = this.props;

const { hoverDate } = this.state;

let { currentMonth } = this.state;
let { visibleDays } = this.state;

let recomputeOutsideRange = false;
Expand Down Expand Up @@ -315,18 +313,6 @@ export default class DayPickerRangeController extends React.PureComponent {
const didEndDateChange = endDate !== prevEndDate;
const didFocusChange = focusedInput !== prevFocusedInput;

let isDateVisible = true;

if (didStartDateChange || didEndDateChange) {
if (didStartDateChange) {
isDateVisible = isDayVisible(startDate, currentMonth, numberOfMonths, enableOutsideDays);
}

if (didEndDateChange) {
isDateVisible = isDayVisible(endDate, currentMonth, numberOfMonths, enableOutsideDays);
}
}

if (
numberOfMonths !== prevNumberOfMonths
|| enableOutsideDays !== prevEnableOutsideDays
Expand All @@ -335,10 +321,10 @@ export default class DayPickerRangeController extends React.PureComponent {
&& !prevFocusedInput
&& didFocusChange
)
|| !isDateVisible
) {
const newMonthState = this.getStateForNewMonth(nextProps);
({ currentMonth, visibleDays } = newMonthState);
const { currentMonth } = newMonthState;
({ visibleDays } = newMonthState);
this.setState({
currentMonth,
visibleDays,
Expand Down
19 changes: 6 additions & 13 deletions src/components/DayPickerSingleDateController.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import isSameDay from '../utils/isSameDay';
import isAfterDay from '../utils/isAfterDay';

import getVisibleDays from '../utils/getVisibleDays';
import isDayVisible from '../utils/isDayVisible';

import toISODateString from '../utils/toISODateString';
import { addModifier, deleteModifier } from '../utils/modifiers';
Expand Down Expand Up @@ -220,7 +219,6 @@ export default class DayPickerSingleDateController extends React.PureComponent {
focused: prevFocused,
date: prevDate,
} = this.props;
let { currentMonth } = this.state;
let { visibleDays } = this.state;

let recomputeOutsideRange = false;
Expand All @@ -246,32 +244,27 @@ export default class DayPickerSingleDateController extends React.PureComponent {
recomputeOutsideRange || recomputeDayBlocked || recomputeDayHighlighted
);

const didDateChange = date !== prevDate;
const didFocusChange = focused !== prevFocused;

let isDateVisible = true;

if (didDateChange) {
isDateVisible = isDayVisible(date, currentMonth, numberOfMonths, enableOutsideDays);
}

if (
numberOfMonths !== prevNumberOfMonths
|| enableOutsideDays !== prevEnableOutsideDays
|| (
initialVisibleMonth !== prevInitialVisibleMonth
&& !prevFocused
&& focused
) || !isDateVisible
)
) {
const newMonthState = this.getStateForNewMonth(nextProps);
({ currentMonth, visibleDays } = newMonthState);
const { currentMonth } = newMonthState;
({ visibleDays } = newMonthState);
this.setState({
currentMonth,
visibleDays,
});
}

const didDateChange = date !== prevDate;
const didFocusChange = focused !== prevFocused;

let modifiers = {};

if (didDateChange) {
Expand Down
99 changes: 26 additions & 73 deletions test/components/DayPickerRangeController_spec.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -297,80 +297,33 @@ describe('DayPickerRangeController', () => {
});
expect(wrapper.instance().state.visibleDays).to.equal(visibleDays);
});
});

describe('startDate changed from one date to another', () => {
it('removes previous `after-hovered-start` range', () => {
const minimumNights = 5;
const startDate = moment().add(7, 'days');
const dayAfterStartDate = startDate.clone().add(1, 'day');
const firstAvailableDate = startDate.clone().add(minimumNights + 1, 'days');
const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
const nextStartDate = moment().add(4, 'days');
const wrapper = shallow((
<DayPickerRangeController
onDatesChange={sinon.stub()}
onFocusChange={sinon.stub()}
startDate={startDate}
focusedInput={START_DATE}
minimumNights={minimumNights}
/>
));
deleteModifierFromRangeSpy.resetHistory();
wrapper.instance().componentWillReceiveProps({
...props,
startDate: nextStartDate,
});
const afterHoverStartCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'after-hovered-start');
expect(afterHoverStartCalls.length).to.equal(1);
expect(isSameDay(afterHoverStartCalls[0].args[1], dayAfterStartDate)).to.equal(true);
expect(isSameDay(afterHoverStartCalls[0].args[2], firstAvailableDate)).to.equal(true);
});

it('calls getStateForNewMonth with nextProps when date is not visible', () => {
const getStateForNewMonthSpy = sinon.spy(
DayPickerRangeController.prototype,
'getStateForNewMonth',
);
const startDate = moment();
const nextStartDate = startDate.clone().add(2, 'months');

const wrapper = shallow((
<DayPickerRangeController {...props} startDate={startDate} />
));

getStateForNewMonthSpy.resetHistory();

wrapper.instance().componentWillReceiveProps({
...props,
startDate: nextStartDate,
});

expect(getStateForNewMonthSpy.callCount).to.equal(1);
});
});

describe('endDate changed from one date to another', () => {
it('calls getStateForNewMonth with nextProps when date is not visible', () => {
const getStateForNewMonthSpy = sinon.spy(
DayPickerRangeController.prototype,
'getStateForNewMonth',
);
const endDate = moment();
const nextEndDate = endDate.clone().add(2, 'months');

const wrapper = shallow((
<DayPickerRangeController {...props} endDate={endDate} />
));

getStateForNewMonthSpy.resetHistory();

wrapper.instance().componentWillReceiveProps({
...props,
endDate: nextEndDate,
describe('startDate changed from one date to another', () => {
it('removes previous `after-hovered-start` range', () => {
const minimumNights = 5;
const startDate = moment().add(7, 'days');
const dayAfterStartDate = startDate.clone().add(1, 'day');
const firstAvailableDate = startDate.clone().add(minimumNights + 1, 'days');
const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange');
const nextStartDate = moment().add(4, 'days');
const wrapper = shallow((
<DayPickerRangeController
onDatesChange={sinon.stub()}
onFocusChange={sinon.stub()}
startDate={startDate}
focusedInput={START_DATE}
minimumNights={minimumNights}
/>
));
deleteModifierFromRangeSpy.resetHistory();
wrapper.instance().componentWillReceiveProps({
...props,
startDate: nextStartDate,
});
const afterHoverStartCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'after-hovered-start');
expect(afterHoverStartCalls.length).to.equal(1);
expect(isSameDay(afterHoverStartCalls[0].args[1], dayAfterStartDate)).to.equal(true);
expect(isSameDay(afterHoverStartCalls[0].args[2], firstAvailableDate)).to.equal(true);
});

expect(getStateForNewMonthSpy.callCount).to.equal(1);
});
});
});
Expand Down
24 changes: 0 additions & 24 deletions test/components/DayPickerSingleDateController_spec.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,30 +46,6 @@ describe('DayPickerSingleDateController', () => {
onFocusChange() {},
};

describe('date changed from one date to another', () => {
it('calls getStateForNewMonth with nextProps when date is not visible', () => {
const getStateForNewMonthSpy = sinon.spy(
DayPickerSingleDateController.prototype,
'getStateForNewMonth',
);
const date = moment();
const nextDate = date.clone().add(2, 'months');

const wrapper = shallow((
<DayPickerSingleDateController {...props} date={date} />
));

getStateForNewMonthSpy.resetHistory();

wrapper.instance().componentWillReceiveProps({
...props,
date: nextDate,
});

expect(getStateForNewMonthSpy.callCount).to.equal(1);
});
});

describe('modifiers', () => {
describe('selected modifier', () => {
describe('props.date did not change', () => {
Expand Down

0 comments on commit 18c8228

Please # to comment.