Cédric FAMIBELLE-PRONZOLA
142 lines
3.5 KiB
JavaScript
142 lines
3.5 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'
|
|
|
|
import OtomatikSwitch from './otomatik-switch'
|
|
|
|
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({showSwitch, disableSwitch, tradiksyonOtomatik, setTradiksyonOtomatik, 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 (
|
|
<>
|
|
{showSwitch && (
|
|
<OtomatikSwitch tradiksyonOtomatik={tradiksyonOtomatik} setTradiksyonOtomatik={setTradiksyonOtomatik} disabled={disableSwitch} />
|
|
)}
|
|
<Root style={{textAlign: 'center', marginTop: 20}}>
|
|
<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}
|
|
>🇬🇧 Anglais</StyledMenuItem>
|
|
<StyledMenuItem
|
|
id='es'
|
|
classes={{
|
|
root: classes.root
|
|
}}
|
|
onClick={handleClose}
|
|
>🇪🇸 Espagnol</StyledMenuItem>
|
|
<StyledMenuItem
|
|
id='de'
|
|
classes={{
|
|
root: classes.root
|
|
}}
|
|
onClick={handleClose}
|
|
>🇩🇪 Allemand</StyledMenuItem>
|
|
<StyledMenuItem
|
|
id='it'
|
|
classes={{
|
|
root: classes.root
|
|
}}
|
|
onClick={handleClose}
|
|
>🇮🇹 Italien</StyledMenuItem>
|
|
</StyledMenu>
|
|
</Root>
|
|
</>
|
|
)
|
|
}
|
|
|
|
AjouteTradiksyon.propTypes = {
|
|
showSwitch: PropTypes.bool.isRequired,
|
|
disableSwitch: PropTypes.bool.isRequired,
|
|
tradiksyonOtomatik: PropTypes.bool.isRequired,
|
|
setTradiksyonOtomatik: PropTypes.func.isRequired,
|
|
chwaLang: PropTypes.array.isRequired,
|
|
setChwaLang: PropTypes.func.isRequired
|
|
}
|
|
|
|
export default AjouteTradiksyon
|