Implementation of actions cell in Balance Table

src/routes/safe/component/Balances/index.jsx

@@ -1,14 +1,20 @@
 // @flow
 import * as React from 'react'
 import { List } from 'immutable'
-import Row from '~/components/layout/Row'
+import classNames from 'classnames/bind'
+import CallMade from '@material-ui/icons/CallMade'
+import CallReceived from '@material-ui/icons/CallReceived'
+import Button from '@material-ui/core/Button'
 import Checkbox from '@material-ui/core/Checkbox'
+import TableRow from '@material-ui/core/TableRow'
+import TableCell from '@material-ui/core/TableCell'
 import { withStyles } from '@material-ui/core/styles'
+import Row from '~/components/layout/Row'
 import Paragraph from '~/components/layout/Paragraph'
 import { type Column } from '~/components/Table/TableHead'
 import Table from '~/components/Table'
 import { buildOrderFieldFrom } from '~/components/Table/sorting'
-import { sm } from '~/theme/variables'
+import { sm, xs } from '~/theme/variables'
 
 const BALANCE_TABLE_ASSET_ID = 'asset'
 const BALANCE_TABLE_BALANCE_ID = 'balance'
@@ -21,6 +27,7 @@ const generateColumns = () => {
     numeric: false,
     disablePadding: false,
     label: 'Asset',
+    custom: false,
   }
 
   const balanceRow: Column = {
@@ -29,6 +36,7 @@ const generateColumns = () => {
     numeric: true,
     disablePadding: false,
     label: 'Balance',
+    custom: false,
   }
 
   const valueRow: Column = {
@@ -37,16 +45,26 @@ const generateColumns = () => {
     numeric: true,
     disablePadding: false,
     label: 'Value',
+    custom: false,
   }
 
-  return List([assetRow, balanceRow, valueRow])
+  const actions: Column = {
+    id: 'actions',
+    order: false,
+    numeric: false,
+    disablePadding: false,
+    label: '',
+    custom: true,
+  }
+
+  return List([assetRow, balanceRow, valueRow, actions])
 }
 
 type State = {
   hideZero: boolean,
 }
 
-const styles = {
+const styles = theme => ({
   root: {
     width: '20px',
     marginRight: sm,
@@ -57,12 +75,41 @@ const styles = {
   message: {
     margin: `${sm} 0`,
   },
-}
+  actionIcon: {
+    marginRight: theme.spacing.unit,
+  },
+  iconSmall: {
+    fontSize: 16,
+  },
+  actions: {
+    justifyContent: 'flex-end',
+  },
+  send: {
+    minWidth: '0px',
+    marginRight: sm,
+    width: '70px',
+  },
+  receive: {
+    minWidth: '0px',
+    width: '95px',
+  },
+  leftIcon: {
+    marginRight: xs,
+  },
+})
 
 type Props = {
   classes: Object,
 }
 
+type BalanceRow = {
+  asset: string,
+  balance: string,
+  balanceOrder: number,
+  value: string,
+  valueOrder: number,
+}
+
 class Balances extends React.Component<Props, State> {
   state = {
     hideZero: false,
@@ -79,6 +126,7 @@ class Balances extends React.Component<Props, State> {
     const { classes } = this.props
 
     const columns = generateColumns()
+    const autoColumns = columns.filter(c => !c.custom)
     const checkboxClasses = {
       root: classes.root,
     }
@@ -122,7 +170,29 @@ class Balances extends React.Component<Props, State> {
               [buildOrderFieldFrom(BALANCE_TABLE_VALUE_ID)]: 2930.89,
             },
           ]}
-        />
+        >
+          {(sortedData: Array<BalanceRow>) => sortedData.map((row: any, index: number) => (
+            <TableRow tabIndex={-1} key={index}>
+              { autoColumns.map((column: Column) => (
+                <TableCell key={column.id} numeric={column.numeric} component="th" scope="row">
+                  {row[column.id]}
+                </TableCell>
+              )) }
+              <TableCell component="th" scope="row">
+                <Row align="end" className={classes.actions}>
+                  <Button variant="contained" size="small" color="secondary" className={classes.send}>
+                    <CallMade className={classNames(classes.leftIcon, classes.iconSmall)} />
+                    Send
+                  </Button>
+                  <Button variant="contained" size="small" color="secondary" className={classes.receive}>
+                    <CallReceived className={classNames(classes.leftIcon, classes.iconSmall)} />
+                    Receive
+                  </Button>
+                </Row>
+              </TableCell>
+            </TableRow>
+          ))}
+        </Table>
       </React.Fragment>
     )
   }