1
0
Fork 0
mirror of https://github.com/betagouv/mon-entreprise synced 2025-02-09 02:55:01 +00:00
mon-entreprise/source/components/SearchButton.js
Maxime Quandalle dbbb67ee7f
Ajout du lint pour les hooks React
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.
2019-09-17 12:54:54 +02:00

47 lines
1.2 KiB
JavaScript

import { compose } from 'ramda'
import React, { useEffect, useState } from 'react'
import emoji from 'react-easy-emoji'
import { Trans } from 'react-i18next'
import { connect } from 'react-redux'
import { flatRulesSelector } from 'Selectors/analyseSelectors'
import Overlay from './Overlay'
import SearchBar from './SearchBar'
export default compose(
connect(state => ({
flatRules: flatRulesSelector(state)
}))
)(function SearchButton({ flatRules, invisibleButton }) {
const [visible, setVisible] = useState(false)
useEffect(() => {
const handleKeyDown = e => {
if (!(e.ctrlKey && e.key === 'k')) return
setVisible(true)
e.preventDefault()
e.stopPropagation()
return false
}
window.addEventListener('keydown', handleKeyDown)
return () => {
window.removeEventListener('keydown', handleKeyDown)
}
}, [])
const close = () => setVisible(false)
return visible ? (
<Overlay onClose={close}>
<h2>
<Trans>Chercher dans la documentation</Trans>
</h2>
<SearchBar showDefaultList={false} finally={close} rules={flatRules} />
</Overlay>
) : invisibleButton ? null : (
<button
className="ui__ simple small button"
onClick={() => setVisible(true)}>
{emoji('🔍')} <Trans>Rechercher</Trans>
</button>
)
})