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()(
  36     withStyles(styles)(
  37         class CopyToClipboardSnackbar extends React.Component<CopyToClipboardProps> {
  38             onCopy = () => {
  39                 this.props.dispatch(
  40                     snackbarActions.OPEN_SNACKBAR({
  41                         message: 'Copied',
  42                         hideDuration: 2000,
  43                         kind: SnackbarKind.SUCCESS,
  44                     })
  45                 );
  46             };
  47
  48             render() {
  49                 const { children, value, classes } = this.props;
  50                 return (
  51                     <Tooltip title='Copy to clipboard' onClick={(ev) => ev.stopPropagation()}>
  52                         <span className={classes.copyIcon}>
  53                             <CopyToClipboard text={value} onCopy={this.onCopy}>
  54                                 {children || <CopyIcon />}
  55                             </CopyToClipboard>
  56                         </span>
  57                     </Tooltip>
  58                 );
  59             }
  60         }
  61     )
  62 );