Add completion step to progress bar in onboarding wizard
parent
074ce584b5
commit
bc3447655a
|
@ -30,11 +30,10 @@ class ProgressBar extends PureComponent<Props, null> {
|
|||
const {stepStatuses, stepTitles, currentStepIndex} = this.props
|
||||
|
||||
const lastIndex = stepStatuses.length - 1
|
||||
const lastEleIndex = stepStatuses.length - 2
|
||||
|
||||
const progressBar: JSX.Element[] = stepStatuses.reduce(
|
||||
(acc, stepStatus, i) => {
|
||||
if (i === 0 || i === lastIndex) {
|
||||
if (i === 0) {
|
||||
return [...acc]
|
||||
}
|
||||
|
||||
|
@ -64,7 +63,7 @@ class ProgressBar extends PureComponent<Props, null> {
|
|||
</div>
|
||||
)
|
||||
|
||||
if (i === lastEleIndex) {
|
||||
if (i === lastIndex) {
|
||||
return [...acc, stepEle]
|
||||
}
|
||||
|
||||
|
@ -74,7 +73,7 @@ class ProgressBar extends PureComponent<Props, null> {
|
|||
if (i === currentStepIndex && stepStatus !== StepStatus.Error) {
|
||||
connectorStatus = ConnectorState.Some
|
||||
}
|
||||
if (i === lastEleIndex || stepStatus === StepStatus.Complete) {
|
||||
if (i === lastIndex || stepStatus === StepStatus.Complete) {
|
||||
connectorStatus = ConnectorState.Full
|
||||
}
|
||||
const connectorEle = (
|
||||
|
|
|
@ -13,11 +13,14 @@ class CompletionStep extends PureComponent<OnboardingStepProps> {
|
|||
public componentDidMount() {
|
||||
window.addEventListener('keydown', this.handleKeydown)
|
||||
}
|
||||
|
||||
public componentWillUnmount() {
|
||||
window.removeEventListener('keydown', this.handleKeydown)
|
||||
}
|
||||
|
||||
public render() {
|
||||
const {onExit} = this.props
|
||||
const {onExit, onDecrementCurrentStepIndex} = this.props
|
||||
|
||||
return (
|
||||
<div className="onboarding-step">
|
||||
<div className="splash-logo secondary" />
|
||||
|
@ -28,7 +31,7 @@ class CompletionStep extends PureComponent<OnboardingStepProps> {
|
|||
color={ComponentColor.Default}
|
||||
text="Back"
|
||||
size={ComponentSize.Medium}
|
||||
onClick={this.props.onDecrementCurrentStepIndex}
|
||||
onClick={onDecrementCurrentStepIndex}
|
||||
/>
|
||||
<Button
|
||||
color={ComponentColor.Success}
|
||||
|
|
|
@ -156,10 +156,7 @@ class OnboardingWizard extends PureComponent<Props> {
|
|||
onSetCurrentStepIndex,
|
||||
} = this.props
|
||||
|
||||
if (
|
||||
currentStepIndex === 0 ||
|
||||
currentStepIndex === stepStatuses.length - 1
|
||||
) {
|
||||
if (currentStepIndex === 0) {
|
||||
return <div className="wizard--progress-header hidden" />
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue