allow passing defaultOrder prop to table component

This commit is contained in:
mmv 2019-06-19 18:35:10 +04:00
parent f126071669
commit 654ff201b9
3 changed files with 18 additions and 6 deletions

View File

@ -21,6 +21,7 @@ type Props<K> = {
children: Function, children: Function,
size: number, size: number,
defaultFixed?: boolean, defaultFixed?: boolean,
defaultOrder?: 'desc' | 'asc',
} }
type State = { type State = {
@ -61,7 +62,7 @@ const FIXED_HEIGHT = 49
class GnoTable<K> extends React.Component<Props<K>, State> { class GnoTable<K> extends React.Component<Props<K>, State> {
state = { state = {
page: 0, page: 0,
order: 'asc', order: undefined,
orderBy: undefined, orderBy: undefined,
fixed: undefined, fixed: undefined,
orderProp: false, orderProp: false,
@ -70,9 +71,14 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
onSort = (newOrderBy: string, orderProp: boolean) => { onSort = (newOrderBy: string, orderProp: boolean) => {
const { order, orderBy } = this.state const { order, orderBy } = this.state
const { defaultOrder } = this.props
let newOrder = 'desc' let newOrder = 'desc'
if (orderBy === newOrderBy && order === 'desc') { // if table was previously sorted by the user
if (order && orderBy === newOrderBy && order === 'desc') {
newOrder = 'asc'
} else if (!order && defaultOrder === 'desc') {
// if it was not sorted and defaultOrder is used
newOrder = 'asc' newOrder = 'asc'
} }
@ -99,12 +105,13 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
render() { render() {
const { const {
data, label, columns, classes, children, size, defaultOrderBy, defaultFixed, data, label, columns, classes, children, size, defaultOrderBy, defaultOrder, defaultFixed,
} = this.props } = this.props
const { const {
order, orderBy, page, orderProp, rowsPerPage, fixed, order, orderBy, page, orderProp, rowsPerPage, fixed,
} = this.state } = this.state
const orderByParam = orderBy || defaultOrderBy const orderByParam = orderBy || defaultOrderBy
const orderParam = order || defaultOrder
const fixedParam = typeof fixed !== 'undefined' ? fixed : !!defaultFixed const fixedParam = typeof fixed !== 'undefined' ? fixed : !!defaultFixed
const backProps = { const backProps = {
@ -121,7 +128,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
input: classes.white, input: classes.white,
} }
const sortedData = stableSort(data, getSorting(order, orderByParam, orderProp), fixedParam).slice( const sortedData = stableSort(data, getSorting(orderParam, orderByParam, orderProp), fixedParam).slice(
page * rowsPerPage, page * rowsPerPage,
page * rowsPerPage + rowsPerPage, page * rowsPerPage + rowsPerPage,
) )
@ -133,7 +140,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
<React.Fragment> <React.Fragment>
{!isEmpty && ( {!isEmpty && (
<Table aria-labelledby={label} className={classes.root}> <Table aria-labelledby={label} className={classes.root}>
<TableHead columns={columns} order={order} orderBy={orderByParam} onSort={this.onSort} /> <TableHead columns={columns} order={orderParam} orderBy={orderByParam} onSort={this.onSort} />
<TableBody>{children(sortedData)}</TableBody> <TableBody>{children(sortedData)}</TableBody>
</Table> </Table>
)} )}
@ -159,4 +166,8 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
} }
} }
GnoTable.defaultProps = {
defaultOrder: 'asc'
}
export default withStyles(styles)(GnoTable) export default withStyles(styles)(GnoTable)

View File

@ -79,7 +79,7 @@ export const generateColumns = () => {
id: TX_TABLE_STATUS_ID, id: TX_TABLE_STATUS_ID,
order: false, order: false,
disablePadding: false, disablePadding: false,
label: '', label: 'Status',
custom: true, custom: true,
} }

View File

@ -51,6 +51,7 @@ class Balances extends React.Component<Props, State> {
<Table <Table
label="Transactions" label="Transactions"
defaultOrderBy={TX_TABLE_NONCE_ID} defaultOrderBy={TX_TABLE_NONCE_ID}
defaultOrder="desc"
columns={columns} columns={columns}
data={filteredData} data={filteredData}
size={filteredData.size} size={filteredData.size}