Passing Stepper controls down to the Paper step component
This commit is contained in:
parent
b594d3098c
commit
6edbf338bc
|
@ -3,6 +3,7 @@ import * as React from 'react'
|
|||
import Button from '~/components/layout/Button'
|
||||
import Col from '~/components/layout/Col'
|
||||
import Row from '~/components/layout/Row'
|
||||
import { sm } from '~/theme/variables'
|
||||
|
||||
type ControlProps = {
|
||||
next: string,
|
||||
|
@ -14,15 +15,13 @@ type ControlProps = {
|
|||
|
||||
const controlStyle = {
|
||||
backgroundColor: 'white',
|
||||
padding: '8px',
|
||||
borderBottomRightRadius: '4px',
|
||||
borderBottomLeftRadius: '4px',
|
||||
padding: sm,
|
||||
}
|
||||
|
||||
const ControlButtons = ({
|
||||
next, back, firstPage, onPrevious, disabled,
|
||||
}: ControlProps) => (
|
||||
<Row style={controlStyle} align="end" margin="lg" grow>
|
||||
<Row style={controlStyle} align="end" grow>
|
||||
<Col xs={12} end="xs">
|
||||
<Button
|
||||
type="button"
|
||||
|
|
|
@ -130,6 +130,19 @@ class GnoStepper extends React.PureComponent<Props, State> {
|
|||
>
|
||||
{(submitting: boolean, validating: boolean, ...rest: any) => {
|
||||
const disabled = disabledWhenValidating ? submitting || validating : submitting
|
||||
const controls = (
|
||||
<React.Fragment>
|
||||
<Hairline />
|
||||
<Controls
|
||||
disabled={disabled}
|
||||
finishedTx={finishedTransaction}
|
||||
finishedButton={finished}
|
||||
onPrevious={this.previous}
|
||||
firstPage={page === 0}
|
||||
lastPage={isLastPage}
|
||||
/>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
return (
|
||||
<Stepper classes={{ root: classes.root }} activeStep={page} orientation="vertical">
|
||||
|
@ -137,16 +150,7 @@ class GnoStepper extends React.PureComponent<Props, State> {
|
|||
<FormStep key={label}>
|
||||
<StepLabel>{label}</StepLabel>
|
||||
<StepContent>
|
||||
{activePage(rest)}
|
||||
<Hairline />
|
||||
<Controls
|
||||
disabled={disabled}
|
||||
finishedTx={finishedTransaction}
|
||||
finishedButton={finished}
|
||||
onPrevious={this.previous}
|
||||
firstPage={page === 0}
|
||||
lastPage={isLastPage}
|
||||
/>
|
||||
{activePage(controls, rest)}
|
||||
</StepContent>
|
||||
</FormStep>
|
||||
))}
|
||||
|
|
Loading…
Reference in New Issue