@atlaskit/dynamic-table
Version:
A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.
60 lines • 1.8 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
// Compute height and width of wrapped component before ranking
export default function withDimensions(WrappedComponent) {
return class WithDimensions extends React.Component {
constructor(...args) {
super(...args);
_defineProperty(this, "state", {
refWidth: 0,
refHeight: 0
});
_defineProperty(this, "innerRef", ref => {
if (ref && !this.props.isRanking) {
this.ref = ref;
}
});
_defineProperty(this, "updateDimensions", () => {
if (!this.ref) {
return;
}
const clientRect = this.ref.getBoundingClientRect();
const {
width
} = clientRect;
const {
height
} = clientRect;
if (width !== this.state.refWidth || height !== this.state.refHeight) {
this.setState({
refWidth: width,
refHeight: height
});
}
});
}
UNSAFE_componentWillReceiveProps(nextProps) {
const wasRanking = this.props.isRanking;
const willRanking = nextProps.isRanking;
if (willRanking && !wasRanking) {
this.updateDimensions();
}
}
render() {
const {
refWidth,
refHeight
} = this.state;
return /*#__PURE__*/React.createElement(WrappedComponent
//@ts-expect-error TODO Fix legit TypeScript 3.9.6 improved inference error
, _extends({
refWidth: refWidth
//@ts-expect-error TODO Fix legit TypeScript 3.9.6 improved inference error
,
refHeight: refHeight,
innerRef: this.innerRef
}, this.props));
}
};
}