'Copy to Clipboard' functionality (#163)
* Adds 'Copy to Clipboard' functionality to all code blocks in readOnly
* Show on hover, move to SC
* 💚
* PR feedback
This commit is contained in:
36
frontend/components/CopyToClipboard/CopyToClipboard.js
Normal file
36
frontend/components/CopyToClipboard/CopyToClipboard.js
Normal file
@ -0,0 +1,36 @@
|
||||
// @flow
|
||||
import React, { PureComponent } from 'react';
|
||||
import copy from 'copy-to-clipboard';
|
||||
|
||||
class CopyToClipboard extends PureComponent {
|
||||
props: {
|
||||
text: string,
|
||||
children?: React.Element<any>,
|
||||
onClick?: () => void,
|
||||
onCopy: (string, boolean) => void,
|
||||
};
|
||||
|
||||
onClick = (ev: SyntheticEvent) => {
|
||||
const { text, onCopy, children } = this.props;
|
||||
const elem = React.Children.only(children);
|
||||
const result = copy(text, {
|
||||
debug: __DEV__,
|
||||
});
|
||||
|
||||
if (onCopy) {
|
||||
onCopy(text, result);
|
||||
}
|
||||
|
||||
if (elem && elem.props && typeof elem.props.onClick === 'function') {
|
||||
elem.props.onClick(ev);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { text: _text, onCopy: _onCopy, children, ...rest } = this.props;
|
||||
const elem = React.Children.only(children);
|
||||
return React.cloneElement(elem, { ...rest, onClick: this.onClick });
|
||||
}
|
||||
}
|
||||
|
||||
export default CopyToClipboard;
|
Reference in New Issue
Block a user