Remove getCellActions prop (#1845)

* Remove getCellActions prop

* Fix eslint error

* Delete CellAction tests

packages/react-data-grid/src/Cell/CellAction.tsx → examples/demos/CellActions.js

@@ -1,13 +1,7 @@
 import React, { useState } from 'react';
 import classNames from 'classnames';
 
-import { CellActionButton } from '../common/types';
-
-export interface CellActionProps extends CellActionButton {
-  isFirst: boolean;
-}
-
-export default function CellAction({ icon, actions, callback, isFirst }: CellActionProps) {
+function CellAction({ icon, actions, callback, isFirst }) {
   const [isOpen, setIsOpen] = useState(false);
 
   const cellActionClasses = classNames('rdg-cell-action', {
@@ -43,3 +37,13 @@ export default function CellAction({ icon, actions, callback, isFirst }: CellAct
     </div>
   );
 }
+export default function CellActions({ actions }) {
+  if (actions && actions.length > 0) {
+    const actionButtons = actions.map((action, index) => {
+      return <CellAction key={index} isFirst={index === 0} {...action} />;
+    });
+
+    return <>{actionButtons}</>;
+  }
+  return null;
+}

examples/demos/example27-cell-actions.js

@@ -4,6 +4,7 @@ import { Data, Formatters } from 'react-data-grid-addons';
 import { Clear, Link, FileCopy } from '@material-ui/icons';
 import faker from 'faker';
 import Wrapper from './Wrapper';
+import CellActions from './CellActions';
 
 const { Selectors } = Data;
 const { ImageFormatter } = Formatters;
@@ -52,7 +53,42 @@ const columns = [
   {
     key: 'county',
     name: 'County',
-    width: 200
+    width: 200,
+    cellClass: 'rdg-cell-action',
+    formatter({ row, value }) {
+      if (row.id === 'id_0') {
+        const actions = [
+          {
+            icon: <Clear />,
+            callback() { alert('Deleting'); }
+          },
+          {
+            icon: <Link />,
+            actions: [
+              {
+                text: 'Edit Cell',
+                callback() { alert('Edit Cell'); }
+              },
+              {
+                text: <><FileCopy /> Copy Cell</>,
+                callback() { alert('Copied'); }
+              }
+            ]
+          }
+        ];
+
+        return (
+          <>
+            <CellActions actions={actions} />
+            <div>
+              {value}
+            </div>
+          </>
+        );
+      }
+
+      return value;
+    }
   },
   {
     key: 'title',
@@ -130,30 +166,6 @@ export default class extends React.Component {
     return this.getRows().length;
   };
 
-  getCellActions(column, row) {
-    if (column.key === 'county' && row.id === 'id_0') {
-      return [
-        {
-          icon: <Clear />,
-          callback() { alert('Deleting'); }
-        },
-        {
-          icon: <Link />,
-          actions: [
-            {
-              text: 'Edit Cell',
-              callback() { alert('Edit Cell'); }
-            },
-            {
-              text: <><FileCopy /> Copy Cell</>,
-              callback() { alert('Copied'); }
-            }
-          ]
-        }
-      ];
-    }
-  }
-
   render() {
     return (
       <Wrapper title="Cell Actions Example">
@@ -165,7 +177,6 @@ export default class extends React.Component {
           rowsCount={this.getSize()}
           rowHeight={55}
           minHeight={600}
-          getCellActions={this.getCellActions}
         />
       </Wrapper>
     );

examples/index.html

@@ -62,6 +62,69 @@
     .grid-autosizer-wrapper {
       flex: 1 1 auto;
     }
+
+    .rdg-cell-action {
+      float: right;
+      height: 100%;
+    }
+
+    .rdg-cell-action-last {
+      margin-right: -8px;
+    }
+
+    .rdg-cell-action-button {
+      width: 35px;
+      height: 100%;
+      text-align: center;
+      position: relative;
+      display: table;
+      color: #4a9de2;
+    }
+
+    .rdg-cell-action-button > span {
+      display: table-cell;
+      vertical-align: middle;
+    }
+
+    .rdg-cell-action-button:hover, .rdg-cell-action-button-toggled {
+      color: #447bbb;
+    }
+
+    .rdg-cell-action-menu {
+      position: absolute;
+      top: 100%;
+      z-index: 1000;
+      float: left;
+      min-width: 160px;
+      padding: 5px 0;
+      text-align: left;
+      list-style: none;
+      background-color: #fff;
+      -webkit-background-clip: padding-box;
+      background-clip: padding-box;
+      border: 1px solid #ccc;
+      box-shadow: 0 0 3px 0 #ccc;
+    }
+
+    .rdg-cell-action-menu > span {
+      display: block;
+      padding: 3px 10px;
+      clear: both;
+      font-weight: 400;
+      line-height: 1.42857143;
+      color: #333;
+      white-space: nowrap;
+    }
+
+    .rdg-cell-action-menu > span:hover {
+      color: #262626;
+      text-decoration: none;
+      background-color: #f5f5f5;
+    }
+
+    .rdg-cell.rdg-cell-action {
+      overflow: visible;
+    }
   </style>
   <script defer src="https://unpkg.com/core-js-bundle/minified.js"></script>
   <script defer src="./index.js"></script>

packages/react-data-grid/src/Canvas.tsx

@@ -29,7 +29,6 @@ type SharedDataGridProps<R, K extends keyof R> = Pick<DataGridProps<R, K>,
 | 'onRowExpandToggle'
 | 'onDeleteSubRow'
 | 'onAddSubRow'
-| 'getCellActions'
 > & Required<Pick<DataGridProps<R, K>,
 | 'rowKey'
 | 'enableCellAutoFocus'
@@ -201,7 +200,6 @@ function Canvas<R, K extends keyof R>({
           onRowExpandToggle={props.onRowExpandToggle}
           onDeleteSubRow={props.onDeleteSubRow}
           onAddSubRow={props.onAddSubRow}
-          getCellActions={props.getCellActions}
           enableCellRangeSelection={typeof props.onSelectedCellRangeChange === 'function'}
         />
       );

packages/react-data-grid/src/Cell.tsx

@@ -30,7 +30,6 @@ function Cell<R>({
   onRowDoubleClick,
   onDeleteSubRow,
   onCellExpand,
-  getCellActions,
   enableCellRangeSelection
 }: CellProps<R>) {
   const position: Position = { idx, rowIdx };
@@ -156,8 +155,7 @@ function Cell<R>({
         onRowSelectionChange,
         isSummaryRow,
         onDeleteSubRow,
-        onCellExpand,
-        getCellActions
+        onCellExpand
       })}
     </div>
   );

packages/react-data-grid/src/Cell/CellContent.tsx

@@ -1,7 +1,6 @@
 import React, { createElement, cloneElement } from 'react';
 import { isElement, isValidElementType } from 'react-is';
 
-import CellActions from './CellActions';
 import CellExpand from './CellExpander';
 import { SimpleCellFormatter } from '../formatters';
 import ChildRowDeleteButton from '../ChildRowDeleteButton';
@@ -17,8 +16,7 @@ export default function CellContent<R>({
   isSummaryRow,
   onRowSelectionChange,
   onDeleteSubRow,
-  onCellExpand,
-  getCellActions
+  onCellExpand
 }: CellContentRendererProps<R>): JSX.Element {
   const isExpandCell = expandableOptions ? expandableOptions.field === column.key : false;
   const treeDepth = expandableOptions ? expandableOptions.treeDepth : 0;
@@ -67,13 +65,6 @@ export default function CellContent<R>({
 
   return (
     <>
-      {getCellActions && (
-        <CellActions<R>
-          column={column}
-          rowData={rowData}
-          getCellActions={getCellActions}
-        />
-      )}
       {expandableOptions && expandableOptions.canExpand && (
         <CellExpand
           expanded={expandableOptions.expanded}

packages/react-data-grid/src/DataGrid.tsx

@@ -17,7 +17,6 @@ import { getColumnMetrics, getHorizontalRangeToRender, isPositionStickySupported
 import { CellNavigationMode, DEFINE_SORT } from './common/enums';
 import {
   CalculatedColumn,
-  CellActionButton,
   CheckCellIsEditableEvent,
   Column,
   CellContentRenderer,
@@ -116,9 +115,6 @@ export interface DataGridProps<R, K extends keyof R> {
   emptyRowsView?: React.ComponentType<{}>;
   onHeaderDrop?(): void;
   getSubRowDetails?(row: R): SubRowDetails;
-
-  /** CellMetaData */
-  getCellActions?(column: CalculatedColumn<R>, rowData: R): CellActionButton[] | undefined;
   /** Called whenever a sub row is deleted from the grid */
   onDeleteSubRow?(options: SubRowOptions<R>): void;
   /** Called whenever a sub row is added to the grid */
@@ -352,7 +348,6 @@ function DataGrid<R, K extends keyof R>({
               onRowExpandToggle={props.onRowExpandToggle}
               onDeleteSubRow={props.onDeleteSubRow}
               onAddSubRow={props.onAddSubRow}
-              getCellActions={props.getCellActions}
               {...horizontalRange!}
             />
           )}

packages/react-data-grid/src/Row.tsx

@@ -70,7 +70,6 @@ export default class Row<R> extends React.Component<IRowRendererProps<R>> {
             onCellExpand={props.onCellExpand}
             onDeleteSubRow={props.onDeleteSubRow}
             onAddSubRow={props.onAddSubRow}
-            getCellActions={props.getCellActions}
             enableCellRangeSelection={props.enableCellRangeSelection}
           />
         );