-import { connect, Dispatch } from 'react-redux';
-import { RootState } from '../../store/store';
-import actions from "../../store/details-panel/details-panel-action";
-import { ProjectResource } from '../../models/project';
-import { CollectionResource } from '../../models/collection';
-import { CloseIcon } from '../../components/icon/icon';
-import { ProcessResource } from '../../models/process';
-import DetailsPanelFactory from '../../components/details-panel-factory/details-panel-factory';
-import AbstractItem from '../../components/details-panel-factory/items/abstract-item';
-import { EmptyResource } from '../../models/empty';
-
-export interface DetailsPanelDataProps {
- onCloseDrawer: () => void;
- isOpened: boolean;
- item: AbstractItem;
-}
-
-type DetailsPanelProps = DetailsPanelDataProps & WithStyles<CssRules>;
-
-class DetailsPanel extends React.Component<DetailsPanelProps, {}> {
- state = {
- tabsValue: 0
- };
-
- handleChange = (event: any, value: boolean) => {
- this.setState({ tabsValue: value });
- }
-
- renderTabContainer = (children: React.ReactElement<any>) =>
- <Typography className={this.props.classes.tabContainer} component="div">
- {children}
- </Typography>
-
- render() {
- 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}>
- <Grid container alignItems='center' justify='space-around'>
- <Grid item xs={2}>
- {item.getIcon(classes.headerIcon)}
- </Grid>
- <Grid item xs={8}>
- <Typography variant="title">
- {item.getTitle()}
- </Typography>
- </Grid>
- <Grid item>
- <IconButton color="inherit" onClick={onCloseDrawer}>
- {<CloseIcon />}
- </IconButton>
- </Grid>
- </Grid>
- </Typography>
- <Tabs value={tabsValue} onChange={this.handleChange}>
- <Tab disableRipple label="Details" />
- <Tab disableRipple label="Activity" disabled />
- </Tabs>
- {tabsValue === 0 && this.renderTabContainer(
- <Grid container direction="column">
- {item.buildDetails()}
- </Grid>
- )}
- {tabsValue === 1 && this.renderTabContainer(
- <Grid container direction="column" />
- )}
- </Drawer>
- </Typography>
- );
- }
-
-}
-
-type CssRules = 'drawerPaper' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'tabContainer';
-
-const drawerWidth = 320;
+import { connect } from 'react-redux';
+import { RootState } from '~/store/store';
+import { CloseIcon } from '~/components/icon/icon';
+import { EmptyResource } from '~/models/empty';
+import { Dispatch } from "redux";
+import { ResourceKind } from "~/models/resource";
+import { ProjectDetails } from "./project-details";
+import { CollectionDetails } from "./collection-details";
+import { ProcessDetails } from "./process-details";
+import { EmptyDetails } from "./empty-details";
+import { DetailsData } from "./details-data";
+import { DetailsResource } from "~/models/details";
+import { getResource } from '~/store/resources/resources';
+import { ResourceData } from "~/store/resources-data/resources-data-reducer";
+import { getResourceData } from "~/store/resources-data/resources-data";
+import { toggleDetailsPanel, SLIDE_TIMEOUT } from '~/store/details-panel/details-panel-action';
+import { FileDetails } from '~/views-components/details-panel/file-details';
+import { getNode } from '~/models/tree';
+
+type CssRules = 'root' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'tabContainer';
+
+const DRAWER_WIDTH = 320;