All files / components/todo-list todo-list.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
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
import Label from '../utilities/label.jsx'
 
class TodoList extends React.Component {
  render() {
    return (
      <div className={`box ${this.props.theme}`}>
        <div className="box-header">
          <h3 className="box-title">
            {this.props.headline}
          </h3>
          {this.props.paginate ? (
            <div className="box-tools pull-right">
              <ul className="pagination pagination-sm inline">
                {/* TODO: Later. This is lesser priority */}
              </ul>
            </div>
          ) : ''}
        </div>
        <div className="box-body">
          <ul className="todo-list">
            {this.props.todos.length > 0 ? (
              this.props.todos.map((todo, td) => {
                return (
                  <li key={td}>
                    {todo.complete ? (
                      <i className={`fa ${todo.check || 'fa-check'} ${todo.checkColor || 'text-muted'}`} />
                    ) : (
                      <input
                        type="checkbox"
                        value={todo.value || ''}
                        onChange={() => { this.props.onUpdate(td); }}
                      />
                    )}
                    <span className="text">{todo.content}</span>
                    {!todo.complete && todo.due ? (
                      <Label
                        theme={todo.theme || 'label-warning'}
                        icon="fa-clock-o"
                        align=""
                        stat={todo.due}
                      />
                    ) : ''}
                    <div className="tools">
                      {this.props.canEdit ? (
                        <i className="fa fa-edit" onClick={() => { this.props.onEdit(td); }} />
                      ) : ''}
                      {this.props.canDelete ? (
                        <i className="fa fa-trash-o" onClick={() => { this.props.onDelete(td); }} />
                      ) : ''}
                    </div>
                  </li>
                );
              })
            ) : ''}
          </ul>
        </div>
        {this.props.canAdd ? (
          <div className="box-footer clearfix no-border">
            <button
              type="button"
              className="btn btn-default pull-right"
              onClick={this.props.onAdd}
            >
              <i className="fa fa-plus" />
              {this.props.addText ? ' ' : ''}
              {this.props.addText}
            </button>
          </div>
        ) : ''}
      </div>
    );
  }
}
 
TodoList.propTypes = {
  theme: PropTypes.string,
  headline: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element
  ]),
  addText: PropTypes.string,
  paginate: PropTypes.bool,
  todos: PropTypes.array,
  canAdd: PropTypes.bool,
  canEdit: PropTypes.bool,
  canDelete: PropTypes.bool,
  onAdd: PropTypes.func,
  onEdit: PropTypes.func,
  onDelete: PropTypes.func,
  onUpdate: PropTypes.func
};
 
TodoList.defaultProps = {
  theme: 'box-default',
  headline: '',
  addText: '',
  paginate: false,
  todos: [],
  canAdd: false,
  canEdit: false,
  canDelete: false,
  onAdd: () => {},
  onEdit: () => {},
  onDelete: () => {},
  onUpdate: () => {}
};
 
export default TodoList;