src/components/multiselectToolbar/MultiselectToolbar.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React, { ReactElement } from 'react';
   6 import { connect } from 'react-redux';
   7 import { StyleRulesCallback, withStyles, WithStyles, Toolbar, Button } from '@material-ui/core';
   8 import { ArvadosTheme } from 'common/custom-theme';
   9 import { RootState } from 'store/store';
  10 import { CopyToClipboardSnackbar } from 'components/copy-to-clipboard-snackbar/copy-to-clipboard-snackbar';
  11
  12 type CssRules = 'root' | 'button';
  13
  14 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  15     root: {
  16         display: 'flex',
  17         flexDirection: 'row',
  18     },
  19     button: {
  20         color: theme.palette.text.primary,
  21         margin: '0.5rem',
  22     },
  23 });
  24
  25 type MultiselectToolbarAction = {
  26     name: string;
  27     fn: () => ReactElement;
  28 };
  29
  30 export type MultiselectToolbarActions = {
  31     actions: Array<MultiselectToolbarAction>;
  32 };
  33
  34 export const defaultActions: Array<MultiselectToolbarAction> = [
  35     {
  36         name: 'foo',
  37         fn: () => MSToolbarCopyButton({ button: { border: '1px solid blue' } }),
  38     },
  39 ];
  40
  41 const MSToolbarCopyButton = (classes) => {
  42     return (
  43         <Button className={classes.button}>
  44             <CopyToClipboardSnackbar value='foo' children={<div>Copy</div>} />
  45         </Button>
  46     );
  47 };
  48
  49 type MultiselectToolbarProps = MultiselectToolbarActions & WithStyles<CssRules>;
  50
  51 export const MultiselectToolbar = connect(mapStateToProps)(
  52     withStyles(styles)((props: MultiselectToolbarProps) => {
  53         const { classes, actions } = props;
  54         return (
  55             <Toolbar className={classes.root}>
  56                 {actions.map((action, i) => (
  57                     <Button key={i} className={classes.button} onClick={action.fn}>
  58                         {action.name}
  59                     </Button>
  60                 ))}
  61                 <MSToolbarCopyButton />
  62                 {/* <CopyToClipboardSnackbar value='foo' children={<div>test</div>} /> */}
  63             </Toolbar>
  64         );
  65     })
  66 );
  67
  68 function mapStateToProps(state: RootState) {
  69     return {
  70         // state: state,
  71     };
  72 }