react-layers-manager/lib/index.es.js

Manage layers and z-index in React applications effectively

import React, { createContext } from 'react';
import { createPortal } from 'react-dom';

var _createContext = createContext(),
    Provider = _createContext.Provider,
    Consumer = _createContext.Consumer;

var classCallCheck = function (instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
};

var createClass = 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);
    }
  }

  return function (Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
}();

var _extends = Object.assign || function (target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i];

    for (var key in source) {
      if (Object.prototype.hasOwnProperty.call(source, key)) {
        target[key] = source[key];
      }
    }
  }

  return target;
};

var inherits = function (subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};

var possibleConstructorReturn = function (self, call) {
  if (!self) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return call && (typeof call === "object" || typeof call === "function") ? call : self;
};

var LayersManager = function (_React$Component) {
  inherits(LayersManager, _React$Component);

  function LayersManager() {
    var _ref;

    var _temp, _this, _ret;

    classCallCheck(this, LayersManager);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = LayersManager.__proto__ || Object.getPrototypeOf(LayersManager)).call.apply(_ref, [this].concat(args))), _this), _this.root = React.createRef(), _this.host = React.createRef(), _this.state = {
      root: _this.root.current,
      host: _this.host.current
    }, _temp), possibleConstructorReturn(_this, _ret);
  }

  createClass(LayersManager, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.setState({
        root: this.root.current,
        host: this.host.current
      });
    }
  }, {
    key: "render",
    value: function render() {
      return React.createElement(
        Provider,
        { value: this.state },
        React.createElement(
          "div",
          { ref: this.root, style: { opacity: 0.9999999 } },
          this.props.children
        ),
        React.createElement("div", { ref: this.host, style: { opacity: 0.9999999 } })
      );
    }
  }]);
  return LayersManager;
}(React.Component);

var Layer = function Layer(props) {
  return React.createElement(
    Consumer,
    null,
    function (_ref) {
      var host = _ref.host,
          root = _ref.root;
      return host && root && React.createElement(LayerImpl, _extends({}, props, { host: host, root: root }));
    }
  );
};

var LayerImpl = function (_React$Component) {
  inherits(LayerImpl, _React$Component);

  function LayerImpl() {
    var _ref2;

    var _temp, _this, _ret;

    classCallCheck(this, LayerImpl);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref2 = LayerImpl.__proto__ || Object.getPrototypeOf(LayerImpl)).call.apply(_ref2, [this].concat(args))), _this), _this.state = { container: null }, _temp), possibleConstructorReturn(_this, _ret);
  }

  createClass(LayerImpl, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _props = this.props,
          host = _props.host,
          index = _props.index,
          onMount = _props.onMount,
          root = _props.root;

      var container = host.ownerDocument.createElement("div");
      var sibling = typeof index === "number" && host.children[index];
      sibling ? host.insertBefore(container, sibling) : host.appendChild(container);
      this.setState({ container: container }, function () {
        root && onMount && onMount(root);
      });
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var container = this.state.container;
      var _props2 = this.props,
          root = _props2.root,
          host = _props2.host,
          onUnmount = _props2.onUnmount;

      root && onUnmount && onUnmount(root);
      host && container && host.removeChild(container);
    }
  }, {
    key: "render",
    value: function render() {
      var container = this.state.container;

      return container && createPortal(this.props.children, container);
    }
  }]);
  return LayerImpl;
}(React.Component);

export { LayersManager, Layer };