mirror of
https://github.com/betagouv/mon-entreprise
synced 2025-02-09 05:15:02 +00:00
dbbb67ee7f
Comme recommandé dans la documentation des hooks React, ajout des deux linters suivants : react-hooks/rules-of-hooks et react-hooks/exhaustive-deps Mise à jour des composants, en particulier les useEffect pour y spécifier toutes les dépendances.
36 lines
1.1 KiB
JavaScript
36 lines
1.1 KiB
JavaScript
import { Markdown } from 'Components/utils/markdown'
|
|
import { path } from 'ramda'
|
|
import React, { useState } from 'react'
|
|
import './Dictionary.css'
|
|
import Overlay from './Overlay'
|
|
|
|
// On ajoute à la section la possibilité d'ouvrir un panneau d'explication des termes.
|
|
// Il suffit à la section d'appeler une fonction fournie en lui donnant du JSX
|
|
export let AttachDictionary = dictionary => Decorated =>
|
|
function withDictionary(props) {
|
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
const [{ explanation, term }, setState] = useState({
|
|
term: null,
|
|
explanation: null
|
|
})
|
|
|
|
const onClick = e => {
|
|
let term = e.target.dataset['termDefinition'],
|
|
explanation = path([term, 'description'], dictionary)
|
|
if (!term) return null
|
|
setState({ explanation, term })
|
|
}
|
|
|
|
return (
|
|
<div onClick={onClick}>
|
|
<Decorated {...props} />
|
|
{explanation && (
|
|
<Overlay onClose={() => setState({ term: null, explanation: null })}>
|
|
<div id="dictionaryPanel">
|
|
<Markdown source={`### Mécanisme : ${term}\n\n${explanation}`} />
|
|
</div>
|
|
</Overlay>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|