77 lines
2.1 KiB
JavaScript
77 lines
2.1 KiB
JavaScript
|
import {useState} from 'react'
|
||
|
|
import PropTypes from 'prop-types'
|
||
|
|
import Box from '@mui/material/Box'
|
||
|
|
import TextField from '@mui/material/TextField'
|
||
|
|
import InputAdornment from '@mui/material/InputAdornment'
|
||
|
|
import IconButton from '@mui/material/IconButton'
|
||
|
|
import SearchIcon from '@mui/icons-material/Search'
|
||
|
|
import ClearIcon from '@mui/icons-material/Clear'
|
||
|
|
import {useDebouncedCallback} from 'use-debounce'
|
||
|
|
|
||
|
|
export default function VersionSearch({onSearchChange, placeholder = 'Rechercher dans les versions...'}) {
|
||
|
|
const [searchValue, setSearchValue] = useState('')
|
||
|
|
|
||
|
|
// Debounce search to avoid too many filter updates
|
||
|
|
const debouncedSearch = useDebouncedCallback(value => {
|
||
|
|
onSearchChange(value.trim())
|
||
|
|
}, 300)
|
||
|
|
|
||
|
|
const handleSearchChange = event => {
|
||
|
|
const {value} = event.target
|
||
|
|
setSearchValue(value)
|
||
|
|
debouncedSearch(value)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleClearSearch = () => {
|
||
|
|
setSearchValue('')
|
||
|
|
onSearchChange('')
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box sx={{mb: 2}}>
|
||
|
|
<TextField
|
||
|
|
fullWidth
|
||
|
|
size='small'
|
||
|
|
placeholder={placeholder}
|
||
|
|
value={searchValue}
|
||
|
|
InputProps={{
|
||
|
|
startAdornment: (
|
||
|
|
<InputAdornment position='start'>
|
||
|
|
<SearchIcon color='action' />
|
||
|
|
</InputAdornment>
|
||
|
|
),
|
||
|
|
endAdornment: searchValue && (
|
||
|
|
<InputAdornment position='end'>
|
||
|
|
<IconButton
|
||
|
|
size='small'
|
||
|
|
aria-label='effacer recherche'
|
||
|
|
edge='end'
|
||
|
|
onClick={handleClearSearch}
|
||
|
|
>
|
||
|
|
<ClearIcon />
|
||
|
|
</IconButton>
|
||
|
|
</InputAdornment>
|
||
|
|
)
|
||
|
|
}}
|
||
|
|
sx={{
|
||
|
|
'& .MuiOutlinedInput-root': {
|
||
|
|
backgroundColor: 'background.paper',
|
||
|
|
'&:hover': {
|
||
|
|
backgroundColor: 'action.hover'
|
||
|
|
},
|
||
|
|
'&.Mui-focused': {
|
||
|
|
backgroundColor: 'background.paper'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
onChange={handleSearchChange}
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
VersionSearch.propTypes = {
|
||
|
|
onSearchChange: PropTypes.func.isRequired,
|
||
|
|
placeholder: PropTypes.string
|
||
|
|
}
|