fix: Move duble click to syntheic events

material-table-core · Jul 7, 2021 · fcf963d · fcf963d
1 parent 101d290
commit fcf963d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 46 deletions.
diff --git a/src/components/m-table-body-row.js b/src/components/m-table-body-row.js
@@ -50,7 +50,7 @@ export default function MTableBodyRow(props) {
       }
       onToggleDetailPanel(path, panel);
     });
-  const [doubleClickRef] = useDoubleClick(
+  const onRowClickListener = useDoubleClick(
     onRowClick ? (e) => onClick(e, onRowClick) : undefined,
     onDoubleRowClick ? (e) => onClick(e, onDoubleRowClick) : undefined,
     onClick
@@ -155,10 +155,8 @@ export default function MTableBodyRow(props) {
     }
 
     const size = CommonValues.elementSize(props);
-    const selectionWidth = CommonValues.selectionMaxWidth(
-      props,
-      props.treeDataMaxLevel
-    ) || 0;
+    const selectionWidth =
+      CommonValues.selectionMaxWidth(props, props.treeDataMaxLevel) || 0;
 
     const styles =
       size === 'medium'
@@ -182,9 +180,10 @@ export default function MTableBodyRow(props) {
           checked={props.data.tableData.checked === true}
           onClick={(e) => e.stopPropagation()}
           value={props.data.tableData.id.toString()}
-          onChange={(event) =>
-            props.onRowSelected(event, props.path, props.data)
-          }
+          onChange={(event) => {
+            console.log('call');
+            props.onRowSelected(event, props.path, props.data);
+          }}
           style={styles}
           {...checkboxProps}
         />
@@ -445,7 +444,7 @@ export default function MTableBodyRow(props) {
       <TableRow
         selected={hasAnyEditingRow}
         {...rowProps}
-        ref={doubleClickRef}
+        onClick={onRowClickListener}
         hover={!!onRowClick || !!onDoubleRowClick}
         style={getStyle(props.index, props.level)}
       >

diff --git a/src/utils/hooks/useDoubleClick.js b/src/utils/hooks/useDoubleClick.js
@@ -1,13 +1,6 @@
 import React from 'react';
 
 function useDoubleClick(singleCallback, dbCallback) {
-  /** callback ref Pattern **/
-  const [elem, setElem] = React.useState(null);
-  const callbackRef = React.useCallback((node) => {
-    setElem(node);
-    callbackRef.current = node;
-  }, []);
-
   const countRef = React.useRef(0);
   /** Refs for the timer **/
   const timerRef = React.useRef(null);
@@ -18,41 +11,31 @@ function useDoubleClick(singleCallback, dbCallback) {
     inputDoubleCallbackRef.current = dbCallback;
     inputSingleCallbackRef.current = singleCallback;
   });
-  React.useEffect(() => {
-    function handler(e) {
-      const isDoubleClick = countRef.current + 1 === 2;
-      const timerIsPresent = timerRef.current;
-      if (timerIsPresent && isDoubleClick) {
+  const onClick = React.useCallback((e) => {
+    const isDoubleClick = countRef.current + 1 === 2;
+    const timerIsPresent = timerRef.current;
+    if (timerIsPresent && isDoubleClick) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+      countRef.current = 0;
+      if (inputDoubleCallbackRef.current) {
+        inputDoubleCallbackRef.current(e);
+      }
+    }
+    if (!timerIsPresent) {
+      countRef.current = countRef.current + 1;
+      const timer = setTimeout(() => {
         clearTimeout(timerRef.current);
         timerRef.current = null;
         countRef.current = 0;
-        if (inputDoubleCallbackRef.current) {
-          inputDoubleCallbackRef.current(e);
+        if (inputSingleCallbackRef.current) {
+          inputSingleCallbackRef.current(e);
         }
-      }
-      if (!timerIsPresent) {
-        countRef.current = countRef.current + 1;
-        const timer = setTimeout(() => {
-          clearTimeout(timerRef.current);
-          timerRef.current = null;
-          countRef.current = 0;
-          if (inputSingleCallbackRef.current) {
-            inputSingleCallbackRef.current(e);
-          }
-        }, 200);
-        timerRef.current = timer;
-      }
-    }
-    if (elem) {
-      elem.addEventListener('click', handler);
+      }, 200);
+      timerRef.current = timer;
     }
-    return () => {
-      if (elem) {
-        elem.removeEventListener('click', handler);
-      }
-    };
-  }, [elem]);
-  return [callbackRef, elem];
+  }, []);
+  return onClick;
 }
 
 export { useDoubleClick };