2016-05-28 23:04:00 +03:00
|
|
|
import React, { Component, PropTypes } from 'react';
|
|
|
|
import time from '../utils/time.js';
|
|
|
|
import utils from '../utils/utils.js';
|
|
|
|
import CalendarDay from './CalendarDay.js';
|
2015-09-07 02:41:59 +03:00
|
|
|
|
2016-05-28 23:04:00 +03:00
|
|
|
class Month extends Component {
|
2015-10-20 08:40:51 +03:00
|
|
|
static propTypes = {
|
2016-05-28 23:04:00 +03:00
|
|
|
maxDate: PropTypes.object,
|
|
|
|
minDate: PropTypes.object,
|
|
|
|
onDayClick: PropTypes.func,
|
|
|
|
selectedDate: PropTypes.object,
|
|
|
|
theme: PropTypes.shape({
|
2016-06-04 00:44:33 +03:00
|
|
|
days: PropTypes.string,
|
|
|
|
month: PropTypes.string,
|
|
|
|
title: PropTypes.string,
|
|
|
|
week: PropTypes.string
|
2016-05-21 21:52:48 +03:00
|
|
|
}),
|
2016-05-28 23:04:00 +03:00
|
|
|
viewDate: PropTypes.object
|
2015-10-20 08:40:51 +03:00
|
|
|
};
|
2015-09-07 02:41:59 +03:00
|
|
|
|
2015-10-22 02:31:17 +03:00
|
|
|
handleDayClick = (day) => {
|
2015-10-11 20:07:09 +03:00
|
|
|
if (this.props.onDayClick) this.props.onDayClick(day);
|
2015-10-22 02:31:17 +03:00
|
|
|
};
|
2015-10-11 20:07:09 +03:00
|
|
|
|
2015-09-07 02:41:59 +03:00
|
|
|
renderWeeks () {
|
|
|
|
return utils.range(0, 7).map(i => {
|
2015-11-22 21:20:05 +03:00
|
|
|
return <span key={i}>{time.getFullDayOfWeek(i).charAt(0)}</span>;
|
2015-09-07 02:41:59 +03:00
|
|
|
});
|
2015-10-20 08:40:51 +03:00
|
|
|
}
|
2015-09-07 02:41:59 +03:00
|
|
|
|
|
|
|
renderDays () {
|
2015-11-21 16:26:17 +03:00
|
|
|
return utils.range(1, time.getDaysInMonth(this.props.viewDate) + 1).map(i => {
|
2015-11-16 18:54:05 +03:00
|
|
|
const date = new Date(this.props.viewDate.getFullYear(), this.props.viewDate.getMonth(), i);
|
2015-11-21 16:26:17 +03:00
|
|
|
const disabled = time.dateOutOfRange(date, this.props.minDate, this.props.maxDate);
|
2015-11-16 11:56:05 +03:00
|
|
|
|
2015-09-07 02:41:59 +03:00
|
|
|
return (
|
2015-11-23 00:13:27 +03:00
|
|
|
<CalendarDay
|
2015-10-11 20:07:09 +03:00
|
|
|
key={i}
|
2015-09-07 02:41:59 +03:00
|
|
|
day={i}
|
2015-11-16 18:54:05 +03:00
|
|
|
disabled={disabled}
|
2016-08-06 23:44:05 +03:00
|
|
|
onClick={this.handleDayClick}
|
2015-09-07 02:41:59 +03:00
|
|
|
selectedDate={this.props.selectedDate}
|
2016-05-28 23:04:00 +03:00
|
|
|
theme={this.props.theme}
|
2015-10-11 20:07:09 +03:00
|
|
|
viewDate={this.props.viewDate}
|
|
|
|
/>
|
2015-09-07 02:41:59 +03:00
|
|
|
);
|
|
|
|
});
|
2015-10-20 08:40:51 +03:00
|
|
|
}
|
2015-09-07 02:41:59 +03:00
|
|
|
|
|
|
|
render () {
|
|
|
|
return (
|
2016-05-21 21:52:48 +03:00
|
|
|
<div data-react-toolbox='month' className={this.props.theme.month}>
|
|
|
|
<span className={this.props.theme.title}>
|
2015-11-22 21:20:05 +03:00
|
|
|
{time.getFullMonth(this.props.viewDate)} {this.props.viewDate.getFullYear()}
|
2015-09-07 02:41:59 +03:00
|
|
|
</span>
|
2016-05-21 21:52:48 +03:00
|
|
|
<div className={this.props.theme.week}>{this.renderWeeks()}</div>
|
|
|
|
<div className={this.props.theme.days}>{this.renderDays()}</div>
|
2015-09-07 02:41:59 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2015-10-21 13:25:07 +03:00
|
|
|
}
|
2015-10-22 02:31:17 +03:00
|
|
|
|
2016-05-28 23:04:00 +03:00
|
|
|
export default Month;
|