luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[GH-999] Automatically search wihout pressing enter (#1506)

Browse source 
* feat: automatically search without pressing enter

* fix: don't create a new function on every render

* fix: cleanup debounced function when search is unmounted
This commit is contained in:
Nishant Mittal 2021-10-15 21:05:12 +05:30 committed by GitHub
parent 977bc1dafa
commit 845b40be84
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
webapp/src/components/viewHeader/viewHeaderSearch.tsx
View file

@ -1,8 +1,9 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useState, useRef, useEffect} from 'react'
import React, {useState, useRef, useEffect, useMemo} from 'react'
import {FormattedMessage, useIntl} from 'react-intl'
import {useHotkeys} from 'react-hotkeys-hook'
import {debounce} from 'lodash'
import Button from '../../widgets/buttons/button'
import Editable from '../../widgets/editable'
@ -19,6 +20,19 @@ const ViewHeaderSearch = (): JSX.Element => {
const [isSearching, setIsSearching] = useState(Boolean(searchText))
const [searchValue, setSearchValue] = useState(searchText)
const dispatchSearchText = (value: string) => {
dispatch(setSearchText(value))
}
const debouncedDispatchSearchText = useMemo(
() => debounce(dispatchSearchText, 200), [])
useEffect(() => {
return () => {
debouncedDispatchSearchText.cancel()
}
}, [])
useEffect(() => {
searchFieldRef.current?.focus()
}, [isSearching])
@ -34,17 +48,20 @@ const ViewHeaderSearch = (): JSX.Element => {
ref={searchFieldRef}
value={searchValue}
placeholderText={intl.formatMessage({id: 'ViewHeader.search-text', defaultMessage: 'Search text'})}
onChange={setSearchValue}
onChange={(value) => {
setSearchValue(value)
debouncedDispatchSearchText(value)
}}
onCancel={() => {
setSearchValue('')
setIsSearching(false)
dispatch(setSearchText(''))
debouncedDispatchSearchText('')
}}
onSave={() => {
if (searchValue === '') {
setIsSearching(false)
}
dispatch(setSearchText(searchValue))
debouncedDispatchSearchText(searchValue)
}}
/>
)