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