2019-05-17 03:04:52 +00:00
|
|
|
/** @format */
|
|
|
|
/**
|
|
|
|
* External dependencies
|
|
|
|
*/
|
|
|
|
import { Component } from '@wordpress/element';
|
2019-05-27 16:37:02 +00:00
|
|
|
import { filter } from 'lodash';
|
|
|
|
import classnames from 'classnames';
|
2019-05-17 03:04:52 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Internal dependencies
|
|
|
|
*/
|
2019-05-27 16:37:02 +00:00
|
|
|
import { Stepper } from '@woocommerce/components';
|
2019-05-17 03:04:52 +00:00
|
|
|
import HeaderLogo from './header-logo';
|
2019-05-27 16:37:02 +00:00
|
|
|
|
2019-05-17 03:04:52 +00:00
|
|
|
export default class ProfileWizardHeader extends Component {
|
2019-05-27 16:37:02 +00:00
|
|
|
renderStepper() {
|
|
|
|
const steps = filter( this.props.steps, step => !! step.label );
|
|
|
|
return <Stepper steps={ steps } currentStep={ this.props.currentStep } />;
|
|
|
|
}
|
2019-05-17 03:04:52 +00:00
|
|
|
render() {
|
2019-05-27 16:37:02 +00:00
|
|
|
const currentStep = this.props.steps.find( s => s.key === this.props.currentStep );
|
|
|
|
const showStepper = ! currentStep || ! currentStep.label ? false : true;
|
|
|
|
const classes = classnames( 'woocommerce-profile-wizard__header', {
|
|
|
|
'is-stepper': showStepper,
|
|
|
|
} );
|
|
|
|
return <div className={ classes }>{ showStepper ? this.renderStepper() : <HeaderLogo /> }</div>;
|
2019-05-17 03:04:52 +00:00
|
|
|
}
|
|
|
|
}
|