From 44b81599f16c572b8093f106307c734d5fb74fde Mon Sep 17 00:00:00 2001 From: Charlie Waite Date: Tue, 6 Nov 2018 10:30:52 +0000 Subject: [PATCH] Added setOpen as prop to week select function (#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 --- src/calendar.jsx | 12 +++++++++++ src/index.jsx | 1 + src/month.jsx | 4 ++++ src/week.jsx | 10 +++++++++ test/week_test.js | 54 +++++++++++++++++++++++++++++++++++++++++++++-- 5 files changed, 79 insertions(+), 2 deletions(-) diff --git a/src/calendar.jsx b/src/calendar.jsx index 66b44e17d..863651f3a 100644 --- a/src/calendar.jsx +++ b/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} /> diff --git a/src/index.jsx b/src/index.jsx index 5c5ee9735..3461f730b 100644 --- a/src/index.jsx +++ b/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} diff --git a/src/month.jsx b/src/month.jsx index d7699d7a8..c2c599d15 100644 --- a/src/month.jsx +++ b/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} /> diff --git a/src/week.jsx b/src/week.jsx index 30c891c05..9818b0631 100644 --- a/src/week.jsx +++ b/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 => { diff --git a/test/week_test.js b/test/week_test.js index 6e19c50af..4c49c6d37 100644 --- a/test/week_test.js +++ b/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( - + ); 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( + {}} + 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( + {}} + 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( - + ); const weekNumberElement = week.find(WeekNumber); weekNumberElement.simulate("click");