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;
|