Merge branch '21128-toolbar-context-menu'

[arvados-workbench2.git] / src / components / copy-to-clipboard-snackbar / copy-to-clipboard-snackbar.tsx

diff --git a/src/components/copy-to-clipboard-snackbar/copy-to-clipboard-snackbar.tsx b/src/components/copy-to-clipboard-snackbar/copy-to-clipboard-snackbar.tsx
index 3b2ff68a334cf112b3bc4edd6ae9b513a4dcc62b..3ef483dfe03faf63edd24fa3f02ff322e16110c4 100644 (file)
--- a/src/components/copy-to-clipboard-snackbar/copy-to-clipboard-snackbar.tsx
+++ b/src/components/copy-to-clipboard-snackbar/copy-to-clipboard-snackbar.tsx
@@ -2,9 +2,9 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import React from "react";
-import { connect, DispatchProp } from "react-redux";
-import { StyleRulesCallback, Tooltip, WithStyles, withStyles } from "@material-ui/core";
+import React from 'react';
+import { connect, DispatchProp } from 'react-redux';
+import { StyleRulesCallback, Tooltip, WithStyles, withStyles } from '@material-ui/core';
 import { ArvadosTheme } from 'common/custom-theme';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { snackbarActions, SnackbarKind } from 'store/snackbar/snackbar-actions';
@@ -13,46 +13,50 @@ import { CopyIcon } from 'components/icon/icon';
 type CssRules = 'copyIcon';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-  copyIcon: {
-    marginLeft: theme.spacing.unit,
-    color: theme.palette.grey["500"],
-    cursor: 'pointer',
-    display: 'inline',
-    '& svg': {
-      fontSize: '1rem',
-      verticalAlign: 'middle',
-    }
-  }
+    copyIcon: {
+        marginLeft: theme.spacing.unit,
+        color: theme.palette.grey['500'],
+        cursor: 'pointer',
+        display: 'inline',
+        '& svg': {
+            fontSize: '1rem',
+            verticalAlign: 'middle',
+        },
+    },
 });
 
 interface CopyToClipboardDataProps {
-  children?: React.ReactNode;
-  value: string;
+    children?: React.ReactNode;
+    value: string;
 }
 
 type CopyToClipboardProps = CopyToClipboardDataProps & WithStyles<CssRules> & DispatchProp;
 
-export const CopyToClipboardSnackbar = connect()(withStyles(styles)(
-  class CopyToClipboardSnackbar extends React.Component<CopyToClipboardProps> {
-    onCopy = () => {
-      this.props.dispatch(snackbarActions.OPEN_SNACKBAR({
-        message: 'Copied',
-        hideDuration: 2000,
-        kind: SnackbarKind.SUCCESS
-    }));
-    };
+export const CopyToClipboardSnackbar = connect()(
+    withStyles(styles)(
+        class CopyToClipboardSnackbar extends React.Component<CopyToClipboardProps> {
+            onCopy = () => {
+                this.props.dispatch(
+                    snackbarActions.OPEN_SNACKBAR({
+                        message: 'Copied',
+                        hideDuration: 2000,
+                        kind: SnackbarKind.SUCCESS,
+                    })
+                );
+            };
 
-    render() {
-      const { children, value, classes } = this.props;
-      return (
-        <Tooltip title="Copy to clipboard">
-          <span className={classes.copyIcon}>
-            <CopyToClipboard text={value} onCopy={this.onCopy}>
-              {children || <CopyIcon />}
-            </CopyToClipboard>
-          </span>
-        </Tooltip>
-      );
-    }
-  }
-));
+            render() {
+                const { children, value, classes } = this.props;
+                return (
+                    <Tooltip title='Copy to clipboard' onClick={(ev) => ev.stopPropagation()}>
+                        <span className={classes.copyIcon}>
+                            <CopyToClipboard text={value} onCopy={this.onCopy}>
+                                {children || <CopyIcon />}
+                            </CopyToClipboard>
+                        </span>
+                    </Tooltip>
+                );
+            }
+        }
+    )
+);