overleaf/services/web/frontend/js/features/symbol-palette/components/symbol-palette-search.js
Timothée Alby e0616096e2 Merge pull request #4066 from overleaf/ae-symbol-search-input
Use FormControl for symbol palette search input

GitOrigin-RevId: c6f0c7f53797cab417c6bc15f1b30f20761b9fac
2021-05-21 02:08:43 +00:00

44 lines
1.2 KiB
JavaScript

import React, { useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import PropTypes from 'prop-types'
import { FormControl } from 'react-bootstrap'
import useDebounce from '../../../shared/hooks/use-debounce'
export default function SymbolPaletteSearch({ setInput, inputRef }) {
const [localInput, setLocalInput] = useState('')
// debounce the search input until a typing delay
const debouncedLocalInput = useDebounce(localInput, 250)
useEffect(() => {
setInput(debouncedLocalInput)
}, [debouncedLocalInput, setInput])
const { t } = useTranslation()
const inputRefCallback = useCallback(
element => {
inputRef.current = element
},
[inputRef]
)
return (
<FormControl
className="symbol-palette-search"
type="search"
inputRef={inputRefCallback}
id="symbol-palette-input"
aria-label="Search"
value={localInput}
placeholder={t('search') + '…'}
onChange={event => {
setLocalInput(event.target.value)
}}
/>
)
}
SymbolPaletteSearch.propTypes = {
setInput: PropTypes.func.isRequired,
inputRef: PropTypes.object.isRequired,
}