1 files changed, 83 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/Widget/TaskWidget.js b/front/odiparpack/app/components/Widget/TaskWidget.js
new file mode 100644
index 0000000..4136544
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/TaskWidget.js
@@ -0,0 +1,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);