chronograf/ui/src/reusable_ui/components/wizard/WizardButtonBar.tsx

62 lines
1.2 KiB
TypeScript

// Libraries
import React, {PureComponent} from 'react'
// Styles
import 'src/reusable_ui/components/wizard/WizardButtonBar.scss'
import {ErrorHandling} from 'src/shared/decorators/errors'
interface Props {
decrement?: () => void
nextLabel?: string
previousLabel?: string
lastStep?: boolean
onClickPrevious: () => void
onClickNext: () => void
}
@ErrorHandling
class WizardButtonBar extends PureComponent<Props> {
public static defaultProps: Partial<Props> = {
nextLabel: 'next',
previousLabel: 'previous',
}
public render() {
const {
decrement,
previousLabel,
nextLabel,
onClickPrevious,
onClickNext,
} = this.props
return (
<div className="wizard-button-bar">
{decrement && (
<button className="btn btn-md btn-default" onClick={onClickPrevious}>
{previousLabel}
</button>
)}
<button
className={`btn btn-md ${this.buttonColor}`}
onClick={onClickNext}
>
{nextLabel}
</button>
</div>
)
}
private get buttonColor() {
const {lastStep} = this.props
if (lastStep) {
return 'btn-success'
}
return 'btn-primary'
}
}
export default WizardButtonBar