fix(datagrid-web): fix columnr resize

Author: iobuhov

packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx

@@ -111,7 +111,9 @@ export function preview(props: DatagridPreviewProps): ReactElement {
                 resize: noop,
                 setFilter: noop,
                 sortBy: noop,
-                swap: noop
+                swap: noop,
+                setSize: noop,
+                createSizeSnapshot: noop
             }}
             data={data}
             emptyPlaceholderRenderer={useCallback(

packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx

@@ -44,7 +44,7 @@ function Container(props: Props): ReactElement {
     const multipleFilteringState = useMultipleFiltering();
     const { FilterContext } = useFilterContext();
 
-    const [state, actions] = useGridState(props.initParams, props.mappedColumns, props.onStateChange);
+    const [state, actions, { useHeaderRef }] = useGridState(props.initParams, props.mappedColumns, props.onStateChange);
 
     const [{ items, exporting, processedRows }, { abort }] = useDG2ExportApi({
         columns: useMemo(
@@ -260,6 +260,7 @@ function Container(props: Props): ReactElement {
             cellEventsController={cellEventsController}
             checkboxEventsController={checkboxEventsController}
             focusController={focusController}
+            useHeaderRef={useHeaderRef}
         />
     );
 }

packages/pluggableWidgets/datagrid-web/src/components/ColumnResizer.tsx

@@ -5,23 +5,34 @@ export interface ColumnResizerProps {
     minWidth?: number;
     setColumnWidth: (width: number) => void;
     onResizeEnds?: () => void;
+    onResizeStart?: () => void;
 }
 
-export function ColumnResizer({ minWidth = 50, setColumnWidth, onResizeEnds }: ColumnResizerProps): ReactElement {
+export function ColumnResizer({
+    minWidth = 50,
+    setColumnWidth,
+    onResizeEnds,
+    onResizeStart
+}: ColumnResizerProps): ReactElement {
     const [isResizing, setIsResizing] = useState(false);
     const [startPosition, setStartPosition] = useState(0);
     const [currentWidth, setCurrentWidth] = useState(0);
     const resizerReference = useRef<HTMLDivElement>(null);
+    const onStart = useEventCallback(onResizeStart);
 
-    const onStartDrag = useCallback((e: TouchEvent<HTMLDivElement> & MouseEvent<HTMLDivElement>): void => {
-        const mouseX = e.touches ? e.touches[0].screenX : e.screenX;
-        setStartPosition(mouseX);
-        setIsResizing(true);
-        if (resizerReference.current) {
-            const column = resizerReference.current.parentElement!;
-            setCurrentWidth(column.clientWidth);
-        }
-    }, []);
+    const onStartDrag = useCallback(
+        (e: TouchEvent<HTMLDivElement> & MouseEvent<HTMLDivElement>): void => {
+            const mouseX = e.touches ? e.touches[0].screenX : e.screenX;
+            setStartPosition(mouseX);
+            setIsResizing(true);
+            if (resizerReference.current) {
+                const column = resizerReference.current.parentElement!;
+                setCurrentWidth(column.clientWidth);
+            }
+            onStart();
+        },
+        [onStart]
+    );
     const onEndDrag = useCallback((): void => {
         if (!isResizing) {
             return;

packages/pluggableWidgets/datagrid-web/src/components/Header.tsx

@@ -18,6 +18,7 @@ import { FaArrowsAltV } from "./icons/FaArrowsAltV";
 import { ColumnResizerProps } from "./ColumnResizer";
 import * as Grid from "../typings/GridModel";
 import { ColumnId, GridColumn } from "../typings/GridColumn";
+import { HeaderRefHook } from "../features/model/resizing";
 
 export interface HeaderProps {
     className?: string;
@@ -39,6 +40,7 @@ export interface HeaderProps {
     setSortBy: Grid.Actions["sortBy"];
     sortRule?: Grid.SortRule;
     visibleColumns: GridColumn[];
+    useHeaderRef?: HeaderRefHook<HTMLDivElement>;
 }
 
 export function Header(props: HeaderProps): ReactElement {
@@ -89,6 +91,7 @@ export function Header(props: HeaderProps): ReactElement {
             role="columnheader"
             style={!props.sortable || !props.column.canSort ? { cursor: "unset" } : undefined}
             title={caption}
+            ref={props.useHeaderRef?.(props.column.columnId)}
         >
             <div
                 className={classNames("column-container", {

packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx

@@ -25,6 +25,7 @@ import { KeyNavProvider } from "../features/keyboard-navigation/context";
 import * as GridModel from "../typings/GridModel";
 import { SelectActionHelper } from "../helpers/SelectActionHelper";
 import { FocusTargetController } from "../features/keyboard-navigation/FocusTargetController";
+import { HeaderRefHook } from "../features/model/resizing";
 
 export interface WidgetProps<C extends GridColumn, T extends ObjectItem = ObjectItem> {
     CellComponent: CellComponent<C>;
@@ -70,6 +71,7 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
     checkboxEventsController: EventsController;
     selectActionHelper: SelectActionHelper;
     focusController: FocusTargetController;
+    useHeaderRef?: HeaderRefHook<HTMLDivElement>;
 }
 
 export function Widget<C extends GridColumn>(props: WidgetProps<C>): ReactElement {
@@ -182,9 +184,10 @@ export function Widget<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                                             hidable={columnsHidable}
                                             isDragging={isDragging}
                                             preview={preview}
-                                            resizable={columnsResizable}
+                                            resizable={columnsResizable && columnsToShow.at(-1) !== column}
                                             resizer={
                                                 <ColumnResizer
+                                                    onResizeStart={actions.createSizeSnapshot}
                                                     setColumnWidth={(width: number) =>
                                                         actions.resize([column.columnId, width])
                                                     }
@@ -197,6 +200,7 @@ export function Widget<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                                             sortable={columnsSortable}
                                             sortRule={state.sortOrder.find(([id]) => column.columnId === id)}
                                             visibleColumns={state.visibleColumns}
+                                            useHeaderRef={props.useHeaderRef}
                                         />
                                     )
                                 )}
@@ -265,9 +269,10 @@ function gridStyle(
     optional: OptionalColumns
 ): CSSProperties {
     const columnSizes = columns.map(c => {
+        const isLast = columns.at(-1) === c;
         const columnResizedSize = resizeMap[c.columnId];
         if (columnResizedSize) {
-            return `${columnResizedSize}px`;
+            return isLast ? "minmax(min-content, auto)" : `${columnResizedSize}px`;
         }
         switch (c.width) {
             case "autoFit": {

packages/pluggableWidgets/datagrid-web/src/features/model/resizing.ts

@@ -0,0 +1,30 @@
+import { useRef, useEffect } from "react";
+import { ColumnId } from "../../typings/GridColumn";
+
+export type ColumnElementsMap<T> = Map<ColumnId, T>;
+
+export type HeaderRefHook<T> = (id: ColumnId) => React.RefObject<T>;
+
+export type GetColumnElementsMapFn<T> = (callback: (map: ColumnElementsMap<T>) => void) => void;
+
+export function useColumnsElementsMap<T>(): [GetColumnElementsMapFn<T>, HeaderRefHook<T>] {
+    const mapRef = useRef<ColumnElementsMap<T>>(new Map());
+    // eslint-disable-next-line prefer-arrow-callback
+    const { current: hook } = useRef<HeaderRefHook<T>>(function useHeaderRef(id: ColumnId): React.RefObject<T> {
+        const headerRef = useRef<T>(null);
+
+        useEffect(() => {
+            const map = mapRef.current;
+            map.set(id, headerRef.current!);
+            return () => {
+                map.delete(id);
+            };
+        }, [id]);
+
+        return headerRef;
+    });
+
+    const { current: getColumnElementsMap } = useRef<GetColumnElementsMapFn<T>>(callback => callback(mapRef.current));
+
+    return [getColumnElementsMap, hook];
+}

packages/pluggableWidgets/datagrid-web/src/features/model/use-grid-state.ts

@@ -3,6 +3,7 @@ import { useWatchValues } from "@mendix/widget-plugin-hooks/useWatchValues";
 import { ColumnId } from "../../typings/GridColumn";
 import * as Grid from "../../typings/GridModel";
 import { sortByOrder } from "./utils";
+import { HeaderRefHook, useColumnsElementsMap } from "./resizing";
 
 type NamedAction<Name, Fn> = Fn extends (arg: infer Payload) => void
     ? {
@@ -27,27 +28,44 @@ type InitArg = {
 
 export type StateChangeFx = (prev: Grid.State, next: Grid.State) => void;
 
+export type GridProps = {
+    useHeaderRef: HeaderRefHook<HTMLDivElement>;
+};
+
 export function useGridState(
     initParams: Grid.InitParams,
     columns: Grid.Columns,
     onStateChange: StateChangeFx
-): [Grid.State, Grid.Actions] {
+): [Grid.State, Grid.Actions, GridProps] {
     const [state, dispatch] = useReducer(gridStateReducer, { params: initParams, columns }, initGridState);
+    const [getColumnElementsMap, useHeaderRef] = useColumnsElementsMap<HTMLDivElement>();
 
     const memoizedGridActions = useMemo<Grid.Actions>(() => {
-        return {
+        const actions: Grid.Actions = {
             resize: payload => dispatch({ type: "resize", payload }),
             setFilter: payload => dispatch({ type: "setFilter", payload }),
             sortBy: payload => dispatch({ type: "sortBy", payload }),
             swap: payload => dispatch({ type: "swap", payload }),
-            toggleHidden: payload => dispatch({ type: "toggleHidden", payload })
+            toggleHidden: payload => dispatch({ type: "toggleHidden", payload }),
+            setSize: payload => dispatch({ type: "setSize", payload }),
+            createSizeSnapshot: () =>
+                getColumnElementsMap(elementsMap =>
+                    actions.setSize(
+                        [...elementsMap.entries()].reduce<Grid.ColumnWidthConfig>((config, [id, element]) => {
+                            config[id] = element.clientWidth;
+                            return config;
+                        }, {})
+                    )
+                )
         };
-    }, [dispatch]);
+
+        return actions;
+    }, [dispatch, getColumnElementsMap]);
 
     useEffect(() => dispatch({ type: "setColumns", payload: columns }), [columns]);
     useWatchValues(([prevState], [newState]) => onStateChange(prevState, newState), [state]);
 
-    return [state, memoizedGridActions];
+    return [state, memoizedGridActions, { useHeaderRef }];
 }
 
 function gridStateReducer(state: Grid.State, action: Action): Grid.State {
@@ -99,6 +117,11 @@ function gridStateReducer(state: Grid.State, action: Action): Grid.State {
                 visibleColumns: computeVisible(state.availableColumns, newHidden)
             };
         }
+        case "setSize": {
+            return { ...state, size: action.payload };
+        }
+        default:
+            return state;
     }
 }
 

packages/pluggableWidgets/datagrid-web/src/typings/GridModel.ts

@@ -47,9 +47,11 @@ export interface State extends BaseState {
 }
 
 export type Actions = {
-    toggleHidden: (id: ColumnId) => void;
-    sortBy: (id: ColumnId) => void;
-    swap: (arg: [a: ColumnId, b: ColumnId]) => void;
+    createSizeSnapshot: () => void;
     resize: (arg: [id: ColumnId, size: number]) => void;
     setFilter: (arg: Filter) => void;
+    setSize: (arg: ColumnWidthConfig) => void;
+    sortBy: (id: ColumnId) => void;
+    swap: (arg: [a: ColumnId, b: ColumnId]) => void;
+    toggleHidden: (id: ColumnId) => void;
 };

packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx

@@ -88,7 +88,9 @@ export function mockWidgetProps(): WidgetProps<GridColumn, ObjectItem> {
             resize: jest.fn(),
             setFilter: jest.fn(),
             sortBy: jest.fn(),
-            swap: jest.fn()
+            swap: jest.fn(),
+            setSize: jest.fn(),
+            createSizeSnapshot: jest.fn()
         },
         valueForSort: () => "dummy",
         selectionStatus: "unknown",