2019-01-12 11:29:50 -08:00
|
|
|
// @flow
|
2019-02-04 20:41:45 -08:00
|
|
|
|
2019-01-12 11:29:50 -08:00
|
|
|
import React, { PureComponent } from 'react';
|
|
|
|
|
|
|
|
import { Button } from './button';
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
text: string,
|
|
|
|
className?: string,
|
|
|
|
};
|
|
|
|
|
|
|
|
type State = { copied: boolean };
|
|
|
|
|
|
|
|
export class Clipboard extends PureComponent<Props, State> {
|
|
|
|
static defaultProps = {
|
|
|
|
className: '',
|
|
|
|
};
|
|
|
|
|
|
|
|
state = {
|
|
|
|
copied: false,
|
|
|
|
};
|
|
|
|
|
|
|
|
handleClick = () => {
|
|
|
|
const { text } = this.props;
|
|
|
|
|
|
|
|
const el = document.createElement('textarea');
|
|
|
|
el.value = text;
|
|
|
|
|
|
|
|
if (document.body) document.body.appendChild(el);
|
|
|
|
|
|
|
|
el.select();
|
|
|
|
document.execCommand('copy');
|
|
|
|
if (document.body) document.body.removeChild(el);
|
|
|
|
|
|
|
|
this.setState({ copied: true });
|
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const { className } = this.props;
|
|
|
|
const { copied } = this.state;
|
|
|
|
|
|
|
|
return (
|
2019-01-31 08:38:42 -08:00
|
|
|
<div data-testid='Clipboard'>
|
|
|
|
<Button
|
|
|
|
label={copied ? 'Copied!' : 'Copy!'}
|
|
|
|
className={className}
|
|
|
|
onClick={this.handleClick}
|
|
|
|
disabled={copied}
|
|
|
|
/>
|
|
|
|
</div>
|
2019-01-12 11:29:50 -08:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|