onSelect has changed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "MaTeMaTuK <maksym.vikarii@gmail.com>",
   "homepage": "https://github.com/MaTeMaTuK/gantt-task-react",

src/components/bar/bar.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { BarTask } from "../../types/bar-task";
 import {
   progressWithByParams,
@@ -16,10 +16,11 @@ export type BarProps = {
   isProgressChangeable: boolean;
   isDateChangeable: boolean;
   isDelete: boolean;
+  isSelected: boolean;
   onEventStart: (
-    event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent,
     action: GanttContentMoveAction,
-    selectedTask: BarTask
+    selectedTask: BarTask,
+    event?: React.MouseEvent | React.KeyboardEvent
   ) => any;
 };
 
@@ -30,9 +31,8 @@ export const Bar: React.FC<BarProps> = ({
   isDateChangeable,
   onEventStart,
   isDelete,
+  isSelected,
 }) => {
-  const [isSelected, setIsSelected] = useState(false);
-
   const progressWidth = progressWithByParams(task.x1, task.x2, task.progress);
   const progressPoint = getProgressPoint(
     progressWidth + task.x1,
@@ -47,28 +47,23 @@ export const Bar: React.FC<BarProps> = ({
       onKeyDown={e => {
         switch (e.key) {
           case "Delete": {
-            if (isDelete) onEventStart(e, "delete", task);
+            if (isDelete) onEventStart("delete", task, e);
             break;
           }
         }
         e.stopPropagation();
       }}
       onMouseEnter={e => {
-        onEventStart(e, "mouseenter", task);
+        onEventStart("mouseenter", task, e);
       }}
       onMouseLeave={e => {
-        onEventStart(e, "mouseleave", task);
+        onEventStart("mouseleave", task, e);
       }}
       onDoubleClick={e => {
-        onEventStart(e, "dblclick", task);
+        onEventStart("dblclick", task, e);
       }}
-      onFocus={e => {
+      onFocus={() => {
-        setIsSelected(true);
+        onEventStart("select", task);
-        onEventStart(e, "select", task);
-      }}
-      onBlur={e => {
-        setIsSelected(false);
-        onEventStart(e, "unselect", task);
       }}
     >
       <BarDisplay
@@ -84,7 +79,7 @@ export const Bar: React.FC<BarProps> = ({
         styles={task.styles}
         isSelected={isSelected}
         onMouseDown={e => {
-          isDateChangeable && onEventStart(e, "move", task);
+          isDateChangeable && onEventStart("move", task, e);
         }}
       />
       <g className="handleGroup">
@@ -98,7 +93,7 @@ export const Bar: React.FC<BarProps> = ({
               height={task.height - 2}
               barCornerRadius={task.barCornerRadius}
               onMouseDown={e => {
-                onEventStart(e, "start", task);
+                onEventStart("start", task, e);
               }}
             />
             {/* right */}
@@ -109,7 +104,7 @@ export const Bar: React.FC<BarProps> = ({
               height={task.height - 2}
               barCornerRadius={task.barCornerRadius}
               onMouseDown={e => {
-                onEventStart(e, "end", task);
+                onEventStart("end", task, e);
               }}
             />
           </g>
@@ -118,7 +113,7 @@ export const Bar: React.FC<BarProps> = ({
           <BarProgressHandle
             progressPoint={progressPoint}
             onMouseDown={e => {
-              onEventStart(e, "progress", task);
+              onEventStart("progress", task, e);
             }}
           />
         )}

src/components/gantt/task-gantt-content.tsx

@@ -9,7 +9,7 @@ import {
   BarMoveAction,
 } from "../../helpers/bar-helper";
 import { Tooltip } from "../other/tooltip";
-import { isKeyboardEvent, isMouseEvent } from "../../helpers/other-helper";
+import { isKeyboardEvent } from "../../helpers/other-helper";
 
 export type GanttContentMoveAction =
   | "mouseenter"
@@ -17,10 +17,9 @@ export type GanttContentMoveAction =
   | "delete"
   | "dblclick"
   | "select"
-  | "unselect"
   | BarMoveAction;
 export type BarEvent = {
-  selectedTask?: BarTask;
+  changedTask?: BarTask;
   originalTask?: BarTask;
   action: GanttContentMoveAction;
 };
@@ -83,6 +82,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
     action: "",
   });
   const [barTasks, setBarTasks] = useState<BarTask[]>([]);
+  const [selectedTask, setSelectedTask] = useState<BarTask | null>(null);
   const [failedTask, setFailedTask] = useState<BarTask | null>(null);
   const [xStep, setXStep] = useState(0);
   const [initEventX1Delta, setInitEventX1Delta] = useState(0);
@@ -143,7 +143,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
 
   useEffect(() => {
     const handleMouseMove = async (event: MouseEvent) => {
-      if (!barEvent.selectedTask || !point || !svg?.current) return;
+      if (!barEvent.changedTask || !point || !svg?.current) return;
       event.preventDefault();
 
       point.x = event.clientX;
@@ -154,7 +154,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
       const { isChanged, changedTask } = handleTaskBySVGMouseEvent(
         cursor.x,
         barEvent.action as BarMoveAction,
-        barEvent.selectedTask,
+        barEvent.changedTask,
         xStep,
         timeStep,
         initEventX1Delta
@@ -163,12 +163,12 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
         setBarTasks(
           barTasks.map(t => (t.id === changedTask.id ? changedTask : t))
         );
-        setBarEvent({ ...barEvent, selectedTask: changedTask });
+        setBarEvent({ ...barEvent, changedTask: changedTask });
       }
     };
 
     const handleMouseUp = async (event: MouseEvent) => {
-      const { selectedTask, action, originalTask } = barEvent;
+      const { changedTask: selectedTask, action, originalTask } = barEvent;
 
       if (!selectedTask || !point || !svg?.current || !originalTask) return;
       event.preventDefault();
@@ -262,44 +262,53 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
    * Method is Start point of task change
    */
   const handleBarEventStart = async (
-    event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent,
     action: GanttContentMoveAction,
-    selectedTask: BarTask
+    task: BarTask,
+    event?: React.MouseEvent | React.KeyboardEvent
   ) => {
+    if (!event) {
+      if (action === "select") {
+        if (selectedTask && onSelect) {
+          onSelect(selectedTask, false);
+        }
+        setSelectedTask(task);
+        if (onSelect) {
+          onSelect(task, true);
+        }
+      }
+    }
     // Keyboard events
-    if (isKeyboardEvent(event)) {
+    else if (isKeyboardEvent(event)) {
       if (action === "delete") {
         if (onTaskDelete) {
           try {
-            const result = await onTaskDelete(selectedTask);
+            const result = await onTaskDelete(task);
             if (result !== undefined && result) {
-              const newTasks = barTasks.filter(t => t.id !== selectedTask.id);
+              const newTasks = barTasks.filter(t => t.id !== task.id);
               onTasksChange(newTasks);
-              !!onSelect && onSelect(selectedTask, false);
+              !!onSelect && onSelect(task, false);
             }
           } catch (error) {
             console.error("Error on Delete. " + error);
           }
         }
       }
-    } else if (!isMouseEvent(event)) {
-      if (action === "select") {
-        !!onSelect && onSelect(selectedTask, true);
-      } else if (action === "unselect") {
-        !!onSelect && onSelect(selectedTask, false);
-      }
     }
     // Mouse Events
     else if (action === "mouseenter") {
       if (!barEvent.action) {
-        setBarEvent({ action, selectedTask, originalTask: selectedTask });
+        setBarEvent({
+          action,
+          changedTask: task,
+          originalTask: task,
+        });
       }
     } else if (action === "mouseleave") {
       if (barEvent.action === "mouseenter") {
         setBarEvent({ action: "" });
       }
     } else if (action === "dblclick") {
-      !!onDoubleClick && onDoubleClick(selectedTask);
+      !!onDoubleClick && onDoubleClick(task);
     }
     // Change task event start
     else if (action === "move") {
@@ -308,13 +317,17 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
       const cursor = point.matrixTransform(
         svg.current.getScreenCTM()?.inverse()
       );
-      setInitEventX1Delta(cursor.x - selectedTask.x1);
+      setInitEventX1Delta(cursor.x - task.x1);
-      setBarEvent({ action, selectedTask, originalTask: selectedTask });
+      setBarEvent({
+        action,
+        changedTask: task,
+        originalTask: task,
+      });
     } else {
       setBarEvent({
         action,
-        selectedTask,
+        changedTask: task,
-        originalTask: selectedTask,
+        originalTask: task,
       });
     }
   };
@@ -347,17 +360,18 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
               isDelete={!task.isDisabled}
               onEventStart={handleBarEventStart}
               key={task.id}
+              isSelected={task.id === selectedTask?.id}
             />
           );
         })}
       </g>
       <g className="toolTip">
-        {barEvent.selectedTask && (
+        {barEvent.changedTask && (
           <Tooltip
-            x={barEvent.selectedTask.x2 + arrowIndent + arrowIndent * 0.5}
+            x={barEvent.changedTask.x2 + arrowIndent + arrowIndent * 0.5}
             rowHeight={rowHeight}
             svgHeight={svgHeight}
-            task={barEvent.selectedTask}
+            task={barEvent.changedTask}
             fontFamily={fontFamily}
             fontSize={fontSize}
             TooltipContent={TooltipContent}