Skip to content

F
frontend
Commit e8914b57 authored by tom's avatar tom
Browse files
Options

fix sort icon iin tokens table

parent 61e791fa
Show whitespace changes
Inline Side-by-side
Showing with 29 additions and 23 deletions
ui/tokens/TokensTable.tsx
View file @ e8914b57
...@@ -3,10 +3,8 @@ import React from 'react'; ...@@ -3,10 +3,8 @@ import React from 'react';
import type { TokenInfo } from 'types/api/token'; import type { TokenInfo } from 'types/api/token';
import type { TokensSortingField, TokensSortingValue } from 'types/api/tokens'; import type { TokensSortingField, TokensSortingValue } from 'types/api/tokens';
import { Link } from 'toolkit/chakra/link'; import { TableBody, TableColumnHeader, TableColumnHeaderSortable, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
import IconSvg from 'ui/shared/IconSvg';
import { default as getNextSortValueShared } from 'ui/shared/sort/getNextSortValue'; import { default as getNextSortValueShared } from 'ui/shared/sort/getNextSortValue';
import TokensTableItem from './TokensTableItem'; import TokensTableItem from './TokensTableItem';
...@@ -29,9 +27,8 @@ type Props = { ...@@ -29,9 +27,8 @@ type Props = {
}; };
const TokensTable = ({ items, page, isLoading, sorting, setSorting, top }: Props) => { const TokensTable = ({ items, page, isLoading, sorting, setSorting, top }: Props) => {
const sortIconTransform = sorting?.includes('asc') ? 'rotate(-90deg)' : 'rotate(90deg)';
const sort = React.useCallback((field: TokensSortingField) => () => { const sort = React.useCallback((field: TokensSortingField) => {
const value = getNextSortValue(field)(sorting); const value = getNextSortValue(field)(sorting);
setSorting(value); setSorting(value);
}, [ sorting, setSorting ]); }, [ sorting, setSorting ]);
...@@ -41,24 +38,33 @@ const TokensTable = ({ items, page, isLoading, sorting, setSorting, top }: Props ...@@ -41,24 +38,33 @@ const TokensTable = ({ items, page, isLoading, sorting, setSorting, top }: Props
<TableHeaderSticky top={ top ?? ACTION_BAR_HEIGHT_DESKTOP }> <TableHeaderSticky top={ top ?? ACTION_BAR_HEIGHT_DESKTOP }>
<TableRow> <TableRow>
<TableColumnHeader w="50%">Token</TableColumnHeader> <TableColumnHeader w="50%">Token</TableColumnHeader>
<TableColumnHeader isNumeric w="15%"> <TableColumnHeaderSortable
<Link onClick={ sort('fiat_value') } display="flex" justifyContent="end"> isNumeric
{ sorting?.includes('fiat_value') && <IconSvg name="arrows/east-mini" boxSize={ 4 } transform={ sortIconTransform }/> } w="15%"
sortField="fiat_value"
sortValue={ sorting }
onSortToggle={ sort }
>
Price Price
</Link> </TableColumnHeaderSortable>
</TableColumnHeader> <TableColumnHeaderSortable
<TableColumnHeader isNumeric w="20%"> isNumeric
<Link onClick={ sort('circulating_market_cap') } display="flex" justifyContent="end"> w="20%"
{ sorting?.includes('circulating_market_cap') && <IconSvg name="arrows/east-mini" boxSize={ 4 } transform={ sortIconTransform }/> } sortField="circulating_market_cap"
sortValue={ sorting }
onSortToggle={ sort }
>
On-chain market cap On-chain market cap
</Link> </TableColumnHeaderSortable>
</TableColumnHeader> <TableColumnHeaderSortable
<TableColumnHeader isNumeric w="15%"> isNumeric
<Link onClick={ sort('holders_count') } display="flex" justifyContent="end"> w="15%"
{ sorting?.includes('holders_count') && <IconSvg name="arrows/east-mini" boxSize={ 4 } transform={ sortIconTransform }/> } sortField="holders_count"
sortValue={ sorting }
onSortToggle={ sort }
>
Holders Holders
</Link> </TableColumnHeaderSortable>
</TableColumnHeader>
</TableRow> </TableRow>
</TableHeaderSticky> </TableHeaderSticky>
<TableBody> <TableBody>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment