status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/Stepper/index.jsx
View File

@ -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>

6
src/components/forms/GnoForm/index.jsx
View File

@ -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>
)} )}
/> />