const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
searchBox: {
- paddingBottom: theme.spacing.unit * 2
+ paddingBottom: 0,
},
toolbar: {
- paddingTop: theme.spacing.unit,
- paddingRight: theme.spacing.unit * 2,
+ paddingTop: 0,
+ paddingRight: theme.spacing.unit,
},
footer: {
overflow: 'auto'
},
title: {
display: 'inline-block',
- paddingLeft: theme.spacing.unit * 3,
- paddingTop: theme.spacing.unit * 3,
+ paddingLeft: theme.spacing.unit * 2,
+ paddingTop: theme.spacing.unit * 2,
fontSize: '18px'
},
dataTable: {
},
headerMenu: {
float: 'right',
- display: 'inline-block'
+ display: 'inline-block',
}
});
fetchMode: DataTableFetchMode;
items: T[];
itemsAvailable: number;
- columns: DataColumns<T>;
+ columns: DataColumns<T, any>;
searchLabel?: string;
searchValue: string;
rowsPerPage: number;
}
interface DataExplorerActionProps<T> {
- onSetColumns: (columns: DataColumns<T>) => void;
+ onSetColumns: (columns: DataColumns<T, any>) => void;
onSearch: (value: string) => void;
onRowClick: (item: T) => void;
onRowDoubleClick: (item: T) => void;
- onColumnToggle: (column: DataColumn<T>) => void;
+ onColumnToggle: (column: DataColumn<T, any>) => void;
onContextMenu: (event: React.MouseEvent<HTMLElement>, item: T) => void;
- onSortToggle: (column: DataColumn<T>) => void;
- onFiltersChange: (filters: DataTableFilters, column: DataColumn<T>) => void;
+ onSortToggle: (column: DataColumn<T, any>) => void;
+ onFiltersChange: (filters: DataTableFilters, column: DataColumn<T, any>) => void;
onChangePage: (page: number) => void;
onChangeRowsPerPage: (rowsPerPage: number) => void;
onLoadMore: (page: number) => void;
paperKey, fetchMode, currentItemUuid, title,
doHidePanel, doMaximizePanel, doUnMaximizePanel, panelName, panelMaximized, elementPath
} = this.props;
-
return <Paper className={classes.root} {...paperProps} key={paperKey} data-cy={this.props["data-cy"]}>
<Grid container direction="column" wrap="nowrap" className={classes.container}>
<div>
(!hideColumnSelector || !hideSearchInput || !!actions) &&
<Grid className={classes.headerMenu} item xs>
<Toolbar className={classes.toolbar}>
- <Grid container justify="space-between" wrap="nowrap" alignItems="center">
- {!hideSearchInput && <div className={classes.searchBox}>
- {!hideSearchInput && <SearchInput
- label={searchLabel}
- value={searchValue}
- selfClearProp={currentItemUuid}
- onSearch={onSearch} />}
- </div>}
- {actions}
- {!hideColumnSelector && <ColumnSelector
- columns={columns}
- onColumnToggle={onColumnToggle} />}
- </Grid>
+ {!hideSearchInput && <div className={classes.searchBox}>
+ {!hideSearchInput && <SearchInput
+ label={searchLabel}
+ value={searchValue}
+ selfClearProp={''}
+ onSearch={onSearch} />}
+ </div>}
+ {actions}
+ {!hideColumnSelector && <ColumnSelector
+ columns={columns}
+ onColumnToggle={onColumnToggle} />}
{ doUnMaximizePanel && panelMaximized &&
<Tooltip title={`Unmaximize ${panelName || 'panel'}`} disableFocusListener>
<IconButton onClick={doUnMaximizePanel}><UnMaximizeIcon /></IconButton>
</Tooltip> }
{ doHidePanel &&
<Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
- <IconButton onClick={doHidePanel}><CloseIcon /></IconButton>
+ <IconButton disabled={panelMaximized} onClick={doHidePanel}><CloseIcon /></IconButton>
</Tooltip> }
</Toolbar>
</Grid>
</Tooltip>
</Grid>
- contextMenuColumn: DataColumn<any> = {
+ contextMenuColumn: DataColumn<any, any> = {
name: "Actions",
selected: true,
configurable: false,