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

171 lines
3.8 KiB
JavaScript

/**
* External dependencies
*/
import { Component } from '@wordpress/element';
import { useFilters } from '@woocommerce/components';
import { Router, Route, Switch } from 'react-router-dom';
import PropTypes from 'prop-types';
import { get, isFunction } from 'lodash';
/**
* WooCommerce dependencies
*/
import { getHistory } from '@woocommerce/navigation';
import { getSetting } from '@woocommerce/wc-admin-settings';
/**
* Internal dependencies
*/
import './style.scss';
import { Controller, getPages, PAGES_FILTER } from './controller';
import Header from 'header';
import Notices from './notices';
import { recordPageView } from 'lib/tracks';
import TransientNotices from './transient-notices';
import StoreAlerts from './store-alerts';
import { REPORTS_FILTER } from 'analytics/report';
export class PrimaryLayout extends Component {
render() {
const { children } = this.props;
return (
<div
className="woocommerce-layout__primary"
id="woocommerce-layout__primary"
>
{ window.wcAdminFeatures[ 'store-alerts' ] && <StoreAlerts /> }
<Notices />
{ children }
</div>
);
}
}
class Layout extends Component {
componentDidMount() {
this.recordPageViewTrack();
document.body.classList.remove( 'woocommerce-admin-is-loading' );
}
componentDidUpdate( prevProps ) {
const previousPath = get( prevProps, 'location.pathname' );
const currentPath = get( this.props, 'location.pathname' );
if ( ! previousPath || ! currentPath ) {
return;
}
if ( previousPath !== currentPath ) {
this.recordPageViewTrack();
}
}
recordPageViewTrack() {
const { isEmbedded } = this.props;
if ( isEmbedded ) {
const path = document.location.pathname + document.location.search;
recordPageView( path, { isEmbedded } );
return;
}
const pathname = get( this.props, 'location.pathname' );
if ( ! pathname ) {
return;
}
// Remove leading slash, and camel case remaining pathname
let path = pathname.substring( 1 ).replace( /\//g, '_' );
// When pathname is `/` we are on the dashboard
if ( path.length === 0 ) {
path = 'dashboard';
}
recordPageView( path );
}
render() {
const { isEmbedded, ...restProps } = this.props;
const { breadcrumbs } = this.props.page;
return (
<div className="woocommerce-layout">
<Header
sections={
isFunction( breadcrumbs )
? breadcrumbs( this.props )
: breadcrumbs
}
isEmbedded={ isEmbedded }
/>
<TransientNotices />
{ ! isEmbedded && (
<PrimaryLayout>
<div className="woocommerce-layout__main">
<Controller { ...restProps } />
</div>
</PrimaryLayout>
) }
</div>
);
}
}
Layout.propTypes = {
isEmbedded: PropTypes.bool,
page: PropTypes.shape( {
container: PropTypes.func,
path: PropTypes.string,
breadcrumbs: PropTypes.oneOfType( [
PropTypes.func,
PropTypes.arrayOf(
PropTypes.oneOfType( [
PropTypes.arrayOf( PropTypes.string ),
PropTypes.string,
] )
),
] ).isRequired,
wpOpenMenu: PropTypes.string,
} ).isRequired,
};
class _PageLayout extends Component {
render() {
return (
<Router history={ getHistory() }>
<Switch>
{ getPages().map( ( page ) => {
return (
<Route
key={ page.path }
path={ page.path }
exact
render={ ( props ) => (
<Layout page={ page } { ...props } />
) }
/>
);
} ) }
</Switch>
</Router>
);
}
}
// Use the useFilters HoC so PageLayout is re-rendered when filters are used to add new pages or reports
export const PageLayout = useFilters( [ PAGES_FILTER, REPORTS_FILTER ] )(
_PageLayout
);
export class EmbedLayout extends Component {
render() {
return (
<Layout
page={ {
breadcrumbs: getSetting( 'embedBreadcrumbs', [] ),
} }
isEmbedded
/>
);
}
}