services/workbench2/src/components/copy-to-clipboard-snackbar/copy-to-clipboard-snackbar.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from "react";
   6 import { connect, DispatchProp } from "react-redux";
   7 import { StyleRulesCallback, Tooltip, WithStyles, withStyles } from "@material-ui/core";
   8 import { ArvadosTheme } from 'common/custom-theme';
   9 import CopyToClipboard from 'react-copy-to-clipboard';
  10 import { snackbarActions, SnackbarKind } from 'store/snackbar/snackbar-actions';
  11 import { CopyIcon } from 'components/icon/icon';
  12
  13 type CssRules = 'copyIcon';
  14
  15 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  16   copyIcon: {
  17     marginLeft: theme.spacing.unit,
  18     color: theme.palette.grey["500"],
  19     cursor: 'pointer',
  20     display: 'inline',
  21     '& svg': {
  22       fontSize: '1rem',
  23       verticalAlign: 'middle',
  24     }
  25   }
  26 });
  27
  28 interface CopyToClipboardDataProps {
  29   children?: React.ReactNode;
  30   value: string;
  31 }
  32
  33 type CopyToClipboardProps = CopyToClipboardDataProps & WithStyles<CssRules> & DispatchProp;
  34
  35 export const CopyToClipboardSnackbar = connect()(withStyles(styles)(
  36   class CopyToClipboardSnackbar extends React.Component<CopyToClipboardProps> {
  37     onCopy = () => {
  38       this.props.dispatch(snackbarActions.OPEN_SNACKBAR({
  39         message: 'Copied',
  40         hideDuration: 2000,
  41         kind: SnackbarKind.SUCCESS
  42     }));
  43     };
  44
  45     render() {
  46       const { children, value, classes } = this.props;
  47       return (
  48         <Tooltip title="Copy to clipboard">
  49           <span className={classes.copyIcon}>
  50             <CopyToClipboard text={value} onCopy={this.onCopy}>
  51               {children || <CopyIcon />}
  52             </CopyToClipboard>
  53           </span>
  54         </Tooltip>
  55       );
  56     }
  57   }
  58 ));