Cleaned more code, still untested.
This commit is contained in:
@ -24,9 +24,15 @@
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { Helmet } from "react-helmet";
|
||||
import PageBoundary from './PageBoundary';
|
||||
|
||||
import Styles from './Page.scss';
|
||||
|
||||
//Publics
|
||||
import Language from '@public/language/Language';
|
||||
|
||||
//Components
|
||||
import PageBoundary from './boundary/PageBoundary';
|
||||
|
||||
class Page extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
29
public/components/page/Page.scss
Normal file
29
public/components/page/Page.scss
Normal file
@ -0,0 +1,29 @@
|
||||
/*
|
||||
* Page
|
||||
* Styles for the base Page elements.
|
||||
*
|
||||
* Dependencies:
|
||||
* styles/settings/responsive.scss
|
||||
*
|
||||
* Version:
|
||||
* 1.0.0 - 2018/05/05
|
||||
*/
|
||||
@import '~@styles/global';
|
||||
|
||||
.c-page {
|
||||
flex-grow: 1;
|
||||
|
||||
&__boundary {
|
||||
max-width: $s-screen-boundary;
|
||||
margin: 0 auto;
|
||||
|
||||
&.is-full {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.is-small {
|
||||
max-width: $s-screen-boundary / 2;
|
||||
}
|
||||
}
|
||||
}
|
@ -23,14 +23,22 @@
|
||||
|
||||
import React from 'react';
|
||||
|
||||
export default function(props) {
|
||||
let clazzes = "c-page__boundary";
|
||||
import Styles from './PageBoundary';
|
||||
|
||||
export default (props) => {
|
||||
let newProps = { ...props };
|
||||
let { full, small, className } = props;
|
||||
|
||||
delete newProps.full;
|
||||
delete newProps.small;
|
||||
|
||||
let clazzes = "c-page-boundary";
|
||||
if(props.full) clazzes += " is-full";
|
||||
if(props.small) clazzes += " is-small";
|
||||
if(props.className) clazzes += " " + props.className;
|
||||
|
||||
return (
|
||||
<div className={ clazzes }>
|
||||
<div {...newProps} className={ clazzes }>
|
||||
{ props.children }
|
||||
</div>
|
||||
);
|
22
public/components/page/boundary/PageBoundary.scss
Normal file
22
public/components/page/boundary/PageBoundary.scss
Normal file
@ -0,0 +1,22 @@
|
||||
/*
|
||||
* PageBoundary
|
||||
* Styles for the Page Boundaries
|
||||
*
|
||||
* Dependencies:
|
||||
*
|
||||
* Version:
|
||||
* 1.0.0 - 2018/10/23
|
||||
*/
|
||||
.c-page-boundary {
|
||||
max-width: $s-screen-boundary;
|
||||
margin: 0 auto;
|
||||
|
||||
&.is-full {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.is-small {
|
||||
max-width: $s-screen-boundary / 2;
|
||||
}
|
||||
}
|
@ -28,9 +28,6 @@ import PropTypes from 'prop-types'
|
||||
import { HashRouter, Route, Switch } from 'react-router-dom';
|
||||
import Loadable from 'react-loadable';
|
||||
|
||||
import Header from './../header/Header';
|
||||
import Footer from './../footer/Footer';
|
||||
|
||||
const PageLoading = (props) => {
|
||||
if(props.error) return <span>Loading Error</span>;
|
||||
if(props.pastDelay) return <span>Loading...</span>;
|
||||
@ -38,50 +35,27 @@ const PageLoading = (props) => {
|
||||
};
|
||||
|
||||
export const RouteWrapper = (props) => {
|
||||
return (
|
||||
<Route {...props} render={() => {
|
||||
let CustomLoadable = Loadable({
|
||||
loader: props.page,
|
||||
loading: PageLoading
|
||||
});
|
||||
let CustomTag = <span>Not loading</span>;
|
||||
return (
|
||||
<main className="c-main">
|
||||
<CustomLoadable />
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
}}/>
|
||||
);
|
||||
let { page } = props.page;
|
||||
|
||||
let render = () => {
|
||||
let CustomLoadable = Loadable({
|
||||
loader: page,
|
||||
loading: PageLoading
|
||||
});
|
||||
return <CustomLoadable />
|
||||
};
|
||||
|
||||
return <Route {...props} render={render} />;
|
||||
};
|
||||
|
||||
class Routes extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
export default withRouter((props) => {
|
||||
const { match, location, history, children } = this.props;
|
||||
|
||||
render() {
|
||||
const { match, location, history, children } = this.props;
|
||||
|
||||
return (
|
||||
<Route>
|
||||
{/*<TransitionGroup className="o-page-transition__container">
|
||||
<CSSTransition
|
||||
key={ location.pathname }
|
||||
timeout={1000}
|
||||
classNames="o-page-transition"
|
||||
mountOnEnter={ true }
|
||||
unmountOnExit={ true }
|
||||
onEntering={ this.props.onEntering }
|
||||
>*/}
|
||||
<Switch location={ location }>
|
||||
{ children }
|
||||
</Switch>
|
||||
{/*</CSSTransition>
|
||||
</TransitionGroup>*/}
|
||||
</Route>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(Routes);
|
||||
return (
|
||||
<Route>
|
||||
<Switch location={ location }>
|
||||
{ children }
|
||||
</Switch>
|
||||
</Route>
|
||||
);
|
||||
});
|
Reference in New Issue
Block a user