copy button that copies text to clipboard

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `EuiCopy` ([#1112](https://github.com/elastic/eui/pull/1112))
 - Added `disabled` to `EuiRadioGroup.options` ([#1111](https://github.com/elastic/eui/pull/1111))
 
 **Bug fixes**

src-docs/src/routes.js

@@ -87,6 +87,9 @@ import { ComboBoxExample }
 import { ContextMenuExample }
  from './views/context_menu/context_menu_example';
 
+import { CopyExample }
+ from './views/copy/copy_example';
+
 import { DatePickerExample }
  from './views/date_picker/date_picker_example';
 
@@ -377,6 +380,7 @@ const navigation = [{
  name: 'Utilities',
  items: [
  AccessibilityExample,
+ CopyExample,
  ResponsiveExample,
  DelayHideExample,
  ErrorBoundaryExample,

src-docs/src/views/copy/copy.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+
+import {
+ EuiCopy,
+ EuiButton,
+ EuiFieldText,
+ EuiSpacer,
+} from '../../../../src/components/';
+
+export default class extends Component {
+
+ state = {
+ copyText: 'I am the text that will be copied'
+ }
+
+ onChange = e => {
+ this.setState({
+ copyText: e.target.value,
+ });
+ };
+
+ render() {
+ return (
+ <div>
+ <EuiFieldText
+ placeholder="Enter text that will be copied to clipboard"
+ value={this.state.copyText}
+ onChange={this.onChange}
+ />
+
+ <EuiSpacer size="m" />
+
+ <EuiCopy textToCopy={this.state.copyText}>
+ {(copy) => (
+ <EuiButton onClick={copy}>
+ Click to copy input text
+ </EuiButton>
+ )}
+ </EuiCopy>
+ </div>
+ );
+ }
+}

src-docs/src/views/copy/copy_example.js

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+ GuideSectionTypes,
+} from '../../components';
+
+import {
+ EuiCode,
+ EuiCopy,
+} from '../../../../src/components';
+
+import Copy from './copy';
+const copySource = require('!!raw-loader!./copy');
+const copyHtml = renderToHtml(Copy);
+
+export const CopyExample = {
+ title: 'Copy',
+ sections: [{
+ source: [{
+ type: GuideSectionTypes.JS,
+ code: copySource,
+ }, {
+ type: GuideSectionTypes.HTML,
+ code: copyHtml,
+ }],
+ text: (
+ <p>
+ The <EuiCode>EuiCopy</EuiCode> component is a utility for copying text to clipboard.
+ Wrap a function that returns a Component. The first argument will be a `copy` function.
+ </p>
+ ),
+ components: { EuiCopy },
+ demo: <Copy />,
+ props: { EuiCopy },
+ }],
+};

src/components/copy/copy.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { copyToClipboard } from '../../services';
+import { EuiToolTip } from '../tool_tip';
+
+export class EuiCopy extends React.Component {
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ tooltipText: this.props.beforeMessage
+ };
+ }
+
+ copy = () => {
+ const isCopied = copyToClipboard(this.props.textToCopy);
+ if (isCopied) {
+ this.setState({
+ tooltipText: this.props.afterMessage,
+ });
+ }
+ }
+
+ resetTooltipText = () => {
+ this.setState({
+ tooltipText: this.props.beforeMessage,
+ });
+ }
+
+ render() {
+ const {
+ children,
+ textToCopy, // eslint-disable-line no-unused-vars
+ beforeMessage, // eslint-disable-line no-unused-vars
+ afterMessage, // eslint-disable-line no-unused-vars
+ ...rest
+ } = this.props;
+
+ return (
+ <EuiToolTip
+ content={this.state.tooltipText}
+ onMouseOut={this.resetTooltipText}
+ {...rest}
+ >
+ {children(this.copy)}
+ </EuiToolTip>
+ );
+ }
+}
+
+EuiCopy.propTypes = {
+
+ /**
+ * Text that will be copied to clipboard when copy function is executed.
+ */
+ textToCopy: PropTypes.string.isRequired,
+
+ /**
+ * Tooltip message displayed before copy function is called.
+ */
+ beforeMessage: PropTypes.string,
+
+ /**
+ * Tooltip message displayed after copy function is called that lets the user know that
+ * 'textToCopy' has been copied to the clipboard.
+ */
+ afterMessage: PropTypes.string.isRequired,
+
+ /**
+ * Function that must return a Component. First argument is 'copy' function.
+ * Use your own logic to create the component that user's interactact with when triggering copy.
+ */
+ children: PropTypes.func.isRequired,
+};
+
+EuiCopy.defaultProps = {
+ afterMessage: 'Copied',
+};
+

src/components/copy/index.js

@@ -0,0 +1,3 @@
+export {
+ EuiCopy,
+} from './copy';

src/components/index.js

@@ -65,6 +65,10 @@ export {
  EuiContextMenuItem,
 } from './context_menu';
 
+export {
+ EuiCopy,
+} from './copy';
+
 export {
  EuiDatePicker,
  EuiDatePickerRange,

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() {
@@ -142,7 +146,7 @@ export class EuiToolTip extends Component {
  );
 
  let tooltip;
- if (visible) {
+ if (visible && content) {
  tooltip = (
  <EuiPortal>
  <EuiToolTipPopover
@@ -201,7 +205,7 @@ EuiToolTip.propTypes = {
  /**
  * The main content of your tooltip.
  */
- content: PropTypes.node.isRequired,
+ content: PropTypes.node,
 
  /**
  * An optional title for your tooltip.

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,