on select changes

README.md

@@ -112,7 +112,7 @@ npm start
 
 - TooltipContent: [`React.FC<{ task: Task; fontSize: string; fontFamily: string; }>;`](https://github.com/MaTeMaTuK/gantt-task-react/blob/main/src/components/other/tooltip.tsx#L56)
 - TaskListHeader: `React.FC<{ headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string;}>;`
-- TaskListTable: `React.FC<{ rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; }>;`
+- TaskListTable: `React.FC<{ rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; selectedTaskId: string setSelectedTask: (taskId: string) => void; }>;`
 
 ### Task
 

package.json

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

src/components/gantt/gantt.tsx

@@ -45,6 +45,7 @@ export const Gantt: React.SFC<GanttProps> = ({
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const [ganttTasks, setGanttTasks] = useState<Task[]>(tasks);
+  const [selectedTask, setSelectedTask] = useState<string>("");
   const [scrollY, setScrollY] = useState(0);
   const [scrollX, setScrollX] = useState(0);
   const [ignoreScrollEvent, setIgnoreScrollEvent] = useState(false);
@@ -158,6 +159,31 @@ export const Gantt: React.SFC<GanttProps> = ({
     setGanttTasks(tasks);
   };
 
+  /**
+   * Task select event
+   */
+  const handleSelectedTask = (taskId: string) => {
+    const newSelectedTask = ganttTasks.find(t => t.id === taskId);
+    if (newSelectedTask) {
+      if (onSelect) {
+        const oldSelectedTask = ganttTasks.find(t => t.id === selectedTask);
+        if (oldSelectedTask) {
+          onSelect(oldSelectedTask, false);
+        }
+        onSelect(newSelectedTask, true);
+      }
+      setSelectedTask(newSelectedTask.id);
+    } else {
+      if (onSelect) {
+        const oldSelectedTask = ganttTasks.find(t => t.id === selectedTask);
+        if (oldSelectedTask) {
+          onSelect(oldSelectedTask, false);
+        }
+      }
+      setSelectedTask("");
+    }
+  };
+
   const gridProps: GridProps = {
     columnWidth,
     gridWidth,
@@ -177,6 +203,8 @@ export const Gantt: React.SFC<GanttProps> = ({
   };
   const barProps: TaskGanttContentProps = {
     tasks: ganttTasks,
+    selectedTask,
+    setSelectedTask: handleSelectedTask,
     rowHeight,
     barCornerRadius,
     columnWidth,
@@ -198,7 +226,6 @@ export const Gantt: React.SFC<GanttProps> = ({
     onProgressChange,
     onDoubleClick,
     onTaskDelete,
-    onSelect,
     TooltipContent,
   };
 
@@ -213,6 +240,8 @@ export const Gantt: React.SFC<GanttProps> = ({
     scrollY,
     ganttHeight,
     horizontalContainerClass: styles.horizontalContainer,
+    selectedTaskId: selectedTask,
+    setSelectedTask,
     TaskListHeader,
     TaskListTable,
   };

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

@@ -26,6 +26,7 @@ export type BarEvent = {
 export type TaskGanttContentProps = {
   tasks: Task[];
   dates: Date[];
+  selectedTask: string;
   rowHeight: number;
   barCornerRadius: number;
   columnWidth: number;
@@ -42,6 +43,7 @@ export type TaskGanttContentProps = {
   arrowIndent: number;
   fontSize: string;
   fontFamily: string;
+  setSelectedTask: (taskId: string) => void;
   TooltipContent: React.FC<{
     task: Task;
     fontSize: string;
@@ -53,6 +55,7 @@ export type TaskGanttContentProps = {
 export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
   tasks,
   dates,
+  selectedTask,
   rowHeight,
   barCornerRadius,
   columnWidth,
@@ -69,12 +72,12 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
   arrowIndent,
   fontFamily,
   fontSize,
+  setSelectedTask,
   onTasksChange,
   onDateChange,
   onProgressChange,
   onDoubleClick,
   onTaskDelete,
-  onSelect,
   TooltipContent,
 }) => {
   const point = svg?.current?.createSVGPoint();
@@ -82,7 +85,6 @@ 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);
@@ -268,13 +270,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
   ) => {
     if (!event) {
       if (action === "select") {
-        if (selectedTask && onSelect) {
+        setSelectedTask(task.id);
-          onSelect(selectedTask, false);
-        }
-        setSelectedTask(task);
-        if (onSelect) {
-          onSelect(task, true);
-        }
       }
     }
     // Keyboard events
@@ -286,7 +282,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
             if (result !== undefined && result) {
               const newTasks = barTasks.filter(t => t.id !== task.id);
               onTasksChange(newTasks);
-              !!onSelect && onSelect(task, false);
+              setSelectedTask("");
             }
           } catch (error) {
             console.error("Error on Delete. " + error);
@@ -360,7 +356,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
               isDelete={!task.isDisabled}
               onEventStart={handleBarEventStart}
               key={task.id}
-              isSelected={task.id === selectedTask?.id}
+              isSelected={task.id === selectedTask}
             />
           );
         })}

src/components/task-list/task-list-table.tsx

@@ -9,6 +9,8 @@ export const TaskListTableDefault: React.FC<{
   fontSize: string;
   locale: string;
   tasks: Task[];
+  selectedTaskId: string;
+  setSelectedTask: (taskId: string) => void;
 }> = ({ rowHeight, rowWidth, tasks, fontFamily, fontSize, locale }) => {
   const dateTimeOptions = {
     weekday: "short",

src/components/task-list/task-list.tsx

@@ -12,6 +12,8 @@ export type TaskListProps = {
   locale: string;
   tasks: Task[];
   horizontalContainerClass?: string;
+  selectedTaskId: string;
+  setSelectedTask: (taskId: string) => void;
   TaskListHeader: React.FC<{
     headerHeight: number;
     rowWidth: string;
@@ -25,6 +27,8 @@ export type TaskListProps = {
     fontSize: string;
     locale: string;
     tasks: Task[];
+    selectedTaskId: string;
+    setSelectedTask: (taskId: string) => void;
   }>;
 };
 
@@ -36,6 +40,8 @@ export const TaskList: React.FC<TaskListProps> = ({
   rowHeight,
   scrollY,
   tasks,
+  selectedTaskId,
+  setSelectedTask,
   locale,
   ganttHeight,
   horizontalContainerClass,
@@ -62,7 +68,10 @@ export const TaskList: React.FC<TaskListProps> = ({
     fontSize,
     tasks,
     locale,
+    selectedTaskId,
+    setSelectedTask,
   };
+
   return (
     <div>
       <TaskListHeader {...headerProps} />

src/types/public-types.ts

@@ -106,6 +106,8 @@ export interface StylingOption {
     fontSize: string;
     locale: string;
     tasks: Task[];
+    selectedTaskId: string;
+    setSelectedTask: (taskId: string) => void;
   }>;
 }