mon-entreprise/source/components/GoToExplanations.js

40 lines
1.1 KiB
JavaScript

import React, { Component } from 'react'
import { Trans, translate } from 'react-i18next'
import { connect } from 'react-redux'
import { Element, scroller } from 'react-scroll'
import './Explanation.css'
import { SimpleButton } from './ui/Button'
import withColours from './withColours'
@translate()
@withColours
@connect(state => ({
analysis: state.analysis,
conversationStarted: state.conversationStarted
}))
export default class GoToExplanation extends Component {
handleScrollToResults = () => {
scroller.scrollTo('resultsScrollElement', {
smooth: true,
duration: 200,
delay: 0
})
}
render() {
let { analysis, conversationStarted } = this.props
if (!analysis || !analysis.targets || !conversationStarted) return null
return (
<Element name="resultsScrollElement" id="resultsScrollElement">
<SimpleButton
className="scrollIndication down"
onClick={this.handleScrollToResults}>
<i className="fa fa-long-arrow-down" aria-hidden="true" />
&nbsp;<Trans i18nKey="details">Comprendre mes résultats</Trans>
</SimpleButton>
</Element>
)
}
}