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

melloware · Nov 25, 2022 · 3bd8818 · 3bd8818
1 parent 3fa91b3
commit 3bd8818
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 1 deletion.
diff --git a/api-generator/components/datatable.js b/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.',

diff --git a/components/doc/datatable/index.js b/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>

diff --git a/components/lib/datatable/BodyRow.js b/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}

diff --git a/components/lib/datatable/DataTable.js b/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,

diff --git a/components/lib/datatable/TableBody.js b/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}

diff --git a/components/lib/datatable/datatable.d.ts b/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;