feat: ✨ columnwidth in gardenmeta

apps/test-app/src/index.tsx

@@ -54,6 +54,7 @@ export function App() {
             columnStart: 0,
             rowCount: 10000,
             validGroupingOptions: ['RFOC', 'PartitionKey'],
+            columnWidth: 150,
           };
         },
         getBlockAsync: async (a) => {

packages/garden/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-garden",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",

packages/garden/src/lib/components/ExpandProvider/ExpandProvider.tsx

@@ -1,73 +1,75 @@
-import { createContext, PropsWithChildren, useReducer } from 'react';
-import { defaultGardenPackageWidth } from '../../hooks';
-
-type State = {
-  expandedColumns: number[];
-  widths: number[];
-};
-export enum ActionType {
-  EXPAND_COLUMN,
-}
-
-type ExpandColumn = {
-  index: number;
-  type: ActionType.EXPAND_COLUMN;
-};
-
-type Action = ExpandColumn;
-const expandReducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case ActionType.EXPAND_COLUMN: {
-      if (state.expandedColumns.findIndex((s) => s === action.index) !== -1) {
-        const newWidths = [...state.widths];
-        newWidths[action.index] = defaultGardenPackageWidth;
-        return {
-          expandedColumns: state.expandedColumns.filter((s) => s !== action.index),
-          widths: newWidths,
-        };
-      } else {
-        const newWidths = [...state.widths];
-        newWidths[action.index] = 500;
-        return {
-          expandedColumns: [...state.expandedColumns, action.index],
-          widths: newWidths,
-        };
-      }
-    }
-
-    default:
-      return { expandedColumns: [], widths: [] };
-  }
-};
-
-type DispatchAction = (action: Action) => void;
-const ExpandContext = createContext<State>({
-  expandedColumns: [],
-  widths: [],
-});
-
-function createExpandDispatchContext() {
-  return createContext<DispatchAction | undefined>(undefined);
-}
-const ExpandDispatchContext = createExpandDispatchContext();
-
-type ExpandProviderProps = {
-  initialWidths: number[];
-};
-
-const ExpandProvider = (props: PropsWithChildren<ExpandProviderProps>) => {
-  const { initialWidths, children } = props;
-
-  const [state, dispatch] = useReducer(expandReducer, {
-    expandedColumns: [],
-    widths: initialWidths,
-  });
-
-  return (
-    <ExpandContext.Provider value={state}>
-      <ExpandDispatchContext.Provider value={dispatch}>{children}</ExpandDispatchContext.Provider>
-    </ExpandContext.Provider>
-  );
-};
-
-export { ExpandProvider, ExpandContext, ExpandDispatchContext };
+import { createContext, PropsWithChildren, useReducer } from 'react';
+
+type State = {
+  expandedColumns: number[];
+  widths: number[];
+};
+export enum ActionType {
+  EXPAND_COLUMN,
+}
+
+type ExpandColumn = {
+  index: number;
+  type: ActionType.EXPAND_COLUMN;
+};
+
+type Action = ExpandColumn;
+const expandReducer =
+  (defaultColumnWidth: number) =>
+  (state: State, action: Action): State => {
+    switch (action.type) {
+      case ActionType.EXPAND_COLUMN: {
+        if (state.expandedColumns.findIndex((s) => s === action.index) !== -1) {
+          const newWidths = [...state.widths];
+          newWidths[action.index] = defaultColumnWidth;
+          return {
+            expandedColumns: state.expandedColumns.filter((s) => s !== action.index),
+            widths: newWidths,
+          };
+        } else {
+          const newWidths = [...state.widths];
+          newWidths[action.index] = defaultColumnWidth + 200;
+          return {
+            expandedColumns: [...state.expandedColumns, action.index],
+            widths: newWidths,
+          };
+        }
+      }
+
+      default:
+        return { expandedColumns: [], widths: [] };
+    }
+  };
+
+type DispatchAction = (action: Action) => void;
+const ExpandContext = createContext<State>({
+  expandedColumns: [],
+  widths: [],
+});
+
+function createExpandDispatchContext() {
+  return createContext<DispatchAction | undefined>(undefined);
+}
+const ExpandDispatchContext = createExpandDispatchContext();
+
+type ExpandProviderProps = {
+  initialWidths: number[];
+  defaultColumnWidth: number;
+};
+
+const ExpandProvider = (props: PropsWithChildren<ExpandProviderProps>) => {
+  const { initialWidths, defaultColumnWidth, children } = props;
+
+  const [state, dispatch] = useReducer(expandReducer(defaultColumnWidth), {
+    expandedColumns: [],
+    widths: initialWidths,
+  });
+
+  return (
+    <ExpandContext.Provider value={state}>
+      <ExpandDispatchContext.Provider value={dispatch}>{children}</ExpandDispatchContext.Provider>
+    </ExpandContext.Provider>
+  );
+};
+
+export { ExpandProvider, ExpandContext, ExpandDispatchContext };

packages/garden/src/lib/components/VirtualContainer/VirtualContainer.tsx

@@ -44,7 +44,8 @@ export const VirtualContainer = <TContext,>({
   }
 
   const amountOfColumns = data.columnCount;
-  const widths = useItemWidths(data.columnCount);
+  const columnWidth = data.columnWidth || 300;
+  const widths = useItemWidths(data.columnCount, columnWidth);
 
   //TODO: Handle widths = 0 better
   if (widths.length === 0 || amountOfColumns !== widths.length) {
@@ -64,7 +65,7 @@ export const VirtualContainer = <TContext,>({
     <>
       {/* <ReactQueryDevtools /> */}
       <StyledVirtualContainer id={'garden_root'}>
-        <ExpandProvider initialWidths={widths}>
+        <ExpandProvider initialWidths={widths} defaultColumnWidth={columnWidth}>
           <VirtualGarden
             context={context}
             getSubgroupItems={dataSource.getSubgroupItems}

packages/garden/src/lib/hooks/useItemWidths.ts

@@ -1,16 +1,10 @@
 import { useEffect, useState } from 'react';
 
-export const defaultGardenPackageWidth = 300;
-
-export function useItemWidths(columnCount: number) {
+export function useItemWidths(columnCount: number, itemWidth: number) {
   const [widths, setWidths] = useState<number[]>([]);
-
-  /**
-   * How to calculate longest width?
-   */
   useEffect(() => {
     if (columnCount > 0) {
-      setWidths(new Array(columnCount).fill(defaultGardenPackageWidth));
+      setWidths(new Array(columnCount).fill(itemWidth));
     }
   }, [columnCount]);
 

packages/garden/src/lib/types/index.ts

@@ -15,6 +15,7 @@ export type GardenMeta = {
   rowCount: number;
   allGroupingOptions: GroupingOption[];
   validGroupingOptions: string[];
+  columnWidth?: number;
 };
 
 export type GetHeaderBlockRequestArgs = Pick<

packages/workspace-fusion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-fusion",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",