-
Notifications
You must be signed in to change notification settings - Fork 51
/
DayMatrix.jsx
61 lines (56 loc) · 1.59 KB
/
DayMatrix.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
import React from 'react'
import PropTypes from 'prop-types'
import { ContentStates } from '../../constants/Options'
import dateUtil from '../../utils/DateHelper'
import { Button } from 'react-bootstrap'
/**
* Clickable date and word count component for daily statistics
*/
const cssClass = {
total: 'primary',
approved: 'info',
translated: 'success',
needswork: 'warning'
}
const DayMatrix = ({
dateLabel,
date,
wordCount,
selectedDay,
selectedContentState,
handleSelectedDayChanged,
...props
}) => {
const dateIsInFuture = date ? dateUtil.isInFuture(date) : false
const btnStyle = selectedContentState
? cssClass[selectedContentState.toLowerCase().replace(' ', '')]
: cssClass['total']
/* eslint-disable react/jsx-no-bind */
return (
<td>
{date
? <Button
bsStyle={btnStyle}
onClick={() => handleSelectedDayChanged(date)}
className={date === selectedDay ? 'active ' : ''}
disabled={dateIsInFuture || !date}
title={wordCount + ' words'}>
<div className='cal-date'>{date ? dateLabel : '\u00a0'}</div>
<div className='cal-info'>
{dateIsInFuture ? '\u00a0' : wordCount}
</div>
</Button>
: <div className='matrixBox'></div>}
</td>
)
/* eslint-enable react/jsx-no-bind */
}
DayMatrix.propTypes = {
dateLabel: PropTypes.string,
date: PropTypes.string,
wordCount: PropTypes.number,
selectedDay: PropTypes.string,
selectedContentState: PropTypes.oneOf(ContentStates),
handleSelectedDayChanged: PropTypes.func.isRequired
}
export default DayMatrix