import browserInfo from 'browser-info';
import Clipboard from 'clipboard';
import React, {PropTypes} from 'react';
import ReactDOM from 'react-dom';
import {Tooltip} from 'reactjs-components';

import Icon from './Icon';

const METHODS_TO_BIND = [
  'handleCopy',
  'handleCopyIconMouseEnter'
];

class ClipboardTrigger extends React.Component {
  constructor() {
    super();

    this.state = {
      hasCopiedToClipboard: false
    };

    METHODS_TO_BIND.forEach((method) => {
      this[method] = this[method].bind(this);
    });
  }

  componentDidMount() {
    if (this.refs.copyButton) {
      this.clipboard = new Clipboard(ReactDOM.findDOMNode(this.refs.copyButton),
        {
          text: () => {
            return this.props.copyText;
          }
        }
      );

      this.clipboard.on('success', this.handleCopy);
    }
  }

  componentWillUnmount() {
    if (this.clipboard) {
      this.clipboard.destroy();
    }
  }

  handleCopy() {
    this.setState({hasCopiedToClipboard: true});
  }

  handleCopyIconMouseEnter() {
    this.setState({hasCopiedToClipboard: false});
  }

  render() {
    if (/safari/i.test(browserInfo().name)) {
      return null;
    }

    const {copiedText, tooltipContent} = this.props;
    const clipboardIcon = (
      <Icon
        id="clipboard"
        size="mini"
        className="clickable icon-clipboard"
        color="purple"
        onMouseEnter={this.handleCopyIconMouseEnter} />
    );
    let text = tooltipContent;

    if (this.state.hasCopiedToClipboard) {
      text = copiedText;
    }

    return (
      <Tooltip position="bottom" content={text} ref="copyButton">
        {clipboardIcon}
      </Tooltip>
    );
  }
}

ClipboardTrigger.defaultProps = {
  copiedText: 'Copied!',
  tooltipContent: 'Copy to clipboard'
};

ClipboardTrigger.propTypes = {
  copiedText: PropTypes.string,
  copyText: PropTypes.string,
  tooltipContent: PropTypes.string
};

module.exports = ClipboardTrigger;

import Clipboard from 'clipboard';
import React, {PropTypes} from 'react';
import ReactDOM from 'react-dom';
import {Tooltip} from 'reactjs-components';

import Icon from './Icon';

const METHODS_TO_BIND = [
  'handleCopy',
  'handleCopyIconMouseEnter'
];

class ClipboardTrigger extends React.Component {
  constructor() {
    super();

    this.state = {
      hasCopiedToClipboard: false
    };

    METHODS_TO_BIND.forEach((method) => {
      this[method] = this[method].bind(this);
    });
  }

  componentDidMount() {
    if (this.refs.copyButton) {
      this.clipboard = new Clipboard(ReactDOM.findDOMNode(this.refs.copyButton),
        {
          text: () => {
            return this.props.copyText;
          }
        }
      );

      this.clipboard.on('success', this.handleCopy);
    }
  }

  componentWillUnmount() {
    if (this.clipboard) {
      this.clipboard.destroy();
    }
  }

  getTriggerContent() {
    const {children, className} = this.props;

    if (children != null) {
      return (
        <span className={className} onMouseEnter={this.handleCopyIconMouseEnter}
          ref="copyButton">
          {children}
        </span>
      );
    }

    return (
      <Icon
        id="clipboard"
        size="mini"
        className={`clickable icon-clipboard ${className}`}
        color="purple"
        onMouseEnter={this.handleCopyIconMouseEnter}
        ref="copyButton" />
    );
  }

  handleCopy() {
    this.setState({hasCopiedToClipboard: true});

    if (this.props.onTextCopy) {
      this.props.onTextCopy();
    }
  }

  handleCopyIconMouseEnter() {
    this.setState({hasCopiedToClipboard: false});
  }

  render() {
    const {copiedText, tooltipContent, useTooltip} = this.props;

    if (useTooltip) {
      let text = tooltipContent;

      if (this.state.hasCopiedToClipboard) {
        text = copiedText;
      }

      return (
        <Tooltip position="bottom" content={text}>
          {this.getTriggerContent()}
        </Tooltip>
      );
    }

    return this.getTriggerContent();
  }
}

ClipboardTrigger.defaultProps = {
  copiedText: 'Copied!',
  tooltipContent: 'Copy to clipboard'
};

ClipboardTrigger.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  copiedText: PropTypes.node,
  copyText: PropTypes.node,
  onTextCopy: PropTypes.func,
  tooltipContent: PropTypes.node,
  useTooltip: PropTypes.bool
};

module.exports = ClipboardTrigger;

Extend ClipboardTrigger functionality