Allow passing button labels to Stepper component, add CopyBtn tooltip

This commit is contained in:
Mikhail Mikheev 2019-09-12 13:36:05 +04:00
parent 3c05220008
commit 6edc37b571
4 changed files with 28 additions and 12 deletions

View File

@ -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)

View File

@ -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

View File

@ -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}
/>
</>
)

View File

@ -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>