Allow passing button labels to Stepper component, add CopyBtn tooltip
This commit is contained in:
parent
3c05220008
commit
6edc37b571
|
@ -27,8 +27,8 @@ type CopyBtnProps = {
|
|||
}
|
||||
|
||||
const CopyBtn = ({ content, classes }: CopyBtnProps) => (navigator.clipboard ? (
|
||||
<div className={classes.container}>
|
||||
<Img src={CopyIcon} height={20} alt="Click to copy" onClick={() => copyToClipboard(content)} />
|
||||
<div className={classes.container} title="Copy to clipboard">
|
||||
<Img src={CopyIcon} height={20} alt="Copy to clipboard" onClick={() => copyToClipboard(content)} />
|
||||
</div>
|
||||
) : null)
|
||||
|
||||
|
|
|
@ -26,24 +26,34 @@ type Props = {
|
|||
lastPage: boolean,
|
||||
disabled: boolean,
|
||||
penultimate: boolean,
|
||||
currentStep?: number,
|
||||
buttonLabels?: Array<string>,
|
||||
}
|
||||
|
||||
const Controls = ({
|
||||
onPrevious, firstPage, penultimate, lastPage, disabled,
|
||||
onPrevious,
|
||||
firstPage,
|
||||
penultimate,
|
||||
lastPage,
|
||||
disabled,
|
||||
currentStep,
|
||||
buttonLabels,
|
||||
}: Props) => {
|
||||
// eslint-disable-next-line
|
||||
const next = firstPage ? 'Start' : penultimate ? 'Review' : lastPage ? 'Submit' : 'Next'
|
||||
const back = firstPage ? 'Cancel' : 'Back'
|
||||
|
||||
let next
|
||||
if (!buttonLabels) {
|
||||
// eslint-disable-next-line
|
||||
next = firstPage ? 'Start' : penultimate ? 'Review' : lastPage ? 'Submit' : 'Next'
|
||||
} else {
|
||||
// $FlowFixMe
|
||||
next = buttonLabels[currentStep]
|
||||
}
|
||||
|
||||
return (
|
||||
<Row style={controlStyle} align="end" grow>
|
||||
<Col xs={12} end="xs">
|
||||
<Button
|
||||
style={firstButtonStyle}
|
||||
type="button"
|
||||
onClick={onPrevious}
|
||||
size="small"
|
||||
>
|
||||
<Button style={firstButtonStyle} type="button" onClick={onPrevious} size="small">
|
||||
{back}
|
||||
</Button>
|
||||
<Button
|
||||
|
|
|
@ -19,6 +19,7 @@ type Props = {
|
|||
onSubmit: (values: Object) => Promise<void>,
|
||||
children: React.Node,
|
||||
classes: Object,
|
||||
buttonLabels: Array<string>,
|
||||
initialValues?: Object,
|
||||
disabledWhenValidating?: boolean,
|
||||
mutators?: Object,
|
||||
|
@ -110,7 +111,7 @@ const GnoStepper = (props: Props) => {
|
|||
}
|
||||
|
||||
const {
|
||||
steps, children, classes, disabledWhenValidating = false, testId, mutators,
|
||||
steps, children, classes, disabledWhenValidating = false, testId, mutators, buttonLabels,
|
||||
} = props
|
||||
const activePage = getActivePageFrom(children)
|
||||
|
||||
|
@ -137,6 +138,8 @@ const GnoStepper = (props: Props) => {
|
|||
firstPage={page === 0}
|
||||
lastPage={lastPage}
|
||||
penultimate={penultimate}
|
||||
buttonLabels={buttonLabels}
|
||||
currentStep={page}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
|
|
@ -35,6 +35,8 @@ const formMutators = {
|
|||
},
|
||||
}
|
||||
|
||||
const buttonLabels = ['Next', 'Review', 'Load']
|
||||
|
||||
const Layout = ({
|
||||
provider, onLoadSafeSubmit, network, userAddress,
|
||||
}: Props) => {
|
||||
|
@ -56,6 +58,7 @@ const Layout = ({
|
|||
steps={steps}
|
||||
initialValues={initialValues}
|
||||
mutators={formMutators}
|
||||
buttonLabels={buttonLabels}
|
||||
testId="load-safe-form"
|
||||
>
|
||||
<StepperPage validate={safeFieldsValidation}>{DetailsForm}</StepperPage>
|
||||
|
|
Loading…
Reference in New Issue