pawol.nu/components/soumet/ajoute-tradiksyon.js

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}
      getContentAnchorEl={null}
      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 🇫🇷 🇬🇧 🇪🇸
      </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>
      </StyledMenu>
    </Root>
  )
}

AjouteTradiksyon.propTypes = {
  chwaLang: PropTypes.array.isRequired,
  setChwaLang: PropTypes.func.isRequired
}

export default AjouteTradiksyon