recharts/es6/util/useElementOffset.js

React charts

function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import { useCallback, useEffect, useRef, useState } from 'react';
var EPS = 1;

/**
 * Stores the dimensions and position of a DOM element as returned by `getBoundingClientRect()`.
 *
 * Values are viewport-relative and may be fractional (subpixel precision).
 *
 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect}
 */

/**
 * Callback ref setter returned by {@link useElementOffset}.
 *
 * Pass this to a DOM element's `ref` prop to start observing its layout.
 *
 * @param node - the DOM element to observe, or `null` when the element unmounts
 */

/**
 * Checks whether two ElementOffset values differ by more than `EPS` (1px) in any dimension.
 *
 * @param a - the first ElementOffset to compare
 * @param b - the second ElementOffset to compare
 * @returns true if any dimension differs by more than 1px
 */
function hasSignificantChange(a, b) {
  return Math.abs(a.height - b.height) > EPS || Math.abs(a.left - b.left) > EPS || Math.abs(a.top - b.top) > EPS || Math.abs(a.width - b.width) > EPS;
}

/**
 * Reads the current bounding box of a DOM element using `getBoundingClientRect()`.
 *
 * @param node - the DOM element to measure
 * @returns an ElementOffset with the element's current dimensions and viewport-relative position
 */
function readElementOffset(node) {
  var rect = node.getBoundingClientRect();
  return {
    height: rect.height,
    left: rect.left,
    top: rect.top,
    width: rect.width
  };
}

/**
 * Use this to listen to element layout changes.
 *
 * Very useful for reading actual sizes of DOM elements relative to the viewport.
 *
 * Uses ResizeObserver to automatically detect size changes of the observed element.
 *
 * @param extraDependencies use this to trigger new DOM dimensions read when any of these change. Good for things like payload and label, that will re-render something down in the children array, but you want to read the layout box of a parent.
 * @returns [lastElementOffset, updateElementOffset] most recent value, and setter. Pass the setter to a DOM element ref like this: `<div ref={updateElementOffset}>`
 */
export function useElementOffset() {
  var extraDependencies = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  var _useState = useState({
      height: 0,
      left: 0,
      top: 0,
      width: 0
    }),
    _useState2 = _slicedToArray(_useState, 2),
    lastBoundingBox = _useState2[0],
    setLastBoundingBox = _useState2[1];
  var observerRef = useRef(null);
  var lastBoundingBoxRef = useRef(lastBoundingBox);
  lastBoundingBoxRef.current = lastBoundingBox;
  var updateBoundingBox = useCallback(node => {
    // Disconnect any previously active ResizeObserver
    if (observerRef.current != null) {
      observerRef.current.disconnect();
      observerRef.current = null;
    }
    if (node != null) {
      // Measure immediately on ref attach
      var box = readElementOffset(node);
      if (hasSignificantChange(box, lastBoundingBoxRef.current)) {
        setLastBoundingBox(box);
      }

      // Set up ResizeObserver for future size changes
      if (typeof ResizeObserver !== 'undefined') {
        var observer = new ResizeObserver(() => {
          var newBox = readElementOffset(node);
          if (hasSignificantChange(newBox, lastBoundingBoxRef.current)) {
            setLastBoundingBox(newBox);
          }
        });
        observer.observe(node);
        observerRef.current = observer;
      }
    }
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [...extraDependencies]);

  // Cleanup on unmount
  useEffect(() => {
    return () => {
      var _observerRef$current;
      (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 || _observerRef$current.disconnect();
    };
  }, []);
  return [lastBoundingBox, updateBoundingBox];
}