Skip to content
Snippets Groups Projects
Commit dc1ed6e3 authored by Tom Robinson's avatar Tom Robinson
Browse files

Fix issue with Calendar month not switching from Janury 2018 to December 2017. Resolves #6683

parent c9231233
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/metabase/components/Calendar.jsx
+ 25
− 35
View file @ dc1ed6e3
......@@ -15,17 +15,12 @@ export default class Calendar extends Component {
this.state = {
current: moment(props.initial || undefined)
};
this.previous = this.previous.bind(this);
this.next = this.next.bind(this);
this.onClickDay = this.onClickDay.bind(this);
}
static propTypes = {
selected: PropTypes.object,
selectedEnd: PropTypes.object,
onChange: PropTypes.func.isRequired,
onAfterClick: PropTypes.func,
onBeforeClick: PropTypes.func,
isRangePicker: PropTypes.bool,
isDual: PropTypes.bool,
};
......@@ -35,22 +30,26 @@ export default class Calendar extends Component {
};
componentWillReceiveProps(nextProps) {
let resetCurrent = false;
if (nextProps.selected && nextProps.selectedEnd) {
resetCurrent =
nextProps.selected.isAfter(this.state.current, "month") &&
nextProps.selectedEnd.isBefore(this.state.current, "month");
} else if (nextProps.selected) {
resetCurrent =
nextProps.selected.isAfter(this.state.current, "month") ||
nextProps.selected.isBefore(this.state.current, "month");
}
if (resetCurrent) {
this.setState({ current: nextProps.selected });
if (!moment(nextProps.selected).isSame(this.props.selected, "day") ||
!moment(nextProps.selectedEnd).isSame(this.props.selectedEnd, "day")
) {
let resetCurrent = false;
if (nextProps.selected && nextProps.selectedEnd) {
resetCurrent =
nextProps.selected.isAfter(this.state.current, "month") &&
nextProps.selectedEnd.isBefore(this.state.current, "month");
} else if (nextProps.selected) {
resetCurrent =
nextProps.selected.isAfter(this.state.current, "month") ||
nextProps.selected.isBefore(this.state.current, "month");
}
if (resetCurrent) {
this.setState({ current: nextProps.selected });
}
}
}
onClickDay(date, e) {
onClickDay = (date) => {
let { selected, selectedEnd, isRangePicker } = this.props;
if (!isRangePicker || !selected || selectedEnd) {
this.props.onChange(date.format("YYYY-MM-DD"), null);
......@@ -63,16 +62,12 @@ export default class Calendar extends Component {
}
}
previous() {
let month = this.state.current;
month.add(-1, "M");
this.setState({ month: month });
previous = () => {
this.setState({ current: moment(this.state.current).add(-1, "M") });
}
next() {
let month = this.state.current;
month.add(1, "M");
this.setState({ month: month });
next = () => {
this.setState({ current: moment(this.state.current).add(1, "M") });
}
renderMonthHeader(current, side) {
......@@ -109,7 +104,7 @@ export default class Calendar extends Component {
renderWeeks(current) {
var weeks = [],
done = false,
date = moment(current).startOf("month").add("w" -1).day("Sunday"),
date = moment(current).startOf("month").day("Sunday"),
monthIndex = date.month(),
count = 0;
......@@ -174,11 +169,7 @@ class Week extends Component {
let { date, month, selected, selectedEnd } = this.props;
for (let i = 0; i < 7; i++) {
let classes = cx({
'p1': true,
'cursor-pointer': true,
'text-centered': true,
"Calendar-day": true,
let classes = cx("Calendar-day p1 cursor-pointer text-centered", {
"Calendar-day--today": date.isSame(new Date(), "day"),
"Calendar-day--this-month": date.month() === month.month(),
"Calendar-day--selected": selected && date.isSame(selected, "day"),
......@@ -195,8 +186,7 @@ class Week extends Component {
{date.date()}
</span>
);
date = moment(date);
date.add(1, "d");
date = moment(date).add(1, "d");
}
return (
......
frontend/test/components/Calendar.unit.test.js 0 → 100644
+ 27
− 0
View file @ dc1ed6e3
import React from "react";
import renderer from "react-test-renderer";
import moment from "moment";
import { mount } from "enzyme";
import Calendar from "../../src/metabase/components/Calendar";
describe("Calendar", () => {
it("should render correctly", () => {
const tree = renderer.create(
<Calendar selected={moment("2018-01-01")} onChange={() => {}}/>
).toJSON();
expect(tree).toMatchSnapshot()
});
it("should switch months correctly", () => {
const calendar = mount(
<Calendar selected={moment("2018-01-01")} onChange={() => {}}/>
);
expect(calendar.find(".Calendar-header").text()).toEqual("January 2018");
calendar.find(".Icon-chevronleft").simulate("click");
expect(calendar.find(".Calendar-header").text()).toEqual("December 2017");
calendar.find(".Icon-chevronright").simulate("click");
calendar.find(".Icon-chevronright").simulate("click");
expect(calendar.find(".Calendar-header").text()).toEqual("February 2018");
});
});
frontend/test/components/__snapshots__/Calendar.unit.test.js.snap 0 → 100644
+ 332
− 0
View file @ dc1ed6e3
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Calendar should render correctly 1`] = `
<div
className="Calendar Grid-cell"
>
<div
className="Calendar-header flex align-center"
>
<div
className="bordered rounded p1 cursor-pointer transition-border border-hover px1"
onClick={[Function]}
>
<svg
className="Icon Icon-chevronleft"
fill="currentcolor"
height={10}
name="chevronleft"
size={10}
viewBox="0 0 32 32"
width={10}
>
<path
d="M20 1 L24 5 L14 16 L24 27 L20 31 L6 16 z"
/>
</svg>
</div>
<span
className="flex-full"
/>
<h4
className="cursor-pointer rounded p1"
>
January 2018
</h4>
<span
className="flex-full"
/>
<div
className="bordered border-hover rounded p1 transition-border cursor-pointer px1"
onClick={[Function]}
>
<svg
className="Icon Icon-chevronright"
fill="currentcolor"
height={10}
name="chevronright"
size={10}
viewBox="0 0 32 32"
width={10}
>
<path
d="M12 1 L26 16 L12 31 L8 27 L18 16 L8 5 z "
/>
</svg>
</div>
</div>
<div
className="Calendar-day-names Calendar-week py1"
>
<span
className="Calendar-day-name text-centered"
>
Su
</span>
<span
className="Calendar-day-name text-centered"
>
Mo
</span>
<span
className="Calendar-day-name text-centered"
>
Tu
</span>
<span
className="Calendar-day-name text-centered"
>
We
</span>
<span
className="Calendar-day-name text-centered"
>
Th
</span>
<span
className="Calendar-day-name text-centered"
>
Fr
</span>
<span
className="Calendar-day-name text-centered"
>
Sa
</span>
</div>
<div
className="Calendar-weeks relative"
>
<div
className="Calendar-week"
>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--week-start"
onClick={[Function]}
>
31
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month Calendar-day--selected"
onClick={[Function]}
>
1
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month"
onClick={[Function]}
>
2
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month"
onClick={[Function]}
>
3
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month"
onClick={[Function]}
>
4
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month"
onClick={[Function]}
>
5
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month Calendar-day--week-end"
onClick={[Function]}
>
6
</span>
</div>
<div
className="Calendar-week"
>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month Calendar-day--week-start"
onClick={[Function]}
>
7
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month"
onClick={[Function]}
>
8
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month"
onClick={[Function]}
>
9
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month"
onClick={[Function]}
>
10
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month"
onClick={[Function]}
>
11
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--today Calendar-day--this-month"
onClick={[Function]}
>
12
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month Calendar-day--week-end"
onClick={[Function]}
>
13
</span>
</div>
<div
className="Calendar-week"
>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month Calendar-day--week-start"
onClick={[Function]}
>
14
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month"
onClick={[Function]}
>
15
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month"
onClick={[Function]}
>
16
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month"
onClick={[Function]}
>
17
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month"
onClick={[Function]}
>
18
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month"
onClick={[Function]}
>
19
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month Calendar-day--week-end"
onClick={[Function]}
>
20
</span>
</div>
<div
className="Calendar-week"
>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month Calendar-day--week-start"
onClick={[Function]}
>
21
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month"
onClick={[Function]}
>
22
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month"
onClick={[Function]}
>
23
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month"
onClick={[Function]}
>
24
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month"
onClick={[Function]}
>
25
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month"
onClick={[Function]}
>
26
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month Calendar-day--week-end"
onClick={[Function]}
>
27
</span>
</div>
<div
className="Calendar-week"
>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month Calendar-day--week-start"
onClick={[Function]}
>
28
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month"
onClick={[Function]}
>
29
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month"
onClick={[Function]}
>
30
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--this-month"
onClick={[Function]}
>
31
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day"
onClick={[Function]}
>
1
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day"
onClick={[Function]}
>
2
</span>
<span
className="p1 cursor-pointer text-centered Calendar-day Calendar-day--week-end"
onClick={[Function]}
>
3
</span>
</div>
</div>
</div>
`;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment