first commit

zhongrj

2025-11-24 276323dce9613867abb3f58a4cc2abbfb2fd0dea

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import React from 'react';
import PropTypes from 'prop-types';
import Clipboard from 'clipboard';
import '../css/ClipboardInput.scss';
 
class ClipboardInput extends React.Component{
  constructor(props){
    super(props);
 
    this.state = {
      showCopied: false
    };
  }
 
  componentDidMount(){
    this.clipboard = new Clipboard(this.dom, {
        target: () => this.dom
      }).on('success', () => {
        this.setState({showCopied: true});
      });
  }
 
  componentWillUnmount(){
    this.clipboard.destroy();
  }
 
  render(){
    return (
      <div className="clipboardInput">
        <input 
          {...this.props}
          ref={(domNode) => { this.dom = domNode; }}
          title={this.props.value || ""}
          onBlur={() => { this.setState({showCopied: false}); }}
         />
        <div style={{position: 'relative', 'width': '100%'}}>
          <div className={"copied theme-background-success " + (this.state.showCopied ? "show" : "")}>Copied to clipboard</div>
        </div>
    </div>);
  }       
}
 
export default ClipboardInput;