[data grid] Stop using GridEvents enum in @mui/x-data-grid-pro (#4696)

mui · Apr 29, 2022 · 74e08a2 · 74e08a2
1 parent 992fe74
commit 74e08a2
Show file tree

Hide file tree

Showing 19 changed files with 109 additions and 143 deletions.
diff --git a/packages/grid/x-data-grid-pro/src/components/DataGridProColumnHeaders.tsx b/packages/grid/x-data-grid-pro/src/components/DataGridProColumnHeaders.tsx
@@ -7,7 +7,6 @@ import {
   useGridSelector,
   useGridApiEventHandler,
   gridVisibleColumnFieldsSelector,
-  GridEvents,
   GridColumnHeaderSeparatorSides,
 } from '@mui/x-data-grid';
 import {
@@ -113,11 +112,7 @@ export const DataGridProColumnHeaders = React.forwardRef<
     setScrollbarSize(newScrollbarSize);
   }, [apiRef]);
 
-  useGridApiEventHandler(
-    apiRef,
-    GridEvents.virtualScrollerContentSizeChange,
-    handleContentSizeChange,
-  );
+  useGridApiEventHandler(apiRef, 'virtualScrollerContentSizeChange', handleContentSizeChange);
 
   const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
   const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields);

diff --git a/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx b/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx
@@ -9,7 +9,6 @@ import {
   gridVisibleColumnFieldsSelector,
   gridRowsMetaSelector,
   useGridApiEventHandler,
-  GridEvents,
   GridRowId,
 } from '@mui/x-data-grid';
 import {
@@ -207,9 +206,9 @@ const DataGridProVirtualScroller = React.forwardRef<
     }
   }, [renderContext, updateRenderZonePosition]);
 
-  useGridApiEventHandler(apiRef, GridEvents.columnWidthChange, refreshRenderZonePosition);
-  useGridApiEventHandler(apiRef, GridEvents.columnOrderChange, refreshRenderZonePosition);
-  useGridApiEventHandler(apiRef, GridEvents.rowOrderChange, refreshRenderZonePosition);
+  useGridApiEventHandler(apiRef, 'columnWidthChange', refreshRenderZonePosition);
+  useGridApiEventHandler(apiRef, 'columnOrderChange', refreshRenderZonePosition);
+  useGridApiEventHandler(apiRef, 'rowOrderChange', refreshRenderZonePosition);
 
   const leftRenderContext =
     renderContext && leftPinnedColumns.length > 0

diff --git a/packages/grid/x-data-grid-pro/src/components/GridRowReorderCell.tsx b/packages/grid/x-data-grid-pro/src/components/GridRowReorderCell.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import {
-  GridEvents,
   GridRenderCellParams,
   GridRowEventLookup,
   gridRowTreeDepthSelector,
@@ -80,9 +79,9 @@ const GridRowReorderCell = (params: GridRenderCellParams) => {
   );
 
   const draggableEventHandlers = {
-    onDragStart: publish(GridEvents.rowDragStart),
-    onDragOver: publish(GridEvents.rowDragOver),
-    onDragEnd: publish(GridEvents.rowDragEnd),
+    onDragStart: publish('rowDragStart'),
+    onDragOver: publish('rowDragOver'),
+    onDragEnd: publish('rowDragEnd'),
   };
 
   return (

diff --git a/packages/grid/x-data-grid-pro/src/components/GridTreeDataGroupingCell.tsx b/packages/grid/x-data-grid-pro/src/components/GridTreeDataGroupingCell.tsx
@@ -7,7 +7,6 @@ import {
   useGridSelector,
   gridFilteredDescendantCountLookupSelector,
   getDataGridUtilityClass,
-  GridEvents,
   GridRenderCellParams,
 } from '@mui/x-data-grid';
 import { isNavigationKey } from '@mui/x-data-grid/internals';
@@ -55,7 +54,7 @@ const GridTreeDataGroupingCell = (props: GridTreeDataGroupingCellProps) => {
       event.stopPropagation();
     }
     if (isNavigationKey(event.key) && !event.shiftKey) {
-      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, props, event);
+      apiRef.current.publishEvent('cellNavigationKeyDown', props, event);
     }
   };
 

diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx
@@ -7,7 +7,6 @@ import {
   gridColumnPositionsSelector,
   gridVisibleColumnFieldsSelector,
   gridClasses,
-  GridEvents,
   useGridApiMethod,
   useGridApiEventHandler,
   GridEventListener,
@@ -104,22 +103,22 @@ export const useGridColumnPinning = (
     [apiRef, pinnedColumns.left, pinnedColumns.right, props.disableColumnPinning],
   );
 
-  const handleMouseEnter = React.useCallback<GridEventListener<GridEvents.rowMouseEnter>>(
+  const handleMouseEnter = React.useCallback<GridEventListener<'rowMouseEnter'>>(
     (params, event) => {
       updateHoveredClassOnSiblingRows(event);
     },
     [updateHoveredClassOnSiblingRows],
   );
 
-  const handleMouseLeave = React.useCallback<GridEventListener<GridEvents.rowMouseLeave>>(
+  const handleMouseLeave = React.useCallback<GridEventListener<'rowMouseLeave'>>(
     (params, event) => {
       updateHoveredClassOnSiblingRows(event);
     },
     [updateHoveredClassOnSiblingRows],
   );
 
-  useGridApiEventHandler(apiRef, GridEvents.rowMouseEnter, handleMouseEnter);
-  useGridApiEventHandler(apiRef, GridEvents.rowMouseLeave, handleMouseLeave);
+  useGridApiEventHandler(apiRef, 'rowMouseEnter', handleMouseEnter);
+  useGridApiEventHandler(apiRef, 'rowMouseLeave', handleMouseLeave);
 
   /**
    * PRE-PROCESSING
@@ -249,7 +248,7 @@ export const useGridColumnPinning = (
     propModel: props.pinnedColumns,
     propOnChange: props.onPinnedColumnsChange,
     stateSelector: gridPinnedColumnsSelector,
-    changeEvent: GridEvents.pinnedColumnsChange,
+    changeEvent: 'pinnedColumnsChange',
   });
 
   const checkIfEnabled = React.useCallback(

diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx
@@ -4,7 +4,6 @@ import {
   CursorCoordinates,
   useGridApiEventHandler,
   getDataGridUtilityClass,
-  GridEvents,
   GridEventListener,
   useGridLogger,
 } from '@mui/x-data-grid';
@@ -73,7 +72,7 @@ export const useGridColumnReorder = (
     };
   }, []);
 
-  const handleDragStart = React.useCallback<GridEventListener<GridEvents.columnHeaderDragStart>>(
+  const handleDragStart = React.useCallback<GridEventListener<'columnHeaderDragStart'>>(
     (params, event) => {
       if (props.disableColumnReorder || params.colDef.disableReorder) {
         return;
@@ -103,7 +102,7 @@ export const useGridColumnReorder = (
   );
 
   const handleDragEnter = React.useCallback<
-    GridEventListener<GridEvents.cellDragEnter | GridEvents.columnHeaderDragEnter>
+    GridEventListener<'cellDragEnter' | 'columnHeaderDragEnter'>
   >((params, event) => {
     event.preventDefault();
     // Prevent drag events propagation.
@@ -112,7 +111,7 @@ export const useGridColumnReorder = (
   }, []);
 
   const handleDragOver = React.useCallback<
-    GridEventListener<GridEvents.cellDragOver | GridEvents.columnHeaderDragOver>
+    GridEventListener<'cellDragOver' | 'columnHeaderDragOver'>
   >(
     (params, event) => {
       const dragColField = gridColumnReorderDragColSelector(apiRef);
@@ -174,7 +173,7 @@ export const useGridColumnReorder = (
     [apiRef, logger],
   );
 
-  const handleDragEnd = React.useCallback<GridEventListener<GridEvents.columnHeaderDragEnd>>(
+  const handleDragEnd = React.useCallback<GridEventListener<'columnHeaderDragEnd'>>(
     (params, event): void => {
       const dragColField = gridColumnReorderDragColSelector(apiRef);
       if (props.disableColumnReorder || !dragColField) {
@@ -206,10 +205,10 @@ export const useGridColumnReorder = (
     [props.disableColumnReorder, logger, apiRef],
   );
 
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, handleDragStart);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnter, handleDragEnter);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragOver, handleDragOver);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnd, handleDragEnd);
-  useGridApiEventHandler(apiRef, GridEvents.cellDragEnter, handleDragEnter);
-  useGridApiEventHandler(apiRef, GridEvents.cellDragOver, handleDragOver);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleDragStart);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragEnter', handleDragEnter);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragOver', handleDragOver);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', handleDragEnd);
+  useGridApiEventHandler(apiRef, 'cellDragEnter', handleDragEnter);
+  useGridApiEventHandler(apiRef, 'cellDragOver', handleDragOver);
 };
diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { ownerDocument, useEventCallback } from '@mui/material/utils';
 import {
-  GridEvents,
   GridEventListener,
   gridClasses,
   CursorCoordinates,
@@ -170,10 +169,10 @@ export const useGridColumnResize = (
 
     clearTimeout(stopResizeEventTimeout.current);
     stopResizeEventTimeout.current = setTimeout(() => {
-      apiRef.current.publishEvent(GridEvents.columnResizeStop, null, nativeEvent);
+      apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
       if (colDefRef.current) {
         apiRef.current.publishEvent(
-          GridEvents.columnWidthChange,
+          'columnWidthChange',
           {
             element: colElementRef.current,
             colDef: colDefRef.current,
@@ -211,10 +210,10 @@ export const useGridColumnResize = (
       colDef: colDefRef.current!,
       width: newWidth,
     };
-    apiRef.current.publishEvent(GridEvents.columnResize, params, nativeEvent);
+    apiRef.current.publishEvent('columnResize', params, nativeEvent);
   });
 
-  const handleColumnResizeMouseDown: GridEventListener<GridEvents.columnSeparatorMouseDown> =
+  const handleColumnResizeMouseDown: GridEventListener<'columnSeparatorMouseDown'> =
     useEventCallback(({ colDef }, event) => {
       // Only handle left clicks
       if (event.button !== 0) {
@@ -230,7 +229,7 @@ export const useGridColumnResize = (
       event.preventDefault();
 
       logger.debug(`Start Resize on col ${colDef.field}`);
-      apiRef.current.publishEvent(GridEvents.columnResizeStart, { field: colDef.field }, event);
+      apiRef.current.publishEvent('columnResizeStart', { field: colDef.field }, event);
 
       colDefRef.current = colDef as GridStateColDef;
       colElementRef.current =
@@ -272,7 +271,7 @@ export const useGridColumnResize = (
 
     clearTimeout(stopResizeEventTimeout.current);
     stopResizeEventTimeout.current = setTimeout(() => {
-      apiRef.current.publishEvent(GridEvents.columnResizeStop, null, nativeEvent);
+      apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
     });
 
     logger.debug(
@@ -307,7 +306,7 @@ export const useGridColumnResize = (
       colDef: colDefRef.current!,
       width: newWidth,
     };
-    apiRef.current.publishEvent(GridEvents.columnResize, params, nativeEvent);
+    apiRef.current.publishEvent('columnResize', params, nativeEvent);
   });
 
   const handleTouchStart = useEventCallback((event: any) => {
@@ -338,7 +337,7 @@ export const useGridColumnResize = (
     const colDef = apiRef.current.getColumn(field);
 
     logger.debug(`Start Resize on col ${colDef.field}`);
-    apiRef.current.publishEvent(GridEvents.columnResizeStart, { field }, event);
+    apiRef.current.publishEvent('columnResizeStart', { field }, event);
 
     colDefRef.current = colDef as GridStateColDef;
     colElementRef.current = findHeaderElementFromField(
@@ -369,7 +368,7 @@ export const useGridColumnResize = (
     doc.removeEventListener('touchend', handleTouchEnd);
   }, [apiRef, handleResizeMouseMove, handleResizeMouseUp, handleTouchMove, handleTouchEnd]);
 
-  const handleResizeStart = React.useCallback<GridEventListener<GridEvents.columnResizeStart>>(
+  const handleResizeStart = React.useCallback<GridEventListener<'columnResizeStart'>>(
     ({ field }) => {
       apiRef.current.setState((state) => ({
         ...state,
@@ -380,7 +379,7 @@ export const useGridColumnResize = (
     [apiRef],
   );
 
-  const handleResizeStop = React.useCallback<GridEventListener<GridEvents.columnResizeStop>>(() => {
+  const handleResizeStop = React.useCallback<GridEventListener<'columnResizeStop'>>(() => {
     apiRef.current.setState((state) => ({
       ...state,
       columnResize: { ...state.columnResize, resizingColumnField: '' },
@@ -403,10 +402,10 @@ export const useGridColumnResize = (
     { passive: doesSupportTouchActionNone() },
   );
 
-  useGridApiEventHandler(apiRef, GridEvents.columnSeparatorMouseDown, handleColumnResizeMouseDown);
-  useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, handleResizeStart);
-  useGridApiEventHandler(apiRef, GridEvents.columnResizeStop, handleResizeStop);
+  useGridApiEventHandler(apiRef, 'columnSeparatorMouseDown', handleColumnResizeMouseDown);
+  useGridApiEventHandler(apiRef, 'columnResizeStart', handleResizeStart);
+  useGridApiEventHandler(apiRef, 'columnResizeStop', handleResizeStop);
 
-  useGridApiOptionHandler(apiRef, GridEvents.columnResize, props.onColumnResize);
-  useGridApiOptionHandler(apiRef, GridEvents.columnWidthChange, props.onColumnWidthChange);
+  useGridApiOptionHandler(apiRef, 'columnResize', props.onColumnResize);
+  useGridApiOptionHandler(apiRef, 'columnWidthChange', props.onColumnWidthChange);
 };
diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts b/packages/grid/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  GridEvents,
   GridEventListener,
   GridRowId,
   useGridSelector,
@@ -51,7 +50,7 @@ export const useGridDetailPanel = (
   const expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
   const contentCache = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
 
-  const handleCellClick = React.useCallback<GridEventListener<GridEvents.cellClick>>(
+  const handleCellClick = React.useCallback<GridEventListener<'cellClick'>>(
     (params: GridCellParams, event: React.MouseEvent) => {
       if (params.field !== GRID_DETAIL_PANEL_TOGGLE_FIELD || props.getDetailPanelContent == null) {
         return;
@@ -72,7 +71,7 @@ export const useGridDetailPanel = (
     [apiRef, contentCache, props.getDetailPanelContent],
   );
 
-  const handleCellKeyDown = React.useCallback<GridEventListener<GridEvents.cellKeyDown>>(
+  const handleCellKeyDown = React.useCallback<GridEventListener<'cellKeyDown'>>(
     (params, event) => {
       if (props.getDetailPanelContent == null) {
         return;
@@ -91,8 +90,8 @@ export const useGridDetailPanel = (
     [apiRef, props.getDetailPanelContent],
   );
 
-  useGridApiEventHandler(apiRef, GridEvents.cellClick, handleCellClick);
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+  useGridApiEventHandler(apiRef, 'cellClick', handleCellClick);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
 
   const addDetailHeight = React.useCallback<GridPipeProcessor<'rowHeight'>>(
     (initialValue, row) => {
@@ -115,7 +114,7 @@ export const useGridDetailPanel = (
     propModel: props.detailPanelExpandedRowIds,
     propOnChange: props.onDetailPanelExpandedRowIdsChange,
     stateSelector: gridDetailPanelExpandedRowIdsSelector,
-    changeEvent: GridEvents.detailPanelsExpandedRowIdsChange,
+    changeEvent: 'detailPanelsExpandedRowIdsChange',
   });
 
   const toggleDetailPanel = React.useCallback<GridDetailPanelApi['toggleDetailPanel']>(

diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanelCache.ts b/packages/grid/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanelCache.ts
@@ -1,10 +1,5 @@
 import * as React from 'react';
-import {
-  useGridApiEventHandler,
-  gridRowIdsSelector,
-  GridEvents,
-  GridRowId,
-} from '@mui/x-data-grid';
+import { useGridApiEventHandler, gridRowIdsSelector, GridRowId } from '@mui/x-data-grid';
 import { GridApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 
@@ -61,7 +56,7 @@ export const useGridDetailPanelCache = (
     apiRef.current.forceUpdate();
   }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
 
-  useGridApiEventHandler(apiRef, GridEvents.sortedRowsSet, updateCaches);
+  useGridApiEventHandler(apiRef, 'sortedRowsSet', updateCaches);
 
   const isFirstRender = React.useRef(true);
   if (isFirstRender.current) {

diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts b/packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   useGridSelector,
-  GridEvents,
   GridEventListener,
   GridScrollParams,
   useGridApiEventHandler,
@@ -56,20 +55,20 @@ export const useGridInfiniteLoader = (
           viewportPageSize,
           virtualRowsCount: currentPage.rows.length,
         };
-        apiRef.current.publishEvent(GridEvents.rowsScrollEnd, rowScrollEndParam);
+        apiRef.current.publishEvent('rowsScrollEnd', rowScrollEndParam);
         isInScrollBottomArea.current = true;
       }
     },
     [contentHeight, props.scrollEndThreshold, visibleColumns, apiRef, currentPage.rows.length],
   );
 
-  const handleGridScroll = React.useCallback<GridEventListener<GridEvents.rowsScroll>>(
+  const handleGridScroll = React.useCallback<GridEventListener<'rowsScroll'>>(
     ({ left, top }) => {
       handleRowsScrollEnd({ left, top });
     },
     [handleRowsScrollEnd],
   );
 
-  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, handleGridScroll);
-  useGridApiOptionHandler(apiRef, GridEvents.rowsScrollEnd, props.onRowsScrollEnd);
+  useGridApiEventHandler(apiRef, 'rowsScroll', handleGridScroll);
+  useGridApiOptionHandler(apiRef, 'rowsScrollEnd', props.onRowsScrollEnd);
 };