All files / components/header-bar/header-tasks task-item.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
 
 
 
 
 
1x
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
 
class TaskItem extends React.Component {
  render() {
    let stylePercentage = {
      width: `${this.props.percentage}%`
    }
    return (
      <li>
        <a href={this.props.link} onClick={this.props.onClick}>
          <h3>
            {this.props.content}
            <small className="pull-right">
              {`${this.props.percentage}%`}
            </small>
          </h3>
          <div className="progress xs">
            <div className={`progress-bar ${this.props.theme}`} style={stylePercentage}>
              <span className="sr-only">
                {`${this.props.percentage} % Complete`}
              </span>
            </div>
          </div>
        </a>
      </li>
    );
  }
}
TaskItem.propTypes = {
  percentage: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ]),
  theme: PropTypes.string,
  content: PropTypes.string,
  link: PropTypes.string,
  onClick: PropTypes.func
};
TaskItem.defaultProps = {
  percentage: 0,
  theme: 'bg-yellow',
  content: ''
};
 
export default TaskItem;