Added custom event for data table row pointer events (#5057)

In order for users to be able to simulate row clicks as html links the center mouse button needs to be able to be listed for along with the row that was clicked resolves #5051
primefaces · Oct 7, 2023 · 771e985 · 771e985
1 parent fa11af8
commit 771e985
Show file tree

Hide file tree

Showing 6 changed files with 193 additions and 45 deletions.
diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
@@ -16799,6 +16799,32 @@
                             "returnType": "void",
                             "description": "Callback to invoke when a row is navigated away from with mouse."
                         },
+                        {
+                            "name": "onRowPointerDown",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowPointerEvent",
+                                    "description": "Custom click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row pointerDown event occurs."
+                        },
+                        {
+                            "name": "onRowPointerUp",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowPointerEvent",
+                                    "description": "Custom click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row pointerUp event occurs."
+                        },
                         {
                             "name": "onRowReorder",
                             "parameters": [
@@ -17397,6 +17423,33 @@
                     ],
                     "extendedBy": "DataTableRowEditEvent,DataTableRowEditCompleteEvent"
                 },
+                "DataTableRowPointerEvent": {
+                    "description": "Custom row pointer event.",
+                    "relatedProp": "onRowPointerDown",
+                    "props": [
+                        {
+                            "name": "data",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableValue",
+                            "description": "Original rows data."
+                        },
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PointerEvent<HTMLElement>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Clicked row data index"
+                        }
+                    ]
+                },
                 "DataTableRowClickEvent": {
                     "description": "Custom row click event.",
                     "relatedProp": "onRowClick",
@@ -19552,6 +19605,32 @@
                             "returnType": "void",
                             "description": "Callback to invoke when a row is double clicked."
                         },
+                        {
+                            "name": "onRowPointerDown",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowPointerEvent",
+                                    "description": "Custom click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row pointerDown event occurs."
+                        },
+                        {
+                            "name": "onRowPointerUp",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowPointerEvent",
+                                    "description": "Custom click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row pointerUp event occurs."
+                        },
                         {
                             "name": "onRowEditCancel",
                             "parameters": [

diff --git a/components/lib/datatable/BodyRow.js b/components/lib/datatable/BodyRow.js
@@ -119,6 +119,14 @@ export const BodyRow = React.memo((props) => {
         props.onRowDoubleClick({ originalEvent: event, data: props.rowData, index: props.rowIndex });
     };
 
+    const onPointerDown = (event) => {
+        props.onRowPointerDown({ originalEvent: event, data: props.rowData, index: props.rowIndex });
+    };
+
+    const onPointerUp = (event) => {
+        props.onRowPointerDown({ originalEvent: event, data: props.rowData, index: props.rowIndex });
+    };
+
     const onRightClick = (event) => {
         props.onRowRightClick({ originalEvent: event, data: props.rowData, index: props.rowIndex });
     };
@@ -391,6 +399,8 @@ export const BodyRow = React.memo((props) => {
             onMouseLeave: (e) => onMouseLeave(e),
             onClick: (e) => onClick(e),
             onDoubleClick: (e) => onDoubleClick(e),
+            onPointerDown: (e) => onPointerDown(e),
+            onPointerUp: (e) => onPointerUp(e),
             onContextMenu: (e) => onRightClick(e),
             onTouchEnd: (e) => onTouchEnd(e),
             onKeyDown: (e) => onKeyDown(e),

diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
@@ -1625,6 +1625,8 @@ export const DataTable = React.forwardRef((inProps, ref) => {
                 onRowClick={props.onRowClick}
                 onRowCollapse={props.onRowCollapse}
                 onRowDoubleClick={props.onRowDoubleClick}
+                onRowPointerDown={props.onRowPointerDown}
+                onRowPointerUp={props.onRowPointerUp}
                 onRowEditCancel={props.onRowEditCancel}
                 onRowEditChange={props.onRowEditChange}
                 onRowEditComplete={props.onRowEditComplete}
@@ -1686,6 +1688,8 @@ export const DataTable = React.forwardRef((inProps, ref) => {
                 tabIndex={props.tabIndex}
                 onRowClick={props.onRowClick}
                 onRowDoubleClick={props.onRowDoubleClick}
+                onRowPointerDown={props.onRowPointerDown}
+                onRowPointerUp={props.onRowPointerUp}
                 onRowMouseEnter={props.onRowMouseEnter}
                 onRowMouseLeave={props.onRowMouseLeave}
                 onCellClick={props.onCellClick}