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 Row from '~/components/layout/Row'
import { sm } from '~/theme/variables' import { sm } from '~/theme/variables'
type ControlProps = {
next: string,
back: string,
onPrevious: () => void,
disabled: boolean,
}
const controlStyle = { const controlStyle = {
backgroundColor: 'white', backgroundColor: 'white',
padding: sm, padding: sm,
@ -21,35 +14,7 @@ const firstButtonStyle = {
marginRight: sm, marginRight: sm,
} }
const ControlButtons = ({
next, back, onPrevious, disabled,
}: ControlProps) => (
<Row style={controlStyle} align="end" grow>
<Col xs={12} end="xs">
<Button
style={firstButtonStyle}
type="button"
onClick={onPrevious}
size="small"
>
{back}
</Button>
<Button
size="small"
variant="raised"
color="primary"
type="submit"
disabled={disabled}
>
{next}
</Button>
</Col>
</Row>
)
type Props = { type Props = {
finishedTx: boolean,
finishedButton: React$Node,
onPrevious: () => void, onPrevious: () => void,
firstPage: boolean, firstPage: boolean,
lastPage: boolean, lastPage: boolean,
@ -57,17 +22,35 @@ type Props = {
} }
const Controls = ({ const Controls = ({
finishedTx, finishedButton, onPrevious, firstPage, lastPage, disabled, onPrevious, firstPage, lastPage, disabled,
}: Props) => ( }: Props) => {
finishedTx // eslint-disable-next-line
? <React.Fragment>{finishedButton}</React.Fragment> const next = firstPage ? 'Start' : lastPage ? 'Submit' : 'Next'
: <ControlButtons const back = firstPage ? 'Cancel' : 'Back'
disabled={disabled}
back={firstPage ? 'Cancel' : 'Back'} return (
// eslint-disable-next-line <Row style={controlStyle} align="end" grow>
next={firstPage ? 'Start' : lastPage ? 'Finish' : 'Next'} <Col xs={12} end="xs">
onPrevious={onPrevious} <Button
/> style={firstButtonStyle}
) type="button"
onClick={onPrevious}
size="small"
>
{back}
</Button>
<Button
size="small"
variant="raised"
color="primary"
type="submit"
disabled={disabled}
>
{next}
</Button>
</Col>
</Row>
)
}
export default Controls export default Controls

View File

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