Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Don't overrides DayPickerInput selectedDays prop (#531)
* Don't overrides DayPickerInput selectedDays prop

* Extra selectedDays prop removed

* Test added
  • Loading branch information
hydrognomik authored and gpbl committed Nov 5, 2017
1 parent e3bc6df commit ae71a0c
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 10 deletions.
31 changes: 21 additions & 10 deletions src/DayPickerInput.js
Expand Up @@ -10,22 +10,21 @@ import { ESC } from './keys';
export const HIDE_TIMEOUT = 100;

function getStateFromProps(props) {
const { dayPickerProps, format, value } = props;
let month;
if (props.value) {
const m = moment(props.value, props.format, true);
if (value) {
const m = moment(value, format, true);
if (m.isValid()) {
month = m.toDate();
}
} else {
month =
props.dayPickerProps.initialMonth ||
props.dayPickerProps.month ||
new Date();
month = dayPickerProps.initialMonth || dayPickerProps.month || new Date();
}

return {
value: props.value,
value,
month,
selectedDays: dayPickerProps.selectedDays,
};
}

Expand Down Expand Up @@ -255,7 +254,15 @@ export default class DayPickerInput extends React.Component {
}
if (modifiers.selected && this.props.clickUnselectsDay) {
// Unselect the day
this.setState({ value: '' }, this.hideAfterDayClick);
let { selectedDays } = this.state;
if (Array.isArray(selectedDays)) {
selectedDays = selectedDays.slice(0);
const selectedDayIdx = selectedDays.indexOf(day);
selectedDays.splice(selectedDayIdx, 1);
} else if (moment(selectedDays).isValid()) {
selectedDays = null;
}
this.setState({ value: '', selectedDays }, this.hideAfterDayClick);
if (this.props.onDayChange) {
this.props.onDayChange(undefined, modifiers);
}
Expand All @@ -279,12 +286,16 @@ export default class DayPickerInput extends React.Component {
};

renderOverlay() {
const { format } = this.props;
const { selectedDays, value } = this.state;
let selectedDay;
if (this.state.value) {
const m = moment(this.state.value, this.props.format, true);
if (!selectedDays && value) {
const m = moment(value, format, true);
if (m.isValid()) {
selectedDay = m.toDate();
}
} else if (selectedDays) {
selectedDay = selectedDays;
}

return (
Expand Down
59 changes: 59 additions & 0 deletions test/daypickerinput/events.js
Expand Up @@ -265,6 +265,26 @@ describe('DayPickerInput', () => {
expect(wrapper.find('input')).toHaveProp('value', '');
expect(wrapper.find('.DayPicker-Day--selected')).toHaveLength(0);
});
it('should unselect the clicked day if already selected', () => {
const wrapper = mount(
<DayPickerInput
value="02/08/2017"
clickUnselectsDay
dayPickerProps={{
month: new Date(2017, 1),
selectedDays: [new Date(2017, 1, 8), new Date(2017, 1, 9)],
}}
/>
);
wrapper.instance().showDayPicker();
wrapper.update();
wrapper
.find('.DayPicker-Day')
.at(10)
.simulate('click');
expect(wrapper.find('input')).toHaveProp('value', '');
expect(wrapper.find('.DayPicker-Day--selected')).toHaveLength(1);
});
it('should call `onDayChange` when clicking a selected day', () => {
const onDayChange = jest.fn();
const wrapper = mount(
Expand Down Expand Up @@ -310,6 +330,45 @@ describe('DayPickerInput', () => {
.simulate('click');
expect(onDayChange).not.toHaveBeenCalled();
});
it('should use `dayPickerProps.selectedDays` after clicking a day', () => {
const wrapper = mount(
<DayPickerInput
dayPickerProps={{
month: new Date(2017, 1),
selectedDays: [new Date(2017, 1, 8), new Date(2017, 1, 9)],
}}
/>
);
wrapper.instance().showDayPicker();
wrapper.update();
wrapper
.find('.DayPicker-Day')
.at(9)
.simulate('click');
const selectedDays = wrapper.find('.DayPicker-Day--selected');
expect(selectedDays).toHaveLength(2);
expect(selectedDays.at(0)).toHaveText('8');
expect(selectedDays.at(1)).toHaveText('9');
});
it('should use `dayPickerProps.selectedDays` after typing a valid day', () => {
const wrapper = mount(
<DayPickerInput
dayPickerProps={{
month: new Date(2017, 1),
selectedDays: [new Date(2017, 1, 8), new Date(2017, 1, 9)],
}}
/>
);
wrapper.instance().showDayPicker();
wrapper.update();
wrapper
.find('input')
.simulate('change', { target: { value: '02/07/2017' } });
const selectedDays = wrapper.find('.DayPicker-Day--selected');
expect(selectedDays).toHaveLength(2);
expect(selectedDays.at(0)).toHaveText('8');
expect(selectedDays.at(1)).toHaveText('9');
});
});
});
});

0 comments on commit ae71a0c

Please sign in to comment.