All files / components/box box.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
112
113
114
115
116
 
 
 
 
 
 
9x
9x
9x
9x
9x
9x
9x
9x
9x
 
 
 
9x
1x
3x
 
1x
 
 
 
 
 
9x
1x
 
 
 
 
 
9x
1x
 
 
 
 
 
9x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import BoxTool from './box-tool.jsx';
import PropTypes from 'prop-types';
 
class Box extends React.Component {
  render() {
    const collapseClass = this.props.collapsed ? ' collapsed-box' : '';
    const solidClass = this.props.solid ? ' box-solid' : '';
    const borderClass = this.props.border ? ' with-border' : '';
    const boxTools = [];
    const xs = this.props.widthXS || this.props.width;
    const sm = this.props.widthSM || xs;
    const md = this.props.widthMD || sm;
    const lg = this.props.widthLG || md;
    const xl = this.props.widthXL || lg;
    let boxToolsContainer;
    let loadingState;
    let footer;
    if (this.props.boxTools) {
      this.props.boxTools.map((tool, i) => {
        boxTools.push(<BoxTool key={i} toolType={tool} containerClass="box"/>);
      });
      boxToolsContainer = (
        <div className="box-tools pull-right">
          {boxTools}
        </div>
      );
    }
    if (this.props.loading) {
      loadingState = (
        <div className="overlay">
          <i className="fa fa-refresh fa-spin"></i>
        </div>
      );
    }
    if (this.props.footer) {
      footer = (
        <div className="box-footer">
          {this.props.footer}
        </div>
      );
    }
    return (
      <div className={`col-xs-${xs} col-sm-${sm} col-md-${md} col-lg-${lg} col-xl-${xl}`}>
        <div className={`box color-palette-box ${this.props.theme}${collapseClass}${solidClass}`}>
          {this.props.boxTools || this.props.title ? <div className={`box-header${borderClass}`}>
            <h3 className="box-title">
              {this.props.title}
            </h3>
            {boxToolsContainer}
          </div> : ''}
          <div className={`box-body${this.props.noPadding ? ' no-padding' : ''}`}>
            {this.props.content}
            {this.props.children}
          </div>
          {footer}
          {loadingState}
        </div>
      </div>
    );
  }
}
Box.propTypes = {
  width: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string
  ]),
  widthXS: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string
  ]),
  widthSM: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string
  ]),
  widthMD: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string
  ]),
  widthLG: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string
  ]),
  widthXL: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string
  ]),
  boxTools: PropTypes.array,
  theme: PropTypes.string,
  title: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element
  ]),
  content: PropTypes.string,
  footer: PropTypes.string,
  collapsed: PropTypes.bool,
  loading: PropTypes.bool,
  solid: PropTypes.bool,
  border: PropTypes.bool,
  noPadding: PropTypes.bool
 
};
Box.defaultProps = {
  width: 12,
  theme: '',
  title: '',
  content: '',
  collapsed: false,
  loading: false,
  solid: false,
  border: false,
  noPadding: false
};
 
export default Box;