2015-10-11 20:07:09 +03:00
|
|
|
import React from 'react';
|
2015-11-22 21:20:05 +03:00
|
|
|
import CssTransitionGroup from 'react-addons-css-transition-group';
|
2015-11-23 00:13:27 +03:00
|
|
|
import { SlideLeft, SlideRight } from '../animations';
|
|
|
|
import FontIcon from '../font_icon';
|
|
|
|
import Ripple from '../ripple';
|
|
|
|
import CalendarMonth from './CalendarMonth';
|
|
|
|
import time from '../utils/time';
|
|
|
|
import utils from '../utils/utils';
|
|
|
|
import style from './style.calendar';
|
2015-09-09 23:34:56 +03:00
|
|
|
|
2015-10-22 02:31:17 +03:00
|
|
|
class Calendar extends React.Component {
|
2015-10-20 08:40:51 +03:00
|
|
|
static propTypes = {
|
2015-09-07 02:41:59 +03:00
|
|
|
display: React.PropTypes.oneOf(['months', 'years']),
|
2015-11-16 11:56:05 +03:00
|
|
|
maxDate: React.PropTypes.object,
|
|
|
|
minDate: React.PropTypes.object,
|
2015-09-07 02:41:59 +03:00
|
|
|
onChange: React.PropTypes.func,
|
|
|
|
selectedDate: React.PropTypes.object,
|
|
|
|
viewDate: React.PropTypes.object
|
2015-10-20 08:40:51 +03:00
|
|
|
};
|
2015-09-07 02:41:59 +03:00
|
|
|
|
2015-10-20 08:40:51 +03:00
|
|
|
static defaultProps = {
|
|
|
|
display: 'months',
|
|
|
|
selectedDate: new Date()
|
|
|
|
};
|
2015-09-07 02:41:59 +03:00
|
|
|
|
2015-10-20 08:40:51 +03:00
|
|
|
state = {
|
|
|
|
viewDate: this.props.selectedDate
|
|
|
|
};
|
2015-09-07 02:41:59 +03:00
|
|
|
|
2015-09-07 03:25:39 +03:00
|
|
|
componentDidUpdate () {
|
|
|
|
if (this.refs.activeYear) {
|
2015-09-08 01:03:17 +03:00
|
|
|
this.scrollToActive();
|
2015-09-07 02:41:59 +03:00
|
|
|
}
|
2015-10-20 08:40:51 +03:00
|
|
|
}
|
2015-09-07 02:41:59 +03:00
|
|
|
|
2015-10-22 02:31:17 +03:00
|
|
|
scrollToActive () {
|
|
|
|
this.refs.years.scrollTop =
|
|
|
|
this.refs.activeYear.offsetTop -
|
|
|
|
this.refs.years.offsetHeight / 2 +
|
|
|
|
this.refs.activeYear.offsetHeight / 2;
|
|
|
|
}
|
|
|
|
|
|
|
|
handleDayClick = (day) => {
|
2015-11-21 16:26:17 +03:00
|
|
|
this.props.onChange(time.setDay(this.state.viewDate, day));
|
2015-10-22 02:31:17 +03:00
|
|
|
};
|
2015-09-07 02:41:59 +03:00
|
|
|
|
2015-10-22 02:31:17 +03:00
|
|
|
handleYearClick = (year) => {
|
2015-11-21 16:26:17 +03:00
|
|
|
const viewDate = time.setYear(this.props.selectedDate, year);
|
2015-11-11 22:34:19 +03:00
|
|
|
this.setState({viewDate});
|
|
|
|
this.props.onChange(viewDate);
|
2015-10-22 02:31:17 +03:00
|
|
|
};
|
2015-09-07 02:41:59 +03:00
|
|
|
|
2015-10-22 02:31:17 +03:00
|
|
|
incrementViewMonth = () => {
|
2015-10-11 20:07:09 +03:00
|
|
|
this.refs.rippleRight.start(event);
|
2015-09-07 02:41:59 +03:00
|
|
|
this.setState({
|
|
|
|
direction: 'right',
|
2015-11-21 16:26:17 +03:00
|
|
|
viewDate: time.addMonths(this.state.viewDate, 1)
|
2015-09-07 02:41:59 +03:00
|
|
|
});
|
2015-10-22 02:31:17 +03:00
|
|
|
};
|
2015-09-07 02:41:59 +03:00
|
|
|
|
2015-10-22 02:31:17 +03:00
|
|
|
decrementViewMonth = () => {
|
2015-10-11 20:07:09 +03:00
|
|
|
this.refs.rippleLeft.start(event);
|
2015-09-07 02:41:59 +03:00
|
|
|
this.setState({
|
|
|
|
direction: 'left',
|
2015-11-21 16:26:17 +03:00
|
|
|
viewDate: time.addMonths(this.state.viewDate, -1)
|
2015-09-07 02:41:59 +03:00
|
|
|
});
|
2015-10-22 11:02:36 +03:00
|
|
|
};
|
2015-09-07 02:41:59 +03:00
|
|
|
|
|
|
|
renderYear (year) {
|
2015-10-23 11:11:40 +03:00
|
|
|
const props = {
|
2015-10-11 20:07:09 +03:00
|
|
|
className: year === this.state.viewDate.getFullYear() ? style.active : '',
|
|
|
|
key: year,
|
2015-10-22 02:31:17 +03:00
|
|
|
onClick: this.handleYearClick.bind(this, year)
|
2015-09-07 02:41:59 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
if (year === this.state.viewDate.getFullYear()) {
|
|
|
|
props.ref = 'activeYear';
|
|
|
|
}
|
|
|
|
|
2015-11-22 21:20:05 +03:00
|
|
|
return <li {...props}>{year}</li>;
|
2015-10-20 08:40:51 +03:00
|
|
|
}
|
2015-09-07 02:41:59 +03:00
|
|
|
|
|
|
|
renderYears () {
|
|
|
|
return (
|
2015-10-11 20:07:09 +03:00
|
|
|
<ul ref="years" className={style.years}>
|
2015-11-22 21:20:05 +03:00
|
|
|
{utils.range(1900, 2100).map((i) => { return this.renderYear(i); })}
|
2015-09-07 02:41:59 +03:00
|
|
|
</ul>
|
|
|
|
);
|
2015-10-20 08:40:51 +03:00
|
|
|
}
|
2015-09-07 02:41:59 +03:00
|
|
|
|
|
|
|
renderMonths () {
|
2015-10-23 11:11:40 +03:00
|
|
|
const animation = this.state.direction === 'left' ? SlideLeft : SlideRight;
|
2015-09-07 02:41:59 +03:00
|
|
|
return (
|
2015-10-11 20:07:09 +03:00
|
|
|
<div data-react-toolbox='calendar'>
|
2015-11-24 02:29:02 +03:00
|
|
|
<FontIcon className={style.prev} value='chevron_left' onMouseDown={this.decrementViewMonth}>
|
2015-10-11 20:07:09 +03:00
|
|
|
<Ripple ref='rippleLeft' className={style.ripple} spread={1.2} centered />
|
|
|
|
</FontIcon>
|
2015-11-24 02:29:02 +03:00
|
|
|
<FontIcon className={style.next} value='chevron_right' onMouseDown={this.incrementViewMonth}>
|
2015-10-11 20:07:09 +03:00
|
|
|
<Ripple ref='rippleRight' className={style.ripple} spread={1.2} centered />
|
|
|
|
</FontIcon>
|
2015-11-22 21:20:05 +03:00
|
|
|
<CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
|
2015-11-23 00:13:27 +03:00
|
|
|
<CalendarMonth
|
2015-09-07 02:41:59 +03:00
|
|
|
key={this.state.viewDate.getMonth()}
|
2015-11-16 11:56:05 +03:00
|
|
|
maxDate={this.props.maxDate}
|
|
|
|
minDate={this.props.minDate}
|
2015-09-07 02:41:59 +03:00
|
|
|
viewDate={this.state.viewDate}
|
2015-11-11 22:34:19 +03:00
|
|
|
selectedDate={this.props.selectedDate}
|
2015-11-23 00:13:27 +03:00
|
|
|
onDayClick={this.handleDayClick}
|
|
|
|
/>
|
2015-11-22 21:20:05 +03:00
|
|
|
</CssTransitionGroup>
|
2015-09-07 02:41:59 +03:00
|
|
|
</div>
|
|
|
|
);
|
2015-10-20 08:40:51 +03:00
|
|
|
}
|
2015-09-07 02:41:59 +03:00
|
|
|
|
|
|
|
render () {
|
|
|
|
return (
|
2015-10-11 20:07:09 +03:00
|
|
|
<div className={style.root}>
|
2015-11-22 21:20:05 +03:00
|
|
|
{this.props.display === 'months' ? this.renderMonths() : this.renderYears()}
|
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
|
|
|
|
|
|
|
export default Calendar;
|