Create a CopyToClipboardButton component and use it for all copy to clipboard buttons to have a feedback with a tooltip after click (#845)

Author: vincentfretin

src/components/CopyToClipboardButton.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { faClipboard } from '@fortawesome/free-solid-svg-icons';
+import { AwesomeIcon } from './AwesomeIcon';
+import copy from 'clipboard-copy';
+
+export default class CopyToClipboardButton extends React.Component {
+  static propTypes = {
+    text: PropTypes.func.isRequired,
+    title: PropTypes.string.isRequired,
+    message: PropTypes.string.isRequired
+  };
+
+  state = { copied: false };
+  buttonRef = React.createRef();
+
+  onClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    copy(this.props.text());
+    this.setState({ copied: true });
+    setTimeout(() => {
+      this.setState({ copied: false });
+    }, 2000);
+  };
+
+  render() {
+    let tooltipStyle = null;
+    if (this.state.copied && this.buttonRef.current) {
+      const rect = this.buttonRef.current.getBoundingClientRect();
+      const centerX = rect.left + rect.width / 2;
+      const isRightHalf = centerX > window.innerWidth / 2;
+      tooltipStyle = {
+        position: 'fixed',
+        top: rect.bottom + 5 + 'px'
+      };
+      if (isRightHalf) {
+        tooltipStyle.right = window.innerWidth - rect.right + 'px';
+      } else {
+        tooltipStyle.left = rect.left + 'px';
+      }
+    }
+
+    return (
+      <span ref={this.buttonRef}>
+        <a title={this.props.title} className="button" onClick={this.onClick}>
+          <AwesomeIcon icon={faClipboard} />
+        </a>
+        {this.state.copied && (
+          <div className="copy-tooltip" style={tooltipStyle}>
+            {this.props.message}
+          </div>
+        )}
+      </span>
+    );
+  }
+}

src/components/components/CommonComponents.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { faClipboard } from '@fortawesome/free-solid-svg-icons';
-import { AwesomeIcon } from '../AwesomeIcon';
+import CopyToClipboardButton from '../CopyToClipboardButton';
 import { InputWidget } from '../widgets';
 import DEFAULT_COMPONENTS from './DefaultComponents';
 import PropertyRow from './PropertyRow';
@@ -10,7 +9,6 @@ import Mixins from './Mixins';
 import { getEntityClipboardRepresentation } from '../../lib/entity';
 import EntityRepresentation from '../EntityRepresentation';
 import Events from '../../lib/Events';
-import copy from 'clipboard-copy';
 import { saveBlob } from '../../lib/utils';
 import GLTFIcon from '../../../assets/gltf.svg';
 
@@ -107,17 +105,11 @@ export default class CommonComponents extends React.Component {
         >
           <GLTFIcon />
         </a>
-        <a
+        <CopyToClipboardButton
           title="Copy entity HTML to clipboard"
-          className="button"
-          onClick={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            copy(getEntityClipboardRepresentation(this.props.entity));
-          }}
-        >
-          <AwesomeIcon icon={faClipboard} />
-        </a>
+          message="Copied entity HTML to clipboard"
+          text={() => getEntityClipboardRepresentation(this.props.entity)}
+        />
       </div>
     );
 

src/components/components/Component.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { faClipboard, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { AwesomeIcon } from '../AwesomeIcon';
 import PropertyRow from './PropertyRow';
 import Collapsible from '../Collapsible';
-import copy from 'clipboard-copy';
+import CopyToClipboardButton from '../CopyToClipboardButton';
 import { getComponentClipboardRepresentation } from '../../lib/entity';
 import { shouldShowProperty } from '../../lib/utils';
 import Events from '../../lib/Events';
@@ -119,22 +119,16 @@ export default class Component extends React.Component {
             <span>{componentName}</span>
           </span>
           <div className="componentHeaderActions">
-            <a
+            <CopyToClipboardButton
               title="Copy to clipboard"
-              className="button"
-              onClick={(event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                copy(
-                  getComponentClipboardRepresentation(
-                    this.state.entity,
-                    componentName.toLowerCase()
-                  )
-                );
-              }}
-            >
-              <AwesomeIcon icon={faClipboard} />
-            </a>
+              message="Copied to clipboard"
+              text={() =>
+                getComponentClipboardRepresentation(
+                  this.state.entity,
+                  componentName.toLowerCase()
+                )
+              }
+            />
             <a
               title="Remove component"
               className="button"

src/style/index.styl

@@ -274,6 +274,14 @@ body.aframe-inspector-opened
     border 0  /* To remove the inner border (specific to Firefox). */
     padding 0
 
+  .copy-tooltip
+    background-color var(--color-base-200)
+    border 1px solid var(--color-base-content)
+    color var(--color-base-content)
+    padding 10px
+    white-space nowrap
+    z-index 999999
+
   .hidden
     visibility hidden