Stepper clickable steps
This commit is contained in:
parent
0096ed24e5
commit
b44c30923d
|
@ -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)
|
||||||
|
|
|
@ -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}>
|
||||||
|
|
Loading…
Reference in New Issue