@visx/bounds/lib/enhancers/withBoundingRects.js

Utilities to make your life with bounding boxes better

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = withBoundingRects;
var _react = require("react");
var _jsxRuntime = require("react/jsx-runtime");
/* eslint react/no-did-mount-set-state: 0 */

const emptyRect = {
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
  width: 0,
  height: 0
};
function withBoundingRects(BaseComponent) {
  return class WrappedComponent extends _react.PureComponent {
    static displayName = (() => `withBoundingRects(${BaseComponent.displayName || ''})`)();
    constructor(props) {
      super(props);
      this.state = {
        rect: undefined,
        parentRect: undefined
      };
      this.nodeRef = /*#__PURE__*/(0, _react.createRef)();
      this.getRects = this.getRects.bind(this);
    }
    componentDidMount() {
      this.node = this.nodeRef?.current || null;
      this.setState(() => this.getRects());
    }
    getRects() {
      if (!this.node) return this.state;
      const {
        node
      } = this;
      const parentNode = node.parentNode;
      const rect = node.getBoundingClientRect ? node.getBoundingClientRect() : emptyRect;
      const parentRect = parentNode?.getBoundingClientRect ? parentNode.getBoundingClientRect() : emptyRect;
      return {
        rect,
        parentRect
      };
    }
    render() {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseComponent, {
        nodeRef: this.nodeRef,
        getRects: this.getRects,
        ...this.state,
        ...this.props
      });
    }
  };
}