Fix primefaces#1945/primefaces#3703: onRowMouseEnter/onRowMouseLeave

api-generator/components/datatable.js

@@ -780,6 +780,48 @@ const DataTableEvents = [
  }
  ]
  },
+ {
+ name: 'onRowMouseEnter',
+ description: 'Callback to invoke when a row is mouse hovered.',
+ arguments: [
+ {
+ name: 'event.originalEvent',
+ type: 'object',
+ description: 'Browser event.'
+ },
+ {
+ name: 'event.data',
+ type: 'any',
+ description: 'Clicked row data'
+ },
+ {
+ name: 'event.index',
+ type: 'number',
+ description: 'Clicked row data index'
+ }
+ ]
+ },
+ {
+ name: 'onRowMouseLeave',
+ description: 'Callback to invoke when a row is moused out.',
+ arguments: [
+ {
+ name: 'event.originalEvent',
+ type: 'object',
+ description: 'Browser event.'
+ },
+ {
+ name: 'event.data',
+ type: 'any',
+ description: 'Clicked row data'
+ },
+ {
+ name: 'event.index',
+ type: 'number',
+ description: 'Clicked row data index'
+ }
+ ]
+ },
  {
  name: 'onRowSelect',
  description: 'Callback to invoke when a row is unselected.',

components/doc/datatable/index.js

@@ -3747,6 +3747,24 @@ export const DataTableStateDemo = () => {
  </td>
  <td>Callback to invoke when a row is double clicked.</td>
  </tr>
+ <tr>
+ <td>onRowMouseEnter</td>
+ <td>
+ event.originalEvent: Browser event <br />
+ event.data: Clicked row data <br />
+ event.index: Clicked row data index
+ </td>
+ <td>Callback to invoke when a row is hovered with mouse.</td>
+ </tr>
+ <tr>
+ <td>onRowMouseLeave</td>
+ <td>
+ event.originalEvent: Browser event <br />
+ event.data: Clicked row data <br />
+ event.index: Clicked row data index
+ </td>
+ <td>Callback to invoke when a row is navigated away from with mouse.</td>
+ </tr>
  <tr>
  <td>onRowSelect</td>
  <td>

components/lib/datatable/BodyRow.js

@@ -105,6 +105,14 @@ export const BodyRow = React.memo((props) => {
  props.onRowRightClick({ originalEvent: event, data: props.rowData, index: props.index });
  };
 
+ const onMouseEnter = (event) => {
+ props.onRowMouseEnter({ originalEvent: event, data: props.rowData, index: props.index });
+ };
+
+ const onMouseLeave = (event) => {
+ props.onRowMouseLeave({ originalEvent: event, data: props.rowData, index: props.index });
+ };
+
  const onTouchEnd = (event) => {
  props.onRowTouchEnd(event);
  };
@@ -361,6 +369,8 @@ export const BodyRow = React.memo((props) => {
  style={style}
  onMouseDown={onMouseDown}
  onMouseUp={onMouseUp}
+ onMouseEnter={onMouseEnter}
+ onMouseLeave={onMouseLeave}
  onClick={onClick}
  onDoubleClick={onDoubleClick}
  onContextMenu={onRightClick}

components/lib/datatable/DataTable.js

@@ -1452,6 +1452,8 @@ export const DataTable = React.forwardRef((props, ref) => {
  tabIndex={props.tabIndex}
  onRowClick={props.onRowClick}
  onRowDoubleClick={props.onRowDoubleClick}
+ onRowMouseEnter={props.onRowMouseEnter}
+ onRowMouseLeave={props.onRowMouseLeave}
  onCellClick={props.onCellClick}
  selection={props.selection}
  onSelectionChange={props.onSelectionChange}
@@ -1524,6 +1526,8 @@ export const DataTable = React.forwardRef((props, ref) => {
  tabIndex={props.tabIndex}
  onRowClick={props.onRowClick}
  onRowDoubleClick={props.onRowDoubleClick}
+ onRowMouseEnter={props.onRowMouseEnter}
+ onRowMouseLeave={props.onRowMouseLeave}
  onCellClick={props.onCellClick}
  selection={props.selection}
  onSelectionChange={props.onSelectionChange}
@@ -1828,6 +1832,8 @@ DataTable.defaultProps = {
  onFilter: null,
  onPage: null,
  onRowClick: null,
+ onRowMouseEnter: null,
+ onRowMouseLeave: null,
  onRowCollapse: null,
  onRowDoubleClick: null,
  onRowEditCancel: null,

components/lib/datatable/TableBody.js

@@ -505,6 +505,14 @@ export const TableBody = React.memo(
  }
  };
 
+ const onRowMouseEnter = (event) => {
+ props.onRowMouseEnter && props.onRowMouseEnter(event);
+ };
+
+ const onRowMouseLeave = (event) => {
+ props.onRowMouseLeave && props.onRowMouseLeave(event);
+ };
+
  const onRowTouchEnd = () => {
  rowTouched.current = true;
  };
@@ -857,6 +865,8 @@ export const TableBody = React.memo(
  onRowClick={onRowClick}
  onRowDoubleClick={onRowDoubleClick}
  onRowRightClick={onRowRightClick}
+ onRowMouseEnter={onRowMouseEnter}
+ onRowMouseLeave={onRowMouseLeave}
  tabIndex={props.tabIndex}
  isSelectable={isSelectable}
  onRowTouchEnd={onRowTouchEnd}

components/lib/datatable/datatable.d.ts

@@ -147,11 +147,13 @@ interface DataTableRowEventParams {
  data: any;
 }
 
-interface DataTableRowClickEventParams extends Omit<DataTableRowEventParams, 'originalEvent'> {
+interface DataTableRowMouseEventParams extends Omit<DataTableRowEventParams, 'originalEvent'> {
  originalEvent: React.MouseEvent<HTMLElement>;
  index: number;
 }
 
+interface DataTableRowClickEventParams extends DataTableRowMouseEventParams {}
+
 interface DataTableCellClickEventParams {
  originalEvent: React.MouseEvent<HTMLElement>;
  value: any;
@@ -349,6 +351,8 @@ export interface DataTableProps extends Omit<React.DetailedHTMLProps<React.Input
  onRowEditInit?(e: DataTableRowEditParams): void;
  onRowEditSave?(e: DataTableRowEditSaveParams): void;
  onRowExpand?(e: DataTableRowEventParams): void;
+ onRowMouseEnter?(e: DataTableRowMouseEventParams): void;
+ onRowMouseLeave?(e: DataTableRowMouseEventParams): void;
  onRowReorder?(e: DataTableRowReorderParams): void;
  onRowSelect?(e: DataTableSelectParams): void;
  onRowToggle?(e: DataTableRowToggleParams): void;