sorting fixes wip

This commit is contained in:
Mikhail Mikheev 2019-06-04 19:46:36 +04:00
parent 998ec2e687
commit f5de843a26
4 changed files with 24 additions and 29 deletions

View File

@ -16,6 +16,7 @@ export type Column = {
custom: boolean, // If content will be rendered by user manually
width?: number,
static?: boolean, // If content can't be sorted by values in the column
sortKey?: string, // If value of the column is an object
}
export const cellWidth = (width: number | typeof undefined) => {
@ -55,13 +56,17 @@ class GnoTableHead extends React.PureComponent<Props> {
padding={column.disablePadding ? 'none' : 'default'}
sortDirection={orderBy === column.id ? order : false}
>
<TableSortLabel
active={orderBy === column.id}
direction={order}
onClick={!column.static && this.changeSort(column.id, column.order)}
>
{column.label}
</TableSortLabel>
{column.static ? (
column.label
) : (
<TableSortLabel
active={orderBy === column.id}
direction={order}
onClick={this.changeSort(column.id, column.order)}
>
{column.label}
</TableSortLabel>
)}
</TableCell>
))}
</TableRow>

View File

@ -1,4 +1,5 @@
// @flow
import { List } from 'immutable'
export const FIXED = 'fixed'
type Fixed = {
@ -11,6 +12,7 @@ export const buildOrderFieldFrom = (attr: string) => `${attr}Order`
const desc = (a: Object, b: Object, orderBy: string, orderProp: boolean) => {
const order = orderProp ? buildOrderFieldFrom(orderBy) : orderBy
console.log(a, b, orderBy, orderProp)
if (b[order] < a[order]) {
return -1
@ -23,9 +25,9 @@ const desc = (a: Object, b: Object, orderBy: string, orderProp: boolean) => {
}
// eslint-disable-next-line
export const stableSort = (array: Array<SortRow>, cmp: any, fixed: boolean): Array<SortRow> => {
const fixedElems: Array<SortRow> = fixed ? array.filter((elem: any) => elem.fixed) : []
const data: Array<SortRow> = fixed ? array.filter((elem: any) => !elem[FIXED]) : array
export const stableSort = (dataArray: List<any>, cmp: any, fixed: boolean): Array<SortRow> => {
const fixedElems: List<any> = fixed ? dataArray.filter((elem: any) => elem.fixed) : List([])
const data: List<any> = fixed ? dataArray.filter((elem: any) => !elem[FIXED]) : dataArray
const stabilizedThis = data.map((el, index) => [el, index])
stabilizedThis.sort((a, b) => {

View File

@ -4,7 +4,6 @@ import { type Token } from '~/logic/tokens/store/model/token'
import { buildOrderFieldFrom, FIXED, type SortRow } from '~/components/Table/sorting'
import { type Column } from '~/components/Table/TableHead'
export const BALANCE_TABLE_IMAGE_ID = 'image'
export const BALANCE_TABLE_ASSET_ID = 'asset'
export const BALANCE_TABLE_BALANCE_ID = 'balance'
export const BALANCE_TABLE_VALUE_ID = 'value'
@ -18,8 +17,7 @@ export type BalanceRow = SortRow<BalanceData>
export const getBalanceData = (activeTokens: List<Token>): List<BalanceRow> => {
const rows = activeTokens.map((token: Token) => ({
[BALANCE_TABLE_IMAGE_ID]: token.logoUri,
[BALANCE_TABLE_ASSET_ID]: token.name,
[BALANCE_TABLE_ASSET_ID]: { name: token.name, logoUri: token.logoUri },
[BALANCE_TABLE_BALANCE_ID]: `${token.balance} ${token.symbol}`,
[buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)]: Number(token.balance),
[FIXED]: token.get('symbol') === 'ETH',
@ -29,16 +27,6 @@ export const getBalanceData = (activeTokens: List<Token>): List<BalanceRow> => {
}
export const generateColumns = () => {
const imageColumn: Column = {
id: BALANCE_TABLE_IMAGE_ID,
order: false,
static: true,
label: '',
custom: false,
disablePadding: true,
width: 30,
}
const assetColumn: Column = {
id: BALANCE_TABLE_ASSET_ID,
order: false,
@ -46,6 +34,7 @@ export const generateColumns = () => {
label: 'Asset',
custom: false,
width: 250,
sortKey: 'name',
}
const balanceColumn: Column = {
@ -65,7 +54,7 @@ export const generateColumns = () => {
custom: true,
}
return List([imageColumn, assetColumn, balanceColumn, actions])
return List([assetColumn, balanceColumn, actions])
}
export const filterByZero = (data: List<BalanceRow>, hideZero: boolean): List<BalanceRow> => data.filter((row: BalanceRow) => (hideZero ? row[buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)] !== 0 : true))

View File

@ -12,16 +12,15 @@ import TableCell from '@material-ui/core/TableCell'
import { withStyles } from '@material-ui/core/styles'
import Col from '~/components/layout/Col'
import Row from '~/components/layout/Row'
import Img from '~/components/layout/Img'
import ButtonLink from '~/components/layout/ButtonLink'
import Paragraph from '~/components/layout/Paragraph'
import Modal from '~/components/Modal'
import { type Column, cellWidth } from '~/components/Table/TableHead'
import Table from '~/components/Table'
import {
getBalanceData, generateColumns, BALANCE_TABLE_IMAGE_ID, BALANCE_TABLE_BALANCE_ID, type BalanceRow, filterByZero,
getBalanceData, generateColumns, BALANCE_TABLE_ASSET_ID, type BalanceRow, filterByZero,
} from './dataFetcher'
import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils'
import AssetTableCell from './AssetTableCell'
import Tokens from './Tokens'
import SendModal from './SendModal'
import Receive from './Receive'
@ -147,7 +146,7 @@ class Balances extends React.Component<Props, State> {
</Row>
<Table
label="Balances"
defaultOrderBy={BALANCE_TABLE_BALANCE_ID}
defaultOrderBy={BALANCE_TABLE_ASSET_ID}
columns={columns}
data={filteredData}
size={filteredData.size}
@ -157,7 +156,7 @@ class Balances extends React.Component<Props, State> {
<TableRow tabIndex={-1} key={index} className={classes.hide} data-testid="balance-row">
{autoColumns.map((column: Column) => (
<TableCell key={column.id} style={cellWidth(column.width)} align={column.align} component="td">
{column.id === BALANCE_TABLE_IMAGE_ID ? <Img src={row[column.id]} height={26} alt="Logo" onError={setImageToPlaceholder} /> : row[column.id]}
{column.id === BALANCE_TABLE_ASSET_ID ? <AssetTableCell asset={row[column.id]} /> : row[column.id]}
</TableCell>
))}
<TableCell component="td">