Cédric FAMIBELLE-PRONZOLA
131 lines
2.9 KiB
JavaScript
131 lines
2.9 KiB
JavaScript
import {useState} from 'react'
|
|
import {styled} from '@mui/material/styles'
|
|
import PropTypes from 'prop-types'
|
|
import {MenuItem, Menu, Button} from '@mui/material'
|
|
import {uniq} from 'lodash'
|
|
|
|
const PREFIX = 'AjouteTradiksyon'
|
|
|
|
const classes = {
|
|
paper: `${PREFIX}-paper`,
|
|
root: `${PREFIX}-root`
|
|
}
|
|
|
|
const Root = styled('div')((
|
|
{
|
|
theme
|
|
}
|
|
) => ({
|
|
[`& .${classes.paper}`]: {
|
|
border: '1px solid #d3d4d5'
|
|
},
|
|
|
|
[`& .${classes.root}`]: {
|
|
'&:focus': {
|
|
backgroundColor: theme.palette.primary.main,
|
|
'& .MuiListItemIcon-root, & .MuiListItemText-primary': {
|
|
color: theme.palette.common.white
|
|
}
|
|
}
|
|
}
|
|
}))
|
|
|
|
function StyledMenu(props) {
|
|
return (
|
|
<Menu
|
|
elevation={0}
|
|
anchorOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'center'
|
|
}}
|
|
transformOrigin={{
|
|
vertical: 'bottom',
|
|
horizontal: 'center'
|
|
}}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const StyledMenuItem = MenuItem
|
|
|
|
function AjouteTradiksyon({chwaLang, setChwaLang}) {
|
|
const [anchorElement, setAnchorElement] = useState(null)
|
|
|
|
const handleClick = event => {
|
|
setAnchorElement(event.currentTarget)
|
|
}
|
|
|
|
const handleClose = event => {
|
|
setAnchorElement(null)
|
|
const chwaInik = uniq([...chwaLang, event.currentTarget.id])
|
|
setChwaLang(chwaInik.filter(c => c !== ''))
|
|
}
|
|
|
|
return (
|
|
<Root style={{textAlign: 'center', marginTop: 5}}>
|
|
<Button
|
|
aria-controls='lang-menu'
|
|
variant='outlined'
|
|
aria-haspopup='true'
|
|
onClick={handleClick}
|
|
>
|
|
Ajouter une traduction <br /> 🇫🇷 🇬🇧 🇪🇸 🇩🇪 🇮🇹
|
|
</Button>
|
|
<StyledMenu
|
|
keepMounted
|
|
id='lang-menu'
|
|
anchorEl={anchorElement}
|
|
open={Boolean(anchorElement)}
|
|
classes={{
|
|
paper: classes.paper
|
|
}}
|
|
onClose={handleClose}
|
|
>
|
|
<StyledMenuItem
|
|
id='fr'
|
|
classes={{
|
|
root: classes.root
|
|
}}
|
|
onClick={handleClose}
|
|
>🇫🇷 Français</StyledMenuItem>
|
|
<StyledMenuItem
|
|
id='en'
|
|
classes={{
|
|
root: classes.root
|
|
}}
|
|
onClick={handleClose}
|
|
>🇬🇧 English</StyledMenuItem>
|
|
<StyledMenuItem
|
|
id='es'
|
|
classes={{
|
|
root: classes.root
|
|
}}
|
|
onClick={handleClose}
|
|
>🇪🇸 Español</StyledMenuItem>
|
|
<StyledMenuItem
|
|
id='de'
|
|
classes={{
|
|
root: classes.root
|
|
}}
|
|
onClick={handleClose}
|
|
>🇩🇪 Deutsch</StyledMenuItem>
|
|
<StyledMenuItem
|
|
id='it'
|
|
classes={{
|
|
root: classes.root
|
|
}}
|
|
onClick={handleClose}
|
|
>🇮🇹 Italiano</StyledMenuItem>
|
|
</StyledMenu>
|
|
</Root>
|
|
)
|
|
}
|
|
|
|
AjouteTradiksyon.propTypes = {
|
|
chwaLang: PropTypes.array.isRequired,
|
|
setChwaLang: PropTypes.func.isRequired
|
|
}
|
|
|
|
export default AjouteTradiksyon
|