2019-09-10 11:28:56 +00:00
|
|
|
import React, { Component } from "react";
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
import styled, { css } from "styled-components";
|
|
|
|
import ComboBox from "../combobox";
|
|
|
|
import moment from "moment/min/moment-with-locales";
|
|
|
|
import { Weekdays, Days } from "./sub-components";
|
|
|
|
import isEmpty from "lodash/isEmpty";
|
2019-08-23 12:23:22 +00:00
|
|
|
|
|
|
|
const HoverStyle = css`
|
2019-09-10 11:28:56 +00:00
|
|
|
&:hover {
|
|
|
|
background-color: #eceef1;
|
|
|
|
border-radius: 16px;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
2019-08-23 12:23:22 +00:00
|
|
|
`;
|
|
|
|
|
2019-08-29 13:33:10 +00:00
|
|
|
const DisabledStyle = css`
|
2019-09-10 11:28:56 +00:00
|
|
|
-webkit-touch-callout: none;
|
|
|
|
-webkit-user-select: none;
|
|
|
|
-khtml-user-select: none;
|
|
|
|
-moz-user-select: none;
|
|
|
|
-ms-user-select: none;
|
|
|
|
user-select: none;
|
2019-08-29 13:33:10 +00:00
|
|
|
`;
|
|
|
|
|
2019-08-23 12:23:22 +00:00
|
|
|
const ComboBoxStyle = styled.div`
|
2019-09-10 11:28:56 +00:00
|
|
|
position: relative;
|
|
|
|
display: flex;
|
|
|
|
padding-bottom: 24px !important;
|
2019-08-23 12:23:22 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const ComboBoxDateStyle = styled.div`
|
2019-09-10 11:28:56 +00:00
|
|
|
min-width: 80px;
|
|
|
|
height: 32px;
|
|
|
|
margin-left: 8px;
|
2019-08-23 12:23:22 +00:00
|
|
|
`;
|
|
|
|
|
2019-08-30 12:54:56 +00:00
|
|
|
const CalendarContainer = styled.div`
|
2019-09-10 11:28:56 +00:00
|
|
|
${props =>
|
|
|
|
props.size === "base" ? `max-width: 293px;` : `max-width: 325px;`}
|
2019-08-30 12:54:56 +00:00
|
|
|
`;
|
2019-08-28 12:53:38 +00:00
|
|
|
|
2019-08-30 12:54:56 +00:00
|
|
|
const CalendarStyle = styled.div`
|
2019-09-10 11:28:56 +00:00
|
|
|
${props => (props.size === "base" ? "width: 260px;" : "width: 294px;")}
|
2019-08-28 12:53:38 +00:00
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
padding: 16px 16px 16px 17px;
|
|
|
|
box-sizing: content-box;
|
|
|
|
${props =>
|
|
|
|
props.isDisabled
|
|
|
|
? `pointer-events: none;
|
2019-08-30 08:06:07 +00:00
|
|
|
${DisabledStyle}
|
2019-08-29 13:33:10 +00:00
|
|
|
`
|
2019-09-10 11:28:56 +00:00
|
|
|
: "pointer-events: auto;"}
|
2019-08-29 13:33:10 +00:00
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
.calendar-month {
|
|
|
|
${HoverStyle}
|
|
|
|
}
|
2019-08-29 13:33:10 +00:00
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
.calendar-month_neighboringMonth {
|
|
|
|
color: #eceef1;
|
2019-08-23 12:23:22 +00:00
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
${HoverStyle}
|
|
|
|
&:hover {
|
|
|
|
color: #333;
|
2019-08-23 12:23:22 +00:00
|
|
|
}
|
2019-09-10 11:28:56 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.calendar-month_disabled {
|
|
|
|
${DisabledStyle}
|
|
|
|
color: #ECEEF1;
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.calendar-month_weekend {
|
|
|
|
color: #a3a9ae;
|
|
|
|
${HoverStyle}
|
|
|
|
}
|
|
|
|
|
|
|
|
.calendar-month_selected-day {
|
|
|
|
background-color: ${props => props.color};
|
|
|
|
border-radius: 16px;
|
|
|
|
cursor: pointer;
|
|
|
|
color: #fff;
|
|
|
|
}
|
2019-08-23 12:23:22 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const Month = styled.div`
|
2019-09-10 11:28:56 +00:00
|
|
|
width: ${props => (props.size === "base" ? "267px" : "303px")};
|
2019-08-23 12:23:22 +00:00
|
|
|
`;
|
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
class Calendar extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
moment.locale(props.locale);
|
|
|
|
this.state = this.mapPropsToState(props);
|
|
|
|
}
|
|
|
|
|
|
|
|
mapPropsToState = props => {
|
|
|
|
const { minDate, maxDate, openToDate, selectedDate } = props;
|
|
|
|
const months = moment.months();
|
|
|
|
const arrayWeekdays = moment.weekdaysMin();
|
|
|
|
const optionsMonth = this.getListMonth(
|
|
|
|
minDate,
|
|
|
|
maxDate,
|
|
|
|
openToDate,
|
|
|
|
months
|
|
|
|
);
|
|
|
|
const optionsYear = this.getArrayYears(minDate, maxDate);
|
|
|
|
const optionsDays = this.getDays(
|
|
|
|
minDate,
|
|
|
|
maxDate,
|
|
|
|
openToDate,
|
|
|
|
selectedDate
|
|
|
|
);
|
|
|
|
const optionsWeekdays = this.getWeekDays(arrayWeekdays);
|
|
|
|
|
|
|
|
const newState = {
|
|
|
|
months,
|
|
|
|
minDate,
|
|
|
|
maxDate,
|
|
|
|
openToDate,
|
|
|
|
selectedDate,
|
|
|
|
optionsMonth,
|
|
|
|
selectedOptionMonth: this.getCurrentMonth(optionsMonth, openToDate),
|
|
|
|
optionsYear,
|
|
|
|
selectedOptionYear: this.getCurrentYear(optionsYear, openToDate),
|
|
|
|
optionsDays,
|
|
|
|
optionsWeekdays
|
|
|
|
};
|
2019-08-23 12:23:22 +00:00
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
//console.log("mapPropsToState ", newState);
|
|
|
|
return newState;
|
|
|
|
};
|
2019-08-23 12:23:22 +00:00
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
onSelectYear = value => {
|
|
|
|
const openToDate = new Date(value.key, this.state.openToDate.getMonth());
|
2019-08-23 12:23:22 +00:00
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
const optionsMonth = this.getListMonth(
|
|
|
|
this.state.minDate,
|
|
|
|
this.state.maxDate,
|
|
|
|
openToDate,
|
|
|
|
this.state.months
|
|
|
|
);
|
2019-08-23 12:23:22 +00:00
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
const openToDateMonth = openToDate.getMonth();
|
|
|
|
const openToDateYear = openToDate.getFullYear();
|
|
|
|
let selectedMonth = optionsMonth.find(x => x.key == openToDateMonth);
|
|
|
|
let newOpenToDate = openToDate;
|
2019-08-23 12:23:22 +00:00
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
if (selectedMonth.disabled === true) {
|
|
|
|
selectedMonth = optionsMonth.find(x => x.disabled === false);
|
|
|
|
newOpenToDate = new Date(openToDateYear, selectedMonth.key, 1);
|
2019-08-23 12:23:22 +00:00
|
|
|
}
|
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
const newState = this.mapPropsToState({
|
|
|
|
...this.state,
|
|
|
|
openToDate: newOpenToDate,
|
|
|
|
optionsMonth
|
|
|
|
});
|
|
|
|
|
|
|
|
this.setState(newState);
|
|
|
|
};
|
|
|
|
|
|
|
|
onSelectMonth = value => {
|
|
|
|
const newState = this.mapPropsToState({
|
|
|
|
...this.state,
|
|
|
|
openToDate: new Date(this.state.openToDate.getFullYear(), value.key)
|
|
|
|
});
|
|
|
|
//console.log("onSelectMonth", newState);
|
|
|
|
this.setState(newState);
|
|
|
|
};
|
|
|
|
|
|
|
|
onDayClick = dayItem => {
|
|
|
|
//console.log("onDayClick", dayItem);
|
|
|
|
const day = dayItem.value;
|
|
|
|
const currentMonth = this.state.openToDate.getMonth();
|
|
|
|
const currentYear = this.state.openToDate.getFullYear();
|
|
|
|
const dateInCurrentMonth = new Date(currentYear, currentMonth, day);
|
|
|
|
let newState;
|
|
|
|
|
|
|
|
if (dayItem.dayState === "prev") {
|
|
|
|
const dateInPrevMonth = new Date(currentYear, currentMonth - 1, day);
|
|
|
|
newState = this.mapPropsToState({
|
|
|
|
...this.state,
|
|
|
|
selectedDate: dateInPrevMonth,
|
|
|
|
openToDate: dateInPrevMonth
|
|
|
|
});
|
|
|
|
} else if (dayItem.dayState === "next") {
|
|
|
|
const dateInNextMonth = new Date(currentYear, currentMonth + 1, day);
|
|
|
|
newState = this.mapPropsToState({
|
|
|
|
...this.state,
|
|
|
|
selectedDate: dateInNextMonth,
|
|
|
|
openToDate: dateInNextMonth
|
|
|
|
});
|
|
|
|
} else if (
|
|
|
|
this.formatSelectedDate(dateInCurrentMonth) !=
|
|
|
|
this.formatSelectedDate(this.state.selectedDate)
|
|
|
|
) {
|
|
|
|
newState = this.mapPropsToState({
|
|
|
|
...this.state,
|
|
|
|
selectedDate: dateInCurrentMonth
|
|
|
|
});
|
2019-08-23 12:23:22 +00:00
|
|
|
}
|
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
if (newState) {
|
|
|
|
this.setState(newState);
|
|
|
|
this.props.onChange && this.props.onChange(newState.selectedDate);
|
2019-08-28 12:53:38 +00:00
|
|
|
}
|
2019-09-10 11:28:56 +00:00
|
|
|
};
|
2019-08-28 12:53:38 +00:00
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
getListMonth = (minDate, maxDate, openToDate, months) => {
|
|
|
|
const minDateYear = minDate.getFullYear();
|
|
|
|
const minDateMonth = minDate.getMonth();
|
2019-09-06 08:54:19 +00:00
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
const maxDateYear = maxDate.getFullYear();
|
|
|
|
const maxDateMonth = maxDate.getMonth();
|
2019-09-06 08:54:19 +00:00
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
const openToDateYear = openToDate.getFullYear();
|
2019-09-06 08:54:19 +00:00
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
let disabled = false;
|
|
|
|
const listMonths = [];
|
2019-09-06 08:54:19 +00:00
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
let i = 0;
|
|
|
|
while (i <= 11) {
|
|
|
|
listMonths.push({
|
|
|
|
key: `${i}`,
|
|
|
|
label: `${months[i]}`,
|
|
|
|
disabled: disabled
|
|
|
|
});
|
|
|
|
i++;
|
|
|
|
}
|
2019-08-30 07:46:51 +00:00
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
if (openToDateYear === minDateYear) {
|
|
|
|
i = 0;
|
|
|
|
while (i != minDateMonth) {
|
|
|
|
listMonths[i].disabled = true;
|
|
|
|
i++;
|
|
|
|
}
|
|
|
|
} else if (openToDateYear === maxDateYear) {
|
|
|
|
i = 11;
|
|
|
|
while (i != maxDateMonth) {
|
|
|
|
listMonths[i].disabled = true;
|
|
|
|
i--;
|
|
|
|
}
|
|
|
|
}
|
2019-08-30 07:46:51 +00:00
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
return listMonths;
|
|
|
|
};
|
2019-08-28 11:03:55 +00:00
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
getCurrentMonth = (months, openToDate) => {
|
|
|
|
const openToDateMonth = openToDate.getMonth();
|
|
|
|
let selectedMonth = months.find(x => x.key == openToDateMonth);
|
2019-08-28 11:03:55 +00:00
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
if (selectedMonth.disabled === true) {
|
|
|
|
selectedMonth = months.find(x => x.disabled === false);
|
2019-08-23 12:23:22 +00:00
|
|
|
}
|
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
return selectedMonth;
|
|
|
|
};
|
|
|
|
|
|
|
|
getArrayYears = (minDate, maxDate) => {
|
|
|
|
const minYear = minDate.getFullYear();
|
|
|
|
const maxYear = maxDate.getFullYear();
|
|
|
|
const yearList = [];
|
|
|
|
|
|
|
|
let i = minYear;
|
|
|
|
while (i <= maxYear) {
|
|
|
|
let newDate = new Date(i, 0, 1);
|
|
|
|
const label = moment(newDate).format("YYYY");
|
|
|
|
const key = i;
|
|
|
|
yearList.push({ key, label: label });
|
|
|
|
i++;
|
|
|
|
}
|
|
|
|
return yearList.reverse();
|
|
|
|
};
|
|
|
|
|
|
|
|
getCurrentYear = (arrayYears, openToDate) => {
|
|
|
|
const openToDateYear = openToDate.getFullYear();
|
|
|
|
return arrayYears.find(x => x.key == openToDateYear);
|
|
|
|
};
|
|
|
|
|
|
|
|
formatSelectedDate = date => {
|
|
|
|
return (
|
|
|
|
date.getMonth() + 1 + "/" + date.getDate() + "/" + date.getFullYear()
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
formatDate = date => {
|
|
|
|
return date.getMonth() + 1 + "/" + 1 + "/" + date.getFullYear();
|
|
|
|
};
|
|
|
|
|
|
|
|
compareDays = (openToDate, selectedDate) => {
|
|
|
|
return this.formatDate(openToDate) === this.formatDate(selectedDate);
|
|
|
|
};
|
|
|
|
|
|
|
|
firstDayOfMonth = openToDate => {
|
|
|
|
const firstDay = moment(openToDate)
|
|
|
|
.locale("en")
|
|
|
|
.startOf("month")
|
|
|
|
.format("d");
|
|
|
|
let day = firstDay - 1;
|
|
|
|
if (day < 0) {
|
|
|
|
day = 6;
|
|
|
|
}
|
|
|
|
return day;
|
|
|
|
};
|
|
|
|
|
|
|
|
getWeekDays = weekdays => {
|
|
|
|
let arrayWeekDays = [];
|
|
|
|
weekdays.push(weekdays.shift());
|
|
|
|
for (let i = 0; i < weekdays.length; i++) {
|
|
|
|
arrayWeekDays.push({
|
|
|
|
key: `${this.props.locale}_${i}`,
|
|
|
|
value: weekdays[i],
|
|
|
|
color: i >= 5 ? "#A3A9AE" : undefined
|
|
|
|
});
|
|
|
|
}
|
|
|
|
return arrayWeekDays;
|
|
|
|
};
|
|
|
|
|
|
|
|
getDays = (minDate, maxDate, openToDate, selectedDate) => {
|
|
|
|
const currentYear = openToDate.getFullYear();
|
|
|
|
const currentMonth = openToDate.getMonth() + 1;
|
|
|
|
const countDaysInMonth = new Date(currentYear, currentMonth, 0).getDate();
|
|
|
|
let countDaysInPrevMonth = new Date(
|
|
|
|
currentYear,
|
|
|
|
currentMonth - 1,
|
|
|
|
0
|
|
|
|
).getDate();
|
|
|
|
const arrayDays = [];
|
|
|
|
let className = "calendar-month_neighboringMonth";
|
|
|
|
|
|
|
|
const openToDateMonth = openToDate.getMonth();
|
|
|
|
const openToDateYear = openToDate.getFullYear();
|
|
|
|
|
|
|
|
const maxDateMonth = maxDate.getMonth();
|
|
|
|
const maxDateYear = maxDate.getFullYear();
|
|
|
|
const maxDateDay = maxDate.getDate();
|
|
|
|
|
|
|
|
const minDateMonth = minDate.getMonth();
|
|
|
|
const minDateYear = minDate.getFullYear();
|
|
|
|
const minDateDay = minDate.getDate();
|
|
|
|
|
|
|
|
//Disable preview month
|
|
|
|
let disableClass = null;
|
|
|
|
if (openToDateYear === minDateYear && openToDateMonth === minDateMonth) {
|
|
|
|
disableClass = "calendar-month_disabled";
|
|
|
|
}
|
2019-09-06 08:54:19 +00:00
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
//Prev month
|
|
|
|
let prevMonthDay = null;
|
|
|
|
if (
|
|
|
|
openToDateYear === minDateYear &&
|
|
|
|
openToDateMonth - 1 === minDateMonth
|
|
|
|
) {
|
|
|
|
prevMonthDay = minDateDay;
|
|
|
|
}
|
2019-08-30 07:46:51 +00:00
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
//prev month + year
|
|
|
|
let prevYearDay = null;
|
|
|
|
if (
|
|
|
|
openToDateYear === minDateYear + 1 &&
|
|
|
|
openToDateMonth === 0 &&
|
|
|
|
minDateMonth === 11
|
|
|
|
) {
|
|
|
|
prevYearDay = minDateDay;
|
2019-08-23 12:23:22 +00:00
|
|
|
}
|
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
// Show neighboring days in prev month
|
|
|
|
const firstDayOfMonth = this.firstDayOfMonth(openToDate);
|
|
|
|
|
|
|
|
for (let i = firstDayOfMonth; i != 0; i--) {
|
|
|
|
if (countDaysInPrevMonth + 1 === prevMonthDay) {
|
|
|
|
disableClass = "calendar-month_disabled";
|
|
|
|
}
|
|
|
|
if (countDaysInPrevMonth + 1 === prevYearDay) {
|
|
|
|
disableClass = "calendar-month_disabled";
|
|
|
|
}
|
|
|
|
arrayDays.unshift({
|
|
|
|
value: countDaysInPrevMonth--,
|
|
|
|
disableClass,
|
|
|
|
className,
|
|
|
|
dayState: "prev"
|
|
|
|
});
|
2019-08-23 12:23:22 +00:00
|
|
|
}
|
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
//Disable max days in month
|
|
|
|
let maxDay, minDay;
|
|
|
|
disableClass = null;
|
|
|
|
if (openToDateYear === maxDateYear && openToDateMonth >= maxDateMonth) {
|
|
|
|
if (openToDateMonth === maxDateMonth) {
|
|
|
|
maxDay = maxDateDay;
|
|
|
|
} else {
|
|
|
|
maxDay = null;
|
|
|
|
}
|
2019-08-23 12:23:22 +00:00
|
|
|
}
|
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
//Disable min days in month
|
|
|
|
if (openToDateYear === minDateYear && openToDateMonth >= minDateMonth) {
|
|
|
|
if (openToDateMonth === minDateMonth) {
|
|
|
|
minDay = minDateDay;
|
|
|
|
} else {
|
|
|
|
minDay = null;
|
|
|
|
}
|
2019-08-23 12:23:22 +00:00
|
|
|
}
|
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
// Show days in month and weekend days
|
|
|
|
let seven = 7;
|
|
|
|
const dateNow = selectedDate.getDate();
|
|
|
|
|
|
|
|
for (let i = 1; i <= countDaysInMonth; i++) {
|
|
|
|
if (i === seven - firstDayOfMonth - 1) {
|
|
|
|
className = "calendar-month_weekend";
|
|
|
|
} else if (i === seven - firstDayOfMonth) {
|
|
|
|
seven += 7;
|
|
|
|
className = "calendar-month_weekend";
|
|
|
|
} else {
|
|
|
|
className = "calendar-month";
|
|
|
|
}
|
|
|
|
if (i === dateNow && this.compareDays(openToDate, selectedDate)) {
|
|
|
|
className = "calendar-month_selected-day";
|
|
|
|
}
|
|
|
|
if (i > maxDay || i < minDay) {
|
|
|
|
disableClass = "calendar-month_disabled";
|
|
|
|
className = "calendar-month_disabled";
|
|
|
|
} else {
|
|
|
|
disableClass = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
arrayDays.push({
|
|
|
|
value: i,
|
|
|
|
disableClass,
|
|
|
|
className,
|
|
|
|
dayState: "now"
|
|
|
|
});
|
2019-08-23 12:23:22 +00:00
|
|
|
}
|
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
//Calculating neighboring days in next month
|
|
|
|
let maxDaysInMonthTable = 42;
|
|
|
|
const maxDaysInMonth = 42;
|
|
|
|
if (firstDayOfMonth > 5 && countDaysInMonth >= 30) {
|
|
|
|
maxDaysInMonthTable += 7;
|
|
|
|
} else if (firstDayOfMonth >= 5 && countDaysInMonth > 30) {
|
|
|
|
maxDaysInMonthTable += 7;
|
|
|
|
}
|
|
|
|
if (maxDaysInMonthTable > maxDaysInMonth) {
|
|
|
|
maxDaysInMonthTable -= 7;
|
2019-08-23 12:23:22 +00:00
|
|
|
}
|
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
//Disable next month days
|
|
|
|
disableClass = null;
|
|
|
|
if (openToDateYear === maxDateYear && openToDateMonth >= maxDateMonth) {
|
|
|
|
disableClass = "calendar-month_disabled";
|
2019-08-29 07:05:56 +00:00
|
|
|
}
|
2019-08-23 12:23:22 +00:00
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
//next month + year
|
|
|
|
let nextYearDay = null;
|
|
|
|
if (
|
|
|
|
openToDateYear === maxDateYear - 1 &&
|
|
|
|
openToDateMonth === 11 &&
|
|
|
|
maxDateMonth === 0
|
|
|
|
) {
|
|
|
|
nextYearDay = maxDateDay;
|
2019-08-23 12:23:22 +00:00
|
|
|
}
|
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
//next month
|
|
|
|
let nextMonthDay = null;
|
|
|
|
if (
|
|
|
|
openToDateYear === maxDateYear &&
|
|
|
|
openToDateMonth === maxDateMonth - 1
|
|
|
|
) {
|
|
|
|
nextMonthDay = maxDateDay;
|
2019-08-23 12:23:22 +00:00
|
|
|
}
|
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
//Show neighboring days in next month
|
|
|
|
let dayInNextMonth = 1;
|
|
|
|
className = "calendar-month_neighboringMonth";
|
|
|
|
for (
|
|
|
|
let i = countDaysInMonth;
|
|
|
|
i < maxDaysInMonthTable - firstDayOfMonth;
|
|
|
|
i++
|
|
|
|
) {
|
|
|
|
if (i - countDaysInMonth === nextYearDay) {
|
|
|
|
disableClass = "calendar-month_disabled";
|
|
|
|
}
|
|
|
|
if (i - countDaysInMonth === nextMonthDay) {
|
|
|
|
disableClass = "calendar-month_disabled";
|
|
|
|
}
|
|
|
|
arrayDays.push({
|
|
|
|
value: dayInNextMonth++,
|
|
|
|
disableClass,
|
|
|
|
className,
|
|
|
|
dayState: "next"
|
|
|
|
});
|
|
|
|
}
|
|
|
|
return arrayDays;
|
|
|
|
};
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps) {
|
|
|
|
const {
|
|
|
|
selectedDate,
|
|
|
|
openToDate,
|
|
|
|
minDate,
|
|
|
|
maxDate,
|
|
|
|
isDisabled,
|
|
|
|
locale
|
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
let newState = {};
|
|
|
|
|
|
|
|
if (this.compareDates(selectedDate, prevProps.selectedDate) !== 0) {
|
|
|
|
newState = { selectedDate };
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.compareDates(openToDate, prevProps.openToDate) !== 0) {
|
|
|
|
newState = Object.assign({}, newState, {
|
|
|
|
openToDate
|
|
|
|
});
|
2019-08-29 13:33:10 +00:00
|
|
|
}
|
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
if (this.compareDates(minDate, prevProps.minDate) !== 0) {
|
|
|
|
newState = Object.assign({}, newState, {
|
|
|
|
minDate
|
|
|
|
});
|
2019-09-06 08:54:19 +00:00
|
|
|
}
|
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
if (this.compareDates(maxDate, prevProps.maxDate) !== 0) {
|
|
|
|
newState = Object.assign({}, newState, {
|
|
|
|
maxDate
|
|
|
|
});
|
2019-08-23 12:23:22 +00:00
|
|
|
}
|
2019-09-10 11:28:56 +00:00
|
|
|
|
|
|
|
if (isDisabled !== prevProps.isDisabled) {
|
|
|
|
newState = Object.assign({}, newState, {
|
|
|
|
isDisabled
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!isEmpty(newState) || locale !== prevProps.locale) {
|
|
|
|
moment.locale(locale);
|
|
|
|
newState = this.mapPropsToState({
|
|
|
|
...this.state,
|
|
|
|
...newState
|
|
|
|
});
|
|
|
|
this.setState(newState);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
compareDates = (date1, date2) => {
|
|
|
|
return moment(date1)
|
|
|
|
.startOf("day")
|
|
|
|
.diff(moment(date2).startOf("day"), "days");
|
|
|
|
};
|
|
|
|
|
|
|
|
shouldComponentUpdate(nextProps) {
|
|
|
|
const {
|
|
|
|
selectedDate,
|
|
|
|
openToDate,
|
|
|
|
minDate,
|
|
|
|
maxDate,
|
|
|
|
isDisabled
|
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
if (
|
|
|
|
this.compareDates(selectedDate, nextProps.selectedDate) === 0 &&
|
|
|
|
this.compareDates(openToDate, nextProps.openToDate) === 0 &&
|
|
|
|
this.compareDates(minDate, nextProps.minDate) === 0 &&
|
|
|
|
this.compareDates(maxDate, nextProps.maxDate) === 0 &&
|
|
|
|
isDisabled !== nextProps.isDisabled
|
|
|
|
) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
console.log("Calendar render");
|
|
|
|
|
|
|
|
const { isDisabled, size, themeColor } = this.props;
|
|
|
|
const {
|
|
|
|
optionsMonth,
|
|
|
|
selectedOptionMonth,
|
|
|
|
selectedOptionYear,
|
|
|
|
optionsYear,
|
|
|
|
optionsDays,
|
|
|
|
optionsWeekdays
|
|
|
|
} = this.state;
|
|
|
|
|
|
|
|
const dropDownSizeMonth = optionsMonth.length > 4 ? 184 : undefined;
|
|
|
|
const dropDownSizeYear = optionsYear.length > 4 ? 184 : undefined;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<CalendarContainer size={size}>
|
|
|
|
<CalendarStyle size={size} color={themeColor} isDisabled={isDisabled}>
|
|
|
|
<ComboBoxStyle>
|
|
|
|
<ComboBox
|
|
|
|
scaled={true}
|
|
|
|
dropDownMaxHeight={dropDownSizeMonth}
|
|
|
|
onSelect={this.onSelectMonth}
|
|
|
|
selectedOption={selectedOptionMonth}
|
|
|
|
options={optionsMonth}
|
|
|
|
isDisabled={isDisabled}
|
|
|
|
/>
|
|
|
|
<ComboBoxDateStyle>
|
|
|
|
<ComboBox
|
|
|
|
scaled={true}
|
|
|
|
dropDownMaxHeight={dropDownSizeYear}
|
|
|
|
onSelect={this.onSelectYear}
|
|
|
|
selectedOption={selectedOptionYear}
|
|
|
|
options={optionsYear}
|
|
|
|
isDisabled={isDisabled}
|
|
|
|
/>
|
|
|
|
</ComboBoxDateStyle>
|
|
|
|
</ComboBoxStyle>
|
|
|
|
<Month size={size}>
|
|
|
|
<Weekdays optionsWeekdays={optionsWeekdays} size={size} />
|
|
|
|
<Days
|
|
|
|
optionsDays={optionsDays}
|
|
|
|
size={size}
|
|
|
|
onDayClick={this.onDayClick}
|
|
|
|
/>
|
|
|
|
</Month>
|
|
|
|
</CalendarStyle>
|
|
|
|
</CalendarContainer>
|
|
|
|
);
|
|
|
|
}
|
2019-08-23 12:23:22 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
Calendar.propTypes = {
|
2019-09-10 11:28:56 +00:00
|
|
|
onChange: PropTypes.func,
|
|
|
|
themeColor: PropTypes.string,
|
|
|
|
selectedDate: PropTypes.instanceOf(Date),
|
|
|
|
openToDate: PropTypes.instanceOf(Date),
|
|
|
|
minDate: PropTypes.instanceOf(Date),
|
|
|
|
maxDate: PropTypes.instanceOf(Date),
|
|
|
|
locale: PropTypes.string,
|
|
|
|
isDisabled: PropTypes.bool,
|
|
|
|
size: PropTypes.oneOf(["base", "big"])
|
|
|
|
};
|
2019-08-23 12:23:22 +00:00
|
|
|
|
|
|
|
Calendar.defaultProps = {
|
2019-09-10 11:28:56 +00:00
|
|
|
selectedDate: new Date(),
|
|
|
|
openToDate: new Date(),
|
|
|
|
minDate: new Date("1970/01/01"),
|
|
|
|
maxDate: new Date(new Date().getFullYear() + 1 + "/01/01"),
|
|
|
|
themeColor: "#ED7309",
|
|
|
|
locale: moment.locale(),
|
|
|
|
size: "base"
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Calendar;
|