react-spatial/components/ResizeHandler/ResizeHandler.js

Components to build React map apps.

import ReactDOM from 'react-dom';
import { PureComponent, Component } from 'react';
import PropTypes from 'prop-types';
import ResizeObserver from 'resize-observer-polyfill';

var propTypes = {
  observe: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.instanceOf(Element),
    PropTypes.instanceOf(Component),
    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
    PropTypes.shape({ current: PropTypes.instanceOf(Component) }) ]),
  maxHeightBrkpts: PropTypes.objectOf(PropTypes.number),
  maxWidthBrkpts: PropTypes.objectOf(PropTypes.number),
  stylePropHeight: PropTypes.string,
  onResize: PropTypes.func,
};

// Same as bootstrap
var defaultProps = {
  observe: null,
  maxHeightBrkpts: {
    xs: 576,
    s: 768,
    m: 992,
    l: 1200,
    xl: Infinity,
  },
  maxWidthBrkpts: {
    xs: 576,
    s: 768,
    m: 992,
    l: 1200,
    xl: Infinity,
  },
  stylePropHeight: null,
  onResize: null,
};
/**
 * This component adds css class to an element depending on his size.
 */
var ResizeHandler = /*@__PURE__*/(function (PureComponent) {
  function ResizeHandler(props) {
    var this$1 = this;

    PureComponent.call(this, props);
    this.observer = new ResizeObserver(function (entries) { return this$1.onResize(entries); });
    this.nodes = [];
  }

  if ( PureComponent ) ResizeHandler.__proto__ = PureComponent;
  ResizeHandler.prototype = Object.create( PureComponent && PureComponent.prototype );
  ResizeHandler.prototype.constructor = ResizeHandler;

  ResizeHandler.applyBreakpoints = function applyBreakpoints (entry, breakpoints, size, direction) {
    var found = false;
    Object.entries(breakpoints).forEach(function (brkpt) {
      var cssClass = "tm-" + direction + "-" + (brkpt[0]);
      entry.target.classList.remove(cssClass);
      if (!found && size <= brkpt[1]) {
        found = true;
        entry.target.classList.add(cssClass);
      }
    });
  };

  ResizeHandler.prototype.componentDidMount = function componentDidMount () {
    this.observe();
  };

  ResizeHandler.prototype.componentDidUpdate = function componentDidUpdate (prevProps) {
    var ref = this.props;
    var observe = ref.observe;

    if (observe !== prevProps.observe) {
      this.observe();
    }
  };

  ResizeHandler.prototype.componentWillUnmount = function componentWillUnmount () {
    this.observer.disconnect();
  };

  ResizeHandler.prototype.onResize = function onResize (entries) {
    var ref = this.props;
    var maxHeightBrkpts = ref.maxHeightBrkpts;
    var maxWidthBrkpts = ref.maxWidthBrkpts;
    var stylePropHeight = ref.stylePropHeight;
    var onResize = ref.onResize;

    if (stylePropHeight) {
      var vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty(stylePropHeight, (vh + "px"));
    }

    if (onResize) {
      onResize(entries);
    }

    if (!maxWidthBrkpts && !maxHeightBrkpts) {
      return;
    }

    for (var i = 0; i < entries.length; i += 1) {
      var entry = entries[i];
      var rect = entry.contentRect;
      var height = rect.height;
      var width = rect.width;

      if (maxWidthBrkpts) {
        ResizeHandler.applyBreakpoints(entry, maxWidthBrkpts, width, 'w');
      }
      if (maxHeightBrkpts) {
        ResizeHandler.applyBreakpoints(entry, maxHeightBrkpts, height, 'h');
      }
    }
  };

  ResizeHandler.prototype.observe = function observe () {
    var this$1 = this;

    this.observer.disconnect();
    var ref = this.props;
    var observe = ref.observe;

    if (!observe) {
      return;
    }

    if (typeof observe === 'string' || observe instanceof String) {
      this.nodes = document.querySelectorAll(observe);
    } else if (observe instanceof Component) {
      // eslint-disable-next-line react/no-find-dom-node
      this.nodes.push(ReactDOM.findDOMNode(observe));
    } else if (observe instanceof Element) {
      this.nodes.push(observe);
    } else if (observe.current instanceof Element) {
      // observe value created with React.createRef() on a html node.
      this.nodes.push(observe.current);
    } else if (observe.current instanceof Component) {
      // observe value created with React.createRef() on a React component.
      // eslint-disable-next-line react/no-find-dom-node
      this.nodes.push(ReactDOM.findDOMNode(observe.current));
    }

    if (this.nodes.length) {
      this.nodes.forEach(function (node) { return this$1.observer.observe(node); });
    }
  };

  ResizeHandler.prototype.render = function render () {
    return null;
  };

  return ResizeHandler;
}(PureComponent));

ResizeHandler.propTypes = propTypes;
ResizeHandler.defaultProps = defaultProps;

export default ResizeHandler;

//# sourceMappingURL=ResizeHandler.js.map