All files / components/Resizer Resizer.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
 
 
 
 
 
 
134x
 
134x
 
 
 
 
 
 
 
 
 
134x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8x
 
 
 
 
 
 
2x
 
 
 
 
 
 
2x
2x
 
 
 
1x
 
 
 
10x
 
10x
 
10x
 
 
 
7x
 
 
 
 
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { createClass, omitProps } from '../../util/component-types';
import elementResizeDetectorMaker from 'element-resize-detector';
 
const cx = lucidClassNames.bind('&-Resizer');
 
const { func, string } = PropTypes;
 
/**
 * {"categories": ["utility"]}
 *
 * This is a helper component used for getting the width and height of a
 * containing element. This component doesn't take normal children. It expects
 * you to pass a single function for children. It will then call that function
 * with new `width` and `height` values if the container size changes.
 */
const Resizer = createClass({
	displayName: 'Resizer',
	propTypes: {
		/**
		 * Appended to the component-specific class names set on the root elements.
		 */
		className: string,
		/**
		 * A function that returns your rendered content with the signature:
		 *
		 * `(width, height) => {}`
		 */
		children: func,
	},
 
	getInitialState() {
		return {
			width: 0,
			height: 0,
		};
	},
 
	handleResize({ offsetWidth, offsetHeight }) {
		this.setState({
			width: offsetWidth,
			height: offsetHeight,
		});
	},
 
	componentDidMount() {
		this.resizeDetector = elementResizeDetectorMaker({ strategy: 'scroll' });
		this.resizeDetector.listenTo(this._element, this.handleResize);
	},
 
	componentWillUnmount() {
		this.resizeDetector.removeListener(this._element, this.handleResize);
	},
 
	render() {
		const { className, ...passThroughs } = this.props;
 
		const { width, height } = this.state;
 
		return (
			<div
				{...omitProps(passThroughs, Resizer)}
				className={cx('&', className)}
				ref={ref => this._element = ref}
			>
				{this.props.children(width, height)}
			</div>
		);
	},
});
 
export default Resizer;