Added setOpen as prop to week select function (Hacker0x01#1434)

* Added setOpen as prop to week select function

* Added default shouldCloseOnSelect prop to Week component

* Added test for setOpen function

* Added another test for cases we do not want the picker to close

* Moved sinon declaration

* Removed afterEach hook

Author: charliearlie

src/calendar.jsx

@@ -109,6 +109,7 @@ export default class Calendar extends React.Component {
     weekLabel: PropTypes.string,
     yearDropdownItemNumber: PropTypes.number,
     setOpen: PropTypes.func,
+    shouldCloseOnSelect: PropTypes.bool,
     useShortMonthInDropdown: PropTypes.bool,
     showDisabledMonthNavigation: PropTypes.bool,
     previousMonthButtonLabel: PropTypes.string,
@@ -128,6 +129,15 @@ export default class Calendar extends React.Component {
     };
   }
 
+  static get defaultProps() {
+    return {
+      onDropdownFocus: () => {},
+      monthsShown: 1,
+      forceShowMonthNavigation: false,
+      timeCaption: "Time"
+    };
+  }
+
   constructor(props) {
     super(props);
     this.state = {
@@ -599,6 +609,8 @@ export default class Calendar extends React.Component {
             endDate={this.props.endDate}
             peekNextMonth={this.props.peekNextMonth}
             utcOffset={this.props.utcOffset}
+            setOpen={this.props.setOpen}
+            shouldCloseOnSelect={this.props.shouldCloseOnSelect}
             renderDayContents={this.props.renderDayContents}
             disabledKeyboardNavigation={this.props.disabledKeyboardNavigation}
           />

src/index.jsx

@@ -590,6 +590,7 @@ export default class DatePicker extends React.Component {
         locale={this.props.locale}
         adjustDateOnChange={this.props.adjustDateOnChange}
         setOpen={this.setOpen}
+        shouldCloseOnSelect={this.props.shouldCloseOnSelect}
         dateFormat={this.props.dateFormatCalendar}
         useWeekdaysShort={this.props.useWeekdaysShort}
         formatWeekDay={this.props.formatWeekDay}

src/month.jsx

@@ -33,6 +33,8 @@ export default class Month extends React.Component {
     selectsStart: PropTypes.bool,
     showWeekNumbers: PropTypes.bool,
     startDate: PropTypes.object,
+    setOpen: PropTypes.func,
+    shouldCloseOnSelect: PropTypes.bool,
     utcOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     renderDayContents: PropTypes.func
   };
@@ -99,6 +101,8 @@ export default class Month extends React.Component {
           endDate={this.props.endDate}
           dayClassName={this.props.dayClassName}
           utcOffset={this.props.utcOffset}
+          setOpen={this.props.setOpen}
+          shouldCloseOnSelect={this.props.shouldCloseOnSelect}
           disabledKeyboardNavigation={this.props.disabledKeyboardNavigation}
           renderDayContents={this.props.renderDayContents}
         />

src/week.jsx

@@ -5,6 +5,11 @@ import WeekNumber from "./week_number";
 import * as utils from "./date_utils";
 
 export default class Week extends React.Component {
+  static get defaultProps() {
+    return {
+      shouldCloseOnSelect: true
+    };
+  }
   static propTypes = {
     disabledKeyboardNavigation: PropTypes.bool,
     day: PropTypes.object.isRequired,
@@ -29,6 +34,8 @@ export default class Week extends React.Component {
     selectsStart: PropTypes.bool,
     showWeekNumber: PropTypes.bool,
     startDate: PropTypes.object,
+    setOpen: PropTypes.func,
+    shouldCloseOnSelect: PropTypes.bool,
     utcOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     renderDayContents: PropTypes.func
   };
@@ -49,6 +56,9 @@ export default class Week extends React.Component {
     if (typeof this.props.onWeekSelect === "function") {
       this.props.onWeekSelect(day, weekNumber, event);
     }
+    if (this.props.shouldCloseOnSelect) {
+      this.props.setOpen(false);
+    }
   };
 
   formatWeekNumber = startOfWeek => {

test/week_test.js

@@ -3,6 +3,7 @@ import Week from "../src/week";
 import WeekNumber from "../src/week_number";
 import Day from "../src/day";
 import { shallow } from "enzyme";
+import sinon from "sinon";
 import * as utils from "../src/date_utils";
 
 describe("Week", () => {
@@ -63,14 +64,58 @@ describe("Week", () => {
     }
 
     const weekStart = utils.newDate("2015-12-20");
+    const setOpenSpy = sinon.spy();
     const week = shallow(
-      <Week day={weekStart} showWeekNumber onWeekSelect={onWeekClick} />
+      <Week
+        day={weekStart}
+        showWeekNumber
+        onWeekSelect={onWeekClick}
+        setOpen={setOpenSpy}
+      />
     );
     const weekNumberElement = week.find(WeekNumber);
     weekNumberElement.simulate("click");
     expect(utils.equals(firstDayReceived, weekStart)).to.be.true;
   });
 
+  it("should call the provided onWeekSelect function and call the setopen function", () => {
+    const weekStart = utils.newDate("2015-12-20");
+    const setOpenSpy = sinon.spy();
+
+    const week = shallow(
+      <Week
+        day={weekStart}
+        showWeekNumber
+        shouldCloseOnSelect
+        onWeekSelect={() => {}}
+        setOpen={setOpenSpy}
+      />
+    );
+
+    const weekNumberElement = week.find(WeekNumber);
+    weekNumberElement.simulate("click");
+    sinon.assert.calledOnce(setOpenSpy);
+  });
+
+  it("should call the provided onWeekSelect function and not call the setopen function when 'shouldCloseOnSelect' is false", () => {
+    const weekStart = utils.newDate("2015-12-20");
+    const setOpenSpy = sinon.spy();
+
+    const week = shallow(
+      <Week
+        day={weekStart}
+        showWeekNumber
+        shouldCloseOnSelect={false}
+        onWeekSelect={() => {}}
+        setOpen={setOpenSpy}
+      />
+    );
+
+    const weekNumberElement = week.find(WeekNumber);
+    weekNumberElement.simulate("click");
+    sinon.assert.notCalled(setOpenSpy);
+  });
+
   it("should call the provided onWeekSelect function and pass the week number", () => {
     let weekNumberReceived = null;
 
@@ -81,7 +126,12 @@ describe("Week", () => {
     const weekStart = utils.newDate("2015-12-20");
     const realWeekNumber = utils.getWeek(weekStart);
     const week = shallow(
-      <Week day={weekStart} showWeekNumber onWeekSelect={onWeekClick} />
+      <Week
+        day={weekStart}
+        showWeekNumber
+        shouldCloseOnSelect={false}
+        onWeekSelect={onWeekClick}
+      />
     );
     const weekNumberElement = week.find(WeekNumber);
     weekNumberElement.simulate("click");