[infrance] scroll si la question n'est pas visible

package.json

@@ -35,7 +35,6 @@
 		"react-redux": "^5.0.7",
 		"react-router": "^4.2.0",
 		"react-router-dom": "^4.2.2",
-		"react-scroll": "^1.7.7",
 		"react-select": "^1.2.1",
 		"react-select-fast-filter-options": "^0.2.3",
 		"react-spring": "^5.3.18",

source/components/RulePage.js

@@ -1,4 +1,5 @@
 import { setExample } from 'Actions/actions'
+import { ScrollToTop } from 'Components/utils/Scroll'
 import { encodeRuleName } from 'Engine/rules'
 import {
 	decodeRuleName,
@@ -11,7 +12,6 @@ import { Trans, translate } from 'react-i18next'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router'
 import { Link, Redirect } from 'react-router-dom'
-import { animateScroll } from 'react-scroll'
 import {
 	flatRulesSelector,
 	noUserInputSelector
@@ -27,9 +27,6 @@ import SearchButton from './SearchButton'
 }))
 @translate()
 export default class RulePage extends Component {
-	componentDidMount() {
-		animateScroll.scrollToTop({ duration: 300 })
-	}
 	render() {
 		let { flatRules } = this.props,
 			name = path(['match', 'params', 'name'], this.props),
@@ -52,6 +49,7 @@ export default class RulePage extends Component {
 	renderRule(dottedName) {
 		return (
 			<div id="RulePage" className="ui__ container">
+				<ScrollToTop />
 				<div className="rule-page__header">
 					{!this.props.noUserInputSelector && (
 						<BackToSimulation colour={this.props.themeColours.colour} />

source/components/Simu.js

@@ -1,5 +1,4 @@
 import { startConversation } from 'Actions/actions'
-import Scroll from 'Components/utils/Scroll'
 import withColours from 'Components/utils/withColours'
 import withLanguage from 'Components/utils/withLanguage'
 import React, { Component } from 'react'
@@ -115,10 +114,7 @@ export default class Simu extends Component {
 					)}
 					<div id="focusZone">
 						{displayConversation && (
-							<>
-								<Scroll.toTop behavior="smooth" />
-								<Conversation textColourOnWhite={colours.textColourOnWhite} />
-							</>
+							<Conversation textColourOnWhite={colours.textColourOnWhite} />
 						)}
 						<TargetSelection colours={colours} />
 					</div>

source/components/conversation/Conversation.js

@@ -1,3 +1,4 @@
+import { ScrollToElement } from 'Components/utils/Scroll'
 import { getInputComponent } from 'Engine/generateQuestions'
 import React, { Component } from 'react'
 import { translate } from 'react-i18next'
@@ -32,6 +33,7 @@ export default class Conversation extends Component {
 				<div id="currentQuestion" key={currentQuestion}>
 					{currentQuestion && (
 						<Animate.fadeIn>
+							<ScrollToElement onlyIfNotVisible />
 							{getInputComponent(flatRules, targetNames)(currentQuestion)}
 						</Animate.fadeIn>
 					)}

source/components/utils/Scroll.js

@@ -17,9 +17,16 @@ export class ScrollToTop extends Component {
 
 export class ScrollToElement extends Component {
 	static defaultProps = {
-		behavior: 'smooth'
+		behavior: 'smooth',
+		onlyIfNotVisible: false
 	}
 	componentDidMount() {
+		if (
+			this.props.onlyIfNotVisible &&
+			this.ref.getBoundingClientRect().top >= 0
+		) {
+			return
+		}
 		this.ref.scrollIntoView({
 			behavior: this.props.behavior
 		})

yarn.lock

@@ -4944,10 +4944,6 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
-lodash.throttle@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
-
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -6631,13 +6627,6 @@ react-router@^4.2.0, react-router@^4.3.1:
     prop-types "^15.6.1"
     warning "^4.0.1"
 
-react-scroll@^1.7.7:
-  version "1.7.10"
-  resolved "https://registry.yarnpkg.com/react-scroll/-/react-scroll-1.7.10.tgz#b59cfa11a899a362c6489607ed5865c9c5fd0b53"
-  dependencies:
-    lodash.throttle "^4.1.1"
-    prop-types "^15.5.8"
-
 react-select-fast-filter-options@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/react-select-fast-filter-options/-/react-select-fast-filter-options-0.2.3.tgz#d9f667ab1fe7bcc2dd8bfd74277e56c771e9e518"