2018-05-10 18:35:55 +00:00
|
|
|
/** @format */
|
|
|
|
/**
|
|
|
|
* External dependencies
|
|
|
|
*/
|
|
|
|
import { isArray } from 'lodash';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Internal dependencies
|
|
|
|
*/
|
|
|
|
import './style.scss';
|
2018-05-15 15:06:15 +00:00
|
|
|
import { getAdminLink } from 'lib/nav-utils';
|
2018-05-10 18:35:55 +00:00
|
|
|
|
|
|
|
// TODO Implement timeline icon
|
|
|
|
|
|
|
|
const Header = ( { sections, showTimeline } ) => {
|
|
|
|
const renderBreadcrumbs = () => {
|
|
|
|
const _sections = isArray( sections ) ? sections : [ sections ];
|
|
|
|
const crumbs = _sections.map( ( subSection, i ) => <span key={ i }>{ subSection }</span> );
|
|
|
|
return (
|
|
|
|
<h1>
|
2018-05-14 13:41:30 +00:00
|
|
|
<span>
|
2018-05-15 15:06:15 +00:00
|
|
|
<a href={ getAdminLink( '/' ) }>WooCommerce</a>
|
2018-05-14 13:41:30 +00:00
|
|
|
</span>
|
2018-05-10 18:35:55 +00:00
|
|
|
{ crumbs }
|
|
|
|
</h1>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="woo-dash__header">
|
|
|
|
{ renderBreadcrumbs() }
|
2018-05-14 13:41:30 +00:00
|
|
|
{ showTimeline && <div /> }
|
2018-05-10 18:35:55 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
Header.propTypes = {
|
|
|
|
sections: PropTypes.node.isRequired,
|
|
|
|
showTimeline: PropTypes.bool,
|
|
|
|
};
|
|
|
|
|
|
|
|
Header.defaultProps = {
|
|
|
|
showTimeline: true,
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Header;
|