How to use resize-observer-polyfill - 10 common examples

// @flow
import processMeta from "./processMeta";
import adjustContainer from "./adjustContainer";
import objectAssign from "object-assign";
import ResizeObserver from "resize-observer-polyfill";
import MutationObserver from "mutation-observer";
import raf from "raf";
import containerRegistry from "./containerRegistry";
import type { ContainerSize, Meta, RegistryData } from "../flow/types";
import { QUERIES } from "@zeecoder/container-query-meta-builder";

const resizeObserver: ResizeObserver = new ResizeObserver(entries => {
  if (!Array.isArray(entries)) {
    return;
  }

  entries.forEach(entry => {
    const data: RegistryData = containerRegistry.get(entry.target);

    if (
      typeof data === "undefined" ||
      typeof data !== "object" ||
      typeof data.instance !== "object" ||
      typeof data.instance.adjust !== "function"
    ) {
      console.warn(
        "Could not find Container instance for element:",
        entry.target

contentResizeCallback = (
    entries: ResizeObserverEntry[],
    observer: ResizeObserver
  ) => {
    if (this.oldContentRect) {
      const widgetStyle = {
        width: this.content.clientWidth + this.viewBox.clientWidth * 2,
        height: this.content.clientHeight + this.viewBox.clientHeight * 2
      };
      this.bigView.style.width = widgetStyle.width + 'px';
      this.bigView.style.height = widgetStyle.height + 'px';
    }
    this.oldContentRect = entries[0].contentRect;
  };

  contentResizeObserver = new ResizeObserver(this.contentResizeCallback);
  // oldScroll: { left: number; top: number };
  oldContentRect: DOMRectReadOnly;
  content: HTMLElement;
  contentRef = ref => {
    if (ref) {
      this.content = ref;
      this.contentResizeObserver.observe(this.content);
    }
  };

  viewBox: HTMLElement;
  viewBoxRef = ref => {
    if (ref) {
      this.viewBox = ref;
      this.setViewBoxScroll(
        this.viewBox.clientWidth,

setNode(node) {
    this.node = node

    // add component to resize observer to detect changes on resize
    this.resizeObserver = new ResizeObserver((entries, observer) => {
      if (this.state.ready) {
        this.handleResize()
      } else {
        this.setStateScroll({
          ready: true
        })
      }
    })

    this.resizeObserver.observe(this.node)
  }

private autoResize() {
    const scope = this;
    const ro = new ResizeObserver((entries) => {
      clearTimeout(this.resizeTimer);
      const id = this.resizeTimer = setTimeout(() => {
        const width = Math.max(this.container.clientWidth, this.container.clientHeight);
        // NOTE: shouldn't have to check if circos is undefined if scope is correct...
        if (this.viewer !== undefined && this.viewer.attr("width") !== width) {
          this.destroy();
          this.draw();
        }
      }, this.options.resizeDelay);
    });
    ro.observe(this.container);
  }

constructor() {
    // Create a Map to link elements to observe to their resize event callbacks
    this._resizeObserverMap = new Map();
    
    this._resizeObserver = new ResizeObserver((entries) => {
      for (let i = 0; i < entries.length; i++) {
        const observedElement = entries[i].target;
        const allCallbacks = this._resizeObserverMap.get(observedElement);
        if (allCallbacks) {
          for (let j = 0; j < allCallbacks.length; j++) {
            allCallbacks[j].call(observedElement);
          }
        }
      }
    });
    
    const focusableElements = FOCUSABLE_ELEMENTS.slice();
    this._focusableElementsSelector = focusableElements.join(',');
  
    focusableElements.push('[tabindex]:not([tabindex="-1"])');
    this._tabbableElementsSelector = focusableElements.join(':not([tabindex="-1"]),');

constructor() {
    // Create a Map to link elements to observe to their resize event callbacks
    this._resizeObserverMap = new Map();
    
    this._resizeObserver = new ResizeObserver((entries) => {
      for (let i = 0; i < entries.length; i++) {
        const observedElement = entries[i].target;
        const allCallbacks = this._resizeObserverMap.get(observedElement);
        if (allCallbacks) {
          for (let j = 0; j < allCallbacks.length; j++) {
            allCallbacks[j].call(observedElement);
          }
        }
      }
    });
    
    const focusableElements = FOCUSABLE_ELEMENTS.slice();
    this._focusableElementsSelector = focusableElements.join(',');
  
    focusableElements.push('[tabindex]:not([tabindex="-1"])');
    this._tabbableElementsSelector = focusableElements.join(':not([tabindex="-1"]),');

_initStatus() {
        const init = () => {
            this.containerWidth = this.element.offsetWidth;

            this._stopTransition();
            this._setIndex(this._getIndex(), false);
            this._startTransition();
        }

        const ro = this.ro = new ResizeObserver(init);
        ro.observe(this.element);

        init();
    }

test("should not call adjust if disabled by the options", () => {
  const containerElement = {
    parentNode: document.createElement("div")
  };

  const meta = {};

  new Container(containerElement, meta, {
    adjustOnResize: false,
    adjustOnInstantiation: false
  });

  expect(ResizeObserver).toHaveBeenCalledTimes(1);
  expect(ResizeObserver.prototype.observe).toHaveBeenCalledTimes(0);
  expect(raf).toHaveBeenCalledTimes(0);
  expect(processMeta).toHaveBeenCalledTimes(1);
  expect(processMeta.mock.calls[0][0]).toBe(meta);
  expect(adjustContainer).toHaveBeenCalledTimes(0);
});

expect(() => {
    ResizeObserver.triggerEvent([
      {
        target: randomElement
      }
    ]);
  }).not.toThrow();
  expect(console.warn).toHaveBeenCalledTimes(1);

addResizeListener(element, fn) {
                const isServer = typeof window === 'undefined';
                if (isServer) return;
                if (!element.__resizeListeners__) {
                    element.__resizeListeners__ = [];
                    element.__ro__ = new ResizeObserver(this.resizeHandler);
                    element.__ro__.observe(element);
                }
                element.__resizeListeners__.push(fn);
            },
            removeResizeListener(element, fn) {