Create Diferans component

components/teks/diferans.js

@@ -0,0 +1,82 @@
+import PropTypes from 'prop-types'
+import {uniqueId} from 'lodash'
+
+import {useRef, useEffect} from 'react'
+import Dialog from '@mui/material/Dialog'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
+
+export default function Diferans({id, ouveDiferans, meteOuveDiferans, difference}) {
+  const handleClose = () => {
+    meteOuveDiferans(null)
+  }
+
+  const descriptionElementRef = useRef(null)
+  useEffect(() => {
+    if (ouveDiferans) {
+      const {current: descriptionElement} = descriptionElementRef
+      if (descriptionElement !== null) {
+        descriptionElement.focus()
+      }
+    }
+  }, [ouveDiferans])
+
+  return (
+    <Dialog
+      sx={{zIndex: 9999}}
+      open={ouveDiferans === id}
+      scroll='paper'
+      aria-labelledby='légende des différences'
+      aria-describedby='différences des modifications'
+      onClose={handleClose}
+    >
+      <DialogTitle id='légende des différences'>
+        <small style={{color: 'grey'}}>Aucune modification</small><br />
+        <small style={{background: '#fadad7', color: '#b30000'}}>Suppression</small> <br />
+        <small style={{background: '#eaf2c2', color: '#406619'}}>Ajout</small>
+
+      </DialogTitle>
+      <DialogContent dividers>
+        {difference.map(part => {
+          const color = part.added ? 'green' : (part.removed ? 'red' : 'grey')
+          return (
+            <span key={uniqueId()} style={{color, whiteSpace: 'pre-line'}}>
+              {!part.added && !part.removed && (
+                <span>{part.value}</span>
+              )}
+
+              {part.added && (
+                <ins>{part.value}</ins>
+              )}
+
+              {part.removed && (
+                <del>{part.value}</del>
+              )}
+            </span>
+          )
+        })}
+      </DialogContent>
+      <style jsx>
+        {`
+          del {
+            text-decoration: none;
+            color: #b30000;
+            background: #fadad7;
+          }
+          ins {
+            background: #eaf2c2;
+            color: #406619;
+            text-decoration: none;
+          }
+        `}
+      </style>
+    </Dialog>
+  )
+}
+
+Diferans.propTypes = {
+  id: PropTypes.number.isRequired,
+  ouveDiferans: PropTypes.number,
+  meteOuveDiferans: PropTypes.func.isRequired,
+  difference: PropTypes.array.isRequired
+}