// SPDX-License-Identifier: AGPL-3.0
import React from 'react';
-import { Stepper, Step, StepLabel, StepContent } from '@material-ui/core';
+import { Stepper, Step, StepLabel, StepContent, StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core';
import { RunProcessFirstStepDataProps, RunProcessFirstStepActionProps, RunProcessFirstStep } from 'views/run-process-panel/run-process-first-step';
import { RunProcessSecondStepForm } from './run-process-second-step';
type RunProcessPanelRootProps = RunProcessPanelRootDataProps & RunProcessPanelRootActionProps;
-export const RunProcessPanelRoot = ({ runProcess, currentStep, onSearch, onSetStep, onSetWorkflow, workflows, selectedWorkflow }: RunProcessPanelRootProps) =>
- <Stepper activeStep={currentStep} orientation="vertical" elevation={2}>
- <Step>
- <StepLabel>Choose a workflow</StepLabel>
- <StepContent>
- <RunProcessFirstStep
- workflows={workflows}
- selectedWorkflow={selectedWorkflow}
- onSearch={onSearch}
- onSetStep={onSetStep}
- onSetWorkflow={onSetWorkflow} />
- </StepContent>
- </Step>
- <Step>
- <StepLabel>Select inputs</StepLabel>
- <StepContent>
- <RunProcessSecondStepForm
- goBack={() => onSetStep(0)}
- runProcess={runProcess} />
- </StepContent>
- </Step>
- </Stepper>;
\ No newline at end of file
+type CssRules = 'stepper';
+
+const styles: StyleRulesCallback<CssRules> = theme => ({
+ stepper: {
+ overflow: "scroll",
+ }
+});
+
+export const RunProcessPanelRoot = withStyles(styles)(
+ ({ runProcess, currentStep, onSearch, onSetStep, onSetWorkflow, workflows, selectedWorkflow, classes }: WithStyles<CssRules> & RunProcessPanelRootProps) =>
+ <Stepper activeStep={currentStep} orientation="vertical" elevation={2} className={classes.stepper}>
+ <Step>
+ <StepLabel>Choose a workflow</StepLabel>
+ <StepContent>
+ <RunProcessFirstStep
+ workflows={workflows}
+ selectedWorkflow={selectedWorkflow}
+ onSearch={onSearch}
+ onSetStep={onSetStep}
+ onSetWorkflow={onSetWorkflow} />
+ </StepContent>
+ </Step>
+ <Step>
+ <StepLabel>Select inputs</StepLabel>
+ <StepContent>
+ <RunProcessSecondStepForm
+ goBack={() => onSetStep(0)}
+ runProcess={runProcess} />
+ </StepContent>
+ </Step>
+ </Stepper>);