Fix a typo in the name of the class (indico#496)

Refactor code for the candidate placeholder

Co-authored-by: Tomas Roun <[email protected]>

newdle/client/src/components/creation/timeslots/CandidatePlaceholder.js

@@ -1,33 +1,43 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {Popup} from 'semantic-ui-react';
 /**
  * Displays a placeholder for a candidate time slot when the Timeline is hovered.
  */
-export default function CandidatePlaceholder({xPosition, yPosition, height, widthPercent}) {
+export default function CandidatePlaceholder({visible, left, width, time}) {
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <div
-      style={{
-        background: 'rgba(0, 0, 0, 0.3)',
-        borderRadius: '3px',
-        color: 'white',
-        display: 'block',
-        height: height,
-        left: xPosition,
-        padding: '4px',
-        position: 'fixed',
-        pointerEvents: 'none',
-        top: yPosition,
-        transform: 'translate(-50%, -100%)',
-        width: `${widthPercent}%`,
-        zIndex: 1000,
-      }}
+    <Popup
+      content={time}
+      open={true}
+      position="top center"
+      trigger={
+        <div
+          style={{
+            boxSizing: 'border-box',
+            position: 'absolute',
+            left: `${left}%`,
+            width: `${width}%`,
+            top: 5,
+            height: 'calc(100% - 10px)',
+            zIndex: 1000,
+            background: 'rgba(0, 0, 0, 0.2)',
+            borderRadius: '3px',
+            display: 'block',
+            pointerEvents: 'none',
+          }}
+        />
+      }
     />
   );
 }
 
 CandidatePlaceholder.propTypes = {
-  height: PropTypes.number.isRequired,
-  widthPercent: PropTypes.number.isRequired,
-  xPosition: PropTypes.number.isRequired,
-  yPosition: PropTypes.number.isRequired,
+  visible: PropTypes.bool.isRequired,
+  width: PropTypes.number.isRequired,
+  left: PropTypes.number.isRequired,
+  time: PropTypes.string.isRequired,
 };