[DataGrid] Refactor useGridColumnReorder

docs/pages/api-docs/data-grid.md

@@ -49,12 +49,13 @@ import { DataGrid } from '@material-ui/data-grid';
 | <span class="prop-name">onCellEnter</span> | <span class="prop-type">(param: GridCellParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse enter event comes from a cell element. |
 | <span class="prop-name">onCellLeave</span> | <span class="prop-type">(param: GridCellParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse leave event comes from a cell element. |
 | <span class="prop-name">onCellModeChange</span> | <span class="prop-type">(params: GridCellModeChangeParams) => void |   | Callback fired when the cell mode changed. |
-| <span class="prop-name">onColumnHeaderClick</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> |   | Callback fired when a click event comes from a column header element. |
-| <span class="prop-name">onColumnHeaderDoubleClick</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> |   | Callback fired when a double click event comes from a column header element. |
-| <span class="prop-name">onColumnHeaderOver</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouseover event comes from a column header element. |
-| <span class="prop-name">onColumnHeaderOut</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouseout event comes from a column header element. |
-| <span class="prop-name">onColumnHeaderEnter</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse enter event comes from a column header element. |
-| <span class="prop-name">onColumnHeaderLeave</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse leave event comes from a column header element. |
+| <span class="prop-name">onColumnHeaderClick</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> |   | Callback fired when a click event comes from a column header element. |
+| <span class="prop-name">onColumnHeaderDoubleClick</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> |   | Callback fired when a double click event comes from a column header element. |
+| <span class="prop-name">onColumnHeaderOver</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouseover event comes from a column header element. |
+| <span class="prop-name">onColumnHeaderOut</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouseout event comes from a column header element. |
+| <span class="prop-name">onColumnHeaderEnter</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse enter event comes from a column header element. |
+| <span class="prop-name">onColumnHeaderLeave</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse leave event comes from a column header element. |
+| <span class="prop-name">onColumnOrderChange</span> | <span class="prop-type">(param: GridColumnOrderChangeParams, event: React.MouseEvent) => void</span> |   | Callback fired when a column is reordered. |
 | <span class="prop-name">onError</span> | <span class="prop-type">(args: any) => void</span> |   | Callback fired when an exception is thrown in the grid, or when the `showError` API method is called. |
 | <span class="prop-name">onEditCellChange</span> | <span class="prop-type">(params: GridEditCellParams) => void</span> |   |  Callback fired when the edit cell value changed. |
 | <span class="prop-name">onEditCellChangeCommitted</span> | <span class="prop-type">(params: GridEditCellParams) => void</span> |   | Callback fired when the cell changes are committed. |

docs/pages/api-docs/x-grid.md

@@ -52,12 +52,13 @@ import { XGrid } from '@material-ui/x-grid';
 | <span class="prop-name">onCellEnter</span> | <span class="prop-type">(param: GridCellParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse enter event comes from a cell element. |
 | <span class="prop-name">onCellLeave</span> | <span class="prop-type">(param: GridCellParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse leave event comes from a cell element. |
 | <span class="prop-name">onCellModeChange</span> | <span class="prop-type">(params: GridCellModeChangeParams) => void |   | Callback fired when the cell mode changed. |
-| <span class="prop-name">onColumnHeaderClick</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> |   | Callback fired when a click event comes from a column header element. |
-| <span class="prop-name">onColumnHeaderDoubleClick</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> |   | Callback fired when a double click event comes from a column header element. |
-| <span class="prop-name">onColumnHeaderOver</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouseover event comes from a column header element. |
-| <span class="prop-name">onColumnHeaderOut</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouseout event comes from a column header element. |
-| <span class="prop-name">onColumnHeaderEnter</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse enter event comes from a column header element. |
-| <span class="prop-name">onColumnHeaderLeave</span> | <span class="prop-type">(param: GridColParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse leave event comes from a column header element. |
+| <span class="prop-name">onColumnHeaderClick</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> |   | Callback fired when a click event comes from a column header element. |
+| <span class="prop-name">onColumnHeaderDoubleClick</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> |   | Callback fired when a double click event comes from a column header element. |
+| <span class="prop-name">onColumnHeaderOver</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouseover event comes from a column header element. |
+| <span class="prop-name">onColumnHeaderOut</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouseout event comes from a column header element. |
+| <span class="prop-name">onColumnHeaderEnter</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse enter event comes from a column header element. |
+| <span class="prop-name">onColumnHeaderLeave</span> | <span class="prop-type">(param: GridColumnHeaderParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse leave event comes from a column header element. |
+| <span class="prop-name">onColumnOrderChange</span> | <span class="prop-type">(param: GridColumnOrderChangeParams, event: React.MouseEvent) => void</span> |   | Callback fired when a column is reordered. |
 | <span class="prop-name">onError</span> | <span class="prop-type">(args: any) => void</span> |   | Callback fired when an exception is thrown in the grid, or when the `showError` API method is called. |
 | <span class="prop-name">onEditCellChange</span> | <span class="prop-type">(params: GridEditCellParams) => void</span> |   |  Callback fired when the edit cell value changed. |
 | <span class="prop-name">onEditCellChangeCommitted</span> | <span class="prop-type">(params: GridEditCellParams) => void</span> |   | Callback fired when the cell changes are committed. |

docs/src/pages/components/data-grid/columns/columns.md

@@ -150,11 +150,11 @@ To disable column reordering, set the prop `disableColumnReorder={true}`.
 
 In addition, column reordering emits the following events that can be imported:
 
-- `COL_REORDER_START`: emitted when dragging of a header cell starts.
-- `COL_REORDER_DRAG_ENTER`: emitted when the cursor enters another header cell while dragging.
-- `COL_REORDER_DRAG_OVER`: emitted when dragging a header cell over another header cell.
-- `COL_REORDER_DRAG_OVER_HEADER`: emitted when dragging a header cell over the `ColumnsHeader` component.
-- `COL_REORDER_STOP`: emitted when dragging of a header cell stops.
+- `GRID_COLUMN_REORDER_START`: emitted when dragging of a header cell starts.
+- `GRID_COLUMN_REORDER_DRAG_ENTER`: emitted when the cursor enters another header cell while dragging.
+- `GRID_COLUMN_REORDER_DRAG_OVER`: emitted when dragging a header cell over another header cell.
+- `GRID_COLUMN_REORDER_DRAG_OVER_HEADER`: emitted when dragging a header cell over the `ColumnsHeader` component.
+- `GRID_COLUMN_REORDER_DRAG_END`: emitted when dragging of a header cell stops.
 
 {{"demo": "pages/components/data-grid/columns/ColumnOrderingGrid.js", "disableAd": true, "bg": "inline"}}
 

docs/src/pages/components/data-grid/rendering/rendering.md

@@ -119,7 +119,7 @@ const columns: GridColDef[] = [
     field: 'date',
     width: 150,
     type: 'date',
-    renderHeader: (params: GridColParams) => (
+    renderHeader: (params: GridColumnHeaderParams) => (
       <strong>
         {'Birthday '}
         <span role="img" aria-label="enjoy">

packages/grid/_modules_/grid/components/GridCheckboxRenderer.tsx

@@ -4,11 +4,11 @@ import { useGridSelector } from '../hooks/features/core/useGridSelector';
 import { visibleSortedGridRowsSelector } from '../hooks/features/filter/gridFilterSelector';
 import { gridRowCountSelector } from '../hooks/features/rows/gridRowsSelector';
 import { selectedGridRowsCountSelector } from '../hooks/features/selection/gridSelectionSelector';
-import { GridColParams } from '../models/params/gridColParams';
+import { GridColumnHeaderParams } from '../models/params/gridColumnHeaderParams';
 import { GridCellParams } from '../models/params/gridCellParams';
 import { GridApiContext } from './GridApiContext';
 
-export const GridHeaderCheckbox: React.FC<GridColParams> = () => {
+export const GridHeaderCheckbox: React.FC<GridColumnHeaderParams> = () => {
   const apiRef = React.useContext(GridApiContext);
   const visibleRows = useGridSelector(apiRef, visibleSortedGridRowsSelector);
 

packages/grid/_modules_/grid/components/GridScrollArea.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
-  GRID_COL_REORDER_START,
-  GRID_COL_REORDER_STOP,
+  GRID_COLUMN_REORDER_START,
+  GRID_COLUMN_REORDER_DRAG_END,
   GRID_ROWS_SCROLL,
 } from '../constants/eventsConstants';
 import { useGridApiEventHandler } from '../hooks/root/useGridApiEventHandler';
@@ -69,8 +69,8 @@ export const GridScrollArea = React.memo(function GridScrollArea(props: ScrollAr
   }, []);
 
   useGridApiEventHandler(api as GridApiRef, GRID_ROWS_SCROLL, handleScrolling);
-  useGridApiEventHandler(api as GridApiRef, GRID_COL_REORDER_START, toggleDragging);
-  useGridApiEventHandler(api as GridApiRef, GRID_COL_REORDER_STOP, toggleDragging);
+  useGridApiEventHandler(api as GridApiRef, GRID_COLUMN_REORDER_START, toggleDragging);
+  useGridApiEventHandler(api as GridApiRef, GRID_COLUMN_REORDER_DRAG_END, toggleDragging);
 
   return dragging ? (
     <div

packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderItem.tsx

@@ -6,6 +6,10 @@ import {
   GRID_COLUMN_HEADER_LEAVE,
   GRID_COLUMN_HEADER_OUT,
   GRID_COLUMN_HEADER_OVER,
+  GRID_COLUMN_REORDER_DRAG_ENTER,
+  GRID_COLUMN_REORDER_DRAG_OVER,
+  GRID_COLUMN_REORDER_START,
+  GRID_COLUMN_REORDER_DRAG_END,
 } from '../../constants/eventsConstants';
 import { GridColDef, GRID_NUMBER_COLUMN_TYPE } from '../../models/colDef/index';
 import { GridOptions } from '../../models/gridOptions';
@@ -64,22 +68,6 @@ export const GridColumnHeaderItem = ({
     });
   }
 
-  const onDragStart = React.useCallback(
-    (event) => apiRef!.current.onColItemDragStart(column, event.currentTarget),
-    [apiRef, column],
-  );
-  const onDragEnter = React.useCallback((event) => apiRef!.current.onColItemDragEnter(event), [
-    apiRef,
-  ]);
-  const onDragOver = React.useCallback(
-    (event) =>
-      apiRef!.current.onColItemDragOver(column, {
-        x: event.clientX,
-        y: event.clientY,
-      }),
-    [apiRef, column],
-  );
-
   const publish = React.useCallback(
     (eventName: string) => (event: React.MouseEvent) =>
       apiRef!.current.publishEvent(
@@ -102,6 +90,16 @@ export const GridColumnHeaderItem = ({
     [publish],
   );
 
+  const draggableEventHandlers = React.useMemo(
+    () => ({
+      onDragStart: publish(GRID_COLUMN_REORDER_START),
+      onDragEnter: publish(GRID_COLUMN_REORDER_DRAG_ENTER),
+      onDragOver: publish(GRID_COLUMN_REORDER_DRAG_OVER),
+      onDragEnd: publish(GRID_COLUMN_REORDER_DRAG_END),
+    }),
+    [publish],
+  );
+
   const cssClasses = classnames(
     GRID_HEADER_CELL_CSS_CLASS,
     column.headerClassName,
@@ -116,12 +114,6 @@ export const GridColumnHeaderItem = ({
     },
   );
 
-  const dragConfig = {
-    draggable: !disableColumnReorder,
-    onDragStart,
-    onDragEnter,
-    onDragOver,
-  };
   const width = column.width!;
 
   let ariaSort: any;
@@ -159,7 +151,11 @@ export const GridColumnHeaderItem = ({
       {...ariaSort}
       {...mouseEventsHandlers}
     >
-      <div className="MuiDataGrid-colCell-draggable" {...dragConfig}>
+      <div
+        className="MuiDataGrid-colCell-draggable"
+        draggable={!disableColumnReorder}
+        {...draggableEventHandlers}
+      >
         {!disableColumnMenu && isColumnNumeric && !column.disableColumnMenu && columnMenuIconButton}
         <div className="MuiDataGrid-colCellTitleContainer">
           {isColumnNumeric && columnTitleIconButtons}

packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaders.tsx

@@ -9,7 +9,9 @@ import { GridEmptyCell } from '../cell/GridEmptyCell';
 import { GridScrollArea } from '../GridScrollArea';
 import { GridColumnHeadersItemCollection } from './GridColumnHeadersItemCollection';
 import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
+import { gridColumnReorderDragColSelector } from '../../hooks/features/columnReorder/columnReorderSelector';
 import { gridContainerSizesSelector } from '../../hooks/root/gridContainerSizesSelector';
+import { GRID_COLUMN_REORDER_DRAG_OVER_HEADER } from '../../constants/eventsConstants';
 
 export const gridScrollbarStateSelector = (state: GridState) => state.scrollBar;
 
@@ -24,6 +26,7 @@ export const GridColumnsHeader = React.forwardRef<HTMLDivElement, {}>(function G
   const headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
   const renderCtx = useGridSelector(apiRef, renderStateSelector).renderContext;
   const { hasScrollX } = useGridSelector(apiRef, gridScrollbarStateSelector);
+  const dragCol = useGridSelector(apiRef, gridColumnReorderDragColSelector);
   const wrapperCssClasses = `MuiDataGrid-colCellWrapper ${hasScrollX ? 'scroll' : ''}`;
 
   const renderedCols = React.useMemo(() => {
@@ -35,7 +38,12 @@ export const GridColumnsHeader = React.forwardRef<HTMLDivElement, {}>(function G
 
   const handleDragOver =
     !disableColumnReorder && apiRef
-      ? (event) => apiRef.current.onColHeaderDragOver(event, ref as React.RefObject<HTMLElement>)
+      ? (event) =>
+          apiRef.current.publishEvent(
+            GRID_COLUMN_REORDER_DRAG_OVER_HEADER,
+            apiRef.current.getColumnHeaderParams(dragCol),
+            event,
+          )
       : undefined;
 
   return (

packages/grid/_modules_/grid/constants/eventsConstants.ts

@@ -57,11 +57,13 @@ export const GRID_ROWS_SCROLL_END = 'scroll:rowEnd';
 export const GRID_COL_RESIZE_START = 'colResizing:start';
 export const GRID_COL_RESIZE_STOP = 'colResizing:stop';
 
-export const GRID_COL_REORDER_START = 'colReordering:dragStart';
-export const GRID_COL_REORDER_DRAG_OVER_HEADER = 'colReordering:dragOverHeader';
-export const GRID_COL_REORDER_DRAG_OVER = 'colReordering:dragOver';
-export const GRID_COL_REORDER_DRAG_ENTER = 'colReordering:dragEnter';
-export const GRID_COL_REORDER_STOP = 'colReordering:dragStop';
+export const GRID_COLUMN_ORDER_CHANGE = 'columnOrderChange';
+
+export const GRID_COLUMN_REORDER_START = 'columnReordering:dragStart';
+export const GRID_COLUMN_REORDER_DRAG_OVER_HEADER = 'columnReordering:dragOverHeader';
+export const GRID_COLUMN_REORDER_DRAG_OVER = 'columnReordering:dragOver';
+export const GRID_COLUMN_REORDER_DRAG_ENTER = 'columnReordering:dragEnter';
+export const GRID_COLUMN_REORDER_DRAG_END = 'columnReordering:dragEnd';
 
 export const GRID_ROWS_UPDATED = 'rowsUpdated';
 export const GRID_ROWS_SET = 'rowsSet';