Allow Gantt client to get information on resized columns

Signed-off-by: Laurent Fasani <laurent.fasani@obeo.fr>
ObeoNetwork · Apr 4, 2024 · 1142045 · 1142045
1 parent e2884d6
commit 1142045
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 30 deletions.
diff --git a/src/components/gantt/use-tablelist-resize.ts b/src/components/gantt/use-tablelist-resize.ts
@@ -46,42 +46,49 @@ export const useTableListResize = (
 
     return [
       {
+        id: "TitleColumn",
         component: TitleColumn,
         width: titleCellWidth,
         title: "Name",
       },
 
       {
+        id: "DateStartColumn",
         component: DateStartColumn,
         width: dateCellWidth,
         title: "From",
       },
 
       {
+        id: "DateEndColumn",
         component: DateEndColumn,
         width: dateCellWidth,
         title: "To",
       },
 
       {
+        id: "DependenciesColumn",
         component: DependenciesColumn,
         width: dependenciesCellWidth,
         title: "Dependencies",
       },
 
       {
+        id: "DeleteColumn",
         component: DeleteColumn,
         width: actionColumnWidth,
         canResize: false,
       },
 
       {
+        id: "EditColumn",
         component: EditColumn,
         width: actionColumnWidth,
         canResize: false,
       },
 
       {
+        id: "AddColumn",
         component: AddColumn,
         width: actionColumnWidth,
         canResize: false,
@@ -92,9 +99,24 @@ export const useTableListResize = (
   useEffect(() => {
     if (columnsProp) {
       setColumns([...columnsProp]);
-      setTableWidth(columnsProp.reduce((res, { width }) => res + width, 0));
+      const currentColumnIds = columnsState.map(col => col.id);
+      const newColumnIds = columnsProp.map(col => col.id);
+
+      const widthOfAddedColumns = columnsProp
+        .filter(col => !currentColumnIds.includes(col.id))
+        .reduce((res, { width }) => res + width, 0);
+      const widthOfRemovedColumns = columnsState
+        .filter(col => !newColumnIds.includes(col.id))
+        .reduce((res, { width }) => res + width, 0);
+
+      setTableWidth(prev =>
+        Math.min(
+          prev + widthOfAddedColumns - widthOfRemovedColumns,
+          columnsProp.reduce((res, { width }) => res + width, 0)
+        )
+      );
     }
-  }, []);
+  }, [columnsProp]);
 
   const [tableResizeEvent, setTableResizeEvent] =
     useState<TableResizeEvent | null>(null);
@@ -182,12 +204,11 @@ export const useTableListResize = (
         columnResizeEvent.initialColumnWidth + moveDelta
       );
       let previousColumnWidth = null;
-
       setColumns((prevColumns: readonly Column[]) => {
         const newColumns = prevColumns.map((column, index) => {
           if (index === columnResizeEvent.columnIndex) {
             previousColumnWidth = column.width;
-            column.width = newColumnwidth;
+            return { ...column, width: newColumnwidth };
           }
           return column;
         });

diff --git a/src/types/public-types.ts b/src/types/public-types.ts
@@ -825,7 +825,7 @@ export type ColumnProps = {
 };
 
 export type Column = {
-  id?: string;
+  id: string;
   component: ComponentType<ColumnProps>;
   width: number;
   title?: ReactNode;
@@ -835,7 +835,7 @@ export type Column = {
 export type OnResizeColumn = (
   nextColumns: readonly Column[],
   columnIndex: number,
-  nextWidth: number
+  deltaWidth: number
 ) => void;
 export type ChangeAction =
   | {

diff --git a/stories/CustomColumns.tsx b/stories/CustomColumns.tsx
@@ -7,6 +7,7 @@ import {
   DateStartColumn,
   Gantt,
   OnChangeTasks,
+  OnResizeColumn,
   Task,
   TaskOrEmpty,
   TitleColumn,
@@ -169,6 +170,12 @@ export const CustomColumns: React.FC<AppProps> = props => {
     setDisplayedColumns(newDisplayedColumns);
   };
 
+  const onResizeColumn: OnResizeColumn = (newColumns: readonly Column[]) => {
+    setDisplayedColumns(() => {
+      return [...newColumns];
+    });
+  };
+
   return (
     <>
       <FormControl>
@@ -198,6 +205,7 @@ export const CustomColumns: React.FC<AppProps> = props => {
         onEditTask={onEditTask}
         onClick={handleClick}
         tasks={tasks}
+        onResizeColumn={onResizeColumn}
       />
     </>
   );

diff --git a/stories/CustomPalette.tsx b/stories/CustomPalette.tsx
@@ -83,29 +83,6 @@ export const CustomPalette: React.FC<AppProps> = props => {
     return null;
   };
 
-  const columns: readonly Column[] = [
-    {
-      component: TitleColumn,
-      width: 210,
-      title: "Name",
-    },
-    {
-      component: DateStartColumn,
-      width: 150,
-      title: "Date of start",
-    },
-    {
-      component: DateEndColumn,
-      width: 150,
-      title: "Date of end",
-    },
-    {
-      component: ProgressColumn,
-      width: 40,
-      title: "Progress",
-    },
-  ];
-
   const handleTaskDelete = (task: Task) => {
     const conf = window.confirm("Are you sure about " + task.name + " ?");
     if (conf) {
@@ -174,7 +151,6 @@ export const CustomPalette: React.FC<AppProps> = props => {
   return (
     <Gantt
       {...props}
-      columns={columns}
       onAddTask={onAddTask}
       onChangeTasks={onChangeTasks}
       onDoubleClick={handleDblClick}