Update SnapshotCommitListItem.js

Author: bvaughn

packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js

@@ -8,7 +8,7 @@
  */
 
 import * as React from 'react';
-import {memo, useCallback} from 'react';
+import {memo} from 'react';
 import {areEqual} from 'react-window';
 import {getGradientColor, formatDuration, formatTime} from './utils';
 
@@ -39,11 +39,6 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
   const commitDuration = commitDurations[index];
   const commitTime = commitTimes[index];
 
-  const memoizedSelectCommitIndex = useCallback(
-    () => selectCommitIndex(index),
-    [index, selectCommitIndex],
-  );
-
   // Guard against commits with duration 0
   const percentage =
     Math.min(1, Math.max(0, commitDuration / maxDuration)) || 0;
@@ -52,14 +47,17 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
   // Leave a 1px gap between snapshots
   const width = parseFloat(style.width) - 1;
 
-  const handleMouseDown = (e: any) => {
-    memoizedSelectCommitIndex();
-    const rect = e.target.getBoundingClientRect();
-    startCommitDrag({
-      dragStartCommitIndex: index,
-      rectLeft: rect.left,
-      width,
-    });
+  const handleMouseDown = ({buttons, target}: any) => {
+    if (buttons === 1) {
+      selectCommitIndex(index);
+
+      // TODO Count for border/margin
+      startCommitDrag({
+        commitIndex: index,
+        left: target.getBoundingClientRect().left,
+        sizeIncrement: parseFloat(style.width),
+      });
+    }
   };
 
   return (