Grid,
Paper,
StyleRulesCallback,
+ Tab,
+ Tabs,
Tooltip,
withStyles,
WithStyles
import { ReactNodeArray } from 'prop-types';
import classNames from 'classnames';
-type CssRules = 'root' | 'button' | 'buttonIcon' | 'content';
+type CssRules = 'root' | 'button' | 'buttonIcon' | 'content' | 'tabsWrapper' | 'tabsRoot' | 'tabs';
const styles: StyleRulesCallback<CssRules> = theme => ({
root: {
content: {
overflow: 'auto',
},
+ tabsWrapper: {
+ width: '100%',
+ },
+ tabsRoot: {
+ flexGrow: 1,
+ },
+ tabs: {
+ flexGrow: 1,
+ flexShrink: 1,
+ maxWidth: 'initial',
+ },
});
interface MPVHideablePanelDataProps {
}
interface MPVContainerDataProps {
panelStates?: MPVPanelState[];
+ mutuallyExclusive?: boolean;
}
type MPVContainerProps = MPVContainerDataProps & GridProps;
const [panelVisibility, setPanelVisibility] = useState<boolean[]>(initialVisibility);
const [previousPanelVisibility, setPreviousPanelVisibility] = useState<boolean[]>(initialVisibility);
const [highlightedPanel, setHighlightedPanel] = useState<number>(-1);
+ const currentSelectedPanel = panelVisibility.findIndex(Boolean);
const [selectedPanel, setSelectedPanel] = useState<number>(-1);
const panelRef = useRef<any>(null);
let panels: JSX.Element[] = [];
let buttons: JSX.Element[] = [];
+ let tabs: JSX.Element[] = [];
+ let buttonBar: JSX.Element = <></>;
if (isArray(children)) {
- for (let idx = 0; idx < children.length; idx++) {
- const showFn = (idx: number) => () => {
- setPreviousPanelVisibility(initialVisibility);
+ const showFn = (idx: number) => () => {
+ setPreviousPanelVisibility(initialVisibility);
+ if (props.mutuallyExclusive) {
+ // Hide all other panels
setPanelVisibility([
- ...panelVisibility.slice(0, idx),
+ ...(new Array(idx).fill(false)),
true,
- ...panelVisibility.slice(idx + 1)
+ ...(new Array(panelVisibility.length-(idx+1)).fill(false)),
]);
- setSelectedPanel(idx);
- };
- const hideFn = (idx: number) => () => {
- setPreviousPanelVisibility(initialVisibility);
+ } else {
setPanelVisibility([
...panelVisibility.slice(0, idx),
- false,
- ...panelVisibility.slice(idx + 1)
- ])
- };
- const maximizeFn = (idx: number) => () => {
- setPreviousPanelVisibility(panelVisibility);
- // Maximize X == hide all but X
- setPanelVisibility([
- ...panelVisibility.slice(0, idx).map(() => false),
true,
- ...panelVisibility.slice(idx + 1).map(() => false),
+ ...panelVisibility.slice(idx + 1)
]);
- };
- const unMaximizeFn = (idx: number) => () => {
- setPanelVisibility(previousPanelVisibility);
- setSelectedPanel(idx);
}
+ setSelectedPanel(idx);
+ };
+ const hideFn = (idx: number) => () => {
+ setPreviousPanelVisibility(initialVisibility);
+ setPanelVisibility([
+ ...panelVisibility.slice(0, idx),
+ false,
+ ...panelVisibility.slice(idx+1)
+ ])
+ };
+ const maximizeFn = (idx: number) => () => {
+ setPreviousPanelVisibility(panelVisibility);
+ // Maximize X == hide all but X
+ setPanelVisibility([
+ ...panelVisibility.slice(0, idx).map(() => false),
+ true,
+ ...panelVisibility.slice(idx+1).map(() => false),
+ ]);
+ };
+ const unMaximizeFn = (idx: number) => () => {
+ setPanelVisibility(previousPanelVisibility);
+ setSelectedPanel(idx);
+ }
+ for (let idx = 0; idx < children.length; idx++) {
const panelName = panelStates === undefined
? `Panel ${idx + 1}`
: (panelStates[idx] && panelStates[idx].name) || `Panel ${idx + 1}`;
</Tooltip>
];
+ tabs = [
+ ...tabs,
+ <>{panelName}</>
+ ];
+
const aPanel =
<MPVHideablePanel key={idx} visible={panelVisibility[idx]} name={panelName}
panelRef={(idx === selectedPanel) ? panelRef : undefined}
</MPVHideablePanel>;
panels = [...panels, aPanel];
};
+
+ buttonBar = props.mutuallyExclusive ?
+ <Paper className={classes.tabsWrapper}>
+ <Tabs className={classes.tabsRoot} value={currentSelectedPanel} onChange={(e, val) => showFn(val)()}>
+ {tabs.map((tgl, idx) => <Tab className={classes.tabs} key={idx} label={tgl} />)}
+ </Tabs>
+ </Paper> :
+ <>
+ {buttons.map((tgl, idx) => <Grid item key={idx}>{tgl}</Grid>)}
+ </>;
};
- return <Grid container {...props} className={classes.root}>
+ return <Grid container {...props} className={classNames(classes.root, props.className)}>
<Grid container item direction="row">
- {buttons.map((tgl, idx) => <Grid item key={idx}>{tgl}</Grid>)}
+ {buttonBar}
</Grid>
<Grid container item {...props} xs className={classes.content}
onScroll={() => setSelectedPanel(-1)}>
import { ProjectResource } from 'models/project';
import { deselectAllOthers, toggleOne } from 'store/multiselect/multiselect-actions';
import { DetailsCardRoot } from 'views-components/details-card/details-card-root';
+import { MPVContainer, MPVPanelContent, MPVPanelState } from 'components/multi-panel-view/multi-panel-view';
import { PROJECT_PANEL_ID } from 'store/project-panel/project-panel-action-bind';
-type CssRules = 'root' | 'button' ;
+type CssRules = 'root' | 'button' | 'mpvRoot' | 'dataExplorer';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
button: {
marginLeft: theme.spacing.unit,
},
+ mpvRoot: {
+ flexGrow: 1,
+ },
+ dataExplorer: {
+ height: "100%",
+ },
});
export enum ProjectPanelColumnNames {
const DEFAULT_VIEW_MESSAGES = ['Your project is empty.', 'Please create a project or create a collection and upload a data.'];
+const panelsData: MPVPanelState[] = [
+ { name: "Subprojects", visible: true },
+];
+
interface ProjectPanelDataProps {
currentItemId: string;
resources: ResourcesState;
const { classes } = this.props;
return <div data-cy='project-panel' className={classes.root}>
<DetailsCardRoot />
- <DataExplorer
- id={PROJECT_PANEL_ID}
- onRowClick={this.handleRowClick}
- onRowDoubleClick={this.handleRowDoubleClick}
- onContextMenu={this.handleContextMenu}
- contextMenuColumn={true}
- defaultViewIcon={ProjectIcon}
- defaultViewMessages={DEFAULT_VIEW_MESSAGES}
- />
+ <MPVContainer
+ className={classes.mpvRoot}
+ spacing={8}
+ panelStates={panelsData}
+ mutuallyExclusive
+ justify-content="flex-start"
+ direction="column"
+ wrap="nowrap">
+ <MPVPanelContent
+ forwardProps
+ xs="auto"
+ data-cy="process-details"
+ className={classes.dataExplorer}>
+ <DataExplorer
+ id={PROJECT_PANEL_ID}
+ onRowClick={this.handleRowClick}
+ onRowDoubleClick={this.handleRowDoubleClick}
+ onContextMenu={this.handleContextMenu}
+ contextMenuColumn={true}
+ defaultViewIcon={ProjectIcon}
+ defaultViewMessages={DEFAULT_VIEW_MESSAGES}
+ />
+ </MPVPanelContent>
+ </MPVContainer>
</div>
}