123 lines
3.1 KiB
JavaScript
123 lines
3.1 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __, sprintf } from '@wordpress/i18n';
|
|
import { useEffect, useRef, useState } from '@wordpress/element';
|
|
import classnames from 'classnames';
|
|
import { decodeEntities } from '@wordpress/html-entities';
|
|
import { getNewPath } from '@woocommerce/navigation';
|
|
import { Link } from '@woocommerce/components';
|
|
import { getAdminLink, getSetting } from '@woocommerce/wc-admin-settings';
|
|
import { recordEvent } from '@woocommerce/tracks';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './style.scss';
|
|
import ActivityPanel from './activity-panel';
|
|
|
|
const trackLinkClick = ( event ) => {
|
|
const target = event.target.closest( 'a' );
|
|
const href = target.getAttribute( 'href' );
|
|
|
|
if ( href ) {
|
|
recordEvent( 'navbar_breadcrumb_click', {
|
|
href,
|
|
text: target.innerText,
|
|
} );
|
|
}
|
|
};
|
|
|
|
export const Header = ( { sections, isEmbedded = false, query } ) => {
|
|
const headerElement = useRef( null );
|
|
const rafHandle = useRef( null );
|
|
const threshold = useRef( null );
|
|
const siteTitle = getSetting( 'siteTitle', '' );
|
|
const _sections = Array.isArray( sections ) ? sections : [ sections ];
|
|
const [ isScrolled, setIsScrolled ] = useState( false );
|
|
|
|
const className = classnames( 'woocommerce-layout__header', {
|
|
'is-scrolled': isScrolled,
|
|
} );
|
|
|
|
useEffect( () => {
|
|
threshold.current = headerElement.current.offsetTop;
|
|
|
|
const updateIsScrolled = () => {
|
|
setIsScrolled( window.pageYOffset > threshold.current - 20 );
|
|
};
|
|
|
|
const scrollListener = () => {
|
|
rafHandle.current = window.requestAnimationFrame(
|
|
updateIsScrolled
|
|
);
|
|
};
|
|
|
|
window.addEventListener( 'scroll', scrollListener );
|
|
|
|
return () => {
|
|
window.removeEventListener( 'scroll', scrollListener );
|
|
window.cancelAnimationFrame( rafHandle.current );
|
|
};
|
|
}, [] );
|
|
|
|
useEffect( () => {
|
|
if ( ! isEmbedded ) {
|
|
const documentTitle = _sections
|
|
.map( ( section ) => {
|
|
return Array.isArray( section ) ? section[ 1 ] : section;
|
|
} )
|
|
.reverse()
|
|
.join( ' ‹ ' );
|
|
|
|
const decodedTitle = decodeEntities(
|
|
sprintf(
|
|
/* translators: 1: document title. 2: page title */
|
|
__(
|
|
'%1$s ‹ %2$s — WooCommerce',
|
|
'woocommerce-admin'
|
|
),
|
|
documentTitle,
|
|
siteTitle
|
|
)
|
|
);
|
|
|
|
if ( document.title !== decodedTitle ) {
|
|
document.title = decodedTitle;
|
|
}
|
|
}
|
|
}, [ isEmbedded, _sections, siteTitle ] );
|
|
|
|
return (
|
|
<div className={ className } ref={ headerElement }>
|
|
<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={ trackLinkClick }
|
|
>
|
|
{ section[ 1 ] }
|
|
</Link>
|
|
) : (
|
|
section
|
|
);
|
|
return (
|
|
<span key={ i }>
|
|
{ decodeEntities( sectionPiece ) }
|
|
</span>
|
|
);
|
|
} ) }
|
|
</h1>
|
|
{ window.wcAdminFeatures[ 'activity-panels' ] && (
|
|
<ActivityPanel isEmbedded={ isEmbedded } query={ query } />
|
|
) }
|
|
</div>
|
|
);
|
|
};
|