diff --git a/src/Cell.tsx b/src/Cell.tsx index 9f0cf75b61..807b481efd 100644 --- a/src/Cell.tsx +++ b/src/Cell.tsx @@ -36,6 +36,8 @@ function Cell({ onClick, onDoubleClick, onContextMenu, + onMouseDown, + onMouseEnter, onRowChange, selectCell, ...props @@ -84,6 +86,20 @@ function Cell({ selectCellWrapper(true); } + function handleMouseEnter(event: React.MouseEvent) { + if (onMouseEnter) { + const cellEvent = createCellEvent(event); + onMouseEnter({ row, column }, cellEvent); + } + } + + function handleMouseDown(event: React.MouseEvent) { + if (onMouseDown) { + const cellEvent = createCellEvent(event); + onMouseDown({ row, column }, cellEvent); + } + } + function handleRowChange(newRow: R) { onRowChange(column, newRow); } @@ -101,6 +117,8 @@ function Cell({ onClick={handleClick} onDoubleClick={handleDoubleClick} onContextMenu={handleContextMenu} + onMouseDown={handleMouseDown} + onMouseEnter={handleMouseEnter} onFocus={onFocus} {...props} > diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx index f386331d0b..e24cb447a2 100644 --- a/src/DataGrid.tsx +++ b/src/DataGrid.tsx @@ -33,10 +33,12 @@ import type { CellClickArgs, CellKeyboardEvent, CellKeyDownArgs, + CellMouseBaseArgs, CellMouseEvent, CellNavigationMode, CellSelectArgs, Column, + ColumnMouseBaseArgs, ColumnOrColumnGroup, CopyEvent, Direction, @@ -162,15 +164,28 @@ export interface DataGridProps extends Sha */ /** Function called whenever a cell is clicked */ onCellClick?: Maybe<(args: CellClickArgs, event: CellMouseEvent) => void>; + /** Function called whenever a cell is double clicked */ onCellDoubleClick?: Maybe<(args: CellClickArgs, event: CellMouseEvent) => void>; /** Function called whenever a cell is right clicked */ onCellContextMenu?: Maybe<(args: CellClickArgs, event: CellMouseEvent) => void>; + /** Function called whenever a cell is mouse down */ + onCellMouseDown?: Maybe<(args: CellMouseBaseArgs, event: CellMouseEvent) => void>; + /** Function called whenever a mouse entered in cell */ + onCellMouseEnter?: Maybe<(args: CellMouseBaseArgs, event: CellMouseEvent) => void>; onCellKeyDown?: Maybe<(args: CellKeyDownArgs, event: CellKeyboardEvent) => void>; /** Function called whenever cell selection is changed */ onSelectedCellChange?: Maybe<(args: CellSelectArgs) => void>; /** Called when the grid is scrolled */ onScroll?: Maybe<(event: React.UIEvent) => void>; + /** Function called whenever a column cell is mouse down */ + onColumnMouseDown?: Maybe< + (args: ColumnMouseBaseArgs, event: React.MouseEvent) => void + >; + /** Function called whenever a mouse entered in column cell */ + onColumnMouseEnter?: Maybe< + (args: ColumnMouseBaseArgs, event: React.MouseEvent) => void + >; /** Called when a column is resized */ onColumnResize?: Maybe<(idx: number, width: number) => void>; /** Called when a column is reordered */ @@ -224,10 +239,14 @@ function DataGrid( // Event props onCellClick, onCellDoubleClick, + onCellMouseDown, + onCellMouseEnter, onCellContextMenu, onCellKeyDown, onSelectedCellChange, onScroll, + onColumnMouseDown, + onColumnMouseEnter, onColumnResize, onColumnsReorder, onFill, @@ -422,6 +441,8 @@ function DataGrid( const onCellClickLatest = useLatestFunc(onCellClick); const onCellDoubleClickLatest = useLatestFunc(onCellDoubleClick); const onCellContextMenuLatest = useLatestFunc(onCellContextMenu); + const onCellMouseDownLatest = useLatestFunc(onCellMouseDown); + const onCellMouseEnterLatest = useLatestFunc(onCellMouseEnter); const selectRowLatest = useLatestFunc(selectRow); const handleFormatterRowChangeLatest = useLatestFunc(updateRow); const selectCellLatest = useLatestFunc(selectCell); @@ -989,6 +1010,8 @@ function DataGrid( onCellClick: onCellClickLatest, onCellDoubleClick: onCellDoubleClickLatest, onCellContextMenu: onCellContextMenuLatest, + onCellMouseDown: onCellMouseDownLatest, + onCellMouseEnter: onCellMouseEnterLatest, rowClass, gridRowStart, height: getRowHeight(rowIdx), @@ -1098,6 +1121,8 @@ function DataGrid( onColumnsReorder={onColumnsReorderLastest} sortColumns={sortColumns} onSortColumnsChange={onSortColumnsChangeLatest} + onColumnMouseDown={onColumnMouseDown} + onColumnMouseEnter={onColumnMouseEnter} lastFrozenColumnIndex={lastFrozenColumnIndex} selectedCellIdx={ selectedPosition.rowIdx === mainHeaderRowIdx ? selectedPosition.idx : undefined diff --git a/src/HeaderCell.tsx b/src/HeaderCell.tsx index 2dde6d2fe0..b488df77da 100644 --- a/src/HeaderCell.tsx +++ b/src/HeaderCell.tsx @@ -62,6 +62,8 @@ type SharedHeaderRowProps = Pick< | 'shouldFocusGrid' | 'direction' | 'onColumnsReorder' + | 'onColumnMouseDown' + | 'onColumnMouseEnter' >; export interface HeaderCellProps extends SharedHeaderRowProps { @@ -79,6 +81,8 @@ export default function HeaderCell({ isCellSelected, onColumnResize, onColumnsReorder, + onColumnMouseDown, + onColumnMouseEnter, sortColumns, onSortColumnsChange, selectCell, @@ -186,6 +190,18 @@ export default function HeaderCell({ } } + function onMouseDown(event: React.MouseEvent) { + if (onColumnMouseDown) { + onColumnMouseDown({ column }, event); + } + } + + function onMouseEnter(event: React.MouseEvent) { + if (onColumnMouseEnter) { + onColumnMouseEnter({ column }, event); + } + } + function onDoubleClick() { onColumnResize(column, 'max-content'); } @@ -268,6 +284,8 @@ export default function HeaderCell({ aria-rowspan={rowSpan} aria-selected={isCellSelected} aria-sort={ariaSort} + onMouseDown={onMouseDown} + onMouseEnter={onMouseEnter} // set the tabIndex to 0 when there is no selected cell so grid can receive focus tabIndex={shouldFocusGrid ? 0 : tabIndex} className={className} diff --git a/src/HeaderRow.tsx b/src/HeaderRow.tsx index 09fced82e4..4ec83d6518 100644 --- a/src/HeaderRow.tsx +++ b/src/HeaderRow.tsx @@ -11,7 +11,11 @@ import { rowSelectedClassname } from './style/row'; type SharedDataGridProps = Pick< DataGridProps, - 'sortColumns' | 'onSortColumnsChange' | 'onColumnsReorder' + | 'sortColumns' + | 'onSortColumnsChange' + | 'onColumnsReorder' + | 'onColumnMouseDown' + | 'onColumnMouseEnter' >; export interface HeaderRowProps extends SharedDataGridProps { @@ -51,6 +55,8 @@ function HeaderRow({ columns, onColumnResize, onColumnsReorder, + onColumnMouseDown, + onColumnMouseEnter, sortColumns, onSortColumnsChange, lastFrozenColumnIndex, @@ -79,6 +85,8 @@ function HeaderRow({ onColumnResize={onColumnResize} onColumnsReorder={onColumnsReorder} onSortColumnsChange={onSortColumnsChange} + onColumnMouseDown={onColumnMouseDown} + onColumnMouseEnter={onColumnMouseEnter} sortColumns={sortColumns} selectCell={selectCell} shouldFocusGrid={shouldFocusGrid && index === 0} diff --git a/src/Row.tsx b/src/Row.tsx index aab22bda6b..f639e4c747 100644 --- a/src/Row.tsx +++ b/src/Row.tsx @@ -24,6 +24,8 @@ function Row( onCellClick, onCellDoubleClick, onCellContextMenu, + onCellMouseDown, + onCellMouseEnter, rowClass, setDraggedOverRowIdx, onMouseEnter, @@ -80,6 +82,8 @@ function Row( onClick={onCellClick} onDoubleClick={onCellDoubleClick} onContextMenu={onCellContextMenu} + onMouseDown={onCellMouseDown} + onMouseEnter={onCellMouseEnter} onRowChange={handleRowChange} selectCell={selectCell} /> diff --git a/src/types.ts b/src/types.ts index dac37209ae..ca9b0b3f9c 100644 --- a/src/types.ts +++ b/src/types.ts @@ -145,7 +145,13 @@ export interface CellRendererProps extends Pick, 'row' | 'rowIdx' | 'selectCell'>, Omit< React.HTMLAttributes, - 'style' | 'children' | 'onClick' | 'onDoubleClick' | 'onContextMenu' + | 'style' + | 'children' + | 'onClick' + | 'onDoubleClick' + | 'onContextMenu' + | 'onMouseDown' + | 'onMouseEnter' > { column: CalculatedColumn; colSpan: number | undefined; @@ -155,6 +161,8 @@ export interface CellRendererProps onClick: RenderRowProps['onCellClick']; onDoubleClick: RenderRowProps['onCellDoubleClick']; onContextMenu: RenderRowProps['onCellContextMenu']; + onMouseDown: RenderRowProps['onCellMouseDown']; + onMouseEnter: RenderRowProps['onCellMouseEnter']; onRowChange: (column: CalculatedColumn, newRow: TRow) => void; } @@ -173,6 +181,15 @@ export interface CellClickArgs { selectCell: (enableEditor?: boolean) => void; } +export interface CellMouseBaseArgs { + row: TRow; + column: CalculatedColumn; +} + +export interface ColumnMouseBaseArgs { + column: CalculatedColumn; +} + interface SelectCellKeyDownArgs { mode: 'SELECT'; row: TRow; @@ -204,7 +221,11 @@ export interface BaseRenderRowProps extends Omit, 'style' | 'children'>, Pick< DataGridProps, - 'onCellClick' | 'onCellDoubleClick' | 'onCellContextMenu' + | 'onCellClick' + | 'onCellDoubleClick' + | 'onCellContextMenu' + | 'onCellMouseDown' + | 'onCellMouseEnter' > { viewportColumns: readonly CalculatedColumn[]; rowIdx: number;