woocommerce/plugins/woocommerce-admin/client/components/header/index.js

89 lines
2.0 KiB
JavaScript

/** @format */
/**
* External dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { decodeEntities } from '@wordpress/utils';
import { Fill } from 'react-slot-fill';
import { isArray, noop } from 'lodash';
import { IconButton } from '@wordpress/components';
import Link from 'components/link';
import PropTypes from 'prop-types';
/**
* Internal dependencies
*/
import './style.scss';
import WordPressNotices from './wordpress-notices';
const Header = ( { sections, onToggle, isSidebarOpen, isEmbedded } ) => {
const _sections = isArray( sections ) ? sections : [ sections ];
const documentTitle = _sections
.map( section => {
return isArray( section ) ? section[ 1 ] : section;
} )
.reverse()
.join( ' ‹ ' );
document.title = decodeEntities(
sprintf(
__( '%1$s ‹ %2$s — WooCommerce', 'woo-dash' ),
documentTitle,
wpApiSettings.schema.name
)
);
return (
<div className="woocommerce-header">
<h1 className="woocommerce-header__breadcrumbs">
<span>
<Link to="/">WooCommerce</Link>
</span>
{ _sections.map( ( section, i ) => {
const sectionPiece = isArray( section ) ? (
<Link to={ section[ 0 ] } wpAdmin={ isEmbedded }>
{ section[ 1 ] }
</Link>
) : (
section
);
return <span key={ i }>{ sectionPiece }</span>;
} ) }
</h1>
<div className="woocommerce-header__buttons">
<div className="woocommerce-header__toggle">
<IconButton
className="woocommerce-header__button"
onClick={ onToggle }
icon="clock"
label={ __( 'Show Sidebar', 'woo-dash' ) }
aria-expanded={ isSidebarOpen }
/>
</div>
<WordPressNotices />
</div>
</div>
);
};
Header.propTypes = {
sections: PropTypes.node.isRequired,
onToggle: PropTypes.func.isRequired,
isSidebarOpen: PropTypes.bool,
isEmbedded: PropTypes.bool,
};
Header.defaultProps = {
onToggle: noop,
isEmbedded: false,
};
export default function( props ) {
return (
<Fill name="header">
<Header { ...props } />
</Fill>
);
}