diff --git a/apps/test-app/src/index.tsx b/apps/test-app/src/index.tsx index 0e23776a6..8f7fc1e23 100644 --- a/apps/test-app/src/index.tsx +++ b/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) => { diff --git a/packages/garden/package.json b/packages/garden/package.json index 158008afa..b45dd729d 100644 --- a/packages/garden/package.json +++ b/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", diff --git a/packages/garden/src/lib/components/ExpandProvider/ExpandProvider.tsx b/packages/garden/src/lib/components/ExpandProvider/ExpandProvider.tsx index bd95dfb88..cf634c51f 100644 --- a/packages/garden/src/lib/components/ExpandProvider/ExpandProvider.tsx +++ b/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({ - expandedColumns: [], - widths: [], -}); - -function createExpandDispatchContext() { - return createContext(undefined); -} -const ExpandDispatchContext = createExpandDispatchContext(); - -type ExpandProviderProps = { - initialWidths: number[]; -}; - -const ExpandProvider = (props: PropsWithChildren) => { - const { initialWidths, children } = props; - - const [state, dispatch] = useReducer(expandReducer, { - expandedColumns: [], - widths: initialWidths, - }); - - return ( - - {children} - - ); -}; - -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({ + expandedColumns: [], + widths: [], +}); + +function createExpandDispatchContext() { + return createContext(undefined); +} +const ExpandDispatchContext = createExpandDispatchContext(); + +type ExpandProviderProps = { + initialWidths: number[]; + defaultColumnWidth: number; +}; + +const ExpandProvider = (props: PropsWithChildren) => { + const { initialWidths, defaultColumnWidth, children } = props; + + const [state, dispatch] = useReducer(expandReducer(defaultColumnWidth), { + expandedColumns: [], + widths: initialWidths, + }); + + return ( + + {children} + + ); +}; + +export { ExpandProvider, ExpandContext, ExpandDispatchContext }; diff --git a/packages/garden/src/lib/components/VirtualContainer/VirtualContainer.tsx b/packages/garden/src/lib/components/VirtualContainer/VirtualContainer.tsx index 85b726411..8371e8abe 100644 --- a/packages/garden/src/lib/components/VirtualContainer/VirtualContainer.tsx +++ b/packages/garden/src/lib/components/VirtualContainer/VirtualContainer.tsx @@ -44,7 +44,8 @@ export const VirtualContainer = ({ } 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 = ({ <> {/* */} - + ([]); - - /** - * How to calculate longest width? - */ useEffect(() => { if (columnCount > 0) { - setWidths(new Array(columnCount).fill(defaultGardenPackageWidth)); + setWidths(new Array(columnCount).fill(itemWidth)); } }, [columnCount]); diff --git a/packages/garden/src/lib/types/index.ts b/packages/garden/src/lib/types/index.ts index 5e5b966d6..3126047d1 100644 --- a/packages/garden/src/lib/types/index.ts +++ b/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< diff --git a/packages/workspace-fusion/package.json b/packages/workspace-fusion/package.json index aa061480a..99efb9351 100644 --- a/packages/workspace-fusion/package.json +++ b/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",