status-im/safe-react
2
0
Fork 0
mirror of https://github.com/status-im/safe-react.git synced 2025-02-17 12:07:09 +00:00
Code Issues Projects Releases Wiki Activity

Fix style showing spinner and empty table while it is fetching token's info

Browse Source
This commit is contained in:
apanizo 2018-11-05 09:45:40 +01:00
parent 24dfd80122
commit 99b3eb8f04
1 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/Table/index.jsx
View File

@ -1,11 +1,14 @@
// @flow // @flow
import * as React from 'react' import * as React from 'react'
import classNames from 'classnames'
import { List } from 'immutable' import { List } from 'immutable'
import Row from '~/components/layout/Row'
import Table from '@material-ui/core/Table' import Table from '@material-ui/core/Table'
import TableBody from '@material-ui/core/TableBody' import TableBody from '@material-ui/core/TableBody'
import TableRow from '@material-ui/core/TableRow' import TableRow from '@material-ui/core/TableRow'
import TableCell from '@material-ui/core/TableCell' import TableCell from '@material-ui/core/TableCell'
import { withStyles } from '@material-ui/core/styles' import { withStyles } from '@material-ui/core/styles'
import CircularProgress from '@material-ui/core/CircularProgress'
import TablePagination from '@material-ui/core/TablePagination' import TablePagination from '@material-ui/core/TablePagination'
import { type Order, stableSort, getSorting } from '~/components/Table/sorting' import { type Order, stableSort, getSorting } from '~/components/Table/sorting'
import TableHead, { type Column } from '~/components/Table/TableHead' import TableHead, { type Column } from '~/components/Table/TableHead'
@ -48,8 +51,10 @@ const styles = {
boxShadow: '0 2px 4px 0 rgba(74, 85, 121, 0.5)', boxShadow: '0 2px 4px 0 rgba(74, 85, 121, 0.5)',
marginBottom: xl, marginBottom: xl,
}, },
empty: { loader: {
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
}, },
} }
@ -78,6 +83,10 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
})) }))
} }
getEmptyStyle = (emptyRows: number) => ({
height: FIXED_HEIGHT * emptyRows,
})
handleChangePage = (e: SyntheticInputEvent<HTMLInputElement>, page: number) => { handleChangePage = (e: SyntheticInputEvent<HTMLInputElement>, page: number) => {
this.setState({ page }) this.setState({ page })
} }
@ -114,28 +123,33 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
.slice(page * rowsPerPage, ((page * rowsPerPage) + rowsPerPage)) .slice(page * rowsPerPage, ((page * rowsPerPage) + rowsPerPage))
const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - (page * rowsPerPage)) const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - (page * rowsPerPage))
const emptyStyle = { const isEmpty = size === 0
height: FIXED_HEIGHT * emptyRows,
}
return ( return (
<React.Fragment> <React.Fragment>
<Table aria-labelledby={label} className={classes.root}> { !isEmpty &&
<TableHead <Table aria-labelledby={label} className={classes.root}>
columns={columns} <TableHead
order={order} columns={columns}
orderBy={orderBy} order={order}
onSort={this.onSort} orderBy={orderBy}
/> onSort={this.onSort}
<TableBody> />
{ children(sortedData) } <TableBody>
{ emptyRows > 0 && { children(sortedData) }
<TableRow style={emptyStyle}> { emptyRows > 0 &&
<TableCell colSpan={4} /> <TableRow style={this.getEmptyStyle(emptyRows)}>
</TableRow> <TableCell colSpan={4} />
} </TableRow>
</TableBody> }
</Table> </TableBody>
</Table>
}
{ isEmpty &&
<Row className={classNames(classes.loader, classes.root)} style={this.getEmptyStyle(emptyRows + 1)}>
<CircularProgress size={60} />
</Row>
}
<TablePagination <TablePagination
component="div" component="div"
count={size} count={size}