From 47700b6109bbc9072b944ed7d6d6e706a1e091d5 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 16 Dec 2019 14:05:26 -0600 Subject: [PATCH] Remove getCellActions prop (#1845) * Remove getCellActions prop * Fix eslint error * Delete CellAction tests --- .../demos/CellActions.js | 18 +++-- examples/demos/example27-cell-actions.js | 63 +++++++++------ examples/index.html | 63 +++++++++++++++ packages/react-data-grid/src/Canvas.tsx | 2 - packages/react-data-grid/src/Cell.tsx | 4 +- .../react-data-grid/src/Cell/CellActions.tsx | 18 ----- .../react-data-grid/src/Cell/CellContent.tsx | 11 +-- .../src/Cell/__tests__/CellAction.spec.tsx | 81 ------------------- packages/react-data-grid/src/DataGrid.tsx | 5 -- packages/react-data-grid/src/Row.tsx | 1 - packages/react-data-grid/src/RowRenderer.tsx | 4 +- .../src/__tests__/Cell.spec.tsx | 52 ------------ packages/react-data-grid/src/common/enums.ts | 3 +- packages/react-data-grid/src/common/types.ts | 16 +--- packages/react-data-grid/style/rdg-cell.less | 59 -------------- 15 files changed, 116 insertions(+), 284 deletions(-) rename packages/react-data-grid/src/Cell/CellAction.tsx => examples/demos/CellActions.js (74%) delete mode 100644 packages/react-data-grid/src/Cell/CellActions.tsx delete mode 100644 packages/react-data-grid/src/Cell/__tests__/CellAction.spec.tsx diff --git a/packages/react-data-grid/src/Cell/CellAction.tsx b/examples/demos/CellActions.js similarity index 74% rename from packages/react-data-grid/src/Cell/CellAction.tsx rename to examples/demos/CellActions.js index 3b8c7b7df6..aad0c0a324 100644 --- a/packages/react-data-grid/src/Cell/CellAction.tsx +++ b/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 ); } +export default function CellActions({ actions }) { + if (actions && actions.length > 0) { + const actionButtons = actions.map((action, index) => { + return ; + }); + + return <>{actionButtons}; + } + return null; +} diff --git a/examples/demos/example27-cell-actions.js b/examples/demos/example27-cell-actions.js index 32cb3f756b..536d8b95c6 100644 --- a/examples/demos/example27-cell-actions.js +++ b/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: , + callback() { alert('Deleting'); } + }, + { + icon: , + actions: [ + { + text: 'Edit Cell', + callback() { alert('Edit Cell'); } + }, + { + text: <> Copy Cell, + callback() { alert('Copied'); } + } + ] + } + ]; + + return ( + <> + +
+ {value} +
+ + ); + } + + 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: , - callback() { alert('Deleting'); } - }, - { - icon: , - actions: [ - { - text: 'Edit Cell', - callback() { alert('Edit Cell'); } - }, - { - text: <> Copy Cell, - callback() { alert('Copied'); } - } - ] - } - ]; - } - } - render() { return ( @@ -165,7 +177,6 @@ export default class extends React.Component { rowsCount={this.getSize()} rowHeight={55} minHeight={600} - getCellActions={this.getCellActions} /> ); diff --git a/examples/index.html b/examples/index.html index b1bc7c5968..78b4400ec5 100644 --- a/examples/index.html +++ b/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; + } diff --git a/packages/react-data-grid/src/Canvas.tsx b/packages/react-data-grid/src/Canvas.tsx index 6cbff448b3..fdbefde5c9 100644 --- a/packages/react-data-grid/src/Canvas.tsx +++ b/packages/react-data-grid/src/Canvas.tsx @@ -29,7 +29,6 @@ type SharedDataGridProps = Pick, | 'onRowExpandToggle' | 'onDeleteSubRow' | 'onAddSubRow' -| 'getCellActions' > & Required, | 'rowKey' | 'enableCellAutoFocus' @@ -201,7 +200,6 @@ function Canvas({ onRowExpandToggle={props.onRowExpandToggle} onDeleteSubRow={props.onDeleteSubRow} onAddSubRow={props.onAddSubRow} - getCellActions={props.getCellActions} enableCellRangeSelection={typeof props.onSelectedCellRangeChange === 'function'} /> ); diff --git a/packages/react-data-grid/src/Cell.tsx b/packages/react-data-grid/src/Cell.tsx index e0e554be81..8ef6bbdb77 100644 --- a/packages/react-data-grid/src/Cell.tsx +++ b/packages/react-data-grid/src/Cell.tsx @@ -30,7 +30,6 @@ function Cell({ onRowDoubleClick, onDeleteSubRow, onCellExpand, - getCellActions, enableCellRangeSelection }: CellProps) { const position: Position = { idx, rowIdx }; @@ -156,8 +155,7 @@ function Cell({ onRowSelectionChange, isSummaryRow, onDeleteSubRow, - onCellExpand, - getCellActions + onCellExpand })} ); diff --git a/packages/react-data-grid/src/Cell/CellActions.tsx b/packages/react-data-grid/src/Cell/CellActions.tsx deleted file mode 100644 index 86f85c1f03..0000000000 --- a/packages/react-data-grid/src/Cell/CellActions.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -import CellAction from './CellAction'; -import { CellRendererProps, CellContentRendererProps } from '../common/types'; - -type CellActionsProps = Pick, 'column' | 'rowData'> & Pick>, 'getCellActions'>; - -export default function CellActions({ getCellActions, column, rowData }: CellActionsProps) { - const cellActionButtons = getCellActions(column, rowData); - if (cellActionButtons && cellActionButtons.length > 0) { - const actionButtons = cellActionButtons.map((action, index) => { - return ; - }); - - return <>{actionButtons}; - } - return null; -} diff --git a/packages/react-data-grid/src/Cell/CellContent.tsx b/packages/react-data-grid/src/Cell/CellContent.tsx index 6f07fd0785..631c671e4e 100644 --- a/packages/react-data-grid/src/Cell/CellContent.tsx +++ b/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({ isSummaryRow, onRowSelectionChange, onDeleteSubRow, - onCellExpand, - getCellActions + onCellExpand }: CellContentRendererProps): JSX.Element { const isExpandCell = expandableOptions ? expandableOptions.field === column.key : false; const treeDepth = expandableOptions ? expandableOptions.treeDepth : 0; @@ -67,13 +65,6 @@ export default function CellContent({ return ( <> - {getCellActions && ( - - column={column} - rowData={rowData} - getCellActions={getCellActions} - /> - )} {expandableOptions && expandableOptions.canExpand && ( = {}) => { - const props: CellActionProps = { - icon: , - callback: jest.fn(), - isFirst: true, - ...overriderProps - }; - const wrapper = mount(); - return { - props, - wrapper - }; -}; - -describe('Cell Action Tests', () => { - describe('when a button action is passed', () => { - it('will render a button action and hook up the callback function', () => { - const { wrapper, props } = setup(); - wrapper.find('.rdg-cell-action-button').simulate('click'); - - expect(props.callback).toHaveBeenCalled(); - wrapper.unmount(); - }); - }); - - describe('when a menu action is passed', () => { - it('will render a toggle button which will hide/show the menu of actions', () => { - const menuClass = '.rdg-cell-action-menu'; - const actions = [ - { - text: 'Test Action 1', - callback: jest.fn() - }, - { - text: 'Test Action 1', - callback: jest.fn() - } - ]; - const { wrapper } = setup({ actions }); - - expect(wrapper.find(menuClass).length).toBe(0); - - wrapper.find('.rdg-cell-action-button').simulate('click'); - - const renderedActionMenu = wrapper.find(menuClass); - expect(wrapper.find(menuClass).length).toBe(1); - - const renderedActionMenuProps = renderedActionMenu.props(); - - expect(React.Children.count(renderedActionMenuProps.children)).toBe(2); - - expect(actions[0].callback).not.toHaveBeenCalled(); - renderedActionMenu.childAt(0).simulate('click'); - expect(actions[0].callback).toHaveBeenCalled(); - wrapper.unmount(); - }); - }); - - describe('when isFirst is passed', () => { - describe('when isFirst is true', () => { - xit('will render a button action with cell-action-last class on it', () => { - const { wrapper } = setup({ isFirst: true }); - expect(wrapper.hasClass('rdg-cell-action-last')).toBe(true); - wrapper.unmount(); - }); - }); - - describe('when isFirst is false', () => { - it('will not render a button action without cell-action-last class on it', () => { - const { wrapper } = setup({ isFirst: false }); - expect(wrapper.hasClass('rdg-cell-action-last')).toBe(false); - wrapper.unmount(); - }); - }); - }); -}); diff --git a/packages/react-data-grid/src/DataGrid.tsx b/packages/react-data-grid/src/DataGrid.tsx index 2d218340a4..42d2fc80fe 100644 --- a/packages/react-data-grid/src/DataGrid.tsx +++ b/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 { emptyRowsView?: React.ComponentType<{}>; onHeaderDrop?(): void; getSubRowDetails?(row: R): SubRowDetails; - - /** CellMetaData */ - getCellActions?(column: CalculatedColumn, rowData: R): CellActionButton[] | undefined; /** Called whenever a sub row is deleted from the grid */ onDeleteSubRow?(options: SubRowOptions): void; /** Called whenever a sub row is added to the grid */ @@ -352,7 +348,6 @@ function DataGrid({ onRowExpandToggle={props.onRowExpandToggle} onDeleteSubRow={props.onDeleteSubRow} onAddSubRow={props.onAddSubRow} - getCellActions={props.getCellActions} {...horizontalRange!} /> )} diff --git a/packages/react-data-grid/src/Row.tsx b/packages/react-data-grid/src/Row.tsx index 41c625eef8..dc5ab27d16 100644 --- a/packages/react-data-grid/src/Row.tsx +++ b/packages/react-data-grid/src/Row.tsx @@ -70,7 +70,6 @@ export default class Row extends React.Component> { onCellExpand={props.onCellExpand} onDeleteSubRow={props.onDeleteSubRow} onAddSubRow={props.onAddSubRow} - getCellActions={props.getCellActions} enableCellRangeSelection={props.enableCellRangeSelection} /> ); diff --git a/packages/react-data-grid/src/RowRenderer.tsx b/packages/react-data-grid/src/RowRenderer.tsx index 9574baf762..30adb28689 100644 --- a/packages/react-data-grid/src/RowRenderer.tsx +++ b/packages/react-data-grid/src/RowRenderer.tsx @@ -22,7 +22,6 @@ type SharedCanvasProps = Pick, | 'onRowExpandToggle' | 'onDeleteSubRow' | 'onAddSubRow' -| 'getCellActions' >; export interface RowRendererProps extends SharedCanvasProps { @@ -66,7 +65,7 @@ function RowRenderer({ columns: columnMetrics.columns, isRowSelected: selectedRows !== undefined && selectedRows.has(rowData[rowKey]), onRowSelectionChange, - subRowDetails: getSubRowDetails ? getSubRowDetails(rowData) : undefined, + subRowDetails: getSubRowDetails?.(rowData), colOverscanStartIdx, colOverscanEndIdx, lastFrozenColumnIndex: columnMetrics.lastFrozenColumnIndex, @@ -78,7 +77,6 @@ function RowRenderer({ onCellExpand: props.onCellExpand, onDeleteSubRow: props.onDeleteSubRow, onAddSubRow: props.onAddSubRow, - getCellActions: props.getCellActions, enableCellRangeSelection: props.enableCellRangeSelection }; diff --git a/packages/react-data-grid/src/__tests__/Cell.spec.tsx b/packages/react-data-grid/src/__tests__/Cell.spec.tsx index 043f8d87de..5c86b0b367 100644 --- a/packages/react-data-grid/src/__tests__/Cell.spec.tsx +++ b/packages/react-data-grid/src/__tests__/Cell.spec.tsx @@ -3,7 +3,6 @@ import { mount } from 'enzyme'; import Cell, { CellProps } from '../Cell'; import helpers, { Row } from './GridPropHelpers'; -import CellAction from '../Cell/CellAction'; import { legacyCellContentRenderer } from '../Cell/cellContentRenderers'; import { SimpleCellFormatter } from '../formatters'; import { CalculatedColumn } from '../common/types'; @@ -116,55 +115,4 @@ describe('Cell Tests', () => { expect(cellDiv.props().height).toBeUndefined(); }); }); - - describe('CellActions', () => { - const setup = (propsOverride: Partial> = {}) => { - const props: CellProps = { - rowIdx: 18, - idx: 19, - column: helpers.columns[0], - lastFrozenColumnIndex: -1, - rowData: helpers.rowGetter(11), - expandableOptions, - isRowSelected: false, - onRowSelectionChange() {}, - scrollLeft: 0, - isSummaryRow: false, - rowKey: 'id', - onCellExpand() {}, - eventBus: new EventBus(), - ...propsOverride - }; - - const wrapper = mount( {...props} />); - return { - wrapper, - props - }; - }; - - describe('when getCellActions is in cellMetadata', () => { - it('should render some CellActions', () => { - const action = { icon: 'glpyhicon glyphicon-link', callback: jest.fn() }; - const { wrapper } = setup({ - getCellActions: jest.fn().mockReturnValue([action]) - }); - - const renderedCellActions = wrapper.find(CellAction); - - expect(renderedCellActions).toHaveLength(1); - expect(renderedCellActions.props()).toEqual({ - ...action, - isFirst: true - }); - }); - }); - - describe('when getCellActions is not in cellMetadata', () => { - it('should not render any CellActions', () => { - const { wrapper } = setup(); - expect(wrapper.find(CellAction)).toHaveLength(0); - }); - }); - }); }); diff --git a/packages/react-data-grid/src/common/enums.ts b/packages/react-data-grid/src/common/enums.ts index 23840d647d..f751fe0f53 100644 --- a/packages/react-data-grid/src/common/enums.ts +++ b/packages/react-data-grid/src/common/enums.ts @@ -18,8 +18,7 @@ export enum EventTypes { SELECT_START = 'SELECT_START', SELECT_UPDATE = 'SELECT_UPDATE', SELECT_END = 'SELECT_END', - DRAG_ENTER = 'DRAG_ENTER', - SCROLL_TO_COLUMN = 'SCROLL_TO_COLUMN' + DRAG_ENTER = 'DRAG_ENTER' } export enum UpdateActions { diff --git a/packages/react-data-grid/src/common/types.ts b/packages/react-data-grid/src/common/types.ts index 0ef7337377..dc8f17b635 100644 --- a/packages/react-data-grid/src/common/types.ts +++ b/packages/react-data-grid/src/common/types.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { KeyboardEvent, ReactNode } from 'react'; +import { KeyboardEvent } from 'react'; import { UpdateActions } from './enums'; import EventBus from '../EventBus'; @@ -147,7 +147,6 @@ export interface CellRendererProps { onAddSubRow?(): void; onDeleteSubRow?(options: SubRowOptions): void; onCellExpand?(options: SubRowOptions): void; - getCellActions?(column: CalculatedColumn, rowData: TRow): CellActionButton[] | undefined; } export type CellContentRenderer = (props: CellContentRendererProps) => React.ReactNode; @@ -163,7 +162,6 @@ export type CellContentRendererProps = Pick, | 'isSummaryRow' | 'onDeleteSubRow' | 'onCellExpand' -| 'getCellActions' >; export interface RowsContainerProps { @@ -195,7 +193,6 @@ export interface IRowRendererProps { onDeleteSubRow?(options: SubRowOptions): void; onRowExpandToggle?(event: RowExpandToggleEvent): void; onCellExpand?(options: SubRowOptions): void; - getCellActions?(column: CalculatedColumn, rowData: TRow): CellActionButton[] | undefined; } export interface FilterRendererProps { @@ -231,17 +228,6 @@ export interface ExpandableOptions { subRowDetails: SubRowDetails; } -interface Action { - text: ReactNode; - callback(): void; -} - -export interface CellActionButton { - icon: ReactNode; - actions?: Action[]; - callback?(): void; -} - export interface ColumnEventInfo extends Position { rowId: unknown; column: CalculatedColumn; diff --git a/packages/react-data-grid/style/rdg-cell.less b/packages/react-data-grid/style/rdg-cell.less index 6271fbf206..e26d01bafa 100644 --- a/packages/react-data-grid/style/rdg-cell.less +++ b/packages/react-data-grid/style/rdg-cell.less @@ -127,65 +127,6 @@ } } -.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-mask { position: absolute; pointer-events: none;