-
Notifications
You must be signed in to change notification settings - Fork 51
/
CalendarMonthMatrix.jsx
125 lines (115 loc) · 3.41 KB
/
CalendarMonthMatrix.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { range } from 'lodash'
import DayMatrix from './DayMatrix'
import { ContentStates } from '../../constants/Options'
import utilsDate from '../../utils/DateHelper'
import { Button } from 'react-bootstrap'
const classes = {
calendar: {
types: {
total: '',
approved: ' primary',
translated: ' success',
needswork: ' unsure'
}
}
}
const CalendarMonthMatrix = ({
matrixData,
selectedDay,
selectedContentState,
dateRange,
handleSelectedDayChanged
}) => {
if (matrixData.length === 0) {
return <table><tbody><tr><td>Loading</td></tr></tbody></table>
}
const calClass = 'userProfile-activityGraph' + classes.calendar
.types[selectedContentState.toLowerCase().replace(' ', '')]
let days = []
let result = []
const firstDay = moment(matrixData[0]['date'])
for (var i = firstDay.weekday() - 1; i >= 0; i--) {
// for the first week, we pre-fill missing week days
days.push(
<DayMatrix key={firstDay.weekday(i).format()}
handleSelectedDayChanged={handleSelectedDayChanged} />
)
}
matrixData.forEach((entry) => {
const date = entry['date']
days.push(
<DayMatrix key={date}
selectedContentState={selectedContentState}
dateLabel={moment(date).format('Do')}
date={date}
wordCount={entry['wordCount']}
selectedDay={selectedDay}
handleSelectedDayChanged={handleSelectedDayChanged} />
)
})
while (days.length) {
const dayColumns = days.splice(0, 7)
const key = utilsDate.shortDate(dateRange.startDate) + '-' +
utilsDate.shortDate(dateRange.endDate) + '-week' + result.length
result.push(
<tr key={key}>
{dayColumns}
</tr>
)
}
// this is to make week days locale aware and making sure it align with
// below display
const now = moment()
const weekDays = range(0, 7).map(i => {
const weekDay = now.weekday(i).format('ddd')
return <th key={weekDay}>{weekDay}</th>
})
let header = utilsDate.getDateRangeLabel(dateRange)
header = header ? header + '\'s Activity'
: utilsDate.formatDate(dateRange.startDate, utilsDate.dateRangeDisplayFmt) +
' to ' +
utilsDate.formatDate(dateRange.endDate, utilsDate.dateRangeDisplayFmt)
/* eslint-disable react/jsx-no-bind */
return (
<div id='userProfile-activityTable'>
<div className='userProfile-activityTable-inner'>
<div>
<h3 className='u-textUppercaseBold'>
{header}
</h3>
</div>
{selectedDay &&
(<div>
<Button bsStyle='link'
className='btn-clear'
onClick={() => handleSelectedDayChanged(null)}>
Clear selection
</Button>
</div>)}
</div>
<table className={calClass}>
<thead>
<tr>{weekDays}</tr>
</thead>
<tbody>{result}</tbody>
</table>
</div>
)
/* eslint-enable react/jsx-no-bind */
}
CalendarMonthMatrix.propTypes = {
matrixData: PropTypes.arrayOf(
PropTypes.shape({
date: PropTypes.string.isRequired,
wordCount: PropTypes.number.isRequired
})
).isRequired,
selectedDay: PropTypes.string,
selectedContentState: PropTypes.oneOf(ContentStates).isRequired,
dateRange: PropTypes.object.isRequired,
handleSelectedDayChanged: PropTypes.func.isRequired
}
export default CalendarMonthMatrix