Skip to content

Commit

Permalink
Added setOpen as prop to week select function (#1434)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
charliearlie authored and martijnrusschen committed Nov 6, 2018
1 parent 27b1507 commit 44b8159
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 2 deletions.
12 changes: 12 additions & 0 deletions src/calendar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 = {
Expand Down Expand Up @@ -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}
/>
Expand Down
1 change: 1 addition & 0 deletions src/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 4 additions & 0 deletions src/month.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
};
Expand Down Expand Up @@ -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}
/>
Expand Down
10 changes: 10 additions & 0 deletions src/week.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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
};
Expand All @@ -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 => {
Expand Down
54 changes: 52 additions & 2 deletions test/week_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand Down Expand Up @@ -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;

Expand All @@ -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");
Expand Down

0 comments on commit 44b8159

Please sign in to comment.