betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

Les variations désactivées sont repliées par défaut 

Quand une simulation est en cours
pull/492/head
Mael 2019-03-20 16:19:59 +01:00
parent 90895097ab
commit 5313cd27de
1 changed files with 77 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
source/engine/mecanismViews/Variations.js
View File

@ -6,52 +6,90 @@ import classNames from 'classnames'
import writtenNumbers from '../../locales/writtenNumbers.yaml'
import withLanguage from 'Components/utils/withLanguage'
import { Trans } from 'react-i18next'
import { ShowValuesConsumer } from 'Components/rule/ShowValuesContext'
import emoji from 'react-easy-emoji'
import { useState } from 'react'
let Comp = withLanguage(function Variations({
language,
nodeValue,
explanation
}) {
let [expandedVariation, toggleVariation] = useState(null)
return (
<Node
classes="mecanism variations"
name="variations"
inline
value={nodeValue}
child={
<>
<p>
<Trans>Cette règle présente</Trans>{' '}
{writtenNumbers[language][explanation.length]}{' '}
<InlineMecanism name="variations" /> :
</p>
<ul>
{explanation.map(({ condition, consequence, satisfied }) => (
<li
className={classNames('variation', { satisfied })}
key={JSON.stringify(condition || 'sinon')}>
<div className="condition">
{condition && (
<span>
<Trans>Si</Trans> {makeJsx(condition)}
</span>
)}
<div className="consequence">
<span className="consequenceType">
{condition ? <Trans>Alors</Trans> : <Trans>Sinon</Trans>}{' '}
:
</span>
<span className="consequenceContent">
{consequence && makeJsx(consequence)}
</span>
</div>
</div>
</li>
))}
</ul>
</>
}
/>
<ShowValuesConsumer>
{showValues => (
<Node
classes="mecanism variations"
name="variations"
inline
value={nodeValue}
child={
<>
<p>
<Trans>Cette règle présente</Trans>{' '}
{writtenNumbers[language][explanation.length]}{' '}
<InlineMecanism name="variations" /> :
</p>
<ul>
{explanation.map(({ condition, consequence, satisfied }, i) => (
<li
className={classNames('variation', {
satisfied: showValues && satisfied
})}
key={i}>
{showValues &&
(!satisfied && !(expandedVariation === i)) ? (
<p style={{ opacity: '0.6' }}>
non applicable{' '}
<button
className="ui__ link-button"
onClick={() =>
toggleVariation(expandedVariation !== i ? i : null)
}>
détails {emoji(' ▶️')}
</button>
</p>
) : (
<>
{expandedVariation === i && (
<button
className="ui__ link-button"
onClick={() => toggleVariation(null)}>
replier {emoji(' 🔽')}
</button>
)}
<div className="condition">
{condition && (
<span>
<Trans>Si</Trans> {makeJsx(condition)}
</span>
)}
<div className="consequence">
<span className="consequenceType">
{condition ? (
<Trans>Alors</Trans>
) : (
<Trans>Sinon</Trans>
)}{' '}
:
</span>
<span className="consequenceContent">
{consequence && makeJsx(consequence)}
</span>
</div>
</div>
</>
)}
</li>
))}
</ul>
</>
}
/>
)}
</ShowValuesConsumer>
)
})
// eslint-disable-next-line