Modify Stepper to have it working vertically
This commit is contained in:
parent
1b1a140e72
commit
0c29e5d3a8
|
@ -2,6 +2,7 @@
|
||||||
import Stepper from '@material-ui/core/Stepper'
|
import Stepper from '@material-ui/core/Stepper'
|
||||||
import FormStep from '@material-ui/core/Step'
|
import FormStep from '@material-ui/core/Step'
|
||||||
import StepLabel from '@material-ui/core/StepLabel'
|
import StepLabel from '@material-ui/core/StepLabel'
|
||||||
|
import StepContent from '@material-ui/core/StepContent'
|
||||||
import { withStyles } from '@material-ui/core/styles'
|
import { withStyles } from '@material-ui/core/styles'
|
||||||
import * as React from 'react'
|
import * as React from 'react'
|
||||||
import GnoForm from '~/components/forms/GnoForm'
|
import GnoForm from '~/components/forms/GnoForm'
|
||||||
|
@ -123,36 +124,38 @@ class GnoStepper extends React.PureComponent<Props, State> {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<Stepper classes={{ root: classes.root }} activeStep={page} alternativeLabel>
|
|
||||||
{steps.map(label => (
|
|
||||||
<FormStep key={label}>
|
|
||||||
<StepLabel>{label}</StepLabel>
|
|
||||||
</FormStep>
|
|
||||||
))}
|
|
||||||
</Stepper>
|
|
||||||
<GnoForm
|
<GnoForm
|
||||||
onSubmit={this.handleSubmit}
|
onSubmit={this.handleSubmit}
|
||||||
initialValues={values}
|
initialValues={values}
|
||||||
padding={15}
|
padding={15}
|
||||||
validation={this.validate}
|
validation={this.validate}
|
||||||
render={activePage}
|
|
||||||
>
|
>
|
||||||
{(submitting: boolean, validating: boolean) => {
|
{(submitting: boolean, validating: boolean, ...rest: any) => {
|
||||||
const disabled = disabledWhenValidating ? submitting || validating : submitting
|
const disabled = disabledWhenValidating ? submitting || validating : submitting
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Row align="end" margin="lg" grow>
|
<Stepper classes={{ root: classes.root }} activeStep={page} orientation="vertical">
|
||||||
<Col xs={12} center="xs">
|
{steps.map(label => (
|
||||||
<Controls
|
<FormStep key={label}>
|
||||||
disabled={disabled}
|
<StepLabel>{label}</StepLabel>
|
||||||
finishedTx={finishedTransaction}
|
<StepContent>
|
||||||
finishedButton={finished}
|
{activePage(rest)}
|
||||||
onPrevious={this.previous}
|
<Row align="end" margin="lg" grow>
|
||||||
firstPage={page === 0}
|
<Col xs={12} center="xs">
|
||||||
lastPage={isLastPage}
|
<Controls
|
||||||
/>
|
disabled={disabled}
|
||||||
</Col>
|
finishedTx={finishedTransaction}
|
||||||
</Row>
|
finishedButton={finished}
|
||||||
|
onPrevious={this.previous}
|
||||||
|
firstPage={page === 0}
|
||||||
|
lastPage={isLastPage}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</StepContent>
|
||||||
|
</FormStep>
|
||||||
|
))}
|
||||||
|
</Stepper>
|
||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
</GnoForm>
|
</GnoForm>
|
||||||
|
|
|
@ -15,7 +15,6 @@ type Props = {
|
||||||
padding: number,
|
padding: number,
|
||||||
validation?: (values: Object) => Object | Promise<Object>,
|
validation?: (values: Object) => Object | Promise<Object>,
|
||||||
initialValues?: Object,
|
initialValues?: Object,
|
||||||
render: Function,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const stylesBasedOn = (padding: number): $Shape<CSSStyleDeclaration> => ({
|
const stylesBasedOn = (padding: number): $Shape<CSSStyleDeclaration> => ({
|
||||||
|
@ -26,7 +25,7 @@ const stylesBasedOn = (padding: number): $Shape<CSSStyleDeclaration> => ({
|
||||||
})
|
})
|
||||||
|
|
||||||
const GnoForm = ({
|
const GnoForm = ({
|
||||||
onSubmit, validation, initialValues, children, padding, render,
|
onSubmit, validation, initialValues, children, padding,
|
||||||
}: Props) => (
|
}: Props) => (
|
||||||
<Form
|
<Form
|
||||||
validate={validation}
|
validate={validation}
|
||||||
|
@ -34,8 +33,7 @@ const GnoForm = ({
|
||||||
initialValues={initialValues}
|
initialValues={initialValues}
|
||||||
render={({ handleSubmit, ...rest }) => (
|
render={({ handleSubmit, ...rest }) => (
|
||||||
<form onSubmit={handleSubmit} style={stylesBasedOn(padding)}>
|
<form onSubmit={handleSubmit} style={stylesBasedOn(padding)}>
|
||||||
{render(rest)}
|
{children(rest.submitting, rest.validating, rest)}
|
||||||
{children(rest.submitting, rest.validating)}
|
|
||||||
</form>
|
</form>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in New Issue