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
|
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import classNames from 'classnames';
import CommentIcon from '@material-ui/icons/Comment';
import {
List,
ListItem,
ListItemSecondaryAction,
ListItemText,
Checkbox,
IconButton,
} from '@material-ui/core';
import PapperBlock from '../PapperBlock/PapperBlock';
import styles from './widget-jss';
class TaskWidget extends React.Component {
state = {
checked: [0],
};
handleToggle = value => () => {
const { checked } = this.state;
const currentIndex = checked.indexOf(value);
const newChecked = [...checked];
if (currentIndex === -1) {
newChecked.push(value);
} else {
newChecked.splice(currentIndex, 1);
}
this.setState({
checked: newChecked,
});
};
render() {
const { classes } = this.props;
return (
<PapperBlock title="My Task" whiteBg colorMode desc="All Your to do list. Just check it whenever You done." className={classes.root}>
<List className={classes.taskList}>
{[0, 1, 2, 3, 4].map(value => (
<Fragment key={value}>
<ListItem
key={value}
role={undefined}
dense
button
onClick={this.handleToggle(value)}
className={
classNames(
classes.listItem,
this.state.checked.indexOf(value) !== -1 ? classes.done : ''
)
}
>
<Checkbox
checked={this.state.checked.indexOf(value) !== -1}
tabIndex={-1}
disableRipple
/>
<ListItemText primary={`Task item ${value + 1}`} secondary={`Task description ${value + 1}`} />
<ListItemSecondaryAction>
<IconButton aria-label="Comments">
<CommentIcon />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
</Fragment>
))}
</List>
</PapperBlock>
);
}
}
TaskWidget.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(TaskWidget);
|
