feat: 🎸 [ToolTip] on task move tooltip disappear

✅ Closes: #151
melfore · Nov 16, 2023 · 8bd368e · 8bd368e
1 parent 2e993cc
commit 8bd368e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/src/tasks/components/Task/index.tsx b/src/tasks/components/Task/index.tsx
@@ -192,7 +192,19 @@ const Task = ({ data, fill = TASK_DEFAULT_FILL, onLeave, onOver, x, y, width, fi
     [enableDrag, onOver, onTaskMouseEvent, resizing]
   );
 
-  const onDragStart = useCallback(() => setDragging(true), []);
+  const onDragStart = useCallback(
+    (e: KonvaEventObject<DragEvent>) => {
+      const { x, y } = getDragPoint(e);
+      const dragFinalX = Math.ceil(x / dragSnapInPX) * dragSnapInPX;
+      const xCoordinate = dragFinalX < 0 ? 0 : dragFinalX;
+      const resourceIndex = findResourceIndexByCoordinate(y, rowHeight, resources);
+      const yCoordinate = getTaskYCoordinate(resourceIndex, rowHeight);
+      const point = { x: xCoordinate, y: yCoordinate };
+      setDragging(true);
+      onLeave(taskId, point);
+    },
+    [getDragPoint, onLeave, resources, rowHeight, taskId, dragSnapInPX]
+  );
 
   const onDragMove = useCallback(
     (e: KonvaEventObject<DragEvent>) => {
@@ -204,9 +216,8 @@ const Task = ({ data, fill = TASK_DEFAULT_FILL, onLeave, onOver, x, y, width, fi
       const point = { x: xCoordinate, y: yCoordinate };
 
       setTaskDimensions((dimensions) => ({ ...dimensions, ...point }));
-      onOver(taskId, point);
     },
-    [dragSnapInPX, getDragPoint, onOver, resources, rowHeight, taskId]
+    [dragSnapInPX, getDragPoint, resources, rowHeight]
   );
 
   const onDragEnd = useCallback(

diff --git a/src/tasks/components/Tooltip/index.tsx b/src/tasks/components/Tooltip/index.tsx
@@ -33,12 +33,11 @@ const TaskTooltip: FC<TaskTooltipProps> = ({
   } = useTimelineContext();
   const txt = useMemo(() => {
     const label = "LABEL: " + taskLabel + "\n";
-    const resources = "RESID: " + resourceId + "\n";
-    const startDuration = "START: " + DateTime.fromMillis(Number(start)).toISO() + "\n";
-    const endDuration = "END:    " + DateTime.fromMillis(Number(end)).toISO();
+    const startDuration = "START: " + DateTime.fromMillis(Number(start)).toFormat("dd/MM/yyyy HH:mm:ss") + "\n";
+    const endDuration = "END:    " + DateTime.fromMillis(Number(end)).toFormat("dd/MM/yyyy HH:mm:ss");
     const complete = completedPercentage ? "\n" + "COMPLETED: " + completedPercentage + "%" : "";
-    return label + resources + startDuration + endDuration + complete;
-  }, [taskLabel, resourceId, completedPercentage, start, end]);
+    return label + startDuration + endDuration + complete;
+  }, [taskLabel, completedPercentage, start, end]);
 
   const pointerDir = useMemo(() => {
     const part = (drawEnd - drawStart) / 5;
@@ -69,7 +68,7 @@ const TaskTooltip: FC<TaskTooltipProps> = ({
         shadowOffsetY={TASK_TOOLTIP_SHADOW_SIZE}
         shadowOpacity={0.2}
       />
-      <Text text={txt} fill={TASK_TOOLTIP_COLOR} fontSize={15} padding={6} />
+      <Text text={txt} fill={TASK_TOOLTIP_COLOR} fontSize={13} padding={8} />
     </Label>
   );
 };