@zohodesk/components/es/Responsive/sizeObservers.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

const breakPointKeys = {
  minHeight: true,
  maxHeight: true,
  minWidth: true,
  maxWidth: true
};

function isValideBreakPoint(breakPoint) {
  return Object.keys(breakPoint).every(key => breakPointKeys[key]);
}

function rangeCheck(minValue, maxValue, screenValue) {
  if (minValue === undefined) {
    if (maxValue === undefined) {
      return undefined;
    }

    return maxValue >= screenValue;
  }

  if (maxValue === undefined) {
    return minValue <= screenValue;
  }

  return minValue <= screenValue && maxValue >= screenValue;
}

function isTouchDeviceFunc() {
  // return window.matchMedia("(pointer: coarse)").matches
  return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
} // export const isTouchDevice =
//   'ontouchstart' in window && navigator.userAgent.match(/mobi/i) ? true : false;


export const isTouchDevice = isTouchDeviceFunc();
export function isBreackPointMatched(object, screen) {
  if (!isValideBreakPoint(object)) {
    // eslint-disable-next-line no-console
    console.error('only minHeight,maxHeight,minWidth,maxWidth these keys are allowed, your object', JSON.stringify(object)); // return;
  }

  const {
    width: screenWidth,
    height: screenHeight
  } = screen;
  let {
    minWidth,
    maxWidth,
    minHeight,
    maxHeight
  } = object;
  let isWidth = rangeCheck(minWidth, maxWidth, screenWidth);
  let isHeight = rangeCheck(minHeight, maxHeight, screenHeight);
  return {
    isHeight,
    isWidth
  };
}
export class Subscribale {
  constructor() {
    this.subscribers = [];
  }

  connect() {}

  disconnect() {}

  subscribe(func) {
    this.subscribers.length && this.connect();
    this.subscribers.push(func);
  }

  unsubscribe(func) {
    this.subscribers = this.subscribers.filter(s => s !== func);
    this.subscribers.length && this.disconnect();
  }

  dispatch(...args) {
    this.subscribers.forEach(subscriber => {
      subscriber(...args);
    });
  }

}

class InitSubscribale extends Subscribale {
  // must be OverWrite
  connect() {} // must be OverWrite


  disconnect() {}

  subscribe(func) {
    !this.subscribers.length && this.connect();
    super.subscribe(func);
  }

  unsubscribe(func) {
    super.unsubscribe(func);
    !this.subscribers.length && this.disconnect();
  }

}

export const windowResizeObserver = (() => {
  const subscribaleInstance = new InitSubscribale();
  let size = {
    heigth: window.innerHeight,
    width: window.innerWidth
  };

  function handleResize() {
    const newSize = {
      height: window.innerHeight,
      width: window.innerWidth
    };
    size = newSize;
    subscribaleInstance.dispatch(newSize);
  }

  function addResizeListener() {
    window.addEventListener('resize', handleResize);
    handleResize();
  }

  function removeResizeListener() {
    window.removeEventListener('resize', handleResize);
  }

  subscribaleInstance.connect = addResizeListener;
  subscribaleInstance.disconnect = removeResizeListener;
  return {
    getSize: () => size,
    resize: subscribaleInstance,
    isParentSize: true
  };
})();