2016-05-29 13:47:27 +03:00
|
|
|
import React, { Component, PropTypes } from 'react';
|
2016-05-21 21:52:48 +03:00
|
|
|
import classnames from 'classnames';
|
2016-05-28 23:04:00 +03:00
|
|
|
import time from '../utils/time.js';
|
2015-09-09 23:34:56 +03:00
|
|
|
|
2016-05-29 13:47:27 +03:00
|
|
|
class Day extends Component {
|
2015-10-20 08:40:51 +03:00
|
|
|
static propTypes = {
|
2016-05-28 23:04:00 +03:00
|
|
|
day: PropTypes.number,
|
|
|
|
disabled: PropTypes.bool,
|
|
|
|
onClick: PropTypes.func,
|
|
|
|
selectedDate: PropTypes.object,
|
2016-08-01 14:44:26 +03:00
|
|
|
sundayFirstDayOfWeek: PropTypes.bool,
|
2016-05-28 23:04:00 +03:00
|
|
|
theme: PropTypes.shape({
|
2016-06-04 00:44:33 +03:00
|
|
|
active: PropTypes.string,
|
|
|
|
day: PropTypes.string,
|
|
|
|
disabled: 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-09-08 01:03:17 +03:00
|
|
|
dayStyle () {
|
2015-09-07 02:41:59 +03:00
|
|
|
if (this.props.day === 1) {
|
2016-08-01 14:21:32 +03:00
|
|
|
const e = (this.props.sundayFirstDayOfWeek) ? 0 : 1;
|
2015-09-07 02:41:59 +03:00
|
|
|
return {
|
2016-08-01 14:21:32 +03:00
|
|
|
marginLeft: `${(time.getFirstWeekDay(this.props.viewDate) - e) * 100 / 7}%`
|
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-09-08 01:03:17 +03:00
|
|
|
isSelected () {
|
2015-09-07 02:41:59 +03:00
|
|
|
const sameYear = this.props.viewDate.getFullYear() === this.props.selectedDate.getFullYear();
|
|
|
|
const sameMonth = this.props.viewDate.getMonth() === this.props.selectedDate.getMonth();
|
|
|
|
const sameDay = this.props.day === this.props.selectedDate.getDate();
|
|
|
|
return sameYear && sameMonth && sameDay;
|
2015-10-20 08:40:51 +03:00
|
|
|
}
|
2015-09-07 02:41:59 +03:00
|
|
|
|
2016-08-06 23:44:05 +03:00
|
|
|
handleClick = () => {
|
|
|
|
if (!this.props.disabled && this.props.onClick) {
|
|
|
|
this.props.onClick(this.props.day);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2015-09-07 02:41:59 +03:00
|
|
|
render () {
|
2016-05-21 21:52:48 +03:00
|
|
|
const className = classnames(this.props.theme.day, {
|
|
|
|
[this.props.theme.active]: this.isSelected(),
|
|
|
|
[this.props.theme.disabled]: this.props.disabled
|
2015-11-28 15:55:25 +03:00
|
|
|
});
|
2015-11-16 11:56:05 +03:00
|
|
|
|
2015-09-07 02:41:59 +03:00
|
|
|
return (
|
2015-12-20 00:47:00 +03:00
|
|
|
<div data-react-toolbox='day' className={className} style={this.dayStyle()}>
|
2016-08-06 23:44:05 +03:00
|
|
|
<span onClick={this.handleClick}>
|
2015-12-20 00:47:00 +03:00
|
|
|
{this.props.day}
|
|
|
|
</span>
|
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 Day;
|