Allow updating the displayed columns

Signed-off-by: Laurent Fasani <laurent.fasani@obeo.fr>
ObeoNetwork · Feb 19, 2024 · 6b16fe2 · 6b16fe2
1 parent 7dec9bb
commit 6b16fe2
Show file tree

Hide file tree

Showing 6 changed files with 170 additions and 57 deletions.
diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx
@@ -87,7 +87,6 @@ import { deleteOption } from "../../context-menu-options/delete";
 import { useHolidays } from "./use-holidays";
 
 import styles from "./gantt.module.css";
-import { useTableListResize } from "./use-tablelist-resize";
 
 const defaultColors: ColorStyles = {
   arrowColor: "grey",
@@ -124,6 +123,7 @@ const defaultColors: ColorStyles = {
   evenTaskBackgroundColor: "#f5f5f5",
   holidayBackgroundColor: "rgba(233, 233, 233, 0.3)",
   selectedTaskBackgroundColor: "rgba(252, 248, 227, 0.5)",
+  taskDragColor: "#7474ff",
   todayColor: "rgba(252, 248, 227, 0.5)",
   contextMenuBoxShadow: "rgb(0 0 0 / 25%) 1px 1px 5px 1px",
   contextMenuBgColor: "#fff",
@@ -757,15 +757,6 @@ export const Gantt: React.FC<GanttProps> = ({
     });
   }, []);
 
-  // Manage the column and list table resizing
-  const [
-    columns,
-    taskListWidth,
-    tableWidth,
-    onTableResizeStart,
-    onColumnResizeStart,
-  ] = useTableListResize(columnsProp, distances, onResizeColumn);
-
   const getMetadata = useCallback(
     (changeAction: ChangeAction) =>
       getChangeTaskMetadata({
@@ -1913,7 +1904,7 @@ export const Gantt: React.FC<GanttProps> = ({
     childTasksMap,
     closedTasks,
     colors: colorStyles,
-    columns,
+    columnsProp,
     cutIdsMirror,
     dateSetup,
     dependencyMap,
@@ -1934,19 +1925,16 @@ export const Gantt: React.FC<GanttProps> = ({
     icons,
     isShowTaskNumbers,
     mapTaskToNestedIndex,
-    onColumnResizeStart,
     onExpanderClick: handleExpanderClick,
-    onTableResizeStart,
     scrollToBottomStep,
     scrollToTopStep,
     selectTaskOnMouseDown,
     selectedIdsMirror,
     scrollToTask,
-    tableWidth,
     taskListContainerRef,
     taskListRef,
-    taskListWidth,
     tasks: visibleTasks,
+    onResizeColumn,
   };
 
   return (
@@ -1956,7 +1944,8 @@ export const Gantt: React.FC<GanttProps> = ({
       tabIndex={0}
       ref={wrapperRef}
     >
-      {columns.length > 0 && <TaskList {...tableProps} />}
+      {/* {columns.length > 0 && <TaskList {...tableProps} />} */}
+      {(!columnsProp || columnsProp.length > 0) && <TaskList {...tableProps} />}
 
       <TaskGantt
         barProps={barProps}

diff --git a/src/components/gantt/use-tablelist-resize.ts b/src/components/gantt/use-tablelist-resize.ts
@@ -34,7 +34,7 @@ export const useTableListResize = (
 ] => {
   const [columnsState, setColumns] = useState<readonly Column[]>(() => {
     if (columnsProp) {
-      return columnsProp;
+      return [...columnsProp];
     }
 
     const {
@@ -89,6 +89,13 @@ export const useTableListResize = (
     ];
   });
 
+  useEffect(() => {
+    if (columnsProp) {
+      setColumns([...columnsProp]);
+      setTableWidth(columnsProp.reduce((res, { width }) => res + width, 0));
+    }
+  }, [columnsProp]);
+
   const [tableResizeEvent, setTableResizeEvent] =
     useState<TableResizeEvent | null>(null);
   const [columnResizeEvent, setColumnResizeEvent] =

diff --git a/src/components/task-list/task-list.tsx b/src/components/task-list/task-list.tsx
@@ -12,6 +12,7 @@ import {
   Distances,
   Icons,
   MapTaskToNestedIndex,
+  OnResizeColumn,
   Task,
   TaskListHeaderProps,
   TaskListTableProps,
@@ -22,6 +23,7 @@ import { ROW_DRAG_TYPE } from "../../constants";
 import { useOptimizedList } from "../../helpers/use-optimized-list";
 
 import styles from "./task-list.module.css";
+import { useTableListResize } from "../gantt/use-tablelist-resize";
 
 const SCROLL_DELAY = 25;
 
@@ -31,7 +33,7 @@ export type TaskListProps = {
   childTasksMap: ChildByLevelMap;
   closedTasks: Readonly<Record<string, true>>;
   colors: ColorStyles;
-  columns: readonly Column[];
+  columnsProp: readonly Column[];
   cutIdsMirror: Readonly<Record<string, true>>;
   dateSetup: DateSetup;
   dependencyMap: DependencyMap;
@@ -56,21 +58,18 @@ export type TaskListProps = {
   icons?: Partial<Icons>;
   isShowTaskNumbers: boolean;
   mapTaskToNestedIndex: MapTaskToNestedIndex;
-  onColumnResizeStart: (columnIndex: number, clientX: number) => void;
   onExpanderClick: (task: Task) => void;
-  onTableResizeStart: (clientX: number) => void;
   scrollToBottomStep: () => void;
   scrollToTask: (task: Task) => void;
   scrollToTopStep: () => void;
   selectTaskOnMouseDown: (taskId: string, event: MouseEvent) => void;
   selectedIdsMirror: Readonly<Record<string, true>>;
-  tableWidth: number;
   taskListContainerRef: RefObject<HTMLDivElement>;
   taskListRef: RefObject<HTMLDivElement>;
-  taskListWidth: number;
   tasks: readonly TaskOrEmpty[];
   TaskListHeader: ComponentType<TaskListHeaderProps>;
   TaskListTable: ComponentType<TaskListTableProps>;
+  onResizeColumn?: OnResizeColumn;
 };
 
 const TaskListInner: React.FC<TaskListProps> = ({
@@ -79,7 +78,7 @@ const TaskListInner: React.FC<TaskListProps> = ({
   childTasksMap,
   closedTasks,
   colors,
-  columns,
+  columnsProp,
   cutIdsMirror,
   dateSetup,
   dependencyMap,
@@ -100,22 +99,28 @@ const TaskListInner: React.FC<TaskListProps> = ({
   icons = undefined,
   isShowTaskNumbers,
   mapTaskToNestedIndex,
-  onColumnResizeStart,
   onExpanderClick,
-  onTableResizeStart,
   scrollToBottomStep,
   scrollToTask,
   scrollToTopStep,
   selectTaskOnMouseDown,
   selectedIdsMirror,
-  tableWidth,
   taskListContainerRef,
   taskListRef,
-  taskListWidth,
   tasks,
   TaskListHeader,
   TaskListTable,
+  onResizeColumn,
 }) => {
+  // Manage the column and list table resizing
+  const [
+    columns,
+    taskListWidth,
+    tableWidth,
+    onTableResizeStart,
+    onColumnResizeStart,
+  ] = useTableListResize(columnsProp, distances, onResizeColumn);
+
   const renderedIndexes = useOptimizedList(
     taskListContainerRef,
     "scrollTop",

diff --git a/src/types/public-types.ts b/src/types/public-types.ts
@@ -100,6 +100,7 @@ export interface ColorStyles {
   milestoneBackgroundSelectedCriticalColor: string;
   evenTaskBackgroundColor: string;
   holidayBackgroundColor: string;
+  taskDragColor: string;
   selectedTaskBackgroundColor: string;
   todayColor: string;
   contextMenuBoxShadow: string;
@@ -807,6 +808,7 @@ export type ColumnProps = {
 };
 
 export type Column = {
+  id?: string;
   component: ComponentType<ColumnProps>;
   width: number;
   title?: ReactNode;