Create AwtisBio component

2020-12-11 01:50:24 +01:00
parent 82940931e5
commit 088f40a933
1 changed files with 83 additions and 0 deletions
@@ -0,0 +1,83 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {
+  Button,
+  Box,
+  Typography,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle
+} from '@material-ui/core'
+
+import MizikBadjMeni from './mizik-badj-meni'
+
+export default function AwtisBio({alias, miziks, bio, isBioOpen, setIsBioOpen}) {
+  const handleClose = () => {
+    setIsBioOpen(false)
+  }
+
+  const descriptionElementRef = React.useRef(null)
+  React.useEffect(() => {
+    if (isBioOpen) {
+      const {current: descriptionElement} = descriptionElementRef
+      if (descriptionElement !== null) {
+        descriptionElement.focus()
+      }
+    }
+  }, [isBioOpen])
+
+  return (
+    <div>
+      <Dialog
+        scroll='paper'
+        open={isBioOpen}
+        aria-labelledby='scroll-dialog-title'
+        aria-describedby='scroll-dialog-description'
+        onClose={handleClose}
+      >
+        <Box display='flex' justifyContent='center' alignItems='center'>
+          <DialogTitle id='scroll-dialog-title' align='center'>{alias}</DialogTitle>
+          <MizikBadjMeni miziks={miziks} />
+        </Box>
+        <DialogContent dividers>
+          <DialogContentText
+            ref={descriptionElementRef}
+            align='justify'
+            id='scroll-dialog-description'
+            tabIndex={-1}
+          >
+            {bio ? (
+              <Typography component='span'>
+                {bio}
+              </Typography>
+            ) : (
+              <Typography component='span'>
+                Pas de biobraphie disponible
+              </Typography>
+            )}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions style={{margin: 'auto'}}>
+          <Button variant='outlined' color='secondary' onClick={handleClose}>
+            Fèmen
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  )
+}
+
+AwtisBio.propTypes = {
+  alias: PropTypes.string.isRequired,
+  miziks: PropTypes.array.isRequired,
+  bio: PropTypes.string,
+  isBioOpen: PropTypes.bool.isRequired,
+  setIsBioOpen: PropTypes.func.isRequired
+}
+
+AwtisBio.defaultProps = {
+  bio: null
+}