add inline rendering prop to app component

This commit is contained in:
Jake McDermott
2019-01-02 01:40:44 -05:00
parent f2760ed91c
commit a023df2c17
2 changed files with 60 additions and 63 deletions

View File

@@ -73,75 +73,57 @@ class App extends Component {
render () { render () {
const { config, isNavOpen } = this.state; const { config, isNavOpen } = this.state;
const { navLabel = '', routeGroups = [] } = this.props; const {
render,
const header = ( routeGroups = [],
<PageHeader navLabel = '',
showNavToggle } = this.props;
onNavToggle={() => this.onNavToggle()}
logo={(
<TowerLogo
onClick={this.onLogoClick}
/>
)}
toolbar={(
<Toolbar>
<ToolbarGroup>
<ToolbarItem>
<HelpDropdown />
</ToolbarItem>
<ToolbarItem>
<LogoutButton
onDevLogout={() => this.onDevLogout()}
/>
</ToolbarItem>
</ToolbarGroup>
</Toolbar>
)}
/>
);
const sidebar = (
<PageSidebar
isNavOpen={isNavOpen}
nav={(
<Nav aria-label={navLabel}>
<NavList>
{routeGroups.map(params => (
<NavExpandableGroup key={params.groupId} {...params} />
))}
</NavList>
</Nav>
)}
/>
);
return ( return (
<ConfigContext.Provider value={config}> <ConfigContext.Provider value={config}>
<Page <Page
usecondensed="True" usecondensed="True"
header={header} header={(
sidebar={sidebar} <PageHeader
showNavToggle
onNavToggle={() => this.onNavToggle()}
logo={(
<TowerLogo
onClick={this.onLogoClick}
/>
)}
toolbar={(
<Toolbar>
<ToolbarGroup>
<ToolbarItem>
<HelpDropdown />
</ToolbarItem>
<ToolbarItem>
<LogoutButton
onDevLogout={this.onLogout}
/>
</ToolbarItem>
</ToolbarGroup>
</Toolbar>
)}
/>
)}
sidebar={(
<PageSidebar
isNavOpen={isNavOpen}
nav={(
<Nav aria-label={navLabel}>
<NavList>
{routeGroups.map(params => (
<NavExpandableGroup key={params.groupId} {...params} />
))}
</NavList>
</Nav>
)}
/>
)}
> >
{ { render ? render({ routeGroups }) : '' }
//
// Extract a flattened array of all route params from the provided route config
// and use it to render route components.
//
// [{ routes }, { routes }] -> [route, route, route] -> (<Route/><Route/><Route/>)
//
routeGroups
.reduce((allRoutes, { routes }) => allRoutes.concat(routes), [])
.map(({ component: Component, path }) => (
<Route
key={path}
path={path}
render={params => (
<Component {...params } />
)}
/>
))
}
</Page> </Page>
</ConfigContext.Provider> </ConfigContext.Provider>
); );

View File

@@ -235,6 +235,21 @@ export async function main () {
], ],
}, },
]} ]}
render={({ routeGroups }) => (
routeGroups
.reduce((allRoutes, { routes }) => allRoutes.concat(routes), [])
.map(({ component: PageComponent, path }) => (
<Route
key={path}
path={path}
render={({ match }) => (
<PageComponent
match={match}
/>
)}
/>
))
)}
/> />
)} )}
/> />