feat: ajoute composant VersionSearch

2025-07-23 18:50:07 +04:00
parent 5a5264fb7a
commit 502ac388af
1 changed files with 76 additions and 0 deletions
@@ -0,0 +1,76 @@
+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
+}