import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Select, Radio, Row, Col, Popover, Badge } from 'antd'
|
import moment from 'moment'
|
|
// import Utils from '@/utils/utils.js'
|
import './index.scss'
|
|
const { Option } = Select
|
|
class Calendar extends Component {
|
static propTpyes = {
|
data: PropTypes.any, // 事件数据
|
levels: PropTypes.any
|
}
|
|
state = {
|
level: 'day',
|
levels: null,
|
yearlist: null,
|
selectYear: moment().format('YYYY'),
|
selectMonth: moment().format('MM'),
|
datelist: null,
|
monthlist: null,
|
}
|
|
UNSAFE_componentWillMount() {
|
const { levels } = this.props
|
|
let yearlist = []
|
let _selectYear = +this.state.selectYear
|
yearlist.push(`${_selectYear}`)
|
|
for (let i = 1; i <= 50; i++) {
|
yearlist.unshift(`${_selectYear - i}`)
|
yearlist.push(`${_selectYear + i}`)
|
}
|
|
let datelist = this.getDateList(this.state.selectYear)
|
let _levels = null
|
|
if (!levels) {
|
_levels = ['day', 'month', 'year']
|
} else {
|
_levels = levels
|
}
|
|
let level = _levels[0]
|
let monthlist = null
|
level = 'month'
|
|
if (_levels.includes('month')) {
|
monthlist = datelist.filter(item => item.month === moment().format('MM'))[0]
|
}
|
|
this.setState({
|
yearlist,
|
datelist,
|
monthlist,
|
level,
|
levels: _levels
|
})
|
}
|
|
UNSAFE_componentWillReceiveProps(nextProps) {
|
if (!is(fromJS(this.props.data), fromJS(nextProps.data))) {
|
|
}
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
getDateList = (selectYear) => {
|
let datelist = []
|
let months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
|
let monthName = {
|
'01': '一月', '02': '二月', '03': '三月', '04': '四月', '05': '五月', '06': '六月',
|
'07': '七月', '08': '八月', '09': '九月', '10': '十月', '11': '十一月', '12': '十二月'
|
}
|
|
months.forEach(month => {
|
let _weeklist = [{week: 1, sublist: []}]
|
let _week = moment(`${selectYear}${month}01`, 'YYYYMMDD').weekday()
|
let end = +moment(`${selectYear}${month}`, 'YYYYMM').endOf('month').format('DD')
|
|
for (let i = 0; i < _week; i++) {
|
_weeklist[0].sublist.push(null)
|
}
|
|
for (let i = 1; i <= end; i++) {
|
if (_weeklist[_weeklist.length - 1].sublist.length < 7) {
|
_weeklist[_weeklist.length - 1].sublist.push({day: i < 10 ? `0${i}` : `${i}`, label: i})
|
} else {
|
let _week = {week: _weeklist.length + 1, sublist: [{day: i < 10 ? `0${i}` : `${i}`, label: i}]}
|
_weeklist.push(_week)
|
}
|
}
|
|
let re = 7 - _weeklist[_weeklist.length - 1].sublist.length
|
for (let i = 0; i < re; i++) {
|
_weeklist[_weeklist.length - 1].sublist.push(null)
|
}
|
|
datelist.push({
|
month: month,
|
label: monthName[month],
|
sublist: _weeklist
|
})
|
})
|
|
return datelist
|
}
|
|
levelChange = (e) => {
|
this.setState({ level: e.target.value })
|
}
|
|
yearChange = (value) => {
|
const { levels, selectMonth } = this.state
|
let datelist = this.getDateList(value)
|
let monthlist = null
|
|
if (levels.includes('month')) {
|
monthlist = datelist.filter(item => item.month === selectMonth)[0]
|
}
|
|
this.setState({ selectYear: value, datelist, monthlist })
|
}
|
|
monthChange = (value) => {
|
const { datelist } = this.state
|
|
this.setState({
|
selectMonth: value,
|
monthlist: datelist.filter(item => item.month === value)[0]
|
})
|
}
|
|
triggerDay = (item) => {
|
|
}
|
|
render() {
|
const { level, selectMonth, selectYear, yearlist, levels, datelist, monthlist } = this.state
|
const _levelName = {day: '日', month: '月', year: '年'}
|
const listData = [
|
{ type: 'orange', content: 'This is error event 2.' },
|
{ type: 'cyan', content: 'This is error event 3.' },
|
{ type: 'green', content: 'This is error event 4.' },
|
]
|
|
return (
|
<div className="mk-calendar">
|
<div className="mk-calendar-control">
|
<Select value={selectYear} onChange={this.yearChange}>
|
{yearlist.map(item => (<Option key={item} value={item}>{item}年</Option>))}
|
</Select>
|
{level === 'month' ? <Select value={selectMonth} onChange={this.monthChange}>
|
<Option value="01">1月</Option>
|
<Option value="02">2月</Option>
|
<Option value="03">3月</Option>
|
<Option value="04">4月</Option>
|
<Option value="05">5月</Option>
|
<Option value="06">6月</Option>
|
<Option value="07">7月</Option>
|
<Option value="08">8月</Option>
|
<Option value="09">9月</Option>
|
<Option value="10">10月</Option>
|
<Option value="11">11月</Option>
|
<Option value="12">12月</Option>
|
</Select> : null}
|
{levels.length > 1 ? <Radio.Group value={level} onChange={this.levelChange}>
|
{levels.map(item => (<Radio.Button key={item} value={item}>{_levelName[item]}</Radio.Button>))}
|
</Radio.Group> : null}
|
</div>
|
<div className="mk-calendar-content">
|
{level === 'day' ? <Row className="day-calendar" gutter={16}>
|
{datelist.map(item => (
|
<Col span={4} key={item.month}>
|
<table>
|
<thead>
|
<tr>
|
<th colSpan="7">{item.label}</th>
|
</tr>
|
<tr>
|
<th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>日</th>
|
</tr>
|
</thead>
|
<tbody>
|
{item.sublist.map(cell => (
|
<tr key={cell.week}>
|
{cell.sublist.map((d, i) => (
|
<td key={i}>
|
{d ? <div className={'day-wrap ' + d.class} onClick={() => this.triggerDay(d)}>
|
{d.label ? <Popover mouseEnterDelay={0.3} overlayClassName="calendar-day-pop" content={
|
<div>
|
{listData.map((data, index) => (
|
<div key={index} className="message">
|
<Badge color={data.type} text={data.content} />
|
</div>
|
))}
|
</div>
|
} trigger="hover">
|
{d.label}
|
</Popover> : d.label}
|
</div> : null }
|
</td>
|
))}
|
</tr>
|
))}
|
</tbody>
|
</table>
|
</Col>
|
))}
|
</Row> : null}
|
{level === 'month' && monthlist ? <div className="month-calendar">
|
<table>
|
<thead>
|
<tr>
|
<th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>日</th>
|
</tr>
|
</thead>
|
<tbody>
|
{monthlist.sublist.map(cell => (
|
<tr key={cell.week}>
|
{cell.sublist.map((d, i) => (
|
<td key={i}>
|
{d ? <div className="month-wrap" onClick={() => this.triggerDay(d)}>
|
<div className="header">
|
{d.label}
|
</div>
|
<ul className="content">
|
{[1,3,7,18,22].includes(d.label) && listData.map((data, index) => (
|
<li key={index} className="message" title={data.content}>
|
<Badge color={data.type} text={data.content} />
|
</li>
|
))}
|
</ul>
|
</div> : null }
|
</td>
|
))}
|
</tr>
|
))}
|
</tbody>
|
</table>
|
</div>: null}
|
{level === 'year' && monthlist ? <Row className="year-calendar">
|
{datelist.map(item => (
|
<Col span={8} key={item.month}>
|
<div className="year-wrap">
|
<div className="header">
|
{item.label}
|
</div>
|
<ul className="content">
|
{['01', '05', '10'].includes(item.month) && listData.map((data, index) => (
|
<li key={index} className="message" title={data.content}>
|
<Badge color={data.type} text={data.content} />
|
</li>
|
))}
|
</ul>
|
</div>
|
</Col>
|
))}
|
</Row>: null}
|
</div>
|
</div>
|
)
|
}
|
}
|
|
export default Calendar
|
