cncjs

1
import PropTypes from 'prop-types';
2
import React, { PureComponent } from 'react';
3
import Toggle from 'react-toggle';
4
import i18n from 'app/lib/i18n';
5

6
class WidgetListItem extends PureComponent {
7
    static propTypes = {
8
      id: PropTypes.string,
9
      caption: PropTypes.string,
10
      details: PropTypes.string,
11
      checked: PropTypes.bool,
12
      disabled: PropTypes.bool,
13
      onChange: PropTypes.func
14
    };
15

16
    state = {
17
      checked: this.props.checked
18
    };
19

20
    handleChange = (event) => {
21
      const checked = event.target.checked;
22
      this.setState({ checked: checked });
23
      this.props.onChange(this.props.id, checked);
24
    };
25

26
    render() {
27
      const { checked } = this.state;
28
      const styles = {
29
        thumbnail: {
30
          fontSize: 100,
31
          backgroundColor: '#f5f6f7',
32
          color: checked ? 'rgba(64, 64, 64, 0.8)' : '#ccc',
33
          textShadow: '2px 2px 2px #a0a0a0'
34
        },
35
        caption: {
36
          color: '#333',
37
          fontWeight: 'bold',
38
          opacity: checked ? 1 : 0.6
39
        },
40
        details: {
41
          color: '#333',
42
          height: 60,
43
          marginTop: 15,
44
          maxHeight: 60,
45
          opacity: checked ? 1 : 0.6
46
        }
47
      };
48

49
      return (
50
        <div className="panel panel-default">
51
          <div className="panel-head text-center" style={styles.thumbnail}>
52
            <i className="fa fa-list-alt" style={{ fontSize: 'inherit' }} />
53
          </div>
54
          <div className="panel-body">
55
            <div className="row no-gutters">
56
              <div className="col-sm-8 text-left">
57
                <span style={styles.caption}>{this.props.caption}</span>
58
              </div>
59
              <div className="col-sm-4 text-right">
60
                <span
61
                  title={checked ? i18n._('On') : i18n._('Off')}
62
                >
63
                  <Toggle
64
                    disabled={this.props.disabled}
65
                    defaultChecked={checked}
66
                    onChange={this.handleChange}
67
                  />
68
                </span>
69
              </div>
70
            </div>
71
            <div style={styles.details}>
72
              <p>{this.props.details}</p>
73
            </div>
74
          </div>
75
        </div>
76
      );
77
    }
78
}
79

80
export default WidgetListItem;
81