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 { 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
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in New Issue