Modify Stepper to have it working vertically

This commit is contained in:
apanizo 2018-09-07 15:48:41 +02:00
parent 1b1a140e72
commit 0c29e5d3a8
2 changed files with 26 additions and 25 deletions

View File

@ -2,6 +2,7 @@
import Stepper from '@material-ui/core/Stepper'
import FormStep from '@material-ui/core/Step'
import StepLabel from '@material-ui/core/StepLabel'
import StepContent from '@material-ui/core/StepContent'
import { withStyles } from '@material-ui/core/styles'
import * as React from 'react'
import GnoForm from '~/components/forms/GnoForm'
@ -123,24 +124,22 @@ class GnoStepper extends React.PureComponent<Props, State> {
return (
<React.Fragment>
<Stepper classes={{ root: classes.root }} activeStep={page} alternativeLabel>
{steps.map(label => (
<FormStep key={label}>
<StepLabel>{label}</StepLabel>
</FormStep>
))}
</Stepper>
<GnoForm
onSubmit={this.handleSubmit}
initialValues={values}
padding={15}
validation={this.validate}
render={activePage}
>
{(submitting: boolean, validating: boolean) => {
{(submitting: boolean, validating: boolean, ...rest: any) => {
const disabled = disabledWhenValidating ? submitting || validating : submitting
return (
<Stepper classes={{ root: classes.root }} activeStep={page} orientation="vertical">
{steps.map(label => (
<FormStep key={label}>
<StepLabel>{label}</StepLabel>
<StepContent>
{activePage(rest)}
<Row align="end" margin="lg" grow>
<Col xs={12} center="xs">
<Controls
@ -153,6 +152,10 @@ class GnoStepper extends React.PureComponent<Props, State> {
/>
</Col>
</Row>
</StepContent>
</FormStep>
))}
</Stepper>
)
}}
</GnoForm>

View File

@ -15,7 +15,6 @@ type Props = {
padding: number,
validation?: (values: Object) => Object | Promise<Object>,
initialValues?: Object,
render: Function,
}
const stylesBasedOn = (padding: number): $Shape<CSSStyleDeclaration> => ({
@ -26,7 +25,7 @@ const stylesBasedOn = (padding: number): $Shape<CSSStyleDeclaration> => ({
})
const GnoForm = ({
onSubmit, validation, initialValues, children, padding, render,
onSubmit, validation, initialValues, children, padding,
}: Props) => (
<Form
validate={validation}
@ -34,8 +33,7 @@ const GnoForm = ({
initialValues={initialValues}
render={({ handleSubmit, ...rest }) => (
<form onSubmit={handleSubmit} style={stylesBasedOn(padding)}>
{render(rest)}
{children(rest.submitting, rest.validating)}
{children(rest.submitting, rest.validating, rest)}
</form>
)}
/>