Allow to render abirtrary content outside of portal about react-portal HOT 4 CLOSED

'use strict';

var _ = require('lodash');
var $ = require("jquery");
var React = require('react');
var ReactDOM = require("react-dom");

var TetherTarget = require('common/tether/tetherTarget');
var CenteredModal = require("components/portals/common/centeredModal");
var DOMUtils = require("lib/dom/DOMUtils");

var AppMediaqueries = require("appMediaqueries");

/*
This portal is a combination of a tether (positionned) portal and a normal portal
We try to open a positionned portal, and if we see that after mounting it renders outside of viewport,
we then fallback to a regular non-positionned centered portal
 */
var CleverTetherTarget = React.createClass({
    propTypes: {
        minimumViewportWidth: React.PropTypes.number.isRequired
    },
    getDefaultProps() {
        return {minimumViewportWidth: AppMediaqueries.SmallToLargeScreenBreakpoint}
    },

    getInitialState() {
        return {isFallback: false};
    },
    useFallback() {
        this.setState({isFallback: true});
    },

    componentDidMount() {
        // it's not a big deal here to query window width and don't handle resize events
        // Tether portals are generally short-lived so it's unlikely to fail (render outside of viewport)
        // and if it does user can simply re-open the portal in most cases
        if ( $(window).width() < this.props.minimumViewportWidth ) {
            this.useFallback();
        }
    },

    onTetherMount(tetherTarget) {
        if ( tetherTarget ) {
            const portalDomElement = tetherTarget.getPortal();
            const inViewport = DOMUtils.isElementInViewport(portalDomElement);
            if ( !inViewport ) {
                this.useFallback();
            }
        }
    },

    render() {
        if ( !this.props.tethered ) {
            return (
              <div className="clever-tether-target-wrapper">
                  {this.props.children}
              </div>
            );
        }
        else if ( this.state.isFallback ) {
            return (
              <div className="clever-tether-target-wrapper">
                  {this.props.children}
                  <CenteredModal>
                      {this.props.tethered}
                  </CenteredModal>
              </div>
            );
        }
        else {
            return (
              <div className="clever-tether-target-wrapper">
                  <TetherTarget {...this.props} ref={c => this.onTetherMount(c)}/>
              </div>
            );
        }
    }
});

module.exports = CleverTetherTarget;