Cédric FAMIBELLE-PRONZOLA
115 lines
2.8 KiB
JavaScript
115 lines
2.8 KiB
JavaScript
import {useState} from 'react'
|
|
import {styled} from '@mui/material/styles'
|
|
import PropTypes from 'prop-types'
|
|
import {union, deburr} from 'lodash'
|
|
import useMediaQuery from '@mui/material/useMediaQuery'
|
|
|
|
import {
|
|
Divider,
|
|
FormControl,
|
|
InputAdornment,
|
|
InputBase
|
|
} from '@mui/material'
|
|
|
|
import SearchIcon from '@mui/icons-material/Search'
|
|
|
|
import MizikLis from '../awtis/mizik-lis'
|
|
|
|
const PREFIX = 'drawer-bar'
|
|
|
|
const classes = {
|
|
toolbar: `${PREFIX}-toolbar`,
|
|
list: `${PREFIX}-list`,
|
|
form: `${PREFIX}-form`,
|
|
text: `${PREFIX}-text`
|
|
}
|
|
|
|
const Root = styled('div')((
|
|
{
|
|
theme
|
|
}
|
|
) => ({
|
|
[`& .${classes.toolbar}`]: theme.mixins.toolbar,
|
|
|
|
[`& .${classes.list}`]: {
|
|
marginBottom: '3em'
|
|
},
|
|
|
|
[`& .${classes.form}`]: {
|
|
marginLeft: theme.spacing(1)
|
|
},
|
|
|
|
[`& .${classes.text}`]: {
|
|
marginBottom: '0.5em'
|
|
}
|
|
}))
|
|
|
|
const getMizikFiltered = (paroles, filter) => {
|
|
if (paroles) {
|
|
const filteredTitre = paroles.filter(({attributes}) => {
|
|
const deburredTit = deburr(attributes.titre)
|
|
return deburredTit.toLowerCase().includes(deburr(filter.toLowerCase()))
|
|
})
|
|
|
|
const filteredAlias = paroles.filter(({attributes}) => {
|
|
const aliasLis = attributes.artistes.data.map(({attributes}) => deburr(attributes.alias)).join(', ')
|
|
return aliasLis.toLowerCase().includes(deburr(filter.toLowerCase()))
|
|
})
|
|
|
|
return union(filteredTitre, filteredAlias)
|
|
}
|
|
}
|
|
|
|
export default function DrawerBar({meteEsMobilOuve, paroles, slug}) {
|
|
const isMobile = useMediaQuery('(max-width:600px)')
|
|
const [search, setSearch] = useState('')
|
|
const [slugTeksChwazi, meteSlugTeksChwazi] = useState(slug)
|
|
|
|
const mizikFiltered = getMizikFiltered(paroles, search)
|
|
|
|
const handleSearch = event => {
|
|
event.preventDefault()
|
|
const {value} = event.target
|
|
setSearch(value)
|
|
}
|
|
|
|
return (
|
|
<Root className='search'>
|
|
<FormControl style={{marginTop: `${isMobile ? '3em' : 0}`}} className={classes.form}>
|
|
<InputBase
|
|
className={classes.toolbar}
|
|
placeholder='Recherche...'
|
|
startAdornment={
|
|
<InputAdornment position='start'>
|
|
<SearchIcon />
|
|
</InputAdornment>
|
|
}
|
|
value={search}
|
|
onChange={handleSearch}
|
|
/>
|
|
</FormControl>
|
|
<Divider />
|
|
<div style={{marginBottom: `${isMobile ? 0 : '3em'}`}} className={classes.list}>
|
|
<MizikLis
|
|
niAwtis
|
|
meteEsMobilOuve={meteEsMobilOuve}
|
|
paroles={mizikFiltered}
|
|
slugTeksChwazi={slugTeksChwazi}
|
|
meteSlugTeksChwazi={meteSlugTeksChwazi}
|
|
/>
|
|
</div>
|
|
</Root>
|
|
)
|
|
}
|
|
|
|
DrawerBar.propTypes = {
|
|
meteEsMobilOuve: PropTypes.func,
|
|
paroles: PropTypes.array.isRequired,
|
|
slug: PropTypes.string
|
|
}
|
|
|
|
DrawerBar.defaultProps = {
|
|
meteEsMobilOuve: null,
|
|
slug: null
|
|
}
|