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

113 lines
2.5 KiB
JavaScript
Raw Normal View History

/** @format */
/**
* External dependencies
*/
import { Component, Fragment } from '@wordpress/element';
import { Router, Route, Switch } from 'react-router-dom';
import { Slot } from 'react-slot-fill';
import PropTypes from 'prop-types';
import { get } from 'lodash';
/**
* WooCommerce dependencies
*/
import { getHistory } from '@woocommerce/navigation';
/**
* Internal dependencies
*/
import './style.scss';
import { Controller, getPages } from './controller';
import Header from 'header';
import Notices from './notices';
import { recordPageView } from 'lib/tracks';
import TransientNotices from './transient-notices';
2019-02-19 21:07:19 +00:00
import StoreAlerts from './store-alerts';
class Layout extends Component {
componentDidMount() {
this.recordPageViewTrack();
}
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 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 { isEmbeded, ...restProps } = this.props;
return (
<div className="woocommerce-layout">
{ window.wcAdminFeatures[ 'activity-panels' ] && <Slot name="header" /> }
<TransientNotices />
<div className="woocommerce-layout__primary" id="woocommerce-layout__primary">
2019-02-21 00:41:00 +00:00
{ window.wcAdminFeatures[ 'store-alerts' ] && <StoreAlerts /> }
2019-02-19 21:07:19 +00:00
<Notices />
{ ! isEmbeded && (
<div className="woocommerce-layout__main">
<Controller { ...restProps } />
</div>
) }
</div>
</div>
);
}
}
Layout.propTypes = {
isEmbededLayout: PropTypes.bool,
};
export class PageLayout extends Component {
render() {
return (
<Router history={ getHistory() }>
<Switch>
{ getPages().map( page => {
return <Route key={ page.path } path={ page.path } exact component={ Layout } />;
} ) }
<Route component={ Layout } />
</Switch>
</Router>
);
}
}
export class EmbedLayout extends Component {
render() {
return (
<Fragment>
<Header sections={ wcSettings.embedBreadcrumbs } isEmbedded />
<Layout isEmbeded />
</Fragment>
);
}
}