@zohodesk/components/lib/Responsive/ResizeObserver.js

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }

function getBorderBoxSizeFromEntry(entry) {
  var borderBoxSize = entry.borderBoxSize;
  return borderBoxSize[0];
}

function getSize(entry) {
  var borderBoxSize = getBorderBoxSizeFromEntry(entry);
  return {
    height: borderBoxSize.blockSize,
    width: borderBoxSize.inlineSize
  };
}

var ResizeObserverPolyfill = /*#__PURE__*/function () {
  function ResizeObserverPolyfill(onResize) {
    _classCallCheck(this, ResizeObserverPolyfill);

    this.resizeHandler = this.resizeHandler.bind(this);
    this.onResize = onResize;
    this.targetNode = null;
    this.size = {
      height: 0,
      width: 0
    };
    this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandler);
  }

  _createClass(ResizeObserverPolyfill, [{
    key: "replaceResizeHandler",
    value: function replaceResizeHandler(onResize) {
      this.onResize = onResize;
    }
  }, {
    key: "getEntry",
    value: function getEntry(entries) {
      return entries[0];
    }
  }, {
    key: "resizeHandler",
    value: function resizeHandler(entries) {
      if (!this.targetNode || !entries.length) {
        return;
      }

      var entry = this.getEntry(entries);
      var currentSize = getSize(entry);

      if (this.size && currentSize.height === this.size.height && currentSize.width === this.size.width) {
        return;
      }

      this.size = currentSize;
      this.onResize(this.size, this.targetNode);
      return true;
    }
  }, {
    key: "observe",
    value: function observe(targetNode) {
      this.targetNode = targetNode;
      this.resizeObserverInstance.observe(targetNode);
    }
  }, {
    key: "replaceObservationElement",
    value: function replaceObservationElement(targetNode) {
      if (this.targetNode === targetNode) {
        return;
      }

      this.targetNode && this.disconnect();
      targetNode && this.observe(targetNode);
    }
  }, {
    key: "disconnect",
    value: function disconnect() {
      this.resizeObserverInstance.disconnect();
      this.targetNode = null;
      this.size = {
        height: 0,
        width: 0
      };
    }
  }]);

  return ResizeObserverPolyfill;
}();

exports["default"] = ResizeObserverPolyfill;