superset-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From maximebeauche...@apache.org
Subject [incubator-superset] branch master updated: [Feature] Copy-to-clipboard button in View Query (#3571)
Date Wed, 04 Oct 2017 05:34:42 GMT
This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 7e64f2e  [Feature] Copy-to-clipboard button in View Query (#3571)
7e64f2e is described below

commit 7e64f2e98868193e83536159c76226263479f91d
Author: Jeff Niu <jeffniu22@gmail.com>
AuthorDate: Tue Oct 3 22:34:40 2017 -0700

    [Feature] Copy-to-clipboard button in View Query (#3571)
    
    * added copy-to-clipboard button to explore/view query
    
    * modified CopyToClipboard to deselect current before copying
---
 .../javascripts/components/CopyToClipboard.jsx       | 12 +++++++++++-
 .../explore/components/DisplayQueryButton.jsx        | 20 +++++++++++++++++---
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/superset/assets/javascripts/components/CopyToClipboard.jsx b/superset/assets/javascripts/components/CopyToClipboard.jsx
index d00347d..7288b0d 100644
--- a/superset/assets/javascripts/components/CopyToClipboard.jsx
+++ b/superset/assets/javascripts/components/CopyToClipboard.jsx
@@ -52,6 +52,10 @@ export default class CopyToClipboard extends React.Component {
   }
 
   copyToClipboard(textToCopy) {
+    const selection = document.getSelection();
+    selection.removeAllRanges();
+    document.activeElement.blur();
+    const range = document.createRange();
     const textArea = document.createElement('textarea');
 
     textArea.style.position = 'fixed';
@@ -59,7 +63,8 @@ export default class CopyToClipboard extends React.Component {
     textArea.value = textToCopy;
 
     document.body.appendChild(textArea);
-    textArea.select();
+    range.selectNode(textArea);
+    selection.addRange(range);
     try {
       if (!document.execCommand('copy')) {
         throw new Error(t('Not successful'));
@@ -69,6 +74,11 @@ export default class CopyToClipboard extends React.Component {
     }
 
     document.body.removeChild(textArea);
+    if (selection.removeRange) {
+      selection.removeRange(range);
+    } else {
+      selection.removeAllRanges();
+    }
 
     this.setState({ hasCopied: true });
     this.props.onCopyEnd();
diff --git a/superset/assets/javascripts/explore/components/DisplayQueryButton.jsx b/superset/assets/javascripts/explore/components/DisplayQueryButton.jsx
index ec5cdcd..06a0164 100644
--- a/superset/assets/javascripts/explore/components/DisplayQueryButton.jsx
+++ b/superset/assets/javascripts/explore/components/DisplayQueryButton.jsx
@@ -4,8 +4,10 @@ import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/di
 import html from 'react-syntax-highlighter/dist/languages/htmlbars';
 import markdown from 'react-syntax-highlighter/dist/languages/markdown';
 import github from 'react-syntax-highlighter/dist/styles/github';
+import CopyToClipboard from './../../components/CopyToClipboard';
 
 import ModalTrigger from './../../components/ModalTrigger';
+import Button from '../../components/Button';
 import { t } from '../../locales';
 
 registerLanguage('markdown', markdown);
@@ -85,9 +87,21 @@ export default class DisplayQueryButton extends React.PureComponent {
       return <pre>{this.state.error}</pre>;
     } else if (this.state.query) {
       return (
-        <SyntaxHighlighter language={this.state.language} style={github}>
-          {this.state.query}
-        </SyntaxHighlighter>);
+        <div>
+          <CopyToClipboard
+            text={this.state.query}
+            shouldShowText={false}
+            copyNode={
+              <Button style={{ position: 'absolute', right: 20 }}>
+                <i className="fa fa-clipboard" />
+              </Button>
+            }
+          />
+          <SyntaxHighlighter language={this.state.language} style={github}>
+            {this.state.query}
+          </SyntaxHighlighter>
+        </div>
+      );
     }
     return null;
   }

-- 
To stop receiving notification emails like this one, please contact
['"commits@superset.apache.org" <commits@superset.apache.org>'].

Mime
View raw message