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

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>
);
};