Create slots on Timeline click

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+/**
+ * Displays a placeholder for a candidate time slot when the Timeline is hovered.
+ */
+export default function CandidatePlaceholder({xPosition, yPosition, height, widthPercent}) {
+  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,
+      }}
+    />
+  );
+}
+
+CandidatePlaceholder.propTypes = {
+  height: PropTypes.number.isRequired,
+  widthPercent: PropTypes.number.isRequired,
+  xPosition: PropTypes.number.isRequired,
+  yPosition: PropTypes.number.isRequired,
+};

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

@@ -16,6 +16,7 @@ function SlotEditWidget({startTime, onChange, isValidTime, slot}) {
     <Popup
       className={styles['timepicker-popup']}
       on="click"
+      onClick={e => e.stopPropagation()}
       content={
         <>
           <TimePicker
@@ -68,6 +69,7 @@ export default function CandidateSlot({
 }) {
   const slot = (
     <Slot
+      onClick={e => e.stopPropagation()}
       width={width}
       pos={pos}
       moreStyles={styles['candidate']}