1
0
Fork 0
mirror of https://github.com/betagouv/mon-entreprise synced 2025-02-09 22:45:01 +00:00
mon-entreprise/source/components/AttachDictionary.js

37 lines
1.1 KiB
JavaScript
Raw Normal View History

import { Markdown } from 'Components/utils/markdown'
2018-01-08 16:07:26 +01:00
import { path } from 'ramda'
import React, { useState } from 'react'
2017-10-13 15:47:16 +02:00
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 => {
2018-11-13 11:23:21 +00:00
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>
)
}