All files / Resizer Resizer.tsx

100% Statements 17/17
100% Branches 6/6
100% Functions 4/4
100% Lines 17/17

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103              7x   7x                                   7x 7x       7x                         21x 21x   21x         21x             2x             6x 4x         5x 3x               23x   23x   23x                                
import _, { omit } from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { StandardProps } from '../../util/component-types';
import elementResizeDetectorMaker from 'element-resize-detector';
 
const cx = lucidClassNames.bind('&-Resizer');
 
const { func, string } = PropTypes;
 
export interface IResizerProps
	extends StandardProps,
		React.DetailedHTMLProps<
			React.HTMLAttributes<HTMLDivElement>,
			HTMLDivElement
		> {
	/** A function that returns your rendered content. */
	children?: (width: number, height: number) => React.ReactNode;
}
 
interface IResizerState {
	width: number;
	height: number;
}
 
class Resizer extends React.Component<IResizerProps, IResizerState, {}> {
	static displayName = 'Resizer';
	static peek = {
		description: `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.`,
		categories: ['utility'],
	};
	static 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,
	};
 
	private _element = React.createRef<HTMLDivElement>();
	private resizeDetector = elementResizeDetectorMaker({ strategy: 'scroll' });
 
	state = {
		width: 0,
		height: 0,
	};
 
	handleResize = ({
		offsetWidth,
		offsetHeight,
	}: {
		offsetWidth: number;
		offsetHeight: number;
	}): void => {
		this.setState({
			width: offsetWidth,
			height: offsetHeight,
		});
	};
 
	componentDidMount(): void {
		if (this._element.current) {
			this.resizeDetector.listenTo(this._element.current, this.handleResize);
		}
	}
 
	componentWillUnmount(): void {
		if (this._element.current) {
			this.resizeDetector.removeListener(
				this._element.current,
				this.handleResize
			);
		}
	}
 
	render(): React.ReactNode {
		const { className, children, ...passThroughs } = this.props;
 
		const { width, height } = this.state;
 
		return (
			<div
				{...omit(
					passThroughs,
					['className', 'children'].concat(['initialState', 'callbackId'])
				)}
				className={cx('&', className)}
				ref={this._element}
			>
				{children && children(width, height)}
			</div>
		);
	}
}
 
export default Resizer;