fix(Cell/Row): stopPropagation should work for cellClick and not reach rowClick #50

Author: rwieruch

package-lock.json

@@ -13,8 +13,7 @@
   "dependencies": {
     "clsx": "1.1.1",
     "react-virtualized-auto-sizer": "1.0.6",
-    "react-window": "1.8.6",
-    "use-double-click": "1.0.5"
+    "react-window": "1.8.6"
   },
   "devDependencies": {
     "@babel/core": "7.12.17",
@@ -54,7 +53,6 @@
     "@types/react-dom": "17.0.11",
     "@types/react-virtualized-auto-sizer": "1.0.1",
     "@types/react-window": "1.8.5",
-    "@types/use-double-click": "1.0.1",
     "@typescript-eslint/eslint-plugin": "5.10.2",
     "@typescript-eslint/parser": "5.10.2",
     "axios": "0.21.1",

package.json

@@ -15,6 +15,7 @@ import { useConsumeRowLayout } from '@table-library/react-table-library/resize/u
 import { Nullish } from '@table-library/react-table-library/types/common';
 import {
   OnClick,
+  Event,
   Features,
   RowProps,
   FeatureProps,
@@ -103,6 +104,7 @@ export const Row: React.FC<RowProps> = (props: RowProps) => {
     <RowContainer
       role="row"
       data-table-library_tr-body=""
+      onClick={onDoubleClick ? () => {} : (event: Event) => onClickByFeature(item, event)}
       css={css`
         ${themeByFeature}
         ${theme?.BaseRow}

src/table/Row/Row.tsx

@@ -1,20 +1,54 @@
 import * as React from 'react';
-import useDoubleClickBase from 'use-double-click';
 
-import { TableNode, OnClick } from '@table-library/react-table-library/types/table';
+import { TableNode, OnClick, Event } from '@table-library/react-table-library/types/table';
 import { Nullish } from '@table-library/react-table-library/types/common';
 
 const NOOP = () => {};
 
+const useDoubleClickBase = ({
+  onSingleClick,
+  onDoubleClick,
+  ref,
+}: {
+  ref: React.MutableRefObject<HTMLDivElement | null>;
+  onSingleClick: (e: Event) => void;
+  onDoubleClick: ((e: Event) => void) | null;
+}) => {
+  React.useEffect(() => {
+    const { current } = ref;
+
+    let clickCount = 0;
+
+    const handleDoubleClick = (event: any) => {
+      if (onDoubleClick) {
+        clickCount += 1;
+
+        setTimeout(() => {
+          if (clickCount === 1) onSingleClick(event);
+          else if (clickCount === 2) onDoubleClick(event);
+
+          clickCount = 0;
+        }, 300);
+      }
+    };
+
+    current?.addEventListener('click', handleDoubleClick);
+
+    return () => {
+      current?.removeEventListener('click', handleDoubleClick);
+    };
+  });
+};
+
 export const useDoubleClick = (
   ref: React.MutableRefObject<HTMLDivElement | null>,
   onClick: OnClick | Nullish,
   onDoubleClick: OnClick | Nullish,
   node: TableNode,
-) =>
+) => {
   useDoubleClickBase({
     onSingleClick: onClick ? (event) => onClick(node, event) : NOOP,
-    onDoubleClick: onDoubleClick ? (event) => onDoubleClick(node, event) : NOOP,
-    latency: onDoubleClick ? 250 : 0,
+    onDoubleClick: onDoubleClick ? (event) => onDoubleClick(node, event) : null,
     ref,
   });
+};

src/table/Row/useDoubleClick.ts

@@ -13,7 +13,9 @@ import { Pagination } from '@table-library/react-table-library/types/pagination'
 
 export type RestProps = Record<string, any>;
 
-export type OnClick = (node: TableNode, event: React.SyntheticEvent | React.KeyboardEvent) => void;
+export type Event = React.SyntheticEvent | React.KeyboardEvent;
+
+export type OnClick = (node: TableNode, event: Event) => void;
 
 export type CellProps = {
   className?: string;