-
-
Notifications
You must be signed in to change notification settings - Fork 67
/
AttachDictionary.js
36 lines (33 loc) · 1.09 KB
/
AttachDictionary.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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>
)
}