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 104 | 176x 176x 176x 176x 176x 8x 8x 8x 8x 2x 2x 2x 1x 1x 10x 10x 10x | import _ from 'lodash';
import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { omitProps, StandardProps } from '../../util/component-types';
import elementResizeDetectorMaker from 'element-resize-detector';
const cx = lucidClassNames.bind('&-Resizer');
const { func, string } = PropTypes;
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: `
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.
`,
categories: ['utility'],
};
static propTypes = {
className: string`
Appended to the component-specific class names set on the root elements.
`,
children: func`
A function that returns your rendered content with the signature:
\`(width, height) => {}\`
`,
};
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 {
Eif (this._element.current) {
this.resizeDetector.listenTo(this._element.current, this.handleResize);
}
}
componentWillUnmount(): void {
Eif (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
{...omitProps(passThroughs, undefined, _.keys(Resizer.propTypes))}
className={cx('&', className)}
ref={this._element}
>
{children && children(width, height)}
</div>
);
}
}
export default Resizer;
|