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 import { TCheckedList } from 'components/data-table/data-table';
  12
  13 type CssRules = 'root' | 'button';
  14
  15 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  16     root: {
  17         display: 'flex',
  18         flexDirection: 'row',
  19     },
  20     button: {
  21         color: theme.palette.text.primary,
  22         margin: '0.5rem',
  23     },
  24 });
  25
  26 type MultiselectToolbarAction = {
  27     fn: (checkedList) => ReactElement;
  28 };
  29
  30 export type MultiselectToolbarProps = {
  31     buttons: Array<MultiselectToolbarAction>;
  32     checkedList: TCheckedList;
  33 };
  34
  35 export const defaultActions: Array<MultiselectToolbarAction> = [
  36     {
  37         fn: (checkedList) => MSToolbarCopyButton(checkedList),
  38     },
  39 ];
  40
  41 const MSToolbarCopyButton = (checkedList) => {
  42     let stringifiedSelectedList: string = '';
  43     for (const [key, value] of Object.entries(checkedList)) {
  44         if (value === true) {
  45             stringifiedSelectedList += key + '\n';
  46         }
  47     }
  48     return <CopyToClipboardSnackbar value={stringifiedSelectedList} children={<div>Copy</div>} />;
  49 };
  50
  51 export const MultiselectToolbar = connect(mapStateToProps)(
  52     withStyles(styles)((props: MultiselectToolbarProps & WithStyles<CssRules>) => {
  53         const { classes, buttons, checkedList } = props;
  54         return (
  55             <Toolbar className={classes.root}>
  56                 {buttons.map((btn, i) => (
  57                     <Button key={i} className={classes.button}>
  58                         {btn.fn(checkedList)}
  59                     </Button>
  60                 ))}
  61             </Toolbar>
  62         );
  63     })
  64 );
  65
  66 function mapStateToProps(state: RootState) {
  67     return {
  68         checkedList: state.multiselect.checkedList,
  69     };
  70 }