move dragging logic to parent

Author: bl00mber

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

@@ -8,7 +8,7 @@
  */
 
 import * as React from 'react';
-import {useEffect, useMemo, useRef} from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import {FixedSizeList} from 'react-window';
 import SnapshotCommitListItem from './SnapshotCommitListItem';
@@ -24,6 +24,13 @@ export type ItemData = {|
   selectedCommitIndex: number | null,
   selectedFilteredCommitIndex: number | null,
   selectCommitIndex: (index: number) => void,
+  startCommitDrag: (newDragStartCommit: DragStartCommit) => void,
+|};
+
+type State = {|
+  dragCommitStarted: boolean,
+  dragStartCommit: DragStartCommit | null,
+  modifiedIframes: Map<HTMLElement, string> | null,
 |};
 
 type Props = {|
@@ -72,6 +79,12 @@ type ListProps = {|
   width: number,
 |};
 
+type DragStartCommit = {
+  dragStartCommitIndex: number,
+  rectLeft: number,
+  width: number,
+};
+
 function List({
   commitDurations,
   selectedCommitIndex,
@@ -105,6 +118,87 @@ function List({
     [commitDurations],
   );
 
+  const maxCommitIndex = filteredCommitIndices.length - 1;
+
+  const [state, setState] = useState<State>({
+    dragCommitStarted: false,
+    dragStartCommit: null,
+    modifiedIframes: null,
+  });
+
+  const startCommitDrag = (newDragStartCommit: DragStartCommit) => {
+    const element = divRef.current;
+    if (element !== null) {
+      const iframes = element.ownerDocument.querySelectorAll('iframe');
+      if (iframes.length > 0) {
+        const modifiedIframesMap = new Map();
+        for (let i = 0; i < iframes.length; i++) {
+          if (iframes[i].style.pointerEvents !== 'none') {
+            modifiedIframesMap.set(iframes[i], iframes[i].style.pointerEvents);
+            iframes[i].style.pointerEvents = 'none';
+          }
+        }
+        setState({
+          dragCommitStarted: true,
+          dragStartCommit: newDragStartCommit,
+          modifiedIframes: modifiedIframesMap,
+        });
+      }
+    }
+  };
+
+  const handleDragCommit = (e: any) => {
+    const {dragCommitStarted, dragStartCommit, modifiedIframes} = state;
+    if (dragCommitStarted === false || dragStartCommit === null) return;
+    if (e.buttons === 0) {
+      if (modifiedIframes !== null) {
+        modifiedIframes.forEach((value, iframe) => {
+          iframe.style.pointerEvents = value;
+        });
+      }
+      setState({
+        dragCommitStarted: false,
+        dragStartCommit: null,
+        modifiedIframes: null,
+      });
+      return;
+    }
+
+    let newCommitIndex = dragStartCommit.dragStartCommitIndex;
+    let newCommitRectLeft = dragStartCommit.rectLeft;
+
+    if (e.pageX < dragStartCommit.rectLeft) {
+      while (e.pageX < newCommitRectLeft) {
+        newCommitRectLeft = newCommitRectLeft - 1 - dragStartCommit.width;
+        newCommitIndex -= 1;
+      }
+    } else {
+      let newCommitRectRight = newCommitRectLeft + dragStartCommit.width;
+      while (e.pageX > newCommitRectRight) {
+        newCommitRectRight = newCommitRectRight + 1 + dragStartCommit.width;
+        newCommitIndex += 1;
+      }
+    }
+
+    if (newCommitIndex < 0) {
+      newCommitIndex = 0;
+    } else if (newCommitIndex > maxCommitIndex) {
+      newCommitIndex = maxCommitIndex;
+    }
+    selectCommitIndex(newCommitIndex);
+  };
+
+  useEffect(() => {
+    const element = divRef.current;
+    if (element !== null) {
+      const ownerDocument = element.ownerDocument;
+      ownerDocument.addEventListener('mousemove', handleDragCommit);
+      return () => {
+        ownerDocument.removeEventListener('mousemove', handleDragCommit);
+      };
+    }
+  }, [state]);
+
   // Pass required contextual data down to the ListItem renderer.
   const itemData = useMemo<ItemData>(
     () => ({
@@ -115,6 +209,7 @@ function List({
       selectedCommitIndex,
       selectedFilteredCommitIndex,
       selectCommitIndex,
+      startCommitDrag,
     }),
     [
       commitDurations,
@@ -124,6 +219,7 @@ function List({
       selectedCommitIndex,
       selectedFilteredCommitIndex,
       selectCommitIndex,
+      startCommitDrag,
     ],
   );
 

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

@@ -23,11 +23,6 @@ type Props = {
   ...
 };
 
-type DragStartCommit = {
-  dragStartCommitIndex: number,
-  rectLeft: number,
-};
-
 function SnapshotCommitListItem({data: itemData, index, style}: Props) {
   const {
     commitDurations,
@@ -36,66 +31,18 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
     maxDuration,
     selectedCommitIndex,
     selectCommitIndex,
+    startCommitDrag,
   } = itemData;
 
   index = filteredCommitIndices[index];
 
   const commitDuration = commitDurations[index];
   const commitTime = commitTimes[index];
 
-  const handleClick = useCallback(() => selectCommitIndex(index), [
-    index,
-    selectCommitIndex,
-  ]);
-
-  let dragStartCommit: DragStartCommit | null = null;
-  const maxCommitIndex = filteredCommitIndices.length - 1;
-
-  const handleDrag = (e: any) => {
-    if (e.buttons === 0) {
-      document.removeEventListener('mousemove', handleDrag);
-      const iframe = document.querySelector('iframe');
-      if (iframe) iframe.style.pointerEvents = 'auto';
-      dragStartCommit = null;
-      return;
-    }
-    if (dragStartCommit === null) return;
-
-    let newCommitIndex = index;
-    let newCommitRectLeft = dragStartCommit.rectLeft;
-
-    if (e.pageX < dragStartCommit.rectLeft) {
-      while (e.pageX < newCommitRectLeft) {
-        newCommitRectLeft = newCommitRectLeft - 1 - width;
-        newCommitIndex -= 1;
-      }
-    } else {
-      let newCommitRectRight = newCommitRectLeft + 1 + width;
-      while (e.pageX > newCommitRectRight) {
-        newCommitRectRight = newCommitRectRight + 1 + width;
-        newCommitIndex += 1;
-      }
-    }
-
-    if (newCommitIndex < 0) {
-      newCommitIndex = 0;
-    } else if (newCommitIndex > maxCommitIndex) {
-      newCommitIndex = maxCommitIndex;
-    }
-    selectCommitIndex(newCommitIndex);
-  };
-
-  const handleMouseDown = (e: any) => {
-    handleClick();
-    document.addEventListener('mousemove', handleDrag);
-    const iframe = document.querySelector('iframe');
-    if (iframe) iframe.style.pointerEvents = 'none';
-    const rect = e.target.getBoundingClientRect();
-    dragStartCommit = {
-      dragStartCommitIndex: index,
-      rectLeft: rect.left,
-    };
-  };
+  const memoizedSelectCommitIndex = useCallback(
+    () => selectCommitIndex(index),
+    [index, selectCommitIndex],
+  );
 
   // Guard against commits with duration 0
   const percentage =
@@ -105,10 +52,19 @@ 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,
+    });
+  };
+
   return (
     <div
       className={styles.Outer}
-      onClick={handleClick}
       onMouseDown={handleMouseDown}
       style={{
         ...style,