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

import React, {useState} from 'react'
import PropTypes from 'prop-types'
import {MenuItem, withStyles, Menu, Button} from '@material-ui/core'
import {uniq} from 'lodash'

const StyledMenu = withStyles({
  paper: {
    border: '1px solid #d3d4d5'
  }
})(props => (
  <Menu
    elevation={0}
    getContentAnchorEl={null}
    anchorOrigin={{
      vertical: 'top',
      horizontal: 'center'
    }}
    transformOrigin={{
      vertical: 'bottom',
      horizontal: 'center'
    }}
    {...props}
  />
))

const StyledMenuItem = withStyles(theme => ({
  root: {
    '&:focus': {
      backgroundColor: theme.palette.primary.main,
      '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
        color: theme.palette.common.white
      }
    }
  }
}))(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 (
    <div 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)}
        onClose={handleClose}
      >
        <StyledMenuItem id='fr' onClick={handleClose}>🇫🇷 Français</StyledMenuItem>
        <StyledMenuItem id='en' onClick={handleClose}>🇬🇧 English</StyledMenuItem>
        <StyledMenuItem id='es' onClick={handleClose}>🇪🇸 Español</StyledMenuItem>
      </StyledMenu>
    </div>
  )
}

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

export default AjouteTradiksyon