chore: clean up how persisting row click events are handled

material-table-core · Aug 1, 2021 · d735ef8 · d735ef8
1 parent 48a08aa
commit d735ef8
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/__tests__/demo/demo-components/index.js b/__tests__/demo/demo-components/index.js
@@ -547,12 +547,18 @@ export function EventTargetErrorOnRowClick(props) {
         tableRef={tableRef}
         columns={cols}
         data={datas}
-        onSelectionChange={onRowSelectionChanged}
-        onRowClick={onRowClicked}
+        // onSelectionChange={onRowSelectionChanged}
+        // onRowClick={onRowClicked}
         components={{
-          MTableBodyRow: (props, p2) => {
-            console.log({ props, p2 });
-            return <MTableBodyRow {...props} persistEvents={true} />;
+          Row: (props) => {
+            return (
+              <MTableBodyRow
+                {...props}
+                persistEvents={true}
+                onRowClick={onRowClicked}
+                onRowSelected={onRowSelectionChanged}
+              />
+            );
           }
         }}
         options={{

diff --git a/src/components/m-table-body-row.js b/src/components/m-table-body-row.js
@@ -56,8 +56,7 @@ export default function MTableBodyRow(props) {
 
   const onRowClickListener = useDoubleClick(
     onRowClick ? (e) => onClick(e, onRowClick) : undefined,
-    onDoubleRowClick ? (e) => onClick(e, onDoubleRowClick) : undefined,
-    persistEvents
+    onDoubleRowClick ? (e) => onClick(e, onDoubleRowClick) : undefined
   );
 
   const getRenderColumns = () => {
@@ -445,8 +444,13 @@ export default function MTableBodyRow(props) {
       <TableRow
         selected={hasAnyEditingRow}
         {...rowProps}
-        onClick={onRowClickListener}
-        hover={!!onRowClick || !!onDoubleRowClick}
+        onClick={(event) => {
+          if (persistEvents) {
+            event.persist();
+          }
+          onRowClickListener(event);
+        }}
+        hover={onRowClick !== null || onDoubleRowClick !== null}
         style={getStyle(props.index, props.level)}
       >
         {renderColumns}

diff --git a/src/utils/hooks/useDoubleClick.js b/src/utils/hooks/useDoubleClick.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-function useDoubleClick(singleCallback, dbCallback, persistEvents) {
+function useDoubleClick(singleCallback, dbCallback) {
   const countRef = React.useRef(0);
   /** Refs for the timer **/
   const timerRef = React.useRef(null);
@@ -12,9 +12,6 @@ function useDoubleClick(singleCallback, dbCallback, persistEvents) {
     inputSingleCallbackRef.current = singleCallback;
   });
   const onClick = React.useCallback((e) => {
-    if (persistEvents) {
-      e.persist();
-    }
     const isDoubleClick = countRef.current + 1 === 2;
     const timerIsPresent = timerRef.current;
     if (timerIsPresent && isDoubleClick) {