89 lines
1.9 KiB
JavaScript
89 lines
1.9 KiB
JavaScript
import {useState} from 'react'
|
|
import PropTypes from 'prop-types'
|
|
|
|
import {
|
|
Divider,
|
|
FormControl,
|
|
InputAdornment,
|
|
InputBase,
|
|
makeStyles
|
|
} from '@material-ui/core'
|
|
|
|
import SearchIcon from '@material-ui/icons/Search'
|
|
|
|
import MizikLis from '../awtis/mizik-lis'
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
toolbar: theme.mixins.toolbar,
|
|
list: {
|
|
marginBottom: '6em'
|
|
},
|
|
form: {
|
|
marginLeft: theme.spacing(1)
|
|
},
|
|
text: {
|
|
marginBottom: '0.5em'
|
|
}
|
|
}))
|
|
|
|
const getMizikFiltered = (miziks, filter) => {
|
|
if (miziks) {
|
|
return miziks.filter(({titre}) => titre.toLowerCase().includes(filter.toLowerCase()))
|
|
}
|
|
}
|
|
|
|
export default function DrawerBar({setMobileOpen, miziks, mizik}) {
|
|
const slug = mizik ? mizik[0].slug : null
|
|
const classes = useStyles()
|
|
|
|
const [search, setSearch] = useState('')
|
|
const [selectedMizikSlug, setSelectedMizikSlug] = useState(slug)
|
|
|
|
const mizikFiltered = getMizikFiltered(miziks, search)
|
|
|
|
const handleSearch = event => {
|
|
event.preventDefault()
|
|
const value = event.target.value
|
|
setSearch(value)
|
|
}
|
|
|
|
return (
|
|
<div className='search'>
|
|
<FormControl className={classes.form}>
|
|
<InputBase
|
|
className={classes.toolbar}
|
|
placeholder='Chèché an tèks'
|
|
startAdornment={
|
|
<InputAdornment position='start'>
|
|
<SearchIcon />
|
|
</InputAdornment>
|
|
}
|
|
value={search}
|
|
onChange={handleSearch}
|
|
/>
|
|
</FormControl>
|
|
<Divider />
|
|
<div className={classes.list}>
|
|
<MizikLis
|
|
hasAwtis
|
|
setMobileOpen={setMobileOpen}
|
|
miziks={mizikFiltered}
|
|
selectedMizikSlug={selectedMizikSlug}
|
|
setSelectedMizikSlug={setSelectedMizikSlug}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
DrawerBar.propTypes = {
|
|
setMobileOpen: PropTypes.func,
|
|
miziks: PropTypes.array.isRequired,
|
|
mizik: PropTypes.array
|
|
}
|
|
|
|
DrawerBar.defaultProps = {
|
|
setMobileOpen: null,
|
|
mizik: null
|
|
}
|