-import { connect, Dispatch } from 'react-redux';
-import EmptyState from '../../components/empty-state/empty-state';
-import IconBase from '../../components/icon/icon';
-import { RootState } from '../../store/store';
-import actions from "../../store/details-panel/details-panel-action";
-import { Resource } from '../../common/api/common-resource-service';
-import { ResourceKind } from '../../models/kinds';
-import { ProjectResource } from '../../models/project';
-import { CollectionResource } from '../../models/collection';
-
-export interface DetailsPanelDataProps {
- onCloseDrawer: () => void;
- isOpened: boolean;
- header: React.ReactElement<any>;
- renderDetails?: React.ComponentType<{}>;
- renderActivity?: React.ComponentType<{}>;
-}
-
-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, header, renderDetails, renderActivity } = 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'>
- {header}
- <IconButton color="inherit" onClick={onCloseDrawer}>
- <IconBase icon='close' />
- </IconButton>
- </Grid>
- </Typography>
- <Tabs value={tabsValue} onChange={this.handleChange}>
- <Tab disableRipple label="Details" />
- <Tab disableRipple label="Activity" />
- </Tabs>
- {tabsValue === 0 && this.renderTabContainer(
- <Grid container direction="column">
- {renderDetails}
- <EmptyState icon='announcement'
- message='Select a file or folder to view its details.' />
- <Attribute label='Type' value='Process' />
- <Attribute label='Size' value='---' />
- <Attribute label="Location">
- <IconBase icon='folder' />
- Projects
- </Attribute>
- <Attribute label='Outputs' link='http://www.google.pl' value='New output as link' />
- <Attribute label='Owner' value='me' />
- </Grid>
- )}
- {tabsValue === 1 && this.renderTabContainer(
- <Grid container direction="column">
- {renderActivity}
- <EmptyState icon='announcement' message='Select a file or folder to view its details.' />
- </Grid>
- )}
- </Drawer>
- </Typography>
- );
- }
-
-}
-
-type CssRules = 'drawerPaper' | 'container' | 'opened' | 'headerContainer' | 'tabContainer';
-
-const drawerWidth = 320;
+import { connect } from 'react-redux';
+import { RootState } from '~/store/store';
+import { detailsPanelActions } from "~/store/details-panel/details-panel-action";
+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';
+
+type CssRules = 'root' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'tabContainer';
+
+const DRAWER_WIDTH = 320;
+const SLIDE_TIMEOUT = 500;