Create AjouteTradiksyon component

2021-05-27 23:53:06 +02:00
parent 17f4fd55da
commit 80ff084eec
1 changed files with 80 additions and 0 deletions
@@ -0,0 +1,80 @@
+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 &#127467;&#127479; &#127468;&#127463; &#127466;&#127480;
+      </Button>
+      <StyledMenu
+        keepMounted
+        id='lang-menu'
+        anchorEl={anchorElement}
+        open={Boolean(anchorElement)}
+        onClose={handleClose}
+      >
+        <StyledMenuItem id='fr' onClick={handleClose}>&#127467;&#127479; Français</StyledMenuItem>
+        <StyledMenuItem id='en' onClick={handleClose}>&#127468;&#127463; English</StyledMenuItem>
+        <StyledMenuItem id='es' onClick={handleClose}>&#127466;&#127480; Español</StyledMenuItem>
+      </StyledMenu>
+    </div>
+  )
+}
+
+AjouteTradiksyon.propTypes = {
+  chwaLang: PropTypes.array.isRequired,
+  setChwaLang: PropTypes.func.isRequired
+}
+
+export default AjouteTradiksyon