[DateGrid] Rename events and add onHover event

packages/grid/data-grid/package.json

@@ -13,16 +13,19 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "tslib": "^2.0.0"
+  },
   "devDependencies": {
     "@material-ui/x-grid-modules": "^0.1.62",
+    "@rollup/plugin-node-resolve": "^8.0.1",
     "rollup": "^2.6.1",
     "rollup-plugin-cleaner": "^1.0.0",
     "rollup-plugin-command": "^1.1.3",
     "rollup-plugin-dts": "^1.4.7",
     "rollup-plugin-sourcemaps": "^0.6.2",
     "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-typescript2": "^0.27.1",
-    "tslib": "^2.0.0"
+    "rollup-plugin-typescript2": "^0.27.1"
   },
   "peerDependencies": {
     "@material-ui/core": "^4.9.12",

packages/grid/data-grid/rollup.config.js

@@ -34,7 +34,7 @@ export default [
         cleaner({
           targets: ['./dist/'],
         }),
-      typescript(),
+      typescript({ build: true }),
       !production && sourceMaps(),
       production && terser(),
     ],

packages/grid/data-grid/src/index.ts

@@ -1,5 +1,2 @@
-import { DataGrid } from './data-grid';
-
 export * from '@material-ui/x-grid-modules';
 export * from './data-grid';
-export const Grid = DataGrid;

packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Checkbox from '@material-ui/core/Checkbox';
 import styled from 'styled-components';
-import { SelectionChangedParams } from '../models/params/selectionChangedParams';
+import { SelectionChangeParams } from '../models/params/selectionChangeParams';
 import { ColParams } from '../models/params/colParams';
 import { CellParams } from '../models/params/cellParams';
 
@@ -17,8 +17,8 @@ export const HeaderCheckbox: React.FC<ColParams> = React.memo(({ api }) => {
     setChecked(checked);
     api.selectRows(api.getAllRowIds(), checked);
   };
-  const selectionChanged = React.useCallback(
-    (event: SelectionChangedParams) => {
+  const selectionChange = React.useCallback(
+    (event: SelectionChangeParams) => {
       const isAllSelected =
         api.getAllRowIds().length === event.rows.length && event.rows.length > 0;
       const hasNoneSelected = event.rows.length === 0;
@@ -29,8 +29,8 @@ export const HeaderCheckbox: React.FC<ColParams> = React.memo(({ api }) => {
   );
 
   React.useEffect(() => {
-    return api.onSelectionChanged(selectionChanged);
-  }, [api, selectionChanged]);
+    return api.onSelectionChange(selectionChange);
+  }, [api, selectionChange]);
   return (
     <CheckboxInputContainer>
       <Checkbox

packages/grid/x-grid-modules/src/components/column-header-item.tsx

@@ -27,7 +27,12 @@ export const ColumnHeaderItem = React.memo(
 
     let headerComponent: React.ReactElement | null = null;
     if (column.renderHeader) {
-      headerComponent = column.renderHeader({ api: api!.current!, colDef: column, colIndex });
+      headerComponent = column.renderHeader({
+        api: api!.current!,
+        colDef: column,
+        colIndex,
+        field: column.field,
+      });
     }
 
     const onResize = onResizeColumn ? () => onResizeColumn(column) : undefined;

packages/grid/x-grid-modules/src/components/default-footer.tsx

@@ -18,7 +18,7 @@ export const DefaultFooter = React.forwardRef<HTMLDivElement, DefaultFooterProps
 
     React.useEffect(() => {
       if (api && api.current) {
-        return api.current!.onSelectionChanged(({ rows }) => setSelectedCount(rows.length));
+        return api.current!.onSelectionChange(({ rows }) => setSelectedCount(rows.length));
       }
 
       return undefined;

packages/grid/x-grid-modules/src/components/row-cells.tsx

@@ -1,37 +1,9 @@
 import * as React from 'react';
-import {
-  CellClassParams,
-  CellValue,
-  ColDef,
-  CellParams,
-  Columns,
-  GridApi,
-  RowModel,
-  ValueFormatterParams,
-  ValueGetterParams,
-  CellClassRules,
-} from '../models';
+import { CellClassParams, Columns, RowModel, CellClassRules, CellParams } from '../models';
 import { Cell, GridCellProps } from './cell';
 import { ApiContext } from './api-context';
 import { classnames, isFunction } from '../utils';
-
-function getCellParams(
-  rowModel: RowModel,
-  col: ColDef,
-  rowIndex: number,
-  value: CellValue,
-  api: GridApi,
-): CellParams {
-  return {
-    value,
-    getValue: (field: string) => rowModel.data[field],
-    data: rowModel.data,
-    rowModel,
-    colDef: col,
-    rowIndex,
-    api,
-  };
-}
+import { buildCellParams } from '../utils/paramsUtils';
 
 function applyCssClassRules(cellClassRules: CellClassRules, params: CellClassParams) {
   return Object.entries(cellClassRules).reduce((appliedCss, entry) => {
@@ -77,44 +49,41 @@ export const RowCells: React.FC<RowCellsProps> = React.memo((props) => {
       : !removeLastBorderRight && !props.extendRowFullWidth;
 
     let value = row.data[column.field!];
+    const cellParams: CellParams = buildCellParams({
+      rowModel: row,
+      colDef: column,
+      rowIndex,
+      value,
+      api: api!.current!,
+    });
+
     if (column.valueGetter) {
-      const params: ValueGetterParams = getCellParams(row, column, rowIndex, value, api!.current!);
       // Value getter override the original value
-      value = column.valueGetter(params);
+      value = column.valueGetter(cellParams);
     }
 
     let formattedValueProp = {};
     if (column.valueFormatter) {
-      const params: ValueFormatterParams = getCellParams(
-        row,
-        column,
-        rowIndex,
-        value,
-        api!.current!,
-      );
-      formattedValueProp = { formattedValue: column.valueFormatter(params) };
+      formattedValueProp = { formattedValue: column.valueFormatter(cellParams) };
     }
 
     let cssClassProp = { cssClass: '' };
     if (column.cellClassName) {
       if (!isFunction(column.cellClassName)) {
         cssClassProp = { cssClass: classnames(column.cellClassName) };
       } else {
-        const params: CellClassParams = getCellParams(row, column, rowIndex, value, api!.current!);
-        cssClassProp = { cssClass: column.cellClassName(params) as string };
+        cssClassProp = { cssClass: column.cellClassName(cellParams) as string };
       }
     }
 
     if (column.cellClassRules) {
-      const params: CellClassParams = getCellParams(row, column, rowIndex, value, api!.current!);
-      const cssClass = applyCssClassRules(column.cellClassRules, params);
+      const cssClass = applyCssClassRules(column.cellClassRules, cellParams);
       cssClassProp = { cssClass: `${cssClassProp.cssClass} ${cssClass}` };
     }
 
     let cellComponent: React.ReactElement | null = null;
     if (column.renderCell) {
-      const params: CellParams = getCellParams(row, column, rowIndex, value, api!.current!);
-      cellComponent = column.renderCell(params);
+      cellComponent = column.renderCell(cellParams);
       cssClassProp = { cssClass: `${cssClassProp.cssClass} with-renderer` };
     }
 

packages/grid/x-grid-modules/src/constants/eventsConstants.ts

@@ -1,16 +1,20 @@
 export const RESIZE = 'resize';
 export const UNMOUNT = 'unmount';
 export const CLICK_EVENT = 'click';
+export const HOVER_EVENT = 'mouseover';
 export const KEYDOWN_EVENT = 'keydown';
 export const KEYUP_EVENT = 'keyup';
 
-export const CELL_CLICKED = 'cellClicked';
-export const ROW_CLICKED = 'rowClicked';
+export const CELL_CLICK = 'cellClick';
+export const CELL_HOVER = 'cellHover';
+export const ROW_CLICK = 'rowClick';
+export const ROW_HOVER = 'rowHover';
 export const ROW_SELECTED_EVENT = 'rowSelected';
-export const SELECTION_CHANGED_EVENT = 'selectionChanged';
-export const COLUMN_HEADER_CLICKED = 'columnClicked';
-export const PAGE_CHANGED_EVENT = 'pageChanged';
-export const PAGESIZE_CHANGED_EVENT = 'pageSizeChanged';
+export const SELECTION_CHANGED_EVENT = 'selectionChange';
+export const COLUMN_HEADER_CLICK = 'columnClick';
+export const COLUMN_HEADER_HOVER = 'columnHeaderHover';
+export const PAGE_CHANGED_EVENT = 'pageChange';
+export const PAGESIZE_CHANGED_EVENT = 'pageSizeChange';
 
 export const SCROLLING_START = 'scrolling:start';
 export const SCROLLING = 'scrolling';
@@ -24,4 +28,4 @@ export const COLUMNS_UPDATED = 'columnsUpdated';
 export const SORT_MODEL_UPDATED = 'sortModelUpdated';
 export const POST_SORT = 'postSort'; // ag-grid compatible
 export const COLUMNS_SORTED = 'columnsSorted';
-export const MULTIPLE_KEY_PRESS_CHANGED = 'multipleKeyPressChanged';
+export const MULTIPLE_KEY_PRESS_CHANGED = 'multipleKeyPressChange';

packages/grid/x-grid-modules/src/hooks/features/usePagination.ts

@@ -7,7 +7,7 @@ import {
 } from '../../constants/eventsConstants';
 import { useApiMethod } from '../root/useApiMethod';
 import { useApiEventHandler } from '../root/useApiEventHandler';
-import { PageChangedParams } from '../../models/params/pageChangedParams';
+import { PageChangeParams } from '../../models/params/pageChangeParams';
 import { Rows } from '../../models/rows';
 import { InternalColumns } from '../../models/colDef/colDef';
 import { GridOptions } from '../../models/gridOptions';
@@ -23,7 +23,7 @@ export interface PaginationProps {
   setPage: (page: number) => void;
   setPageSize: (pageSize: number) => void;
 }
-export type PaginationState = PageChangedParams;
+export type PaginationState = PageChangeParams;
 const UPDATE_STATE_ACTION = 'updateState';
 
 function updateStateAction(
@@ -84,7 +84,7 @@ export const usePagination = (
           stateRef.current.paginationMode === FeatureMode.client ? page : 1,
         );
 
-        const params: PageChangedParams = {
+        const params: PageChangeParams = {
           ...stateRef.current,
           page,
         };
@@ -111,30 +111,30 @@ export const usePagination = (
       newPage = newPage > newPageCount ? newPageCount : newPage;
       newPage = newPage < 1 ? 1 : newPage;
       logger.info(
-        `PageSize changed to ${pageSize}, setting page to ${newPage}, total page count is ${newPageCount}`,
+        `PageSize change to ${pageSize}, setting page to ${newPage}, total page count is ${newPageCount}`,
       );
       const newState: PaginationState = {
         ...stateRef.current,
         page: newPage,
         pageCount: newPageCount,
         pageSize,
       };
-      apiRef.current!.emit(PAGESIZE_CHANGED_EVENT, newState as PageChangedParams);
+      apiRef.current!.emit(PAGESIZE_CHANGED_EVENT, newState as PageChangeParams);
 
       updateState(newState);
       setPage(newPage);
     },
     [stateRef, apiRef, setPage, updateState, logger],
   );
 
-  const onPageChanged = React.useCallback(
-    (handler: (param: PageChangedParams) => void): (() => void) => {
+  const onPageChange = React.useCallback(
+    (handler: (param: PageChangeParams) => void): (() => void) => {
       return apiRef!.current!.registerEvent(PAGE_CHANGED_EVENT, handler);
     },
     [apiRef],
   );
-  const onPageSizeChanged = React.useCallback(
-    (handler: (param: PageChangedParams) => void): (() => void) => {
+  const onPageSizeChange = React.useCallback(
+    (handler: (param: PageChangeParams) => void): (() => void) => {
       return apiRef!.current!.registerEvent(PAGESIZE_CHANGED_EVENT, handler);
     },
     [apiRef],
@@ -174,24 +174,15 @@ export const usePagination = (
   React.useEffect(() => {
     const rowCount = options.rowCount == null ? rows.length : options.rowCount;
     if (rowCount !== state.rowCount) {
-      logger.info(`Options or rows changed, recalculating pageCount and rowCount`);
+      logger.info(`Options or rows change, recalculating pageCount and rowCount`);
       const newPageCount = getPageCount(state.pageSize, rowCount);
 
-      updateState({ pageCount: newPageCount, rowCount });
+      updateState({ pageCount: newPageCount, rowCount: rows.length });
       if (state.page > newPageCount) {
         setPage(newPageCount);
       }
     }
-  }, [
-    rows.length,
-    options.rowCount,
-    logger,
-    updateState,
-    state.rowCount,
-    state.pageSize,
-    setPage,
-    state.page,
-  ]);
+  }, [rows.length, logger, updateState, state.rowCount, state.pageSize, setPage, state.page]);
 
   React.useEffect(() => {
     if (
@@ -209,8 +200,8 @@ export const usePagination = (
     }
   }, [options.autoPageSize, resetAutopageSize, columns.visible.length]);
 
-  useApiEventHandler(apiRef, PAGE_CHANGED_EVENT, options.onPageChanged);
-  useApiEventHandler(apiRef, PAGESIZE_CHANGED_EVENT, options.onPageSizeChanged);
+  useApiEventHandler(apiRef, PAGE_CHANGED_EVENT, options.onPageChange);
+  useApiEventHandler(apiRef, PAGESIZE_CHANGED_EVENT, options.onPageSizeChange);
 
   const onResize = React.useCallback(() => {
     if (options.autoPageSize) {
@@ -223,8 +214,8 @@ export const usePagination = (
   const paginationApi: PaginationApi = {
     setPageSize,
     setPage,
-    onPageChanged,
-    onPageSizeChanged,
+    onPageChange,
+    onPageSizeChange,
   };
 
   useApiMethod(apiRef, paginationApi, 'paginationApi');