refactor: rewrite columnreszier to use injection hooks

Author: yordan-st

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

@@ -1,47 +1,41 @@
 import { useEventCallback } from "@mendix/widget-plugin-hooks/useEventCallback";
 import { MouseEvent, ReactElement, TouchEvent, useCallback, useEffect, useRef, useState } from "react";
+import { useColumn, useColumnsStore } from "../model/hooks/injection-hooks";
 
 export interface ColumnResizerProps {
     minWidth?: number;
-    setColumnWidth: (width: number) => void;
-    onResizeEnds?: () => void;
-    onResizeStart?: () => void;
 }
 
-export function ColumnResizer({
-    minWidth = 50,
-    setColumnWidth,
-    onResizeEnds,
-    onResizeStart
-}: ColumnResizerProps): ReactElement {
+export function ColumnResizer({ minWidth = 50 }: ColumnResizerProps): ReactElement {
+    const column = useColumn();
+    const columnsStore = useColumnsStore();
     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.offsetWidth);
+                const columnElement = resizerReference.current.parentElement!;
+                setCurrentWidth(columnElement.offsetWidth);
             }
-            onStart();
+            columnsStore.setIsResizing(true);
         },
-        [onStart]
+        [columnsStore]
     );
     const onEndDrag = useCallback((): void => {
         if (!isResizing) {
             return;
         }
         setIsResizing(false);
         setCurrentWidth(0);
-        onResizeEnds?.();
-    }, [onResizeEnds, isResizing]);
-    const setColumnWidthStable = useEventCallback(setColumnWidth);
+        columnsStore.setIsResizing(false);
+    }, [columnsStore, isResizing]);
+    const setColumnWidthStable = useEventCallback((width: number) => column.setSize(width));
     const onMouseMove = useCallback(
         (e: TouchEvent & MouseEvent & Event): void => {
             if (!isResizing) {

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

@@ -22,15 +22,7 @@ export function GridHeader(): ReactElement {
                 <CheckboxColumnHeader key="headers_column_select_all" />
                 {columns.map(column => (
                     <ColumnProvider column={column} key={`${column.columnId}`}>
-                        <ColumnContainer
-                            resizer={
-                                <ColumnResizer
-                                    onResizeStart={() => columnsStore.setIsResizing(true)}
-                                    onResizeEnds={() => columnsStore.setIsResizing(false)}
-                                    setColumnWidth={(width: number) => column.setSize(width)}
-                                />
-                            }
-                        />
+                        <ColumnContainer resizer={<ColumnResizer />} />
                     </ColumnProvider>
                 ))}
                 {columnsHidable && (