Stepper clickable steps

This commit is contained in:
Mikhail Mikheev 2019-09-10 18:58:28 +04:00
parent 0096ed24e5
commit b44c30923d
2 changed files with 31 additions and 8 deletions

View File

@ -143,12 +143,24 @@ const GnoStepper = (props: Props) => {
return ( return (
<Stepper classes={{ root: classes.root }} activeStep={page} orientation="vertical"> <Stepper classes={{ root: classes.root }} activeStep={page} orientation="vertical">
{steps.map((label) => ( {steps.map((label, index) => {
<FormStep key={label}> const labelProps = {}
<StepLabel>{label}</StepLabel> const isClickable = index < page
<StepContent TransitionProps={transitionProps}>{activePage(controls, ...rest)}</StepContent>
</FormStep> if (isClickable) {
))} labelProps.onClick = () => {
setPage(index)
}
labelProps.className = classes.pointerCursor
}
return (
<FormStep key={label}>
<StepLabel {...labelProps}>{label}</StepLabel>
<StepContent TransitionProps={transitionProps}>{activePage(controls, ...rest)}</StepContent>
</FormStep>
)
})}
</Stepper> </Stepper>
) )
}} }}
@ -162,6 +174,14 @@ const styles = {
flex: '1 1 auto', flex: '1 1 auto',
backgroundColor: 'transparent', backgroundColor: 'transparent',
}, },
pointerCursor: {
'& > .MuiStepLabel-iconContainer': {
cursor: 'pointer',
},
'& > .MuiStepLabel-labelContainer': {
cursor: 'pointer',
},
},
} }
export default withStyles(styles)(GnoStepper) export default withStyles(styles)(GnoStepper)

View File

@ -97,10 +97,13 @@ export const safeFieldsValidation = async (values: Object) => {
const Details = ({ classes, errors, form }: Props) => ( const Details = ({ classes, errors, form }: Props) => (
<> <>
<Block margin="sm"> <Block margin="md">
<Paragraph noMargin size="lg" color="primary"> <Paragraph noMargin size="lg" color="primary">
You are about to load an existing Gnosis Safe. First, choose a name and enter the Safe address. The name is only You are about to load an existing Gnosis Safe. First, choose a name and enter the Safe address. The name is only
stored locally and will never be shared with Gnosis or any third parties stored locally and will never be shared with Gnosis or any third parties.
<br />
Your connected wallet does not have to be the owner of this Safe. In this case, the interface will provide you a
read-only view.
</Paragraph> </Paragraph>
</Block> </Block>
<Block className={classes.root}> <Block className={classes.root}>