Remove column events (adazzle#1879)

* Remove column events

* Cleanup SelectRowEvent

* Remove usused rowKey

Author: amanmahajan7

src/Canvas.tsx

@@ -159,11 +159,12 @@ function Canvas<R, K extends keyof R>({
   useEffect(() => {
     if (!onSelectedRowsChange) return;
 
-    const handleRowSelectionChange = ({ rowIdx, row, checked, isShiftClick }: SelectRowEvent<R>) => {
+    const handleRowSelectionChange = ({ rowIdx, checked, isShiftClick }: SelectRowEvent) => {
       const newSelectedRows = new Set(selectedRows);
+      const rowId = rowGetter(rowIdx)[rowKey];
 
       if (checked) {
-        newSelectedRows.add(row[rowKey]);
+        newSelectedRows.add(rowId);
         const previousRowIdx = lastSelectedRowIdx.current;
         lastSelectedRowIdx.current = rowIdx;
         if (isShiftClick && previousRowIdx !== -1 && previousRowIdx !== rowIdx) {
@@ -173,7 +174,7 @@ function Canvas<R, K extends keyof R>({
           }
         }
       } else {
-        newSelectedRows.delete(row[rowKey]);
+        newSelectedRows.delete(rowId);
         lastSelectedRowIdx.current = -1;
       }
 

src/Cell.test.tsx

@@ -25,7 +25,6 @@ const testProps: CellProps<Row> = {
   isRowSelected: false,
   scrollLeft: 0,
   isSummaryRow: false,
-  rowKey: 'id',
   eventBus: new EventBus()
 };
 
@@ -72,7 +71,6 @@ describe('Cell', () => {
       isRowSelected: false,
       scrollLeft: 0,
       isSummaryRow: false,
-      rowKey: 'id',
       eventBus: new EventBus()
     };
 

src/Cell.tsx

@@ -1,7 +1,7 @@
 import React, { memo, createElement } from 'react';
 import classNames from 'classnames';
 
-import { CellRendererProps, ColumnEventInfo } from './common/types';
+import { CellRendererProps } from './common/types';
 import { EventTypes } from './common/enums';
 
 export interface CellProps<R> extends CellRendererProps<R> {
@@ -11,7 +11,6 @@ export interface CellProps<R> extends CellRendererProps<R> {
 }
 
 function Cell<R>({
-  rowKey,
   children,
   className,
   column,
@@ -57,63 +56,16 @@ function Cell<R>({
 
   function handleCellDoubleClick(e: React.MouseEvent<HTMLDivElement>) {
     e.stopPropagation();
-    onRowDoubleClick?.(rowIdx, rowData, column);
     selectCell(true);
+    onRowDoubleClick?.(rowIdx, rowData, column);
   }
 
   function handleDragOver(e: React.DragEvent<HTMLDivElement>) {
     e.preventDefault();
   }
 
   function onRowSelectionChange(checked: boolean, isShiftClick: boolean) {
-    eventBus.dispatch(EventTypes.SELECT_ROW, { rowIdx, row: rowData, checked, isShiftClick });
-  }
-
-  function getEvents() {
-    if (isSummaryRow) return null;
-
-    const columnEvents = column.events;
-    const allEvents: { [key: string]: Function } = {
-      onClick: handleCellClick,
-      onDoubleClick: handleCellDoubleClick,
-      onContextMenu: handleCellContextMenu,
-      onDragOver: handleDragOver
-    };
-
-    if (enableCellRangeSelection) {
-      allEvents.onMouseDown = handleCellMouseDown;
-      allEvents.onMouseEnter = handleCellMouseEnter;
-    }
-
-    if (!columnEvents) {
-      return allEvents;
-    }
-
-    const eventInfo: ColumnEventInfo<R> = {
-      idx,
-      rowIdx,
-      column,
-      rowId: rowData[rowKey]
-    };
-
-    for (const event in columnEvents) {
-      const columnEventHandler = columnEvents[event];
-      if (columnEventHandler) {
-        if (allEvents.hasOwnProperty(event)) {
-          const existingEvent = allEvents[event];
-          allEvents[event] = (e: Event) => {
-            existingEvent(e);
-            columnEventHandler(e, eventInfo);
-          };
-        } else {
-          allEvents[event] = (e: Event) => {
-            columnEventHandler(e, eventInfo);
-          };
-        }
-      }
-    }
-
-    return allEvents;
+    eventBus.dispatch(EventTypes.SELECT_ROW, { rowIdx, checked, isShiftClick });
   }
 
   className = classNames(
@@ -149,7 +101,12 @@ function Cell<R>({
     <div
       className={className}
       style={style}
-      {...getEvents()}
+      onClick={isSummaryRow ? undefined : handleCellClick}
+      onDoubleClick={isSummaryRow ? undefined : handleCellDoubleClick}
+      onContextMenu={isSummaryRow ? undefined : handleCellContextMenu}
+      onDragOver={isSummaryRow ? undefined : handleDragOver}
+      onMouseDown={isSummaryRow || !enableCellRangeSelection ? undefined : handleCellMouseDown}
+      onMouseEnter={isSummaryRow || !enableCellRangeSelection ? undefined : handleCellMouseEnter}
     >
       {children}
     </div>

src/EventBus.ts

@@ -2,7 +2,7 @@ import { Position, SelectRowEvent } from './common/types';
 
 interface EventMap {
   SELECT_CELL(position: Position, enableEditor?: boolean): void;
-  SELECT_ROW(event: SelectRowEvent<unknown>): void;
+  SELECT_ROW(event: SelectRowEvent): void;
   SELECT_START(position: Position): void;
   SELECT_UPDATE(position: Position, isFromKeyboard?: boolean, callback?: () => void): void;
   SELECT_END(): void;

src/Row.tsx

@@ -41,12 +41,10 @@ export default function Row<R>({
 
   function getCells() {
     return viewportColumns.map(column => {
-      const { key } = column;
       return (
         <CellRenderer
-          key={key as string} // FIXME: fix key type
+          key={column.key as string} // FIXME: fix key type
           idx={column.idx}
-          rowKey={key}
           rowIdx={idx}
           column={column}
           lastFrozenColumnIndex={lastFrozenColumnIndex}

src/common/types.ts

@@ -13,10 +13,6 @@ interface ColumnValue<TRow, TField extends keyof TRow = keyof TRow> {
   /** Column width. If not specified, it will be determined automatically based on grid width and specified widths of other columns*/
   width?: number | string;
   cellClass?: string;
-  /** By adding an event object with callbacks for the native react events you can bind events to a specific column. That will not break the default behaviour of the grid and will run only for the specified column */
-  events?: {
-    [key: string]: undefined | ((e: Event, info: ColumnEventInfo<TRow>) => void);
-  };
   /** Formatter to be used to render the cell content */
   formatter?: React.ComponentType<FormatterProps<TRow>>;
   /** Enables cell editing. If set and no editor property specified, then a textinput will be used as the cell editor */
@@ -127,7 +123,6 @@ export interface HeaderRendererProps<TRow> {
 }
 
 export interface CellRendererProps<TRow> {
-  rowKey: keyof TRow;
   idx: number;
   rowIdx: number;
   column: CalculatedColumn<TRow>;
@@ -171,11 +166,6 @@ export interface FilterRendererProps<TRow, TFilterValue = unknown> {
   onChange(value: TFilterValue): void;
 }
 
-export interface ColumnEventInfo<TRow> extends Position {
-  rowId: unknown;
-  column: CalculatedColumn<TRow>;
-}
-
 export interface ScrollPosition {
   scrollLeft: number;
   scrollTop: number;
@@ -219,9 +209,8 @@ export interface CheckCellIsEditableEvent<TRow> extends Position {
   column: CalculatedColumn<TRow>;
 }
 
-export interface SelectRowEvent<R> {
+export interface SelectRowEvent {
   rowIdx: number;
-  row: R;
   checked: boolean;
   isShiftClick: boolean;
 }