weseek__growi/src/client/js/components/CopyButton.js

import React from 'react';
import PropTypes from 'prop-types';
import ClipboardButton from 'react-clipboard.js';

export default class CopyButton extends React.Component {

  constructor(props) {
    super(props);

    this.showToolTip = this.showToolTip.bind(this);

    // retrieve xss library from window
    this.xss = window.xss;
  }

  showToolTip() {
    const buttonId = `#${this.props.buttonId}`;
    $(buttonId).tooltip('show');
    setTimeout(() => {
      $(buttonId).tooltip('hide');
    }, 1000);
  }

  render() {
    const containerStyle = {
      lineHeight: 0,
    };
    const style = Object.assign({
      padding: '0 2px',
      verticalAlign: 'text-top',
    }, this.props.buttonStyle);

    const text = this.xss.process(this.props.text);

    return (
      <span className="btn-copy-container" style={containerStyle}>
        <ClipboardButton
          className={this.props.buttonClassName}
          button-id={this.props.buttonId}
          button-data-toggle="tooltip"
          button-data-container="body"
          button-title="copied!"
          button-data-placement="bottom"
          button-data-trigger="manual"
          button-style={style}
          data-clipboard-text={text}
          onSuccess={this.showToolTip}
        >

          <i className={this.props.iconClassName} />
        </ClipboardButton>
      </span>
    );
  }

}

CopyButton.propTypes = {
  text: PropTypes.string.isRequired,
  buttonId: PropTypes.string.isRequired,
  buttonClassName: PropTypes.string.isRequired,
  buttonStyle: PropTypes.object,
  iconClassName: PropTypes.string.isRequired,
};
CopyButton.defaultProps = {
  buttonStyle: {},
};