Spaces:
Sleeping
Sleeping
File size: 2,731 Bytes
13555f3 | 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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useState, useRef, useEffect, useMemo} from 'react'
import {useRouteMatch} from 'react-router-dom'
import {useIntl} from 'react-intl'
import {useHotkeys} from 'react-hotkeys-hook'
import {debounce} from 'lodash'
import CompassIcon from '../../widgets/icons/compassIcon'
import Editable from '../../widgets/editable'
import {useAppSelector, useAppDispatch} from '../../store/hooks'
import {getSearchText, setSearchText} from '../../store/searchText'
const ViewHeaderSearch = (): JSX.Element => {
const searchText = useAppSelector<string>(getSearchText)
const dispatch = useAppDispatch()
const intl = useIntl()
const match = useRouteMatch<{viewId?: string}>()
const searchFieldRef = useRef<{focus(selectAll?: boolean): void}>(null)
const [searchValue, setSearchValue] = useState(searchText)
const [currentView, setCurrentView] = useState(match.params?.viewId)
const dispatchSearchText = (value: string) => {
dispatch(setSearchText(value))
}
const debouncedDispatchSearchText = useMemo(
() => debounce(dispatchSearchText, 200), [])
useEffect(() => {
const viewId = match.params?.viewId
if (viewId !== currentView) {
setCurrentView(viewId)
setSearchValue('')
// Previously debounced calls to change the search text should be cancelled
// to avoid resetting the search text.
debouncedDispatchSearchText.cancel()
dispatchSearchText('')
}
}, [match.url])
useEffect(() => {
return () => {
debouncedDispatchSearchText.cancel()
}
}, [])
useHotkeys('ctrl+shift+f,cmd+shift+f', () => {
searchFieldRef.current?.focus(true)
})
return (
<div className='board-search-field'>
<CompassIcon
icon='magnify'
className='board-search-icon'
/>
<Editable
ref={searchFieldRef}
value={searchValue}
placeholderText={intl.formatMessage({id: 'ViewHeader.search-text', defaultMessage: 'Search cards'})}
onChange={(value) => {
setSearchValue(value)
debouncedDispatchSearchText(value)
}}
onCancel={() => {
setSearchValue('')
debouncedDispatchSearchText('')
}}
onSave={() => {
debouncedDispatchSearchText(searchValue)
}}
/>
</div>
)
}
export default ViewHeaderSearch
|