WA-232 Disabling stepper controls when validating if prop is set

This commit is contained in:
apanizo 2018-07-25 11:11:59 +02:00
parent 1ccb735494
commit 3ea1446df5
3 changed files with 29 additions and 23 deletions

View File

@ -6,16 +6,16 @@ type ControlProps = {
next: string,
onPrevious: () => void,
firstPage: boolean,
submitting: boolean,
disabled: boolean,
}
const ControlButtons = ({
next, firstPage, onPrevious, submitting,
next, firstPage, onPrevious, disabled,
}: ControlProps) => (
<React.Fragment>
<Button
type="button"
disabled={firstPage || submitting}
disabled={firstPage || disabled}
onClick={onPrevious}
>
Back
@ -24,7 +24,7 @@ const ControlButtons = ({
variant="raised"
color="primary"
type="submit"
disabled={submitting}
disabled={disabled}
>
{next}
</Button>
@ -37,16 +37,16 @@ type Props = {
onPrevious: () => void,
firstPage: boolean,
lastPage: boolean,
submitting: boolean,
disabled: boolean,
}
const Controls = ({
finishedTx, finishedButton, onPrevious, firstPage, lastPage, submitting,
finishedTx, finishedButton, onPrevious, firstPage, lastPage, disabled,
}: Props) => (
finishedTx
? <React.Fragment>{finishedButton}</React.Fragment>
: <ControlButtons
submitting={submitting}
disabled={disabled}
next={lastPage ? 'Finish' : 'Next'}
firstPage={firstPage}
onPrevious={onPrevious}

View File

@ -13,6 +13,7 @@ import Controls from './Controls'
export { default as Step } from './Step'
type Props = {
disabledWhenValidating?: boolean,
classes: Object,
steps: string[],
finishedTransaction: boolean,
@ -100,7 +101,7 @@ class GnoStepper extends React.PureComponent<Props, State> {
page: Math.max(state.page - 1, 0),
}))
handleSubmit = (values: Object) => {
handleSubmit = async (values: Object) => {
const { children, onSubmit } = this.props
const { page } = this.state
const isLastPage = page === React.Children.count(children) - 1
@ -113,7 +114,7 @@ class GnoStepper extends React.PureComponent<Props, State> {
render() {
const {
steps, children, finishedTransaction, finishedButton, classes,
steps, children, finishedTransaction, finishedButton, classes, disabledWhenValidating = false,
} = this.props
const { page, values } = this.state
const activePage = this.getActivePageFrom(children)
@ -136,11 +137,14 @@ class GnoStepper extends React.PureComponent<Props, State> {
validation={this.validate}
render={activePage}
>
{(submitting: boolean) => (
{(submitting: boolean, validating: boolean) => {
const disabled = disabledWhenValidating ? submitting || validating : submitting
return (
<Row align="end" margin="lg" grow>
<Col xs={12} center="xs">
<Controls
submitting={submitting}
disabled={disabled}
finishedTx={finishedTransaction}
finishedButton={finished}
onPrevious={this.previous}
@ -149,7 +153,8 @@ class GnoStepper extends React.PureComponent<Props, State> {
/>
</Col>
</Row>
)}
)
}}
</GnoForm>
</React.Fragment>
)

View File

@ -92,6 +92,7 @@ class AddToken extends React.Component<Props, State> {
onSubmit={this.onAddToken}
steps={steps}
onReset={this.onReset}
disabledWhenValidating
>
<Stepper.Page addresses={tokens} prepareNextInitialProps={this.fetchInitialPropsSecondPage}>
{ FirstPage }