projects
/
arvados-workbench2.git
/ blobdiff
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
18207: Added common icon and removed code duplication
[arvados-workbench2.git]
/
src
/
components
/
data-table
/
data-table.tsx
diff --git
a/src/components/data-table/data-table.tsx
b/src/components/data-table/data-table.tsx
index de52d365030dfdc7a48a47bb2f6f52cd31fade51..3646fc8fa2a1aef00e6903c28ee8088651e9bcf2 100644
(file)
--- a/
src/components/data-table/data-table.tsx
+++ b/
src/components/data-table/data-table.tsx
@@
-10,6
+10,7
@@
import { DataTableDefaultView } from '../data-table-default-view/data-table-defa
import { DataTableFilters } from '../data-table-filters/data-table-filters-tree';
import { DataTableFiltersPopover } from '../data-table-filters/data-table-filters-popover';
import { countNodes } from 'models/tree';
import { DataTableFilters } from '../data-table-filters/data-table-filters-tree';
import { DataTableFiltersPopover } from '../data-table-filters/data-table-filters-popover';
import { countNodes } from 'models/tree';
+import { ProjectIcon } from 'components/icon/icon';
import { SvgIconProps } from '@material-ui/core/SvgIcon';
import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
import { SvgIconProps } from '@material-ui/core/SvgIcon';
import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
@@
-35,7
+36,7
@@
export interface DataTableDataProps<T> {
currentRoute?: string;
}
currentRoute?: string;
}
-type CssRules = "tableBody" | "root" | "content" | "noItemsInfo" | 'tableCell' | 'arrow' | 'arrowButton' | 'tableCellWorkflows';
+type CssRules = "tableBody" | "root" | "content" | "noItemsInfo" | 'tableCell' | 'arrow' | 'arrowButton' | 'tableCellWorkflows'
| 'loader'
;
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
root: {
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
root: {
@@
-48,6
+49,11
@@
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
tableBody: {
background: theme.palette.background.paper
},
tableBody: {
background: theme.palette.background.paper
},
+ loader: {
+ left: '50%',
+ marginLeft: '-84px',
+ position: 'absolute'
+ },
noItemsInfo: {
textAlign: "center",
padding: theme.spacing.unit
noItemsInfo: {
textAlign: "center",
padding: theme.spacing.unit
@@
-90,7
+96,14
@@
export const DataTable = withStyles(styles)(
</TableRow>
</TableHead>
<TableBody className={classes.tableBody}>
</TableRow>
</TableHead>
<TableBody className={classes.tableBody}>
- {items.map(this.renderBodyRow)}
+ {
+ this.props.working ?
+ <div className={classes.loader}>
+ <DataTableDefaultView
+ icon={ProjectIcon}
+ messages={['Loading data, please wait.']} />
+ </div> : items.map(this.renderBodyRow)
+ }
</TableBody>
</Table>
{items.length === 0 && this.props.working !== undefined && !this.props.working && this.renderNoItemsPlaceholder()}
</TableBody>
</Table>
{items.length === 0 && this.props.working !== undefined && !this.props.working && this.renderNoItemsPlaceholder()}