From ae71a0c490f06cfb8690c05e18e31543df35f3a4 Mon Sep 17 00:00:00 2001
From: hydrognomik <hydrognomik@gmail.com>
Date: Sun, 5 Nov 2017 15:51:02 +0300
Subject: [PATCH] Don't overrides DayPickerInput selectedDays prop (#531)

* Don't overrides DayPickerInput selectedDays prop

* Extra selectedDays prop removed

* Test added
---
 src/DayPickerInput.js         | 31 ++++++++++++------
 test/daypickerinput/events.js | 59 +++++++++++++++++++++++++++++++++++
 2 files changed, 80 insertions(+), 10 deletions(-)

diff --git a/src/DayPickerInput.js b/src/DayPickerInput.js
index 25bd9754e2..299d16a8d4 100644
--- a/src/DayPickerInput.js
+++ b/src/DayPickerInput.js
@@ -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,
   };
 }
 
@@ -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);
       }
@@ -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 (
diff --git a/test/daypickerinput/events.js b/test/daypickerinput/events.js
index 79e1f3ded3..4dc0ab9269 100644
--- a/test/daypickerinput/events.js
+++ b/test/daypickerinput/events.js
@@ -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(
@@ -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');
+      });
     });
   });
 });