How to use react-overlays - 10 common examples

onExit: PropTypes.func,

  /**
   * Callback fired as the Modal begins to transition out
   */
  onExiting: PropTypes.func,

  /**
   * Callback fired after the Modal finishes transitioning out
   */
  onExited: PropTypes.func,

  /**
   * @private
   */
  container: BaseModal.propTypes.container
};

const defaultProps = {
  ...BaseModal.defaultProps,
  animation: true,
  dialogComponentClass: ModalDialog
};

const childContextTypes = {
  $bs_modal: PropTypes.shape({
    onHide: PropTypes.func
  })
};

/* eslint-disable no-use-before-define, react/no-multi-comp */
function DialogTransition(props) {

import { Sizes } from './styleMaps';
import { bsClass, bsSizes, prefix } from './utils/bootstrapUtils';

import Fade from './Fade';
import ModalDialog from './ModalDialog';
import Body from './ModalBody';
import Header from './ModalHeader';
import Title from './ModalTitle';
import Footer from './ModalFooter';

/* eslint-disable react/prop-types */
const Modal = React.createClass({

  propTypes: {
    ...BaseModal.propTypes,
    ...ModalDialog.propTypes,

    /**
     * Include a backdrop component. Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked.
     */
    backdrop: React.PropTypes.oneOf(['static', true, false]),

    /**
     * Close the modal when escape key is pressed
     */
    keyboard: React.PropTypes.bool,

    /**
     * Open and close the Modal with a slide and fade animation.
     */
    animation: React.PropTypes.bool,

, dialogClassName
      , animation
      , style
      , ...props } = this.props;

    let { modalStyles } = this.state;

    if (style) {
      modalStyles = { ...modalStyles, ...style };
    }

    let inClass = { in: props.show && !animation };
    let Dialog = props.dialogComponent || props.dialogComponentClass;

    let parentProps = pick(props,
      Object.keys(BaseModal.propTypes).concat(
        ['onExit', 'onExiting', 'onEnter', 'onEntered']) // the rest are fired in _onHide() and _onShow()
    );

    let modal = (
      <dialog> this._modal = ref}
        {...props}
        style={modalStyles}
        className={classNames(className, inClass)}
        dialogClassName={dialogClassName}
        onClick={props.backdrop === true ? this.handleDialogClick : null}
      &gt;
        { this.props.children }
      </dialog>
    );

const triggerProps = trigger.props;

    // create in render otherwise owner is lost...
    this.overlay = this.getOverlay();

    const props = {
      onMouseOver: createChainedFunction(
        this.handleShow,
        triggerProps.onMouseOver,
      ),
      onMouseOut: createChainedFunction(
        this.handleHide,
        triggerProps.onMouseOut,
      ),
      onFocus: createChainedFunction(this.handleShow, triggerProps.onFocus),
      onBlur: createChainedFunction(this.handleHide, triggerProps.onBlur),
      'aria-describedby': this.props.overlay.props.id,
    };

    return cloneElement(trigger, props);
  }
}

render() {
    const trigger = React.Children.only(this.props.children);
    const triggerProps = trigger.props;

    // create in render otherwise owner is lost...
    this.overlay = this.getOverlay();

    const props = {
      onMouseOver: createChainedFunction(
        this.handleShow,
        triggerProps.onMouseOver,
      ),
      onMouseOut: createChainedFunction(
        this.handleHide,
        triggerProps.onMouseOut,
      ),
      onFocus: createChainedFunction(this.handleShow, triggerProps.onFocus),
      onBlur: createChainedFunction(this.handleHide, triggerProps.onBlur),
      'aria-describedby': this.props.overlay.props.id,
    };

    return cloneElement(trigger, props);
  }
}

const trigger = React.Children.only(this.props.children);
    const triggerProps = trigger.props;

    // create in render otherwise owner is lost...
    this.overlay = this.getOverlay();

    const props = {
      onMouseOver: createChainedFunction(
        this.handleShow,
        triggerProps.onMouseOver,
      ),
      onMouseOut: createChainedFunction(
        this.handleHide,
        triggerProps.onMouseOut,
      ),
      onFocus: createChainedFunction(this.handleShow, triggerProps.onFocus),
      onBlur: createChainedFunction(this.handleHide, triggerProps.onBlur),
      'aria-describedby': this.props.overlay.props.id,
    };

    return cloneElement(trigger, props);
  }
}

render() {
    const trigger = React.Children.only(this.props.children);
    const triggerProps = trigger.props;

    // create in render otherwise owner is lost...
    this.overlay = this.getOverlay();

    const props = {
      onMouseOver: createChainedFunction(
        this.handleShow,
        triggerProps.onMouseOver,
      ),
      onMouseOut: createChainedFunction(
        this.handleHide,
        triggerProps.onMouseOut,
      ),
      onFocus: createChainedFunction(this.handleShow, triggerProps.onFocus),
      onBlur: createChainedFunction(this.handleHide, triggerProps.onBlur),
      'aria-describedby': this.props.overlay.props.id,
    };

    return cloneElement(trigger, props);
  }
}

render () {
    const {
      noWrap,
      children
    } = this.props

    const child = Children.only(children)

    if (noWrap) {
      return safeCloneElement(child, {
        onClick: createChainedFunction(this._suppressRootCloseHandler, child.props.onClick)
      })
    }

    // Wrap the child in a new element, so the child won't have to handle
    // potentially combining multiple onClick listeners.

    /* eslint-disable
      jsx-a11y/onclick-has-role,
      jsx-a11y/onclick-has-focus,
      jsx-a11y/click-events-have-key-events
    */
    return (
      <div>
        {child}
      </div>
    )

*/
  onExiting: PropTypes.func,

  /**
   * Callback fired after the Modal finishes transitioning out
   */
  onExited: PropTypes.func,

  /**
   * @private
   */
  container: BaseModal.propTypes.container
};

const defaultProps = {
  ...BaseModal.defaultProps,
  animation: true,
  dialogComponentClass: ModalDialog
};

const childContextTypes = {
  $bs_modal: PropTypes.shape({
    onHide: PropTypes.func
  })
};

/* eslint-disable no-use-before-define, react/no-multi-comp */
function DialogTransition(props) {
  return ;
}

function BackdropTransition(props) {

}

function BackdropTransition(props: any) {
  return ;
}


export interface ModalState {
  style: React.CSSProperties;
}
/* eslint-enable no-use-before-define */

export class Modal extends React.Component {

  static defaultProps = {
    ...BaseModal.defaultProps,
    animation: true,
  } as any;

  static TRANSITION_DURATION = 300;
  static BACKDROP_TRANSITION_DURATION = 150;

  constructor(props: ModalProps, context: any) {
    super(props, context);

    this.state = {
      style: {}
    };
  }

  static childContextTypes = {
    $bs_modal: PropTypes.shape({