fix: replace mouse event with pointer event to support touch devices (#…

…557)
zakodium-oss · Oct 4, 2023 · db36620 · db36620
1 parent 6e3ba05
commit db36620
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/src/components/split-pane/SplitPane.tsx b/src/components/split-pane/SplitPane.tsx
@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import {
-  MouseEvent as ReactMouseEvent,
+  PointerEvent as ReactPointerEvent,
   createContext,
   CSSProperties,
   ReactNode,
@@ -114,7 +114,7 @@ export function SplitPane(props: SplitPaneProps) {
   }, [closePane, closed, openPane]);
 
   const splitterRef = useRef<HTMLDivElement>(null);
-  const { onMouseDown } = useSplitPaneSize({
+  const { onPointerDown } = useSplitPaneSize({
     controlledSide,
     direction,
     splitterRef,
@@ -183,7 +183,7 @@ export function SplitPane(props: SplitPaneProps) {
 
       <Splitter
         onDoubleClick={handleToggle}
-        onMouseDown={isFinalClosed ? undefined : onMouseDown}
+        onPointerDown={isFinalClosed ? undefined : onPointerDown}
         isFinalClosed={isFinalClosed}
         direction={direction}
         splitterRef={splitterRef}
@@ -196,19 +196,24 @@ export function SplitPane(props: SplitPaneProps) {
 
 interface SplitterProps {
   onDoubleClick: () => void;
-  onMouseDown?: (event: ReactMouseEvent) => void;
+  onPointerDown?: (event: ReactPointerEvent) => void;
   direction: SplitPaneDirection;
   isFinalClosed: boolean;
   splitterRef: RefObject<HTMLDivElement>;
 }
 
 function Splitter(props: SplitterProps) {
-  const { onDoubleClick, onMouseDown, direction, isFinalClosed, splitterRef } =
-    props;
+  const {
+    onDoubleClick,
+    onPointerDown,
+    direction,
+    isFinalClosed,
+    splitterRef,
+  } = props;
   return (
     <div
       onDoubleClick={onDoubleClick}
-      onMouseDown={onMouseDown}
+      onPointerDown={onPointerDown}
       css={getSeparatorStyle(direction, !isFinalClosed)}
       ref={splitterRef}
     >
@@ -298,6 +303,7 @@ function getSeparatorStyle(direction: SplitPaneDirection, enabled: boolean) {
       alignItems: 'center',
       userSelect: 'none',
       minWidth: 11,
+      touchAction: 'none',
       ':hover': {
         backgroundColor: 'rgb(223, 223, 223)',
       },

diff --git a/src/components/split-pane/useSplitPaneSize.tsx b/src/components/split-pane/useSplitPaneSize.tsx
@@ -26,9 +26,9 @@ export function useSplitPaneSize(options: UseSplitPaneSizeOptions) {
     onResize,
   } = options;
 
-  function mouseDownCallback() {
+  function downCallback() {
     let lastSize: [number, SplitPaneType] | null = null;
-    function onMouseMove(event: MouseEvent) {
+    function moveCallback(event: PointerEvent) {
       if (!splitterRef.current) return;
       const { clientX, clientY } = event;
       const parentDiv = splitterRef.current.parentElement as HTMLDivElement;
@@ -69,20 +69,20 @@ export function useSplitPaneSize(options: UseSplitPaneSizeOptions) {
       }
     }
 
-    function mouseUpCallback() {
-      window.removeEventListener('mousemove', onMouseMove);
-      window.removeEventListener('mouseup', mouseUpCallback);
+    function upCallback() {
+      window.removeEventListener('pointermove', moveCallback);
+      window.removeEventListener('pointerup', upCallback);
       if (lastSize && onResize) {
         onResize(`${lastSize[0]}${lastSize[1]}`);
       }
     }
 
-    window.addEventListener('mousemove', onMouseMove);
-    window.addEventListener('mouseup', mouseUpCallback);
+    window.addEventListener('pointermove', moveCallback);
+    window.addEventListener('pointerup', upCallback);
   }
 
   return {
-    onMouseDown: mouseDownCallback,
+    onPointerDown: downCallback,
   };
 }