Merge pull request #4 from AquilesOliveiraDev/feature/click-on-the-line

Added click arrow event

Author: AquilesOliveiraDev

src/components/gantt/gantt.tsx

@@ -66,6 +66,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   onProgressChange,
   onDoubleClick,
   onClick,
+  onClickLine,
   onDelete,
   onSelect,
   onExpanderClick,
@@ -433,6 +434,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     onProgressChange,
     onDoubleClick,
     onClick,
+    onClickLine,
     onDelete,
   };
 

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

@@ -54,6 +54,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
   onProgressChange,
   onDoubleClick,
   onClick,
+  onClickLine,
   onDelete,
 }) => {
   const point = svg?.current?.createSVGPoint();
@@ -266,7 +267,8 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
         {tasks.map(task => {
           return task.barChildren.map(child => {
             return (
-              <Arrow
+              <Arrow 
+                onClickLine={(tasks: BarTask[]) => onClickLine ? onClickLine(tasks) : null}
                 key={`Arrow from ${task.id} to ${tasks[child.index].id}`}
                 taskFrom={task}
                 taskTo={tasks[child.index]}

src/components/other/arrow.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { BarTask } from "../../types/bar-task";
 import { Link } from "../../types/public-types";
 
@@ -9,6 +9,7 @@ type ArrowProps = {
   taskHeight: number;
   arrowIndent: number;
   rtl: boolean;
+  onClickLine?: (tasks: BarTask[]) => void;
 };
 export const Arrow: React.FC<ArrowProps> = ({
   taskFrom,
@@ -17,9 +18,13 @@ export const Arrow: React.FC<ArrowProps> = ({
   taskHeight,
   arrowIndent,
   rtl,
+  onClickLine,
 }) => {
   let path: string;
   let trianglePoints: string;
+  const strokeWidthDefault = "1.5";
+  const [strokeWidth, setStrokeWidth] = useState<string>(strokeWidthDefault);
+  
   if (rtl) {
     [path, trianglePoints] = drownPathAndTriangleRTL(
       taskFrom,
@@ -38,9 +43,19 @@ export const Arrow: React.FC<ArrowProps> = ({
     );
   }
 
+  const clickLine = () => {
+    if (onClickLine) {
+      onClickLine([taskFrom, taskTo]);
+    }
+  }
+
   return (
-    <g className="arrow">
-      <path strokeWidth="1.5" d={path} fill="none" />
+    <g className="arrow" 
+      stroke={strokeWidth}
+      onMouseEnter={() => setStrokeWidth("2")} 
+      onMouseLeave={() => setStrokeWidth(strokeWidthDefault)} 
+      onClick={clickLine}>
+      <path strokeWidth={strokeWidth} d={path} fill="none" />
       <polygon points={trianglePoints} />
     </g>
   );

src/types/public-types.ts

@@ -57,6 +57,10 @@ export interface EventOption {
    * Invokes on bar click.
    */
   onClick?: (task: Task) => void;
+  /**
+   * Invokes on bar click.
+   */
+  onClickLine?: (tasks: Task[]) => void;
   /**
    * Invokes on end and start time change. Chart undoes operation if method return false or error.
    */