Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #29 from Unleash/fix-scroll-position

Browse Source 
Keep scroll postion.
This commit is contained in:
Ivar Conradi Østhus 2016-12-30 19:23:07 +01:00 committed by GitHub
commit 1d2980940f
3 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/package.json
View File

@ -45,6 +45,7 @@
"react-modal": "^1.6.4", "react-modal": "^1.6.4",
"react-redux": "^4.4.5", "react-redux": "^4.4.5",
"react-router": "^3.0.0", "react-router": "^3.0.0",
"react-router-scroll": "^0.4.1",
"redux": "^3.6.0", "redux": "^3.6.0",
"redux-thunk": "^2.1.0", "redux-thunk": "^2.1.0",
"whatwg-fetch": "^2.0.0" "whatwg-fetch": "^2.0.0"

20
frontend/src/component/app.jsx
View File

@ -9,6 +9,7 @@ import ErrorContainer from './error/error-container';
import UserContainer from './user/user-container'; import UserContainer from './user/user-container';
import ShowUserContainer from './user/show-user-container'; import ShowUserContainer from './user/show-user-container';
import { ScrollContainer } from 'react-router-scroll';
const base = { const base = {
name: 'Unleash', name: 'Unleash',
@ -42,10 +43,6 @@ export default class App extends Component {
if (this.props.location.pathname !== nextProps.location.pathname) { if (this.props.location.pathname !== nextProps.location.pathname) {
clearTimeout(this.timer); clearTimeout(this.timer);
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
window.requestAnimationFrame(() => {
document.querySelector('.mdl-layout__content').scrollTop = 0;
});
const layout = document.querySelector('.mdl-js-layout'); const layout = document.querySelector('.mdl-js-layout');
const drawer = document.querySelector('.mdl-layout__drawer'); const drawer = document.querySelector('.mdl-layout__drawer');
// hack, might get a built in alternative later // hack, might get a built in alternative later
@ -96,12 +93,19 @@ export default class App extends Component {
} }
render () { render () {
const shouldUpdateScroll = (prevRouterProps, { location }) => {
if (prevRouterProps && location.pathname !== prevRouterProps.location.pathname) {
return location.action === 'POP';
} else {
return [0, 0];
}
};
const createListItem = (path, caption, icon) => const createListItem = (path, caption, icon) =>
<a <Link
href={this.context.router.createHref(path)} to={path}
className={this.context.router.isActive(path) ? style.active : ''}> className={this.context.router.isActive(path) ? style.active : ''}>
{icon && <Icon name={icon} />} {caption} {icon && <Icon name={icon} />} {caption}
</a>; </Link>;
return ( return (
<div style={{}}> <div style={{}}>
@ -122,6 +126,7 @@ export default class App extends Component {
{createListItem('/applications', 'Applications', 'apps')} {createListItem('/applications', 'Applications', 'apps')}
</Navigation> </Navigation>
</Drawer> </Drawer>
<ScrollContainer scrollKey="container" shouldUpdateScroll={shouldUpdateScroll}>
<Content> <Content>
<Grid shadow={1} style={{ maxWidth: '1200px', margin: '0 auto' }}> <Grid shadow={1} style={{ maxWidth: '1200px', margin: '0 auto' }}>
<Cell col={12}> <Cell col={12}>
@ -161,6 +166,7 @@ export default class App extends Component {
</FooterSection> </FooterSection>
</Footer> </Footer>
</Content> </Content>
</ScrollContainer>
</Layout> </Layout>
</div> </div>
); );

5
frontend/src/index.jsx
View File

@ -4,7 +4,8 @@ import 'react-mdl/extra/material.js';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { Router, Route, IndexRedirect, hashHistory } from 'react-router'; import { applyRouterMiddleware, Router, Route, IndexRedirect, hashHistory } from 'react-router';
import { useScroll } from 'react-router-scroll';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk'; import thunkMiddleware from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux'; import { createStore, applyMiddleware } from 'redux';
@ -35,7 +36,7 @@ const unleashStore = createStore(
ReactDOM.render( ReactDOM.render(
<Provider store={unleashStore}> <Provider store={unleashStore}>
<Router history={hashHistory}> <Router history={hashHistory} render={applyRouterMiddleware(useScroll())}>
<Route path="/" component={App}> <Route path="/" component={App}>
<IndexRedirect to="/features" /> <IndexRedirect to="/features" />