1
0
Fork 0
mirror of https://github.com/betagouv/mon-entreprise synced 2025-02-10 01:05:02 +00:00
mon-entreprise/source/components/SearchButton.js
Maxime Quandalle 6ea5dd0870 Migration de React "class" à "function"
Le but de la refacto est de généraliser l'utilisation des hook

Nombre de composants convertis: 52
Nombre de composants restants: 12

Il est possible de compter les composants class restants en utilisant
grep "render()"

L'occasion aussi de remplacer la dernière occurence de UNSAFE_componentWillMount
2019-09-11 11:17:23 +02:00

49 lines
1.3 KiB
JavaScript

import { compose } from 'ramda'
import React, { useEffect, useState } from 'react'
import emoji from 'react-easy-emoji'
import { Trans, withTranslation } 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)
})),
withTranslation()
)(function SearchButton({ flatRules, invisibleButton }) {
const [visible, setVisible] = useState(false)
useEffect(() => {
window.addEventListener('keydown', handleKeyDown)
return () => {
window.removeEventListener('keydown', handleKeyDown)
}
}, [])
const handleKeyDown = e => {
if (!(e.ctrlKey && e.key === 'k')) return
setVisible(true)
e.preventDefault()
e.stopPropagation()
return false
}
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>
)
})