Making Stepper to work async

This commit is contained in:
apanizo 2018-09-25 13:34:01 +02:00
parent 14750c5ce2
commit 61dd4ccf1b
2 changed files with 36 additions and 58 deletions

View File

@ -5,13 +5,6 @@ import Col from '~/components/layout/Col'
import Row from '~/components/layout/Row'
import { sm } from '~/theme/variables'
type ControlProps = {
next: string,
back: string,
onPrevious: () => void,
disabled: boolean,
}
const controlStyle = {
backgroundColor: 'white',
padding: sm,
@ -21,9 +14,21 @@ const firstButtonStyle = {
marginRight: sm,
}
const ControlButtons = ({
next, back, onPrevious, disabled,
}: ControlProps) => (
type Props = {
onPrevious: () => void,
firstPage: boolean,
lastPage: boolean,
disabled: boolean,
}
const Controls = ({
onPrevious, firstPage, lastPage, disabled,
}: Props) => {
// eslint-disable-next-line
const next = firstPage ? 'Start' : lastPage ? 'Submit' : 'Next'
const back = firstPage ? 'Cancel' : 'Back'
return (
<Row style={controlStyle} align="end" grow>
<Col xs={12} end="xs">
<Button
@ -45,29 +50,7 @@ const ControlButtons = ({
</Button>
</Col>
</Row>
)
type Props = {
finishedTx: boolean,
finishedButton: React$Node,
onPrevious: () => void,
firstPage: boolean,
lastPage: boolean,
disabled: boolean,
)
}
const Controls = ({
finishedTx, finishedButton, onPrevious, firstPage, lastPage, disabled,
}: Props) => (
finishedTx
? <React.Fragment>{finishedButton}</React.Fragment>
: <ControlButtons
disabled={disabled}
back={firstPage ? 'Cancel' : 'Back'}
// eslint-disable-next-line
next={firstPage ? 'Start' : lastPage ? 'Finish' : 'Next'}
onPrevious={onPrevious}
/>
)
export default Controls

View File

@ -14,15 +14,13 @@ import Controls from './Controls'
export { default as Step } from './Step'
type Props = {
disabledWhenValidating?: boolean,
classes: Object,
steps: string[],
finishedTransaction: boolean,
finishedButton: React$Node,
initialValues?: Object,
children: React$Node,
onReset?: () => void,
onSubmit: (values: Object) => Promise<void>,
children: React$Node,
classes: Object,
onReset?: () => void,
initialValues?: Object,
disabledWhenValidating?: boolean,
}
type State = {
@ -122,12 +120,11 @@ class GnoStepper extends React.PureComponent<Props, State> {
render() {
const {
steps, children, finishedTransaction, finishedButton, classes, disabledWhenValidating = false,
steps, children, classes, disabledWhenValidating = false,
} = this.props
const { page, values } = this.state
const activePage = this.getActivePageFrom(children)
const isLastPage = page === steps.length - 1
const finished = React.cloneElement(React.Children.only(finishedButton), { onClick: this.onReset })
return (
<React.Fragment>
@ -143,8 +140,6 @@ class GnoStepper extends React.PureComponent<Props, State> {
<Hairline />
<Controls
disabled={disabled}
finishedTx={finishedTransaction}
finishedButton={finished}
onPrevious={this.previous}
firstPage={page === 0}
lastPage={isLastPage}