feature(clipboard): add Clipboard button component
This commit is contained in:
parent
e75b1b0801
commit
3cf4d058f7
|
@ -0,0 +1,50 @@
|
|||
// @flow
|
||||
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 (
|
||||
<Button
|
||||
label={copied ? 'Copied!' : 'Copy!'}
|
||||
className={className}
|
||||
onClick={this.handleClick}
|
||||
disabled={copied}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue