@helpscout/hsds-react/hooks/useMeasureNode.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = useMeasureNode;
exports.setupObserver = setupObserver;

var _react = require("react");

var _lodash = _interopRequireDefault(require("lodash.isnil"));

var _resizeObserver = require("@juggle/resize-observer");

function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function useMeasureNode(_ref) {
  var _ref$observeSize = _ref.observeSize,
      observeSize = _ref$observeSize === void 0 ? false : _ref$observeSize;

  var _useState = (0, _react.useState)(null),
      measures = _useState[0],
      setMeasures = _useState[1];

  var _useState2 = (0, _react.useState)(null),
      el = _useState2[0],
      setEl = _useState2[1];

  var observerRef = (0, _react.useRef)(null);
  var ref = (0, _react.useCallback)(function (node) {
    if (!(0, _lodash.default)(node)) {
      if (observeSize) {
        var resizeObserver = setupObserver({
          cb: setMeasures,
          dimensions: {
            height: true
          }
        });
        resizeObserver.observe(node);
        observerRef.current = resizeObserver;
      } else {
        var _node$getBoundingClie = node.getBoundingClientRect(),
            height = _node$getBoundingClie.height,
            width = _node$getBoundingClie.width;

        setMeasures({
          height: height,
          width: width
        });
      }

      setEl(node);
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, []);
  return [measures, el, ref, observerRef];
}

function setupObserver(_ref2) {
  var _ref2$cb = _ref2.cb,
      cb = _ref2$cb === void 0 ? function () {} : _ref2$cb,
      dimensions = _ref2.dimensions,
      _ref2$observerEntryTy = _ref2.observerEntryType,
      observerEntryType = _ref2$observerEntryTy === void 0 ? 'borderBoxSize' : _ref2$observerEntryTy;
  // TODO: remove when Safari fully supports ResizeObserverEntry (which should be on 15.4)
  var RO = !isSafari() ? ResizeObserver : _resizeObserver.ResizeObserver;
  return new RO(function (entries) {
    for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
      var entry = _step.value;

      if (entry[observerEntryType]) {
        var size = Array.isArray(entry[observerEntryType]) ? entry[observerEntryType][0] : entry[observerEntryType];
        var height = size.blockSize,
            width = size.inlineSize;

        if (!dimensions || dimensions.height && dimensions.width) {
          cb({
            height: height,
            width: width
          });
        } else if (dimensions.height) {
          cb({
            height: height
          });
        } else if (dimensions.width) {
          cb({
            width: width
          });
        }
      }
    }
  });
} // TODO: remove when Safari fully supports ResizeObserverEntry (which should be on 15.4)


function isSafari() {
  if (!navigator) return false;
  var ua = navigator.userAgent.toLowerCase();
  return !ua.includes('chrome') && ua.includes('safari');
}