@netdata/netdata-ui/dist/hooks/useMeasure/index.js

netdata UI kit

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _react = require("react");
var defaultState = {
  x: 0,
  y: 0,
  width: 0,
  height: 0,
  top: 0,
  left: 0,
  bottom: 0,
  right: 0
};
var _default = exports["default"] = function _default() {
  var _useState = (0, _react.useState)(null),
    element = _useState[0],
    ref = _useState[1];
  var _useState2 = (0, _react.useState)(defaultState),
    rect = _useState2[0],
    setRect = _useState2[1];
  var observer = (0, _react.useMemo)(function () {
    return new window.ResizeObserver(function (entries) {
      if (entries[0]) {
        var _entries$0$contentRec = entries[0].contentRect,
          x = _entries$0$contentRec.x,
          y = _entries$0$contentRec.y,
          width = _entries$0$contentRec.width,
          height = _entries$0$contentRec.height,
          top = _entries$0$contentRec.top,
          left = _entries$0$contentRec.left,
          bottom = _entries$0$contentRec.bottom,
          right = _entries$0$contentRec.right;
        setRect({
          x: x,
          y: y,
          width: width,
          height: height,
          top: top,
          left: left,
          bottom: bottom,
          right: right
        });
      }
    });
  }, []);
  (0, _react.useLayoutEffect)(function () {
    if (!element) return;
    observer.observe(element);
    return function () {
      observer.disconnect();
    };
  }, [element]);
  return [ref, rect];
};