ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-12-28 16:00:24 +05:30
Code Issues Packages Projects Releases Wiki Activity

#366: ensure the height will be merged immediately after first mount of MeasureHeight

Browse Source
This commit is contained in:
SleepWalker 2017-11-19 20:32:52 +02:00
parent 66d4d2ceb5
commit b277a3c91f
1 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/MeasureHeight.js
View File

@ -36,18 +36,19 @@ export default class MeasureHeight extends PureComponent<{
el: ?HTMLDivElement; el: ?HTMLDivElement;
componentDidMount() { componentDidMount() {
// we want to measure height immediately on first mount to avoid ui laggs
this.measure(); this.measure();
window.addEventListener('resize', this.measure); window.addEventListener('resize', this.enqueueMeasurement);
} }
componentDidUpdate(prevProps: typeof MeasureHeight.prototype.props) { componentDidUpdate(prevProps: typeof MeasureHeight.prototype.props) {
if (this.props.shouldMeasure(prevProps.state, this.props.state)) { if (this.props.shouldMeasure(prevProps.state, this.props.state)) {
this.measure(); this.enqueueMeasurement();
} }
} }
componentWillUnmount() { componentWillUnmount() {
window.removeEventListener('resize', this.measure); window.removeEventListener('resize', this.enqueueMeasurement);
} }
render() { render() {
@ -60,7 +61,9 @@ export default class MeasureHeight extends PureComponent<{
return <div {...props} ref={(el: HTMLDivElement) => this.el = el} />; return <div {...props} ref={(el: HTMLDivElement) => this.el = el} />;
} }
measure = debounce(() => { measure = () => {
requestAnimationFrame(() => this.el && this.props.onMeasure(this.el.offsetHeight)); requestAnimationFrame(() => {this.el && this.props.onMeasure(this.el.offsetHeight);});
}); };
enqueueMeasurement = debounce(this.measure);
} }