Making Stepper to work async
This commit is contained in:
parent
14750c5ce2
commit
61dd4ccf1b
|
@ -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
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Reference in New Issue