fix(useDoubleClick): when onDoubleClick is used it didn't respect the disabled flag on row anymore

rwieruch · rwieruch · commit 85a00404ebdf · 2025-02-12T16:48:07.000+01:00
#127 (comment)
diff --git a/.storybook/stories/Misc/Row/index.story.jsx b/.storybook/stories/Misc/Row/index.story.jsx
@@ -16,6 +16,9 @@ import RowClickCode from './row-click?raw';
 import RowDoubleClickComponent from './row-double-click';
 import RowDoubleClickCode from './row-double-click?raw';
 
+import RowDisabledComponent from './row-disabled';
+import RowDisabledCode from './row-disabled?raw';
+
 import RowOnHoverComponent from './row-on-hover';
 import RowOnHoverCode from './row-on-hover?raw';
 
@@ -27,6 +30,7 @@ createStories(
   [
     createStory('row click', RowClickComponent, RowClickCode),
     createStory('row double click', RowDoubleClickComponent, RowDoubleClickCode),
+    createStory('row disabled', RowDisabledComponent, RowDisabledCode),
     createStory('row on hover', RowOnHoverComponent, RowOnHoverCode),
     createStory('variable row height', VariableRowHeightComponent, VariableRowHeightCode),
   ],
diff --git a/.storybook/stories/Misc/Row/row-disabled.jsx b/.storybook/stories/Misc/Row/row-disabled.jsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+import {
+  Table,
+  Header,
+  HeaderRow,
+  Body,
+  Row,
+  HeaderCell,
+  Cell,
+} from '@table-library/react-table-library/table';
+import { useTheme } from '@table-library/react-table-library/theme';
+
+import { nodes } from '../../data';
+
+const Component = () => {
+  const data = { nodes };
+
+  return (
+    <Table data={data}>
+      {(tableList) => (
+        <>
+          <Header>
+            <HeaderRow>
+              <HeaderCell>Task</HeaderCell>
+              <HeaderCell>Deadline</HeaderCell>
+              <HeaderCell>Type</HeaderCell>
+              <HeaderCell>Complete</HeaderCell>
+              <HeaderCell>Tasks</HeaderCell>
+            </HeaderRow>
+          </Header>
+
+          <Body>
+            {tableList.map((item) => (
+              <Row
+                disabled
+                key={item.id}
+                item={item}
+                onClick={(item, event) => console.log('Single Click Row', item, event)}
+                onDoubleClick={(item, event) => console.log('Double Click Row', item, event)}
+              >
+                <Cell>{item.name}</Cell>
+                <Cell>
+                  {item.deadline.toLocaleDateString('en-US', {
+                    year: 'numeric',
+                    month: '2-digit',
+                    day: '2-digit',
+                  })}
+                </Cell>
+                <Cell>{item.type}</Cell>
+                <Cell>{item.isComplete.toString()}</Cell>
+                <Cell>{item.nodes?.length}</Cell>
+              </Row>
+            ))}
+          </Body>
+        </>
+      )}
+    </Table>
+  );
+};
+
+export default Component;
diff --git a/src/table/Row/Row.tsx b/src/table/Row/Row.tsx
@@ -96,7 +96,7 @@ export const Row = <T extends TableNode>(props: RowProps<T>) => {
 
   const ref = React.useRef<HTMLTableRowElement>(null);
 
-  useDoubleClick<T>(ref, onClickByFeature, onDoubleClick, item);
+  useDoubleClick<T>(ref, onClickByFeature, onDoubleClick, item, disabled);
 
   const handleClick = disabled
     ? () => {}
diff --git a/src/table/Row/useDoubleClick.ts b/src/table/Row/useDoubleClick.ts
@@ -48,10 +48,11 @@ export const useDoubleClick = <T extends TableNode>(
   onClick: OnClick<T> | Nullish,
   onDoubleClick: OnClick<T> | Nullish,
   node: T,
+  disabled: boolean | undefined,
 ) => {
   useDoubleClickBase({
-    onSingleClick: onClick ? (event) => onClick(node, event) : NOOP,
-    onDoubleClick: onDoubleClick ? (event) => onDoubleClick(node, event) : null,
+    onSingleClick: onClick && !disabled ? (event) => onClick(node, event) : NOOP,
+    onDoubleClick: onDoubleClick && !disabled ? (event) => onDoubleClick(node, event) : null,
     ref,
   });
 };
