ssc-refer/es/refer/Overlay.react.js

React refer component for SSC 3.0

import _extends from 'babel-runtime/helpers/extends';
import cx from 'classnames';
import { isEqual, throttle } from 'lodash';
import React, { Children, cloneElement, PropTypes } from 'react';
import { findDOMNode } from 'react-dom';
import { Portal } from 'react-overlays';
import componentOrElement from 'react-prop-types/lib/componentOrElement';

// When appending the overlay to `document.body`, clicking on it will register
// as an "outside" click and immediately close the overlay. This classname tells
// `react-onclickoutside` to ignore the click.
var IGNORE_CLICK_OUTSIDE = 'ignore-react-onclickoutside';

function isBody(container) {
  return container === document.body;
}

/**
 * Custom `Overlay` component, since the version in `react-overlays` doesn't
 * work for our needs. Specifically, the `Position` component doesn't provide
 * the customized placement we need.
 */
var Overlay = React.createClass({
  displayName: 'Overlay',

  propTypes: {
    container: PropTypes.oneOfType([componentOrElement, PropTypes.func]).isRequired,
    show: PropTypes.bool,
    target: PropTypes.oneOfType([componentOrElement, PropTypes.func]).isRequired
  },

  getDefaultProps: function getDefaultProps() {
    return {
      show: false
    };
  },
  getInitialState: function getInitialState() {
    return {
      bottom: 0,
      left: 0,
      right: 0,
      top: 0
    };
  },
  componentDidMount: function componentDidMount() {
    this._updatePosition();
    this._updatePositionThrottled = throttle(this._updatePosition, 100);

    window.addEventListener('resize', this._updatePositionThrottled);
    window.addEventListener('scroll', this._updatePositionThrottled, true);
  },
  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
    this._updatePositionThrottled();
  },
  componentWillUnmount: function componentWillUnmount() {
    window.removeEventListener('resize', this._updatePositionThrottled);
    window.removeEventListener('scroll', this._updatePositionThrottled);
  },
  render: function render() {
    if (!this.props.show) {
      return null;
    }

    var _props = this.props,
        container = _props.container,
        children = _props.children;

    var child = Children.only(children);

    // When not attaching the overlay to `document.body` treat the child as a
    // simple inline element.
    if (!isBody(container)) {
      return child;
    }

    child = cloneElement(child, _extends({}, child.props, {
      className: cx(child.props.className, IGNORE_CLICK_OUTSIDE),
      style: this.state
    }));

    return React.createElement(
      Portal,
      { container: container },
      child
    );
  },
  _updatePosition: function _updatePosition() {
    // Positioning is only used when body is the container.
    if (!isBody(this.props.container)) {
      return;
    }

    var target = this.props.target;

    var targetElement = typeof target === 'function' ? target() : target;
    var targetNode = findDOMNode(targetElement);

    if (targetNode) {
      var _window = window,
          innerHeight = _window.innerHeight,
          innerWidth = _window.innerWidth,
          pageYOffset = _window.pageYOffset;

      var _targetNode$getBoundi = targetNode.getBoundingClientRect(),
          bottom = _targetNode$getBoundi.bottom,
          left = _targetNode$getBoundi.left,
          top = _targetNode$getBoundi.top,
          width = _targetNode$getBoundi.width;

      var newState = {
        bottom: innerHeight - pageYOffset - top,
        left: left,
        right: innerWidth - left - width,
        top: pageYOffset + bottom
      };

      // Don't update unless the target element position has changed.
      if (!isEqual(this.state, newState)) {
        this.setState(newState);
      }
    }
  }
});

export default Overlay;