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

156 lines
3.6 KiB
JavaScript

/**
* External dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { Component, createRef } from '@wordpress/element';
import classnames from 'classnames';
import { decodeEntities } from '@wordpress/html-entities';
import PropTypes from 'prop-types';
/**
* WooCommerce dependencies
*/
import { getNewPath } from '@woocommerce/navigation';
import { Link } from '@woocommerce/components';
import { getAdminLink, getSetting } from '@woocommerce/wc-admin-settings';
/**
* Internal dependencies
*/
import './style.scss';
import ActivityPanel from './activity-panel';
import { recordEvent } from 'lib/tracks';
class Header extends Component {
constructor( props ) {
super( props );
this.state = {
isScrolled: false,
};
this.headerRef = createRef();
this.onWindowScroll = this.onWindowScroll.bind( this );
this.updateIsScrolled = this.updateIsScrolled.bind( this );
this.trackLinkClick = this.trackLinkClick.bind( this );
this.updateDocumentTitle = this.updateDocumentTitle.bind( this );
}
componentDidMount() {
this.threshold = this.headerRef.current.offsetTop;
window.addEventListener( 'scroll', this.onWindowScroll );
this.updateIsScrolled();
}
componentWillUnmount() {
window.removeEventListener( 'scroll', this.onWindowScroll );
window.cancelAnimationFrame( this.handle );
}
onWindowScroll() {
this.handle = window.requestAnimationFrame( this.updateIsScrolled );
}
updateIsScrolled() {
const isScrolled = window.pageYOffset > this.threshold - 20;
if ( isScrolled !== this.state.isScrolled ) {
this.setState( {
isScrolled,
} );
}
}
trackLinkClick( event ) {
const href = event.target.closest( 'a' ).getAttribute( 'href' );
recordEvent( 'navbar_breadcrumb_click', {
href,
text: event.target.innerText,
} );
}
updateDocumentTitle() {
const { sections, isEmbedded } = this.props;
// Don't modify the document title on existing WooCommerce pages.
if ( isEmbedded ) {
return;
}
const _sections = Array.isArray( sections ) ? sections : [ sections ];
const documentTitle = _sections
.map( ( section ) => {
return Array.isArray( section ) ? section[ 1 ] : section;
} )
.reverse()
.join( ' ‹ ' );
document.title = decodeEntities(
sprintf(
__(
'%1$s ‹ %2$s — WooCommerce',
'woocommerce-admin'
),
documentTitle,
getSetting( 'siteTitle', '' )
)
);
}
render() {
const { sections, isEmbedded, query } = this.props;
const { isScrolled } = this.state;
const _sections = Array.isArray( sections ) ? sections : [ sections ];
this.updateDocumentTitle();
const className = classnames( 'woocommerce-layout__header', {
'is-scrolled': isScrolled,
} );
return (
<div className={ className } ref={ this.headerRef }>
<h1 className="woocommerce-layout__header-breadcrumbs">
{ _sections.map( ( section, i ) => {
const sectionPiece = Array.isArray( section ) ? (
<Link
href={
isEmbedded
? getAdminLink( section[ 0 ] )
: getNewPath( {}, section[ 0 ], {} )
}
type={ isEmbedded ? 'wp-admin' : 'wc-admin' }
onClick={ this.trackLinkClick }
>
{ section[ 1 ] }
</Link>
) : (
section
);
return (
<span key={ i }>
{ decodeEntities( sectionPiece ) }
</span>
);
} ) }
</h1>
{ window.wcAdminFeatures[ 'activity-panels' ] && (
<ActivityPanel isEmbedded={ isEmbedded } query={ query } />
) }
</div>
);
}
}
Header.propTypes = {
sections: PropTypes.node.isRequired,
isEmbedded: PropTypes.bool,
};
Header.defaultProps = {
isEmbedded: false,
};
export default Header;