stitch-ui/src/core/components/PopoutWindow.js

import React from "react";
import PropTypes from "prop-types";
import Popout from "react-popout";
import FontAwesome from "react-fontawesome";
import { Button } from "../../core";

export default class PopoutWindow extends React.Component {
  constructor(props) {
    super(props);
    this.openPopout = this.openPopout.bind(this);
    this.closePopout = this.closePopout.bind(this);
    this.state = { isPoppedOut: false };
  }

  openPopout() {
    this.setState({ isPoppedOut: true });
  }

  closePopout() {
    this.setState({ isPoppedOut: false });
  }

  render() {
    const { title, url, options, containerID, icon } = this.props;

    if (this.state.isPoppedOut) {
      return (
        <Popout
          title={title}
          url={url}
          onClosing={this.closePopout}
          options={options}
          containerID={containerID}
        >
          <span>
            {this.props.children}
          </span>
        </Popout>
      );
    }
    return (
      <Button small onClick={this.openPopout}>
        <FontAwesome name={icon} style={{ margin: 5, fontSize: 15 }} />
        Help
      </Button>
    );
  }
}

/* eslint-disable react/forbid-prop-types */
PopoutWindow.propTypes = {
  title: PropTypes.string,
  url: PropTypes.string,
  options: PropTypes.object,
  containerID: PropTypes.string,
  icon: PropTypes.string,
  children: PropTypes.element
};

PopoutWindow.defaultProps = {
  title: "Info",
  url: "",
  options: {},
  containerID: "",
  icon: "question-circle",
  children: null
};