101 lines
2.5 KiB
JavaScript
101 lines
2.5 KiB
JavaScript
import { goToQuestion, hideControl } from 'Actions/actions'
|
||
import { makeJsx } from 'Engine/evaluation'
|
||
import { createMarkdownDiv } from 'Engine/marked'
|
||
import { compose } from 'ramda'
|
||
import React from 'react'
|
||
import emoji from 'react-easy-emoji'
|
||
import { withTranslation } from 'react-i18next'
|
||
import { connect } from 'react-redux'
|
||
import { analysisWithDefaultsSelector } from 'Selectors/analyseSelectors'
|
||
import animate from 'Ui/animate'
|
||
import './Controls.css'
|
||
import withColours from './utils/withColours'
|
||
|
||
function Controls({
|
||
controls,
|
||
goToQuestion,
|
||
hideControl,
|
||
foldedSteps,
|
||
hiddenControls,
|
||
t,
|
||
inversionFail
|
||
}) {
|
||
if (!controls) {
|
||
return null
|
||
}
|
||
let messages = [
|
||
...controls,
|
||
...(inversionFail
|
||
? [
|
||
{
|
||
message: t([
|
||
'simulateurs.inversionFail',
|
||
'Le montant saisi est trop faible ou aboutit à une situation impossible, essayez en un autre'
|
||
]),
|
||
level: 'avertissement'
|
||
}
|
||
]
|
||
: [])
|
||
]
|
||
if (!messages?.length) return null
|
||
|
||
return (
|
||
<div id="controlsBlock">
|
||
<ul style={{ margin: 0, padding: 0 }}>
|
||
{messages.map(({ level, test, message, solution, evaluated }) =>
|
||
hiddenControls.includes(test) ? null : (
|
||
<animate.fromTop key={test}>
|
||
<li key={test}>
|
||
<div className="control">
|
||
{emoji(level == 'avertissement' ? '⚠️' : 'ℹ️')}
|
||
<div className="controlText ui__ card">
|
||
{message ? (
|
||
createMarkdownDiv(message)
|
||
) : (
|
||
<span id="controlExplanation">{makeJsx(evaluated)}</span>
|
||
)}
|
||
|
||
{solution && !foldedSteps.includes(solution.cible) && (
|
||
<div>
|
||
<button
|
||
key={solution.cible}
|
||
className="ui__ link-button"
|
||
onClick={() => goToQuestion(solution.cible)}>
|
||
{solution.texte}
|
||
</button>
|
||
</div>
|
||
)}
|
||
<button
|
||
className="hide"
|
||
aria-label="close"
|
||
onClick={() => hideControl(test)}>
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</animate.fromTop>
|
||
)
|
||
)}
|
||
</ul>
|
||
</div>
|
||
)
|
||
}
|
||
export default compose(
|
||
connect(
|
||
(state, props) => ({
|
||
foldedSteps: state.conversationSteps.foldedSteps,
|
||
controls: analysisWithDefaultsSelector(state)?.controls,
|
||
inversionFail: analysisWithDefaultsSelector(state)?.cache?.inversionFail,
|
||
key: props.language,
|
||
hiddenControls: state.simulation.hiddenControls
|
||
}),
|
||
{
|
||
goToQuestion,
|
||
hideControl
|
||
}
|
||
),
|
||
withColours,
|
||
withTranslation()
|
||
)(Controls)
|