-
Notifications
You must be signed in to change notification settings - Fork 53
/
with_responsive_height.js
60 lines (50 loc) · 1.36 KB
/
with_responsive_height.js
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
import React, { PureComponent } from "react";
import PropTypes from "prop-types";
const DEFAULT_HEIGHT = 400;
const withResponsiveHeight = WrappedComponent =>
class extends PureComponent {
constructor(props) {
super(props);
this.state = {
height: props.height
};
}
static propTypes = {
responsiveHeight: PropTypes.string,
height: PropTypes.number
};
static defaultProps = {
responsiveHeight: `${DEFAULT_HEIGHT}px`,
height: DEFAULT_HEIGHT
};
getClientHeight() {
return this.divRef.clientHeight;
}
componentDidMount() {
const clientHeight = this.getClientHeight();
this.changeHeight(clientHeight);
}
componentDidUpdate() {
const { height } = this.state;
const clientHeight = this.getClientHeight();
if (clientHeight && height !== clientHeight) {
this.changeHeight(clientHeight);
}
}
changeHeight(height) {
this.setState({ height: height - 2 });
}
render() {
const { responsiveHeight, ...props } = this.props;
const { height } = this.state;
return (
<div
style={{ height: responsiveHeight }}
ref={element => (this.divRef = element)}
>
<WrappedComponent {...props} height={height} />
</div>
);
}
};
export default withResponsiveHeight;