Remove legacy grouping props (#2012)

* Remove legacy grouping props

* Implement multi level grouping

* Update changelog

* Simplify grouping

* Simplify expandedGroups state

CHANGELOG.md

@@ -40,6 +40,9 @@
     - ⚠️ `onHeaderDrop`
     - ⚠️ `draggableHeaderCell`
       - Check [#2007](https://github.com/adazzle/react-data-grid/pull/2007) on how to migrate
+    - ⚠️ `rowGroupRenderer`
+    - ⚠️ `onRowExpandToggle`
+      - Check [#2012](https://github.com/adazzle/react-data-grid/pull/2012) on how to migrate
     - ⚠️ `rowsContainer`
     - ⚠️ Subrow props: `getSubRowDetails`, `onCellExpand`, `onDeleteSubRow`, and `onAddSubRow`
       - Check [#1853](https://github.com/adazzle/react-data-grid/pull/1853) on how to migrate

package.json

@@ -51,6 +51,7 @@
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/faker": "^4.1.11",
     "@types/jest": "^25.2.1",
+    "@types/lodash": "^4.14.150",
     "@types/node": "~13.11.1",
     "@types/react": "^16.9.32",
     "@types/react-dom": "^16.9.6",
@@ -74,6 +75,7 @@
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "less": "^3.11.1",
     "less-loader": "^5.0.0",
+    "lodash": "^4.17.15",
     "mini-css-extract-plugin": "^0.9.0",
     "react": "^16.13.1",
     "react-contextmenu": "^2.13.0",

src/DataGrid.tsx

@@ -14,7 +14,7 @@ import EventBus from './EventBus';
 import InteractionMasks from './masks/InteractionMasks';
 import HeaderRow from './HeaderRow';
 import FilterRow from './FilterRow';
-import RowRenderer from './RowRenderer';
+import Row from './Row';
 import SummaryRow from './SummaryRow';
 import { ValueFormatter } from './formatters';
 import {
@@ -34,7 +34,6 @@ import {
   Filters,
   FormatterProps,
   Position,
-  RowExpandToggleEvent,
   RowRendererProps,
   RowsUpdateEvent,
   SelectRowEvent
@@ -109,7 +108,6 @@ export interface DataGridProps<R, K extends keyof R, SR = unknown> {
    */
   defaultFormatter?: React.ComponentType<FormatterProps<R, SR>>;
   rowRenderer?: React.ComponentType<RowRendererProps<R, SR>>;
-  rowGroupRenderer?: React.ComponentType;
   emptyRowsRenderer?: React.ComponentType<{}>;
 
   /**
@@ -121,7 +119,6 @@ export interface DataGridProps<R, K extends keyof R, SR = unknown> {
   onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
   /** Called when a column is resized */
   onColumnResize?: (idx: number, width: number) => void;
-  onRowExpandToggle?: (event: RowExpandToggleEvent) => void;
   /** Function called whenever selected cell is changed */
   onSelectedCellChange?: (position: Position) => void;
   /** called before cell is set active, returns a boolean to determine whether cell is editable */
@@ -176,14 +173,12 @@ function DataGrid<R, K extends keyof R, SR>({
   onFiltersChange,
   // Custom renderers
   defaultFormatter = ValueFormatter,
-  rowRenderer,
-  rowGroupRenderer,
+  rowRenderer: RowRenderer = Row,
   emptyRowsRenderer,
   // Event props
   onRowClick,
   onScroll,
   onColumnResize,
-  onRowExpandToggle,
   onSelectedCellChange,
   onCheckCellIsEditable,
   // Toggles and modes
@@ -390,18 +385,15 @@ function DataGrid<R, K extends keyof R, SR>({
       }
 
       rowElements.push(
-        <RowRenderer<R, SR>
+        <RowRenderer
           key={key}
           rowIdx={rowIdx}
           row={row}
           viewportColumns={viewportColumns}
           lastFrozenColumnIndex={lastFrozenColumnIndex}
           eventBus={eventBus}
-          rowGroupRenderer={rowGroupRenderer}
-          rowRenderer={rowRenderer}
           isRowSelected={isRowSelected}
           onRowClick={onRowClick}
-          onRowExpandToggle={onRowExpandToggle}
         />
       );
     }

src/Row.tsx

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
-import React from 'react';
+import React, { memo } from 'react';
 
 import Cell from './Cell';
 import { RowRendererProps } from './common/types';
 import { preventDefault, wrapEvent } from './utils';
 
-export default function Row<R, SR = unknown>({
+function Row<R, SR = unknown>({
   cellRenderer: CellRenderer = Cell,
   className,
   eventBus,
@@ -64,3 +64,5 @@ export default function Row<R, SR = unknown>({
     </div>
   );
 }
+
+export default memo(Row) as <R, SR>(props: RowRendererProps<R, SR>) => JSX.Element;

src/common/enums.ts

@@ -4,10 +4,6 @@ export enum CellNavigationMode {
   LOOP_OVER_ROW = 'loopOverRow'
 }
 
-export enum DragItemTypes {
-  Column = 'column'
-}
-
 export enum UpdateActions {
   CELL_UPDATE = 'CELL_UPDATE',
   COLUMN_FILL = 'COLUMN_FILL',

src/common/types.ts

@@ -51,11 +51,6 @@ export interface CalculatedColumn<TRow, TSummaryRow = unknown> extends Column<TR
   formatter: React.ComponentType<FormatterProps<TRow, TSummaryRow>>;
 }
 
-export interface RowData {
-  name?: string;
-  __metaData?: RowGroupMetaData;
-}
-
 export interface Position {
   idx: number;
   rowIdx: number;
@@ -135,15 +130,6 @@ export interface FilterRendererProps<TRow, TFilterValue = unknown, TSummaryRow =
   onChange: (value: TFilterValue) => void;
 }
 
-export interface RowGroupMetaData {
-  isGroup: boolean;
-  treeDepth: number;
-  isExpanded: boolean;
-  columnGroupName: string;
-  columnGroupDisplayName: string;
-  getRowRenderer?: (props: unknown, rowIdx: number) => React.ReactElement;
-}
-
 export type Filters = Record<string, any>;
 
 export interface CommitEvent<TUpdatedValue = never> {
@@ -152,13 +138,6 @@ export interface CommitEvent<TUpdatedValue = never> {
   updated: TUpdatedValue;
 }
 
-export interface RowExpandToggleEvent {
-  rowIdx: number;
-  shouldExpand: boolean;
-  columnGroupName: string;
-  name: string;
-}
-
 export interface RowsUpdateEvent<TUpdatedValue = never> {
   cellKey: string;
   fromRow: number;

stories/demos/LegacyGrouping.less

@@ -0,0 +1,15 @@
+.rdg-row-expand-icon {
+  cursor: pointer;
+
+  &:hover {
+    color: #777;
+  }
+}
+
+.rdg-row-default-group {
+  width: var(--row-width);
+  height: var(--row-height);
+  line-height: var(--row-height);
+  padding: 0 8px;
+  border-bottom: 1px solid #ddd;
+}