lucid-ui
Version:
A UI component library from Xandr.
57 lines • 2.23 kB
JavaScript
import { omit } from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import elementResizeDetectorMaker from 'element-resize-detector';
const cx = lucidClassNames.bind('&-Resizer');
const { func, string } = PropTypes;
class Resizer extends React.Component {
constructor() {
super(...arguments);
this._element = React.createRef();
this.resizeDetector = elementResizeDetectorMaker({ strategy: 'scroll' });
this.state = {
width: 0,
height: 0,
};
this.handleResize = ({ offsetWidth, offsetHeight, }) => {
this.setState({
width: offsetWidth,
height: offsetHeight,
});
};
}
componentDidMount() {
if (this._element.current) {
this.resizeDetector.listenTo(this._element.current, this.handleResize);
}
}
componentWillUnmount() {
if (this._element.current) {
this.resizeDetector.removeListener(this._element.current, this.handleResize);
}
}
render() {
const { className, children, ...passThroughs } = this.props;
const { width, height } = this.state;
return (React.createElement("div", { ...omit(passThroughs, ['className', 'children'].concat(['initialState', 'callbackId'])), className: cx('&', className), ref: this._element }, children && children(width, height)));
}
}
Resizer.displayName = 'Resizer';
Resizer.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'],
};
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,
};
export default Resizer;
//# sourceMappingURL=Resizer.js.map