48 lines
1.1 KiB
React
48 lines
1.1 KiB
React
|
import React, { PropTypes } from 'react';
|
||
|
|
import Clipboard from 'clipboard';
|
||
|
|
|
||
|
|
class CopyableInput extends React.Component {
|
||
|
|
componentDidMount() {
|
||
|
|
this.clipboard = new Clipboard(this.input, {
|
||
|
|
target: () => this.input
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
componentWillUnmount() {
|
||
|
|
this.clipboard.destroy();
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {
|
||
|
|
label,
|
||
|
|
value
|
||
|
|
} = this.props;
|
||
|
|
return (
|
||
|
|
<div className="copyable-input">
|
||
|
|
<label className="copyable-input__label" htmlFor="copyable-input__value">{label}</label>
|
||
|
|
<div className="copyable-input__value-container">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
className="copyable-input__value"
|
||
|
|
id="copyable-input__value"
|
||
|
|
value={value}
|
||
|
|
ref={(element) => { this.input = element; }}
|
||
|
|
/>
|
||
|
|
<span
|
||
|
|
className="copyable-input__tooltip tooltipped tooltipped-n"
|
||
|
|
aria-label="Copyied to Clipboard!"
|
||
|
|
>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
CopyableInput.propTypes = {
|
||
|
|
label: PropTypes.string.isRequired,
|
||
|
|
value: PropTypes.string.isRequired
|
||
|
|
};
|
||
|
|
|
||
|
|
export default CopyableInput;
|