1  import React from 'react';
 2  import PropTypes from 'prop-types';
 3  import {Badge, Tooltip} from "reactstrap";
 4  import classNames from 'classnames';
 5  import {CopyToClipboard} from 'react-copy-to-clipboard';
 6  import FontAwesome from 'react-fontawesome';
 7  import uuid from 'uuid/v1';
 8  
 9  import './CopyButton.css';
10  
11  class CopyButton extends React.Component {
12    constructor(props) {
13      super(props);
14      this.id = uuid();
15      this.state = {
16        showCopied: false
17      };
18    }
19  
20    onCopy() {
21      if (this.props.onCopy) {
22        return this.props.onCopy();
23      }
24      this.setState({
25        showCopied: true
26      });
27      // Hide the tooltip after 1.5s
28      clearTimeout(this.showTimeout);
29      this.showTimeout = setTimeout(() => {
30        this.setState({showCopied: false});
31      }, 1500);
32    }
33  
34    render() {
35      const {text, title, size} = this.props;
36      return (<CopyToClipboard text={text}
37                               onCopy={() => this.onCopy()}
38                               title={title}>
39        <Badge className={classNames('copy-to-clipboard', 'p-' + (size || 3))}
40               color="primary" id={'copy-button-' + this.id}>
41          <FontAwesome name="copy"/>
42          {this.state.showCopied &&
43          <Tooltip isOpen={true} target={'copy-button-' + this.id}>
44            Copied to clipboard
45          </Tooltip>}
46        </Badge>
47      </CopyToClipboard>);
48    }
49  }
50  
51  CopyButton.propTypes = {
52    text: PropTypes.oneOfType([
53      PropTypes.string,
54      PropTypes.number
55    ]).isRequired,
56    onCopy: PropTypes.func,
57    title: PropTypes.string,
58    size: PropTypes.number
59  };
60  
61  export default CopyButton;