WA-238 Fix onClick reset fn hook in Stepper component after tx is finished
This commit is contained in:
parent
e25ccbeb6d
commit
4a104830ae
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
>
|
||||
|
|
|
@ -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 }
|
||||
|
|
Loading…
Reference in New Issue