expanding tx in txs table

This commit is contained in:
mmv 2019-06-21 14:07:17 +04:00
parent 4a81c69a1a
commit 2fbb1ed75c
4 changed files with 53 additions and 42 deletions

View File

@ -9,7 +9,7 @@ import styles from './index.scss'
const Footer = () => (
<Block className={styles.footer}>
<Link to={WELCOME_ADDRESS}>
<Paragraph size="sm" color="primary" noMargin>Welcome</Paragraph>
<Paragraph size="sm" color="primary" noMargin>Add Safe</Paragraph>
</Link>
<Link to={SAFELIST_ADDRESS}>
<Paragraph size="sm" color="primary" noMargin>Safe List</Paragraph>

View File

@ -0,0 +1,6 @@
// @flow
import React from 'react'
const ExpandedTx = () => <div>Yo I'm expanded</div>
export default ExpandedTx

View File

@ -25,9 +25,9 @@ type TxData = {
const formatDate = date => format(date, 'MMM D, YYYY - h:m:s')
export type BalanceRow = SortRow<TxData>
export type TransactionRow = SortRow<TxData>
export const getTxTableData = (transactions: List<Transaction>): List<BalanceRow> => {
export const getTxTableData = (transactions: List<Transaction>): List<TransactionRow> => {
const rows = transactions.map((tx: Transaction) => ({
[TX_TABLE_NONCE_ID]: tx.nonce,
[TX_TABLE_TYPE_ID]: 'Outgoing transfer',

View File

@ -1,8 +1,8 @@
// @flow
import * as React from 'react'
import React, { useState } from 'react'
import { List } from 'immutable'
import Collapse from '@material-ui/core/Collapse'
import classNames from 'classnames/bind'
import { type Token } from '~/logic/tokens/store/model/token'
import CallMade from '@material-ui/icons/CallMade'
import CallReceived from '@material-ui/icons/CallReceived'
import Button from '@material-ui/core/Button'
@ -10,6 +10,7 @@ import TableRow from '@material-ui/core/TableRow'
import TableCell from '@material-ui/core/TableCell'
import { withStyles } from '@material-ui/core/styles'
import Col from '~/components/layout/Col'
import { type Token } from '~/logic/tokens/store/model/token'
import Block from '~/components/layout/Block'
import Row from '~/components/layout/Row'
import Paragraph from '~/components/layout/Paragraph'
@ -17,51 +18,54 @@ import Modal from '~/components/Modal'
import { type Column, cellWidth } from '~/components/Table/TableHead'
import Table from '~/components/Table'
import { type Transaction } from '~/routes/safe/store/models/transaction'
import ExpandedTxComponent from './ExpandedTx'
import {
getTxTableData, generateColumns, TX_TABLE_NONCE_ID, type BalanceRow,
getTxTableData, generateColumns, TX_TABLE_NONCE_ID, type TransactionRow,
} from './columns'
import { styles } from './style'
import Status from './Status'
type State = {
}
type State = {}
type Props = {
classes: Object,
transactions: List<Transaction>,
}
type Action = 'Token' | 'Send' | 'Receive'
const TxsTable = (props: Props) => {
const { classes, transactions } = props
const [expandedTx, setExpandedTx] = useState(null)
class Balances extends React.Component<Props, State> {
state = {}
const handleTxExpand = (nonce) => {
setExpandedTx(prevTx => (prevTx === nonce ? null : nonce))
}
render() {
const {
classes,
transactions,
} = this.props
const columns = generateColumns()
const autoColumns = columns.filter(c => !c.custom)
const filteredData = getTxTableData(transactions)
const columns = generateColumns()
const autoColumns = columns.filter(c => !c.custom)
const filteredData = getTxTableData(transactions)
return (
<Block className={classes.container}>
<Table
label="Transactions"
defaultOrderBy={TX_TABLE_NONCE_ID}
defaultOrder="desc"
columns={columns}
data={filteredData}
size={filteredData.size}
defaultFixed
>
{(sortedData: Array<BalanceRow>) => sortedData.map((row: any, index: number) => (
<TableRow tabIndex={-1} key={index} className={classes.row}>
return (
<Block className={classes.container}>
<Table
label="Transactions"
defaultOrderBy={TX_TABLE_NONCE_ID}
defaultOrder="desc"
columns={columns}
data={filteredData}
size={filteredData.size}
defaultFixed
>
{(sortedData: Array<TransactionRow>) => sortedData.map((row: any, index: number) => (
<>
<TableRow tabIndex={-1} key={index} className={classes.row} onClick={() => handleTxExpand(row.nonce)}>
{autoColumns.map((column: Column) => (
<TableCell key={column.id} className={classes.cell} style={cellWidth(column.width)} align={column.align} component="td">
<TableCell
key={column.id}
className={classes.cell}
style={cellWidth(column.width)}
align={column.align}
component="td"
>
{row[column.id]}
</TableCell>
))}
@ -71,12 +75,13 @@ class Balances extends React.Component<Props, State> {
</Row>
</TableCell>
</TableRow>
))
}
</Table>
</Block>
)
}
<Collapse in={expandedTx === row.nonce} timeout="auto" component={ExpandedTxComponent} unmountOnExit />
</>
))
}
</Table>
</Block>
)
}
export default withStyles(styles)(Balances)
export default withStyles(styles)(TxsTable)