Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>
//
// SPDX-License-Identifier: AGPL-3.0
//
// SPDX-License-Identifier: AGPL-3.0
-import React, { ReactNode, useEffect, useState } from "react";
+import React, { CSSProperties, ReactElement, useEffect, useState } from "react";
import { Tabs, Tab } from "@material-ui/core";
import { TabsProps } from "@material-ui/core/Tabs";
import { Tabs, Tab } from "@material-ui/core";
import { TabsProps } from "@material-ui/core/Tabs";
+interface ComponentWithHidden {
+ styles: CSSProperties;
+ hidden: boolean;
+};
+
export type TabData = {
show: boolean;
label: string;
export type TabData = {
show: boolean;
label: string;
+ content: ReactElement<ComponentWithHidden>;
};
type ConditionalTabsProps = {
};
type ConditionalTabsProps = {
export const ConditionalTabs = (props: Omit<TabsProps, 'value' | 'onChange'> & ConditionalTabsProps) => {
const [tabState, setTabState] = useState(0);
const visibleTabs = props.tabs.filter(tab => tab.show);
export const ConditionalTabs = (props: Omit<TabsProps, 'value' | 'onChange'> & ConditionalTabsProps) => {
const [tabState, setTabState] = useState(0);
const visibleTabs = props.tabs.filter(tab => tab.show);
- const activeTab = visibleTabs[tabState];
const visibleTabNames = visibleTabs.map(tab => tab.label).join();
const handleTabChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
const visibleTabNames = visibleTabs.map(tab => tab.label).join();
const handleTabChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
onChange={handleTabChange} >
{visibleTabs.map(tab => <Tab key={tab.label} label={tab.label} />)}
</Tabs>
onChange={handleTabChange} >
{visibleTabs.map(tab => <Tab key={tab.label} label={tab.label} />)}
</Tabs>
- {activeTab && activeTab.content}
+
+ {visibleTabs.map((tab, i) => (
+ React.cloneElement(tab.content, {hidden: i !== tabState})
+ ))}
interface ProcessIOPreviewDataProps {
data: ProcessIOParameter[];
valueLabel: string;
interface ProcessIOPreviewDataProps {
data: ProcessIOParameter[];
valueLabel: string;
}
type ProcessIOPreviewProps = ProcessIOPreviewDataProps & WithStyles<CssRules>;
const ProcessIOPreview = memo(
}
type ProcessIOPreviewProps = ProcessIOPreviewDataProps & WithStyles<CssRules>;
const ProcessIOPreview = memo(
- withStyles(styles)(({ data, valueLabel, classes }: ProcessIOPreviewProps) => {
+ withStyles(styles)(({ data, valueLabel, hidden, classes }: ProcessIOPreviewProps) => {
const showLabel = data.some((param: ProcessIOParameter) => param.label);
const hasMoreValues = (index: number) => (
const showLabel = data.some((param: ProcessIOParameter) => param.label);
const hasMoreValues = (index: number) => (
- return <div className={classes.tableWrapper}>
+ return <div className={classes.tableWrapper} hidden={hidden}>
<Table
className={classes.paramTableRoot}
aria-label="Process IO Preview"
<Table
className={classes.paramTableRoot}
aria-label="Process IO Preview"
interface ProcessIORawDataProps {
data: ProcessIOParameter[];
interface ProcessIORawDataProps {
data: ProcessIOParameter[];
-const ProcessIORaw = withStyles(styles)(({ data, classes }: ProcessIORawDataProps & WithStyles<CssRules>) => (
- <div className={classes.jsonWrapper}>
+const ProcessIORaw = withStyles(styles)(({ data, hidden, classes }: ProcessIORawDataProps & WithStyles<CssRules>) => (
+ <div className={classes.jsonWrapper} hidden={hidden}>
<Paper elevation={0} style={{minWidth: "100%", height: "100%"}}>
<DefaultVirtualCodeSnippet
lines={JSON.stringify(data, null, 2).split('\n')}
<Paper elevation={0} style={{minWidth: "100%", height: "100%"}}>
<DefaultVirtualCodeSnippet
lines={JSON.stringify(data, null, 2).split('\n')}
interface ProcessInputMountsDataProps {
mounts: InputCollectionMount[];
interface ProcessInputMountsDataProps {
mounts: InputCollectionMount[];
}
type ProcessInputMountsProps = ProcessInputMountsDataProps & WithStyles<CssRules>;
}
type ProcessInputMountsProps = ProcessInputMountsDataProps & WithStyles<CssRules>;
const ProcessInputMounts = withStyles(styles)(
connect((state: RootState) => ({
auth: state.auth,
const ProcessInputMounts = withStyles(styles)(
connect((state: RootState) => ({
auth: state.auth,
- }))(({ mounts, classes, auth }: ProcessInputMountsProps & { auth: AuthState }) => (
+ }))(({ mounts, hidden, classes, auth }: ProcessInputMountsProps & { auth: AuthState }) => (
<Table
className={classes.mountsTableRoot}
aria-label="Process Input Mounts"
<Table
className={classes.mountsTableRoot}
aria-label="Process Input Mounts"
navigateTo: uuid => dispatch<any>(navigateTo(uuid)),
});
navigateTo: uuid => dispatch<any>(navigateTo(uuid)),
});
-type ProcessOutputCollectionProps = {outputUuid: string | undefined} & ProcessOutputCollectionActionProps & WithStyles<CssRules>;
+type ProcessOutputCollectionProps = {outputUuid: string | undefined, hidden?: boolean} & ProcessOutputCollectionActionProps & WithStyles<CssRules>;
-const ProcessOutputCollection = withStyles(styles)(connect(null, mapNavigateToProps)(({ outputUuid, navigateTo, classes }: ProcessOutputCollectionProps) => (
- <div className={classes.tableWrapper}>
+const ProcessOutputCollection = withStyles(styles)(connect(null, mapNavigateToProps)(({ outputUuid, hidden, navigateTo, classes }: ProcessOutputCollectionProps) => (
+ <div className={classes.tableWrapper} hidden={hidden}>
<>
{outputUuid && (
<Typography className={classes.collectionLink}>
<>
{outputUuid && (
<Typography className={classes.collectionLink}>