import React, { Component } from 'react' import { Trans, translate } from 'react-i18next' import { connect } from 'react-redux' import { withRouter } from 'react-router' import './ProgressTip.css' import { Line } from 'rc-progress' @withRouter @connect(state => ({ foldedSteps: state.foldedSteps, nextSteps: state.nextSteps, colour: state.themeColours.colour })) @translate() export default class ProgressTip extends Component { render() { let { done, nextSteps, foldedSteps, colour, conversationVisible, selectingTargets } = this.props, nbQuestions = nextSteps.length if (selectingTargets && !conversationVisible) return nbQuestions ? ( <p>Vous aurez {nextSteps.length} questions !</p> ) : null if (!conversationVisible) return null return ( <div className="tip"> {nbQuestions != 0 && ( <p> {nbQuestions === 1 ? ( <Trans i18nKey="lastQ">Une dernière question !</Trans> ) : ( <Trans i18nKey="questionsLeft" count={nbQuestions}> Il reste moins de {{ nbQuestions }} questions. </Trans> )} <Line percent={ 100 * foldedSteps.length / (foldedSteps.length + nbQuestions) } strokeWidth="1" strokeColor={colour} trailColor="white" strokeLinecap="butt" /> </p> )} </div> ) } }