Add route name to wrapper class in layout; add support for custom layouts; export RoutesTable

This commit is contained in:
SachaG 2017-06-14 09:53:42 +09:00
parent e7d1b9b99e
commit eafd294d49
8 changed files with 30 additions and 14 deletions

View file

@ -6,7 +6,7 @@ import Users from 'meteor/vulcan:users';
import AdminUsers from './users/AdminUsers.jsx'; import AdminUsers from './users/AdminUsers.jsx';
const AdminHome = ({ currentUser }) => const AdminHome = ({ currentUser }) =>
<div className="admin-home"> <div className="admin-home page">
<Components.ShowIf check={Users.isAdmin} document={currentUser} failureComponent={<p className="admin-home-message"><FormattedMessage id="app.noPermission" /></p>}> <Components.ShowIf check={Users.isAdmin} document={currentUser} failureComponent={<p className="admin-home-message"><FormattedMessage id="app.noPermission" /></p>}>
<AdminUsers /> <AdminUsers />
</Components.ShowIf> </Components.ShowIf>

View file

@ -46,6 +46,7 @@ const options = {
collection: Users, collection: Users,
fragmentName: 'UsersCurrent', fragmentName: 'UsersCurrent',
terms: {view: 'usersAdmin'}, terms: {view: 'usersAdmin'},
limit: 20
} }
export default withList(options)(AdminUsersList); export default withList(options)(AdminUsersList);

View file

@ -1,10 +1,10 @@
import { Components, registerComponent, withCurrentUser } from 'meteor/vulcan:core'; import { Components, registerComponent, withCurrentUser } from 'meteor/vulcan:core';
import React, { PropTypes, Component } from 'react'; import React, { PropTypes, Component } from 'react';
import classNames from 'classnames';
const Layout = ({currentUser, children}) => const Layout = ({currentUser, children, currentRoute}) =>
<div className="wrapper" id="wrapper">
<Components.HeadTags /> <div className={classNames('wrapper', `wrapper-${currentRoute.name.replace('.', '-')}`)} id="wrapper">
{currentUser ? <Components.UsersProfileCheck currentUser={currentUser} documentId={currentUser._id} /> : null} {currentUser ? <Components.UsersProfileCheck currentUser={currentUser} documentId={currentUser._id} /> : null}

View file

@ -21,11 +21,18 @@ class App extends PureComponent {
} }
render() { render() {
const currentRoute = _.last(this.props.routes);
const LayoutComponent = currentRoute.layoutName ? Components[currentRoute.layoutName] : Components.Layout;
return ( return (
<IntlProvider locale={this.getLocale()} messages={Strings[this.getLocale()]}> <IntlProvider locale={this.getLocale()} messages={Strings[this.getLocale()]}>
<Components.Layout {...this.props} > <div>
<Components.HeadTags />
<LayoutComponent {...this.props} currentRoute={currentRoute}>
{ this.props.currentUserLoading ? <Components.Loading /> : this.props.children } { this.props.currentUserLoading ? <Components.Loading /> : this.props.children }
</Components.Layout> </LayoutComponent>
</div>
</IntlProvider> </IntlProvider>
); );
} }

View file

@ -23,7 +23,7 @@ export {
// render context // render context
renderContext, getRenderContext, withRenderContext, renderContext, getRenderContext, withRenderContext,
// routes // routes
Routes, addRoute, addAsChildRoute, getRoute, populateRoutesApp, Routes, RoutesTable, addRoute, addAsChildRoute, getRoute, populateRoutesApp,
// settings // settings
getSetting, getSetting,
// strings // strings

View file

@ -1,8 +1,8 @@
import { addRoute, getComponent } from 'meteor/vulcan:core'; import { addRoute, getComponent } from 'meteor/vulcan:core';
addRoute([ addRoute([
{name: "cheatsheet", path: "/cheatsheet", component: import('../components/Cheatsheet.jsx')}, {name: "cheatsheet", path: "/cheatsheet", component: import('./components/Cheatsheet.jsx')},
{name: "groups", path: "/groups", component: import('../components/Groups.jsx')}, {name: "groups", path: "/groups", component: import('./components/Groups.jsx')},
{name: "settings", path: "/settings", component: import('../components/Settings.jsx')}, {name: "settings", path: "/settings", component: import('./components/Settings.jsx')},
{name: "emails", path: "/emails", component: import('../components/Emails.jsx')}, {name: "emails", path: "/emails", component: import('./components/Emails.jsx')},
]); ]);

View file

@ -13,7 +13,7 @@ export { Components, registerComponent, replaceComponent, getRawComponent, getCo
export { Collections, createCollection } from './collections.js'; export { Collections, createCollection } from './collections.js';
export { Callbacks, addCallback, removeCallback, runCallbacks, runCallbacksAsync } from './callbacks.js'; export { Callbacks, addCallback, removeCallback, runCallbacks, runCallbacksAsync } from './callbacks.js';
export { GraphQLSchema, addGraphQLSchema, addGraphQLQuery, addGraphQLMutation, addGraphQLResolvers, removeGraphQLResolver, addToGraphQLContext } from './graphql.js'; export { GraphQLSchema, addGraphQLSchema, addGraphQLQuery, addGraphQLMutation, addGraphQLResolvers, removeGraphQLResolver, addToGraphQLContext } from './graphql.js';
export { Routes, addRoute, addAsChildRoute, getRoute, populateRoutesApp } from './routes.js'; export { Routes, RoutesTable, addRoute, addAsChildRoute, getRoute, populateRoutesApp } from './routes.js';
export { Utils } from './utils.js'; export { Utils } from './utils.js';
export { getSetting } from './settings.js'; export { getSetting } from './settings.js';
export { Strings, addStrings } from './strings.js'; export { Strings, addStrings } from './strings.js';

View file

@ -10,6 +10,7 @@ import {
addRoute, addRoute,
Routes, populateComponentsApp, populateRoutesApp, Routes, populateComponentsApp, populateRoutesApp,
getRenderContext, getRenderContext,
dynamicLoader,
} from 'meteor/vulcan:lib'; } from 'meteor/vulcan:lib';
import { RouterServer } from './router.jsx'; import { RouterServer } from './router.jsx';
@ -29,6 +30,13 @@ Meteor.startup(() => {
delete indexRoute.path; // delete the '/' path to avoid warning delete indexRoute.path; // delete the '/' path to avoid warning
} }
// go through each route and if it's a promise, wrap it with dynamicLoader
_.forEach(childRoutes, (route, routeName) => {
if (route.component && typeof route.component.then === 'function') {
route.component = dynamicLoader(route.component);
}
});
const AppRoutes = { const AppRoutes = {
path: '/', path: '/',
component: Components.App, component: Components.App,