🐛 Améliore la mécanique du scroll automatique à divers endroits

+ corrige la différence chrome/firefox
Fix #346

source/components/utils/Scroll.js

@@ -35,7 +35,9 @@ export class ScrollToElement extends Component {
 			return
 		}
 		this.ref.scrollIntoView({
-			behavior: this.props.behavior
+			behavior: this.props.behavior,
+			block: 'nearest',
+			inline: 'nearest'
 		})
 	}
 	componentDidMount() {

source/sites/mycompanyinfrance.fr/App.js

@@ -9,7 +9,7 @@ import {
 } from '../../storage/persistEverything'
 import './App.css'
 import Landing from './Landing'
-import CreateMyCompany from './pages/Company'
+import CompanyIndex from './pages/Company'
 import Footer from './pages/Footer/Footer'
 import StepsHeader from './pages/Header/StepsHeader'
 import HiringProcess from './pages/HiringProcess'
@@ -35,7 +35,7 @@ class InFranceRoute extends Component {
 							{/* Passing location down to prevent update blocking */}
 							<StepsHeader location={location} />
 							<div className="ui__ container">
-								<Route path="/company" component={CreateMyCompany} />
+								<Route path="/company" component={CompanyIndex} />
 								<Route path="/social-security" component={SocialSecurity} />
 								<Route path="/hiring-process" component={HiringProcess} />
 							</div>

source/sites/mycompanyinfrance.fr/pages/Company/Home.js

@@ -1,19 +1,16 @@
 /* @flow */
-import Scroll from 'Components/utils/Scroll'
 import React from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { nextQuestionUrlSelector } from 'Selectors/companyStatusSelectors'
-import { isIE } from '../../../../utils'
 import LegalStatusChoices from './LegalStatusChoice'
 
-import type { Match, RouterHistory } from 'react-router'
+import type { Match } from 'react-router'
 type Props = {
 	match: Match,
-	history: RouterHistory,
 	nextQuestionUrl: string
 }
-const CreateMyCompany = ({ match, nextQuestionUrl, history }: Props) => (
+const CreateMyCompany = ({ match, nextQuestionUrl }: Props) => (
 	<>
 		<h1 className="question__title">Create your company</h1>
 		<p>
@@ -37,8 +34,6 @@ const CreateMyCompany = ({ match, nextQuestionUrl, history }: Props) => (
 				</Link>
 			</div>
 		)}
-		{!isIE() &&
-			!match.isExact && <Scroll.toElement key={history.location.pathname} />}
 		<LegalStatusChoices />
 	</>
 )

source/sites/mycompanyinfrance.fr/pages/Company/MainStatus.js

@@ -143,7 +143,7 @@ const SetMainStatus = ({ history, possibleStatus }: Props) => {
 			</ul>
 			<div className="ui__ answer-group">
 				<Link to="/social-security" className="ui__ skip-button">
-					Do it later ›
+					Choose later ›
 				</Link>
 			</div>
 		</>

source/sites/mycompanyinfrance.fr/pages/Company/index.js

@@ -1,27 +1,28 @@
 import React from 'react'
-import { Route, Switch, Redirect } from 'react-router'
-import { animated, Transition } from 'react-spring'
+import { connect } from 'react-redux'
+import { Redirect, Route, Switch } from 'react-router'
 import * as Animate from 'Ui/animate'
+import { ScrollToElement } from '../../../../components/utils/Scroll'
+import AfterRegistration from './AfterRegistration'
+import CreationChecklist from './CreationChecklist'
 import DefineDirectorStatus from './DirectorStatus'
 import Find from './Find'
 import Home from './Home'
 import Liability from './Liability'
 import MainStatus from './MainStatus'
-import { connect } from "react-redux";
-import MinorityDirector from './MinorityDirector'
 import Microenterprise from './Microenterprise'
-import AfterRegistration from './AfterRegistration'
+import MinorityDirector from './MinorityDirector'
 import NumberOfAssociate from './NumberOfAssociate'
-import CreationChecklist from './CreationChecklist'
 
-
-const withRouteAnimation = style => AnimatedComponent => {
-	const withRouteAnimation = props => (
-		<animated.div style={style}>
-			<AnimatedComponent {...props} />
-		</animated.div>
+const withAnimation = Component => {
+	const AnimateRouteComponent = (...props) => (
+		<ScrollToElement onlyIfNotVisible>
+			<Animate.fromBottom>
+				<Component {...props} />
+			</Animate.fromBottom>
+		</ScrollToElement>
 	)
-	return withRouteAnimation;
+	return AnimateRouteComponent
 }
 
 const CreateMyCompany = ({ match, location, companyStatusChoice }) => (
@@ -31,63 +32,51 @@ const CreateMyCompany = ({ match, location, companyStatusChoice }) => (
 				<Route
 					path={match.path + '/create-:status'}
 					component={CreationChecklist}
-					/>
+				/>
 				<Route path={match.path + '/find'} component={Find} />
-				{companyStatusChoice && 
-					<Redirect exact from={match.path} to={match.path + '/create-' + companyStatusChoice} /> 
-				}
-				<Route path={match.path + '/after-registration'} component={AfterRegistration} /> 
+				{companyStatusChoice && (
+					<Redirect
+						exact
+						from={match.path}
+						to={match.path + '/create-' + companyStatusChoice}
+					/>
+				)}
+				<Route
+					path={match.path + '/after-registration'}
+					component={AfterRegistration}
+				/>
 				<Route path={match.path} component={Home} />
 			</Switch>
-			<div className="ui__ route-trans">
-				<Transition
-					from={{
-						opacity: 0,
-						transform: 'translateX(100%)'
-					}}
-					native
-					keys={location.pathname}
-					enter={{
-						opacity: 1,
-						transform: 'translateX(0%)'
-					}}
-					leave={{
-						opacity: 0,
-						position: 'absolute',
-						transform: 'translateX(-100%)'
-					}}>
-					{style => (
-							<Switch location={location}>
-								<Route
-									path={match.path + '/liability'}
-									component={withRouteAnimation(style)(Liability)}
-								/>
-								<Route
-									path={match.path + '/director-status'}
-									component={withRouteAnimation(style)(DefineDirectorStatus)}
-								/>
-								<Route
-									path={match.path + '/microenterprise'}
-									component={withRouteAnimation(style)(Microenterprise)}
-								/>
-								<Route
-									path={match.path + '/multiple-associates'}
-									component={withRouteAnimation(style)(NumberOfAssociate)}
-								/>
-								<Route
-									path={match.path + '/pick-legal-status'}
-									component={withRouteAnimation(style)(MainStatus)}
-								/>
-								<Route
-									path={match.path + '/minority-director'}
-									component={withRouteAnimation(style)(MinorityDirector)}
-								/>
-							</Switch>
-					)}
-				</Transition>
-			</div>
+			<Switch location={location}>
+				<Route
+					path={match.path + '/liability'}
+					component={withAnimation(Liability)}
+				/>
+				<Route
+					path={match.path + '/director-status'}
+					component={withAnimation(DefineDirectorStatus)}
+				/>
+				<Route
+					path={match.path + '/microenterprise'}
+					component={withAnimation(Microenterprise)}
+				/>
+				<Route
+					path={match.path + '/multiple-associates'}
+					component={withAnimation(NumberOfAssociate)}
+				/>
+				<Route
+					path={match.path + '/pick-legal-status'}
+					component={withAnimation(MainStatus)}
+				/>
+				<Route
+					path={match.path + '/minority-director'}
+					component={withAnimation(MinorityDirector)}
+				/>
+			</Switch>
 		</Animate.fromBottom>
 	</>
 )
 
-export default connect(state => ({ companyStatusChoice: state.inFranceApp.companyStatusChoice}))(CreateMyCompany)
+export default connect(state => ({
+	companyStatusChoice: state.inFranceApp.companyStatusChoice
+}))(CreateMyCompany)