@zohodesk/components/lib/Responsive/ResizeObserverWithPolyfill.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; }

var hasResizeObserver = !!window.ResizeObserver;
var mutationObserverOptions = {
  //NOTE: we donot consider child Count
  // childList: true,
  attributes: true
};

function getSize(element) {
  var offsetHeight = element.offsetHeight,
      offsetWidth = element.offsetWidth; // const { height, width } = element.getBoundingClientRect();

  return {
    height: offsetHeight,
    width: offsetWidth
  };
}

function dispatch() {
  var resizeResponsive = new Event('resizeResponsive');
  window.dispatchEvent(resizeResponsive);
}

if (!hasResizeObserver) {
  var interval = null;
  window.addEventListener('resize', function () {
    clearTimeout(interval);
    interval = setTimeout(dispatch, 100);
  });
} // NOTE: this is not full polyfill , we just wrote what types of changes wlli


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

    // method finding
    this.transitionEndHandler = this.transitionEndHandler.bind(this);
    this.resizeHandlerDispatch = this.resizeHandlerDispatch.bind(this);
    this.resizeHandler = this.resizeHandler.bind(this);
    this.replaceResizeHandler = this.replaceResizeHandler.bind(this);
    this.debounce = this.debounce.bind(this);
    this.onResize = onResize;
    this.targetNode = null;
    this.size = {
      height: 0,
      width: 0
    };

    if (hasResizeObserver) {
      this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandlerDispatch);
    } else {
      this.mutationObserverInstance = new window.MutationObserver(this.resizeHandlerDispatch);
    }
  }

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

      var currentSize = getSize(this.targetNode); // if (this.size && shallowCompare(currentSize, this.size)) {

      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: "resizeHandlerDispatch",
    value: function resizeHandlerDispatch() {
      if (!this.resizeHandler() || hasResizeObserver) {
        return;
      }

      dispatch();
    }
  }, {
    key: "debounce",
    value: function debounce() {
      clearTimeout(this.interval);
      this.interval = setTimeout(this.resizeHandler, 100);
    }
  }, {
    key: "transitionEndHandler",
    value: function transitionEndHandler(event) {
      if (event.propertyName.indexOf('color') === -1) {
        this.resizeHandlerDispatch();
      }
    }
  }, {
    key: "addEventListeners",
    value: function addEventListeners(targetNode) {
      targetNode.addEventListener('transitionend', this.transitionEndHandler);
      window.addEventListener('resizeResponsive', this.debounce);
      targetNode.addEventListener('animationend', this.resizeHandlerDispatch);
      targetNode.addEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
    }
  }, {
    key: "removeEventListeners",
    value: function removeEventListeners(targetNode) {
      targetNode.removeEventListener('transitionend', this.transitionEndHandler);
      window.removeEventListener('resizeResponsive', this.debounce);
      targetNode.removeEventListener('animationend', this.resizeHandlerDispatch);
      targetNode.removeEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
    }
  }, {
    key: "observe",
    value: function observe(targetNode) {
      this.targetNode = targetNode;

      if (hasResizeObserver) {
        this.resizeObserverInstance.observe(targetNode);
      } else {
        this.addEventListeners(targetNode);
        this.mutationObserverInstance.observe(targetNode, mutationObserverOptions);
      }
    }
  }, {
    key: "replaceObservationElement",
    value: function replaceObservationElement(targetNode) {
      if (this.targetNode === targetNode) {
        return;
      }

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

  return ResizeObserverPolyfill;
}();

exports["default"] = ResizeObserverPolyfill;