Support onClick in table

It also support the empty task selection Signed-off-by: Laurent Fasani <laurent.fasani@obeo.fr>
ObeoNetwork · Mar 11, 2024 · 8930034 · 8930034
1 parent caeec77
commit 8930034
Show file tree

Hide file tree

Showing 13 changed files with 25 additions and 14 deletions.
diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx
@@ -1791,8 +1791,10 @@ export const Gantt: React.FC<GanttProps> = ({
     ]
   );
 
-  const onClickTask = (task: Task) => {
-    onClick(task);
+  const onClickTask = (task: TaskOrEmpty) => {
+    if (onClick) {
+      onClick(task);
+    }
   };
 
   const barProps: TaskGanttContentProps = useMemo(
@@ -1925,6 +1927,7 @@ export const Gantt: React.FC<GanttProps> = ({
     icons,
     isShowTaskNumbers,
     mapTaskToNestedIndex,
+    onClick: onClickTask,
     onExpanderClick: handleExpanderClick,
     scrollToBottomStep,
     scrollToTopStep,

diff --git a/src/components/task-list/task-list-table-row.tsx b/src/components/task-list/task-list-table-row.tsx
@@ -44,6 +44,7 @@ type TaskListTableRowProps = {
   isEven: boolean;
   isSelected: boolean;
   isShowTaskNumbers: boolean;
+  onClick: (task: TaskOrEmpty) => void;
   onExpanderClick: (task: Task) => void;
   scrollToTask: (task: Task) => void;
   selectTaskOnMouseDown: (taskId: string, event: MouseEvent) => void;
@@ -79,6 +80,7 @@ const TaskListTableRowInner: React.FC<TaskListTableRowProps> = ({
   isEven,
   isSelected,
   isShowTaskNumbers,
+  onClick,
   onExpanderClick,
   scrollToTask,
   selectTaskOnMouseDown,
@@ -96,12 +98,12 @@ const TaskListTableRowInner: React.FC<TaskListTableRowProps> = ({
         return;
       }
 
-      if (task.type === "empty") {
-        return;
+      if (task.type !== "empty") {
+        scrollToTask(task);
       }
 
-      scrollToTask(task);
       selectTaskOnMouseDown(task.id, event);
+      onClick(task);
     },
     [scrollToTask, selectTaskOnMouseDown, task]
   );

diff --git a/src/components/task-list/task-list-table.tsx b/src/components/task-list/task-list-table.tsx
@@ -31,6 +31,7 @@ const TaskListTableDefaultInner: React.FC<TaskListTableProps> = ({
   icons,
   isShowTaskNumbers,
   mapTaskToNestedIndex,
+  onClick,
   onExpanderClick,
   renderedIndexes,
   scrollToTask,
@@ -107,6 +108,7 @@ const TaskListTableDefaultInner: React.FC<TaskListTableProps> = ({
           isEven={index % 2 === 1}
           isSelected={selectedIdsMirror[id]}
           isShowTaskNumbers={isShowTaskNumbers}
+          onClick={onClick}
           onExpanderClick={onExpanderClick}
           scrollToTask={scrollToTask}
           selectTaskOnMouseDown={selectTaskOnMouseDown}

diff --git a/src/components/task-list/task-list.tsx b/src/components/task-list/task-list.tsx
@@ -55,6 +55,7 @@ export type TaskListProps = {
   icons?: Partial<Icons>;
   isShowTaskNumbers: boolean;
   mapTaskToNestedIndex: MapTaskToNestedIndex;
+  onClick?: (task: TaskOrEmpty) => void;
   onExpanderClick: (task: Task) => void;
   scrollToBottomStep: () => void;
   scrollToTask: (task: Task) => void;
@@ -97,6 +98,7 @@ const TaskListInner: React.FC<TaskListProps> = ({
   isShowTaskNumbers,
   mapTaskToNestedIndex,
   onExpanderClick,
+  onClick,
   scrollToTask,
   selectTaskOnMouseDown,
   selectedIdsMirror,
@@ -241,6 +243,7 @@ const TaskListInner: React.FC<TaskListProps> = ({
                 icons={icons}
                 isShowTaskNumbers={isShowTaskNumbers}
                 mapTaskToNestedIndex={mapTaskToNestedIndex}
+                onClick={onClick}
                 onExpanderClick={onExpanderClick}
                 renderedIndexes={renderedIndexes}
                 scrollToTask={scrollToTask}

diff --git a/src/types/public-types.ts b/src/types/public-types.ts
@@ -350,7 +350,7 @@ export interface EventOption {
   /**
    * Invokes on bar click.
    */
-  onClick?: (task: Task) => void;
+  onClick?: (task: TaskOrEmpty) => void;
   /**
    * Recount descedents of a group task when moving
    */
@@ -593,6 +593,7 @@ export interface TaskListTableProps {
   icons?: Partial<Icons>;
   isShowTaskNumbers: boolean;
   mapTaskToNestedIndex: MapTaskToNestedIndex;
+  onClick: (task: TaskOrEmpty) => void;
   onExpanderClick: (task: Task) => void;
   renderedIndexes: OptimizedListParams | null;
   scrollToTask: (task: Task) => void;

diff --git a/stories/Comparison.tsx b/stories/Comparison.tsx
@@ -50,7 +50,7 @@ export const Comparison: React.FC<AppProps> = props => {
     alert("On Double Click event Id:" + task.id);
   }, []);
 
-  const handleClick = useCallback((task: Task) => {
+  const handleClick = useCallback((task: TaskOrEmpty) => {
     console.log("On Click event Id:" + task.id);
   }, []);
 

diff --git a/stories/CriticalPath.tsx b/stories/CriticalPath.tsx
@@ -115,7 +115,7 @@ export const CriticalPath: React.FC<AppProps> = props => {
     alert("On Double Click event Id:" + task.id);
   }, []);
 
-  const handleClick = useCallback((task: Task) => {
+  const handleClick = useCallback((task: TaskOrEmpty) => {
     console.log("On Click event Id:" + task.id);
   }, []);
 

diff --git a/stories/CustomColumns.tsx b/stories/CustomColumns.tsx
@@ -117,7 +117,7 @@ export const CustomColumns: React.FC<AppProps> = props => {
     alert("On Double Click event Id:" + task.id);
   }, []);
 
-  const handleClick = useCallback((task: Task) => {
+  const handleClick = useCallback((task: TaskOrEmpty) => {
     console.log("On Click event Id:" + task.id);
   }, []);
 

diff --git a/stories/CustomIcons.tsx b/stories/CustomIcons.tsx
@@ -61,7 +61,7 @@ export const CustomIcons: React.FC<AppProps> = props => {
     alert("On Double Click event Id:" + task.id);
   }, []);
 
-  const handleClick = useCallback((task: Task) => {
+  const handleClick = useCallback((task: TaskOrEmpty) => {
     console.log("On Click event Id:" + task.id);
   }, []);
 

diff --git a/stories/CustomPalette.tsx b/stories/CustomPalette.tsx
@@ -71,7 +71,7 @@ export const CustomPalette: React.FC<AppProps> = props => {
     alert("On Double Click event Id:" + task.id);
   }, []);
 
-  const handleClick = useCallback((task: Task) => {
+  const handleClick = useCallback((task: TaskOrEmpty) => {
     console.log("On Click event Id:" + task.id);
   }, []);
 

diff --git a/stories/Simple.tsx b/stories/Simple.tsx
@@ -41,7 +41,7 @@ export const Simple: React.FC<AppProps> = props => {
     alert("On Double Click event Id:" + task.id);
   }, []);
 
-  const handleClick = useCallback((task: Task) => {
+  const handleClick = useCallback((task: TaskOrEmpty) => {
     console.log("On Click event Id:" + task.id);
   }, []);
 

diff --git a/stories/StressTest.tsx b/stories/StressTest.tsx
@@ -159,7 +159,7 @@ export const StressTest: React.FC<AppProps> = ({
     alert("On Double Click event Id:" + task.id);
   }, []);
 
-  const handleClick = useCallback((task: Task) => {
+  const handleClick = useCallback((task: TaskOrEmpty) => {
     console.log("On Click event Id:" + task.id);
   }, []);
 

diff --git a/stories/Warnings.tsx b/stories/Warnings.tsx
@@ -41,7 +41,7 @@ export const Warnings: React.FC<AppProps> = props => {
     alert("On Double Click event Id:" + task.id);
   }, []);
 
-  const handleClick = useCallback((task: Task) => {
+  const handleClick = useCallback((task: TaskOrEmpty) => {
     console.log("On Click event Id:" + task.id);
   }, []);