summaryrefslogtreecommitdiff
path: root/www/app/components/area.js
blob: e903e5f583f8720329e08f0987a95205e0c4d46a (plain)
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
//
// A bootstrap panel, but with some extra options
//

import React from 'react'
// import {Panel} from 'react-bootstrap'

class Area extends React.Component {

  static get defaultProps() {return{
     position: null,  // top or bottom
     size: 'small',   // small or big
     type: null,      // light or dark
     className: null
  }}

  constructor(props) {
    super(props)
  }

  render() {
    let style = {}
    let innerstyle = {}
    if (this.props.position == 'top') {
      style.borderBottomRightRadius = '0px'
      style.borderBottomLeftRadius = '0px'
      style.marginBottom = '0px'
      style.borderBottom = '0px'
      if (this.props.size == 'big') {
        innerstyle.padding = '25px'
      }
    } else if (this.props.position == 'bottom') {
      style.borderTopRightRadius = '0px'
      style.borderTopLeftRadius = '0px'
      style.borderTop = '0px'
      if (this.props.size == 'big') {
        innerstyle.padding = '15px 25px'
      }
    }

    let type = this.props.type ? "area-" + this.props.type : ""
    let className = ['panel', 'panel-default', type, this.props.className].join(' ')
    return(
      <div className={className} style={style}>
        <div className="panel-body" style={innerstyle}>
          {this.props.children}
        </div>
      </div>
    )
  }

}

// Area.propTypes = {
//   children: React.PropTypes.oneOfType([
//     React.PropTypes.element,
//     React.PropTypes.arrayOf(React.PropTypes.element)
//   ])
// }

//Area.propTypes = {
//  children: React.PropTypes.element.isRequired
//}

export default Area