coop-cloud-chaos-patchs/outline
coop-cloud-chaos-patchs
/
outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Closes #103 - Scroll to top on nav

This commit is contained in:
Tom Moor 2017-07-02 22:16:48 -07:00
parent 8dfbd1cc59
commit 5fa9029caa
No known key found for this signature in database
GPG Key ID: 495FE29B5F21BD41
3 changed files with 58 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/components/ScrollToTop/ScrollToTop.js Normal file
View File

@ -0,0 +1,18 @@
// @flow
// based on: https://reacttraining.com/react-router/web/guides/scroll-restoration
import { Component } from 'react';
import { withRouter } from 'react-router';
class ScrollToTop extends Component {
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
window.scrollTo(0, 0);
}
}
render() {
return this.props.children;
}
}
export default withRouter(ScrollToTop);

3
frontend/components/ScrollToTop/index.js Normal file
View File

@ -0,0 +1,3 @@
// @flow
import ScrollToTop from './ScrollToTop';
export default ScrollToTop;

71
frontend/index.js
View File

@ -33,6 +33,7 @@ import Flatpage from 'scenes/Flatpage';
import ErrorAuth from 'scenes/ErrorAuth';
import Error404 from 'scenes/Error404';
import ScrollToTop from 'components/ScrollToTop';
import Layout from 'components/Layout';
import flatpages from 'static/flatpages';
@ -91,46 +92,48 @@ render(
<div style={{ display: 'flex', flex: 1, height: '100%' }}>
<Provider {...stores}>
<Router>
<Switch>
<Route exact path="/" component={Home} />
<ScrollToTop>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/auth/slack" component={SlackAuth} />
<Route exact path="/auth/slack/commands" component={SlackAuth} />
<Route exact path="/auth/error" component={ErrorAuth} />
<Route exact path="/auth/slack" component={SlackAuth} />
<Route exact path="/auth/slack/commands" component={SlackAuth} />
<Route exact path="/auth/error" component={ErrorAuth} />
<Auth>
<Layout>
<Switch>
<Route exact path="/dashboard" component={Dashboard} />
<Route exact path="/starred" component={Starred} />
<Route exact path="/collections/:id" component={Collection} />
<Route exact path="/d/:id" component={Document} />
<Auth>
<Layout>
<Switch>
<Route exact path="/dashboard" component={Dashboard} />
<Route exact path="/starred" component={Starred} />
<Route exact path="/collections/:id" component={Collection} />
<Route exact path="/d/:id" component={Document} />
<Route exact path="/d/:id/:edit" component={Document} />
<Route
exact
path="/collections/:id/new"
component={DocumentNew}
/>
<Route exact path="/d/:id/new" component={DocumentNewChild} />
<Route exact path="/d/:id/:edit" component={Document} />
<Route
exact
path="/collections/:id/new"
component={DocumentNew}
/>
<Route exact path="/d/:id/new" component={DocumentNewChild} />
<Route exact path="/search" component={Search} />
<Route exact path="/search/:query" component={Search} />
<Route exact path="/settings" component={Settings} />
<Route exact path="/search" component={Search} />
<Route exact path="/search/:query" component={Search} />
<Route exact path="/settings" component={Settings} />
<Route
exact
path="/keyboard-shortcuts"
component={KeyboardShortcuts}
/>
<Route exact path="/developers" component={Api} />
<Route
exact
path="/keyboard-shortcuts"
component={KeyboardShortcuts}
/>
<Route exact path="/developers" component={Api} />
<Route path="/404" component={Error404} />
<Route component={notFoundSearch} />
</Switch>
</Layout>
</Auth>
</Switch>
<Route path="/404" component={Error404} />
<Route component={notFoundSearch} />
</Switch>
</Layout>
</Auth>
</Switch>
</ScrollToTop>
</Router>
</Provider>
{DevTools && <DevTools position={{ bottom: 0, right: 0 }} />}