copy button that copies text to clipboard

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `3.5.1`.
+- Added `EuiButtonCopy` ([#1112](https://github.com/elastic/eui/pull/1112))
 
 ## [`3.5.1`](https://github.com/elastic/eui/tree/v3.5.1)
 

src-docs/src/views/button/button_copy.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import {
+  EuiButtonCopy,
+} from '../../../../src/components/';
+
+export default () => (
+  <div>
+    <EuiButtonCopy textToCopy="foobar">
+      Copy
+    </EuiButtonCopy>
+  </div>
+);

src-docs/src/views/button/button_example.js

@@ -56,6 +56,10 @@ import ButtonGroup from './button_group';
 const buttonGroupSource = require('!!raw-loader!./button_group');
 const buttonGroupHtml = renderToHtml(ButtonGroup);
 
+import ButtonCopy from './button_copy';
+const buttonCopySource = require('!!raw-loader!./button_copy');
+const buttonCopyHtml = renderToHtml(ButtonCopy);
+
 export const ButtonExample = {
   title: 'Button',
   sections: [{
@@ -243,5 +247,20 @@ export const ButtonExample = {
       </p>
     ),
     demo: <ButtonGhost />,
+  }, {
+    title: 'ButtonCopy',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: buttonCopySource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: buttonCopyHtml,
+    }],
+    text: (
+      <p>
+        Button for copying text to clipboard
+      </p>
+    ),
+    demo: <ButtonCopy />,
   }],
 };

src/components/button/button_copy/button_copy.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { copyToClipboard } from '../../../services';
+import { EuiButton } from '../button';
+import { EuiToolTip } from '../../tool_tip';
+
+const UNCOPIED_MSG = 'Copy to clipboard';
+const COPIED_MSG = 'Copied';
+
+export class EuiButtonCopy extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      tooltipText: UNCOPIED_MSG
+    };
+  }
+
+  copySnippet = () => {
+    const isCopied = copyToClipboard(this.props.textToCopy);
+    if (isCopied) {
+      this.setState({
+        tooltipText: COPIED_MSG,
+      });
+    }
+  }
+
+  resetTooltipText = () => {
+    this.setState({
+      tooltipText: UNCOPIED_MSG,
+    });
+  }
+
+  render() {
+    const {
+      children,
+      textToCopy, // eslint-disable-line no-unused-vars
+      onClick, // eslint-disable-line no-unused-vars
+      ...rest
+    } = this.props;
+
+    return (
+      <EuiToolTip
+        content={this.state.tooltipText}
+        onMouseOut={this.resetTooltipText}
+      >
+        <EuiButton
+          onClick={this.copySnippet}
+          {...rest}
+        >
+          {children}
+        </EuiButton>
+      </EuiToolTip>
+    );
+  }
+}
+
+EuiButtonCopy.propTypes = {
+  textToCopy: PropTypes.string.isRequired,
+};
+

src/components/button/button_copy/index.js

@@ -0,0 +1 @@
+export { EuiButtonCopy } from './button_copy';

src/components/button/index.js

@@ -18,3 +18,7 @@ export {
 export {
   EuiButtonGroup,
 } from './button_group';
+
+export {
+  EuiButtonCopy,
+} from './button_copy';

src/components/index.js

@@ -31,6 +31,7 @@ export {
   EuiButtonIcon,
   EuiButtonToggle,
   EuiButtonGroup,
+  EuiButtonCopy,
 } from './button';
 
 export {

src/components/tool_tip/tool_tip.js

@@ -116,6 +116,10 @@ export class EuiToolTip extends Component {
         this.hideToolTip();
       }
     }
+
+    if (this.props.onMouseOut) {
+      this.props.onMouseOut();
+    }
   };
 
   render() {

src/services/copy_to_clipboard.js

@@ -0,0 +1,46 @@
+function createHiddenTextElement(text) {
+  const textElement = document.createElement('span');
+  textElement.textContent = text;
+  textElement.style.all = 'unset';
+  // prevents scrolling to the end of the page
+  textElement.style.position = 'fixed';
+  textElement.style.top = 0;
+  textElement.style.clip = 'rect(0, 0, 0, 0)';
+  // used to preserve spaces and line breaks
+  textElement.style.whiteSpace = 'pre';
+  // do not inherit user-select (it may be `none`)
+  textElement.style.webkitUserSelect = 'text';
+  textElement.style.MozUserSelect = 'text';
+  textElement.style.msUserSelect = 'text';
+  textElement.style.userSelect = 'text';
+  return textElement;
+}
+
+export function copyToClipboard(text) {
+  let isCopied = true;
+  const range = document.createRange();
+  const selection = window.getSelection();
+  const elementToBeCopied = createHiddenTextElement(text);
+
+  document.body.appendChild(elementToBeCopied);
+  range.selectNode(elementToBeCopied);
+  selection.removeAllRanges();
+  selection.addRange(range);
+
+  if (!document.execCommand('copy')) {
+    isCopied = false;
+    console.warn('Unable to copy to clipboard.'); // eslint-disable-line no-console
+  }
+
+  if (selection) {
+    if (typeof selection.removeRange === 'function') {
+      selection.removeRange(range);
+    } else {
+      selection.removeAllRanges();
+    }
+  }
+
+  document.body.removeChild(elementToBeCopied);
+
+  return isCopied;
+}

src/services/index.js

@@ -25,6 +25,10 @@ export {
   DEFAULT_VISUALIZATION_COLOR,
 } from './color';
 
+export {
+  copyToClipboard
+} from './copy_to_clipboard';
+
 export {
   formatAuto,
   formatBoolean,