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

In this Package, we Provide Some Basic Components to Build Web App

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

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

export default class ResizeObserverPolyfill {
  constructor(onResize) {
    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);
  }

  replaceResizeHandler(onResize) {
    this.onResize = onResize;
  }

  getEntry(entries) {
    return entries[0];
  }

  resizeHandler(entries) {
    if (!this.targetNode || !entries.length) {
      return;
    }

    const entry = this.getEntry(entries);
    const 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;
  }

  observe(targetNode) {
    this.targetNode = targetNode;
    this.resizeObserverInstance.observe(targetNode);
  }

  replaceObservationElement(targetNode) {
    if (this.targetNode === targetNode) {
      return;
    }

    this.targetNode && this.disconnect();
    targetNode && this.observe(targetNode);
  }

  disconnect() {
    this.resizeObserverInstance.disconnect();
    this.targetNode = null;
    this.size = {
      height: 0,
      width: 0
    };
  }

}