All files / components/content-wrapper content-wrapper.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
 
 
 
 
 
 
 
1x
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
import React from 'react';
import ReactDOM from 'react-dom';
import ContentHeader from '../content-header/content-header.jsx';
import PropTypes from 'prop-types';
 
class ContentWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.updateWindowState = this.updateWindowState.bind(this);
    this.compensateResizedView = this.compensateResizedView.bind(this);
  }
 
  updateWindowState() {
    this.compensateResizedView();
  }
 
  compensateResizedView() {
    const appWrapper = document.getElementsByClassName('wrapper')[0];
    const header = document.getElementsByClassName('main-header')[0] || { offsetHeight: 0 };
    const thisWrapper = ReactDOM.findDOMNode(this);
    const footer = document.getElementsByClassName('main-footer')[0] || { offsetHeight: 0 };
 
    thisWrapper.style.paddingTop = `${header.offsetHeight}px`;
    if (thisWrapper.offsetHeight <= appWrapper.offsetHeight - footer.offsetHeight) {
      thisWrapper.style.minHeight = `${window.innerHeight - footer.offsetHeight}px`;
    }
  }
 
  componentDidMount() {
    this.compensateResizedView();
    window.addEventListener('resize', this.updateWindowState);
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.updateWindowState);
  }
 
  render() {
    return (
      <div className="content-wrapper">
        <ContentHeader
          heading={this.props.heading}
          subheading={this.props.subheading}
          breadcrumbs={this.props.breadcrumbs}
        />
        <section className="content body">
          {this.props.children}
        </section>
      </div>
    );
  }
}
ContentWrapper.propTypes = {
  heading: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element
  ]),
  subheading: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element
  ]),
  breadcrumbs: PropTypes.bool
};
ContentWrapper.defaultProps = {
  heading: '',
  subheading: '',
  breadcrumbs: false
};
 
export default ContentWrapper;