Merge pull request #46 from Lefevcal/feature/onClickTask

✨ Introduce on click event on task

README.md

@@ -44,6 +44,7 @@ You may handle actions
   onTaskDelete={onTaskDelete}
   onProgressChange={onProgressChange}
   onDoubleClick={onDblClick}
+  onClick={onClick}
 />
 ```
 
@@ -72,6 +73,7 @@ npm start
 | :----------------- | :---------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------- |
 | onSelect           | (task: Task, isSelected: boolean) => void                                     | Specifies the function to be executed on the taskbar select or unselect event.          |
 | onDoubleClick      | (task: Task) => void                                                          | Specifies the function to be executed on the taskbar onDoubleClick event.               |
+| onClick            | (task: Task) => void                                                          | Specifies the function to be executed on the taskbar onClick event.                     |
 | onDelete\*         | (task: Task) => void/boolean/Promise<void>/Promise<boolean>                   | Specifies the function to be executed on the taskbar on Delete button press event.      |
 | onDateChange\*     | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed when drag taskbar event on timeline has finished. |
 | onProgressChange\* | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed when drag taskbar progress event has finished.    |

example/src/App.tsx

@@ -52,6 +52,10 @@ const App = () => {
     alert("On Double Click event Id:" + task.id);
   };
 
+  const handleClick = (task: Task) => {
+    console.log("On Click event Id:" + task.id);
+  };
+
   const handleSelect = (task: Task, isSelected: boolean) => {
     console.log(task.name + " has " + (isSelected ? "selected" : "unselected"));
   };
@@ -76,6 +80,7 @@ const App = () => {
         onDelete={handleTaskDelete}
         onProgressChange={handleProgressChange}
         onDoubleClick={handleDblClick}
+        onClick={handleClick}
         onSelect={handleSelect}
         onExpanderClick={handleExpanderClick}
         listCellWidth={isChecked ? "155px" : ""}
@@ -89,6 +94,7 @@ const App = () => {
         onDelete={handleTaskDelete}
         onProgressChange={handleProgressChange}
         onDoubleClick={handleDblClick}
+        onClick={handleClick}
         onSelect={handleSelect}
         onExpanderClick={handleExpanderClick}
         listCellWidth={isChecked ? "155px" : ""}

src/components/gantt/gantt.tsx

@@ -60,6 +60,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   onDateChange,
   onProgressChange,
   onDoubleClick,
+  onClick,
   onDelete,
   onSelect,
   onExpanderClick,
@@ -411,6 +412,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     onDateChange,
     onProgressChange,
     onDoubleClick,
+    onClick,
     onDelete,
   };
 

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

@@ -53,6 +53,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
   onDateChange,
   onProgressChange,
   onDoubleClick,
+  onClick,
   onDelete,
 }) => {
   const point = svg?.current?.createSVGPoint();
@@ -230,6 +231,8 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
       }
     } else if (action === "dblclick") {
       !!onDoubleClick && onDoubleClick(task);
+    } else if (action === "click") {
+      !!onClick && onClick(task);
     }
     // Change task event start
     else if (action === "move") {

src/components/task-item/task-item.tsx

@@ -100,6 +100,9 @@ export const TaskItem: React.FC<TaskItemProps> = props => {
       onDoubleClick={e => {
         onEventStart("dblclick", task, e);
       }}
+      onClick={e => {
+        onEventStart("click", task, e);
+      }}
       onFocus={() => {
         onEventStart("select", task);
       }}

src/types/gantt-task-actions.ts

@@ -6,6 +6,7 @@ export type GanttContentMoveAction =
   | "mouseleave"
   | "delete"
   | "dblclick"
+  | "click"
   | "select"
   | ""
   | BarMoveAction;

src/types/public-types.ts

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