import { EmptyDetails } from "./empty-details";
import { DetailsData } from "./details-data";
import { DetailsResource } from "~/models/details";
+import { getResource } from '../../store/resources/resources';
-type CssRules = 'drawerPaper' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'headerTitle' | 'tabContainer';
+type CssRules = 'root' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'headerTitle' | 'tabContainer';
const drawerWidth = 320;
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- container: {
+ root: {
width: 0,
- position: 'relative',
- height: 'auto',
+ overflowX: 'hidden',
transition: 'width 0.5s ease',
- '&$opened': {
- width: drawerWidth
- }
+ background: theme.palette.background.paper,
+ borderLeft: `1px solid ${theme.palette.divider}`,
+ height: '100%',
+ },
+ opened: {
+ width: drawerWidth,
+ },
+ container: {
+ width: drawerWidth,
},
- opened: {},
drawerPaper: {
position: 'relative',
width: drawerWidth
fontSize: '2.125rem'
},
headerTitle: {
- wordBreak: 'break-all'
+ overflowWrap: 'break-word',
+ wordWrap: 'break-word'
},
tabContainer: {
padding: theme.spacing.unit * 3
}
};
-const mapStateToProps = ({ detailsPanel }: RootState) => ({
- isOpened: detailsPanel.isOpened,
- item: getItem(detailsPanel.item as DetailsResource)
-});
+const mapStateToProps = ({ detailsPanel, resources }: RootState) => {
+ const resource = getResource(detailsPanel.resourceUuid)(resources) as DetailsResource;
+ return {
+ isOpened: detailsPanel.isOpened,
+ item: getItem(resource)
+ };
+};
const mapDispatchToProps = (dispatch: Dispatch) => ({
onCloseDrawer: () => {
const { classes, onCloseDrawer, isOpened, item } = this.props;
const { tabsValue } = this.state;
return (
- <Typography component="div"
- className={classnames([classes.container, { [classes.opened]: isOpened }])}>
- <Drawer variant="permanent" anchor="right" classes={{ paper: classes.drawerPaper }}>
- <Typography component="div" className={classes.headerContainer}>
+ <div className={classnames([classes.root, { [classes.opened]: isOpened }])}>
+ <div className={classes.container}>
+ <div className={classes.headerContainer}>
<Grid container alignItems='center' justify='space-around'>
<Grid item xs={2}>
{item.getIcon(classes.headerIcon)}
</Grid>
<Grid item>
<IconButton color="inherit" onClick={onCloseDrawer}>
- {<CloseIcon/>}
+ {<CloseIcon />}
</IconButton>
</Grid>
</Grid>
- </Typography>
+ </div>
<Tabs value={tabsValue} onChange={this.handleChange}>
- <Tab disableRipple label="Details"/>
- <Tab disableRipple label="Activity" disabled/>
+ <Tab disableRipple label="Details" />
+ <Tab disableRipple label="Activity" disabled />
</Tabs>
{tabsValue === 0 && this.renderTabContainer(
<Grid container direction="column">
</Grid>
)}
{tabsValue === 1 && this.renderTabContainer(
- <Grid container direction="column"/>
+ <Grid container direction="column" />
)}
- </Drawer>
- </Typography>
+ </div>
+ </div>
);
}
}