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

View File

@ -97,10 +97,13 @@ export const safeFieldsValidation = async (values: Object) => {
const Details = ({ classes, errors, form }: Props) => (
<>
<Block margin="sm">
<Block margin="md">
<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
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>
</Block>
<Block className={classes.root}>