sorting fixes wip
This commit is contained in:
parent
998ec2e687
commit
f5de843a26
|
@ -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>
|
||||
|
|
|
@ -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) => {
|
||||
|
|
|
@ -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))
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in New Issue