Merge pull request MaTeMaTuK#140 from MusabShakeel576/feature/scroll-to-task

feat: scroll to task

Author: MaTeMaTuK

src/components/gantt/gantt.tsx

@@ -382,6 +382,9 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     }
     setSelectedTask(newSelectedTask);
   };
+  const handleSelectedTaskStartX = (x1: number | undefined) => {
+    setScrollX(x1??-1)
+  }
   const handleExpanderClick = (task: Task) => {
     if (onExpanderClick && task.hideChildren !== undefined) {
       onExpanderClick({ ...task, hideChildren: !task.hideChildren });
@@ -445,6 +448,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     selectedTask,
     taskListRef,
     setSelectedTask: handleSelectedTask,
+    setSelectedTaskStartX: handleSelectedTaskStartX,
     onExpanderClick: handleExpanderClick,
     TaskListHeader,
     TaskListTable,

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

@@ -30,6 +30,7 @@ export const TaskListTableDefault: React.FC<{
   tasks: Task[];
   selectedTaskId: string;
   setSelectedTask: (taskId: string) => void;
+  setSelectedTaskStartX: (x1: number | undefined) => void;
   onExpanderClick: (task: Task) => void;
 }> = ({
   rowHeight,
@@ -38,6 +39,7 @@ export const TaskListTableDefault: React.FC<{
   fontFamily,
   fontSize,
   locale,
+  setSelectedTaskStartX,
   onExpanderClick,
 }) => {
   const toLocaleDateString = useMemo(
@@ -72,8 +74,10 @@ export const TaskListTableDefault: React.FC<{
               style={{
                 minWidth: rowWidth,
                 maxWidth: rowWidth,
+                cursor: "pointer",
               }}
               title={t.name}
+              onClick={() => setSelectedTaskStartX(t.x1)}
             >
               <div className={styles.taskListNameWrapper}>
                 <div

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

@@ -16,6 +16,7 @@ export type TaskListProps = {
   horizontalContainerClass?: string;
   selectedTask: BarTask | undefined;
   setSelectedTask: (task: string) => void;
+  setSelectedTaskStartX: (x1: number | undefined) => void;
   onExpanderClick: (task: Task) => void;
   TaskListHeader: React.FC<{
     headerHeight: number;
@@ -32,6 +33,7 @@ export type TaskListProps = {
     tasks: Task[];
     selectedTaskId: string;
     setSelectedTask: (taskId: string) => void;
+    setSelectedTaskStartX: (x1: number | undefined) => void;
     onExpanderClick: (task: Task) => void;
   }>;
 };
@@ -46,6 +48,7 @@ export const TaskList: React.FC<TaskListProps> = ({
   tasks,
   selectedTask,
   setSelectedTask,
+  setSelectedTaskStartX,
   onExpanderClick,
   locale,
   ganttHeight,
@@ -77,6 +80,7 @@ export const TaskList: React.FC<TaskListProps> = ({
     locale,
     selectedTaskId: selectedTaskId,
     setSelectedTask,
+    setSelectedTaskStartX,
     onExpanderClick,
   };
 

src/types/public-types.ts

@@ -30,6 +30,7 @@ export interface Task {
   dependencies?: string[];
   hideChildren?: boolean;
   displayOrder?: number;
+  x1?: number;
 }
 
 export interface EventOption {
@@ -135,6 +136,7 @@ export interface StylingOption {
      * Sets selected task by id
      */
     setSelectedTask: (taskId: string) => void;
+    setSelectedTaskStartX: (x1: number | undefined) => void;
     onExpanderClick: (task: Task) => void;
   }>;
 }