WA-238 Fix onClick reset fn hook in Stepper component after tx is finished

This commit is contained in:
apanizo 2018-05-17 13:44:38 +02:00
parent e25ccbeb6d
commit 4a104830ae
4 changed files with 56 additions and 57 deletions

View File

@ -1,34 +1,6 @@
// @flow
import * as React from 'react'
import Button from '~/components/layout/Button'
import Link from '~/components/layout/Link'
type NextButtonProps = {
text: string,
disabled: boolean,
}
const NextButton = ({ text, disabled }: NextButtonProps) => (
<Button
variant="raised"
color="primary"
type="submit"
disabled={disabled}
>
{text}
</Button>
)
type GoProps = {
title: string,
to: string,
}
const GoButton = ({ title, to }: GoProps) => (
<Link to={to}>
<NextButton text={title} disabled={false} />
</Link>
)
type ControlProps = {
next: string,
@ -48,34 +20,37 @@ const ControlButtons = ({
>
Back
</Button>
<NextButton text={next} disabled={submitting} />
<Button
variant="raised"
color="primary"
type="submit"
disabled={submitting}
>
{next}
</Button>
</React.Fragment>
)
type Props = {
finishedTx: boolean,
finishedButton: React$Node,
onPrevious: () => void,
firstPage: boolean,
lastPage: boolean,
submitting: boolean,
goTitle: string,
goPath: string,
}
const Controls = ({
finishedTx, onPrevious, firstPage, lastPage, submitting, goTitle, goPath,
finishedTx, finishedButton, onPrevious, firstPage, lastPage, submitting,
}: Props) => (
<React.Fragment>
{ finishedTx
? <GoButton title={goTitle} to={goPath} />
: <ControlButtons
submitting={submitting}
next={lastPage ? 'Finish' : 'Next'}
firstPage={firstPage}
onPrevious={onPrevious}
/>
}
</React.Fragment>
finishedTx
? <React.Fragment>{finishedButton}</React.Fragment>
: <ControlButtons
submitting={submitting}
next={lastPage ? 'Finish' : 'Next'}
firstPage={firstPage}
onPrevious={onPrevious}
/>
)
export default Controls

View File

@ -4,6 +4,7 @@ import { withStyles } from 'material-ui/styles'
import * as React from 'react'
import type { FormApi } from 'react-final-form'
import GnoForm from '~/components/forms/GnoForm'
import Button from '~/components/layout/Button'
import Col from '~/components/layout/Col'
import Row from '~/components/layout/Row'
import Controls from './Controls'
@ -12,12 +13,12 @@ export { default as Step } from './Step'
type Props = {
classes: Object,
goTitle: string,
goPath: string,
steps: string[],
finishedTransaction: boolean,
finishedButton: React$Node,
initialValues?: Object,
children: React$Node,
onReset?: () => void,
onSubmit: (values: Object, form: FormApi, callback: ?(errors: ?Object) => void) => ?Object | Promise<?Object> | void,
}
@ -33,6 +34,13 @@ type PageProps = {
class GnoStepper extends React.PureComponent<Props, State> {
static Page = ({ children }: PageProps) => children
static FinishButton = ({
component, to, title, ...props
}) => (
<Button component={component} to={to} variant="raised" color="primary" {...props}>
{title}
</Button>
)
constructor(props: Props) {
super(props)
@ -42,6 +50,17 @@ class GnoStepper extends React.PureComponent<Props, State> {
}
}
onReset = () => {
const resetCallback = this.props.onReset
if (resetCallback) {
resetCallback()
}
this.setState(() => ({
page: 0,
values: this.props.initialValues || {},
}))
}
getActivePageFrom = (pages: React$Node) => {
const activePageProps = React.Children.toArray(pages)[this.state.page].props
const { children, ...props } = activePageProps
@ -80,11 +99,12 @@ class GnoStepper extends React.PureComponent<Props, State> {
render() {
const {
steps, children, finishedTransaction, goTitle, goPath, classes,
steps, children, finishedTransaction, finishedButton, classes,
} = 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>
@ -108,11 +128,10 @@ class GnoStepper extends React.PureComponent<Props, State> {
<Controls
submitting={submitting}
finishedTx={finishedTransaction}
finishedButton={finished}
onPrevious={this.previous}
firstPage={page === 0}
lastPage={isLastPage}
goTitle={goTitle}
goPath={goPath}
/>
</Col>
</Row>

View File

@ -6,6 +6,7 @@ import Confirmation from '~/routes/open/components/FormConfirmation'
import Review from '~/routes/open/components/ReviewInformation'
import SafeFields, { safeFieldsValidation } from '~/routes/open/components/SafeForm'
import { SAFELIST_ADDRESS } from '~/routes/routes'
import Link from '~/components/layout/Link'
const getSteps = () => [
'Fill Safe Form', 'Review Information', 'Deploy it',
@ -29,16 +30,16 @@ const Layout = ({
}: Props) => {
const steps = getSteps()
const initialValues = initialValuesFrom(userAccount)
const finishedButton = <Stepper.FinishButton title="VISIT SAFS" component={Link} to={SAFELIST_ADDRESS} />
return (
<React.Fragment>
{ provider
? (
<Stepper
goPath={SAFELIST_ADDRESS}
goTitle="VISIT SAFES"
onSubmit={onCallSafeContractSubmit}
finishedButton={finishedButton}
finishedTransaction={!!safeAddress}
onSubmit={onCallSafeContractSubmit}
steps={steps}
initialValues={initialValues}
>

View File

@ -2,7 +2,6 @@
import * as React from 'react'
import { connect } from 'react-redux'
import Stepper from '~/components/Stepper'
import { SAFELIST_ADDRESS } from '~/routes/routes'
import { sleep } from '~/utils/timer'
import { type DailyLimit } from '~/routes/safe/store/model/dailyLimit'
import actions, { type Actions } from './actions'
@ -24,7 +23,7 @@ type State = {
done: boolean,
}
export const SEE_TXS_BUTTON_TEXT = 'DONE'
export const SEE_TXS_BUTTON_TEXT = 'RESET'
class Withdrawn extends React.Component<Props, State> {
state = {
@ -45,19 +44,24 @@ class Withdrawn extends React.Component<Props, State> {
}
}
onReset = () => {
this.setState({ done: false })
}
render() {
const { dailyLimit, safeAddress } = this.props
const { dailyLimit } = this.props
const { done } = this.state
const steps = getSteps()
const finishedButton = <Stepper.FinishButton title={SEE_TXS_BUTTON_TEXT} />
return (
<React.Fragment>
<Stepper
goPath={`${SAFELIST_ADDRESS}/${safeAddress}`}
goTitle={SEE_TXS_BUTTON_TEXT}
onSubmit={this.onWithdrawn}
finishedTransaction={done}
finishedButton={finishedButton}
onSubmit={this.onWithdrawn}
steps={steps}
onReset={this.onReset}
>
<Stepper.Page limit={dailyLimit.get('value')} spentToday={dailyLimit.get('spentToday')}>
{ WithdrawnForm }