69 lines
1.6 KiB
JavaScript
69 lines
1.6 KiB
JavaScript
import React, { Component } from 'react'
|
|
import { connect } from 'react-redux'
|
|
|
|
import marked from 'Engine/marked'
|
|
import { rules, findRuleByDottedName } from 'Engine/rules'
|
|
import { EXPLAIN_VARIABLE } from '../actions'
|
|
|
|
import References from './rule/References'
|
|
import './Aide.css'
|
|
|
|
@connect(
|
|
state => ({
|
|
explained: state.explainedVariable,
|
|
themeColours: state.themeColours
|
|
}),
|
|
dispatch => ({
|
|
stopExplaining: () => dispatch({ type: EXPLAIN_VARIABLE })
|
|
})
|
|
)
|
|
export default class Aide extends Component {
|
|
renderExplanationMarkdown(explanation, term) {
|
|
return marked(`### ${term} \n\n${explanation}`)
|
|
}
|
|
render() {
|
|
let { explained, stopExplaining, themeColours } = this.props
|
|
|
|
if (!explained) return <section id="helpWrapper" />
|
|
|
|
let rule = findRuleByDottedName(rules, explained),
|
|
text = rule.description,
|
|
refs = rule.références
|
|
|
|
let possibilities = rule['choix exclusifs']
|
|
|
|
return (
|
|
<div id="helpWrapper" className="active">
|
|
<section id="help">
|
|
<i
|
|
className="fa fa-times-circle"
|
|
onClick={stopExplaining}
|
|
style={{ color: themeColours.colour }}
|
|
/>
|
|
<p
|
|
dangerouslySetInnerHTML={{
|
|
__html: this.renderExplanationMarkdown(text, rule.title)
|
|
}}
|
|
/>
|
|
{/* { possibilities &&
|
|
<p>
|
|
{possibilities.length} possibilités :
|
|
<ul>
|
|
{possibilities.map(p =>
|
|
<li key={p}>{p}</li>
|
|
)}
|
|
</ul>
|
|
</p>
|
|
} */}
|
|
{refs && (
|
|
<div>
|
|
<p>Pour en savoir plus: </p>
|
|
<References refs={refs} />
|
|
</div>
|
|
)}
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|
|
}
|