fix(brush): use PointerEvents instead of MouseEvents (#1155)

* change mouse events to pointer events * simplify type to React.PointerEvent Co-authored-by: Remaa <[email protected]>
airbnb · Apr 13, 2021 · d70c524 · d70c524
1 parent 42d3213
commit d70c524
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 32 deletions.
diff --git a/packages/visx-brush/src/BaseBrush.tsx b/packages/visx-brush/src/BaseBrush.tsx
@@ -10,9 +10,7 @@ import { MarginShape, Point, BrushShape, ResizeTriggerAreas, PartialBrushStartEn
 
 const BRUSH_OVERLAY_STYLES = { cursor: 'crosshair' };
 
-type MouseHandlerEvent =
-  | React.MouseEvent<SVGRectElement, MouseEvent>
-  | React.TouchEvent<SVGRectElement>;
+type PointerHandlerEvent = React.PointerEvent<SVGRectElement>;
 
 export type BaseBrushProps = {
   brushDirection?: 'horizontal' | 'vertical' | 'both';
@@ -28,10 +26,10 @@ export type BaseBrushProps = {
   onBrushStart?: (start: BaseBrushState['start']) => void;
   onBrushEnd?: (state: BaseBrushState) => void;
   selectedBoxStyle: React.SVGProps<SVGRectElement>;
-  onMouseLeave?: (event: MouseHandlerEvent) => void;
-  onMouseUp?: (event: MouseHandlerEvent) => void;
-  onMouseMove?: (event: MouseHandlerEvent) => void;
-  onClick?: (event: MouseHandlerEvent) => void;
+  onMouseLeave?: (event: PointerHandlerEvent) => void;
+  onMouseUp?: (event: PointerHandlerEvent) => void;
+  onMouseMove?: (event: PointerHandlerEvent) => void;
+  onClick?: (event: PointerHandlerEvent) => void;
   clickSensitivity: number;
   disableDraggingSelection: boolean;
   resetOnEnd?: boolean;
@@ -385,22 +383,22 @@ export default class BaseBrush extends React.Component<BaseBrushProps, BaseBrush
               width={stageWidth}
               height={stageHeight}
               onDoubleClick={() => this.reset()}
-              onClick={(event: MouseHandlerEvent) => {
+              onClick={(event: PointerHandlerEvent) => {
                 const duration = this.mouseUpTime - this.mouseDownTime;
                 if (onClick && duration < clickSensitivity) onClick(event);
               }}
-              onMouseDown={(event: MouseHandlerEvent) => {
+              onPointerDown={(event: PointerHandlerEvent) => {
                 this.mouseDownTime = Date.now();
                 dragStart(event);
               }}
-              onMouseLeave={(event: MouseHandlerEvent) => {
+              onPointerLeave={(event: PointerHandlerEvent) => {
                 if (onMouseLeave) onMouseLeave(event);
               }}
-              onMouseMove={(event: MouseHandlerEvent) => {
+              onPointerMove={(event: PointerHandlerEvent) => {
                 if (!isDragging && onMouseMove) onMouseMove(event);
                 if (isDragging) dragMove(event);
               }}
-              onMouseUp={(event: MouseHandlerEvent) => {
+              onPointerUp={(event: PointerHandlerEvent) => {
                 this.mouseUpTime = Date.now();
                 if (onMouseUp) onMouseUp(event);
                 dragEnd(event);

diff --git a/packages/visx-brush/src/BrushHandle.tsx b/packages/visx-brush/src/BrushHandle.tsx
@@ -141,9 +141,9 @@ export default class BrushHandle extends React.Component<BrushHandleProps> {
               height={height}
               fill="transparent"
               className={`visx-brush-handle-${type}`}
-              onMouseDown={dragStart}
-              onMouseMove={dragMove}
-              onMouseUp={dragEnd}
+              onPointerDown={dragStart}
+              onPointerMove={dragMove}
+              onPointerUp={dragEnd}
               style={{
                 cursor,
                 pointerEvents: !!brush.activeHandle || !!brush.isBrushing ? 'none' : 'all',

diff --git a/packages/visx-brush/src/BrushSelection.tsx b/packages/visx-brush/src/BrushSelection.tsx
@@ -5,9 +5,7 @@ import { BaseBrushState as BrushState, UpdateBrush } from './BaseBrush';
 
 const DRAGGING_OVERLAY_STYLES = { cursor: 'move' };
 
-type MouseHandler = (
-  event: React.MouseEvent<SVGRectElement, MouseEvent> | React.TouchEvent<SVGRectElement>,
-) => void;
+type PointerHandler = (event: React.PointerEvent<SVGRectElement>) => void;
 
 export type BrushSelectionProps = {
   width: number;
@@ -18,10 +16,10 @@ export type BrushSelectionProps = {
   updateBrush: (update: UpdateBrush) => void;
   onBrushEnd?: (brush: BrushState) => void;
   disableDraggingSelection: boolean;
-  onMouseLeave: MouseHandler;
-  onMouseMove: MouseHandler;
-  onMouseUp: MouseHandler;
-  onClick: MouseHandler;
+  onMouseLeave: PointerHandler;
+  onMouseMove: PointerHandler;
+  onMouseUp: PointerHandler;
+  onClick: PointerHandler;
   selectedBoxStyle: React.SVGProps<SVGRectElement>;
 };
 
@@ -119,9 +117,9 @@ export default class BrushSelection extends React.Component<
                 width={stageWidth}
                 height={stageHeight}
                 fill="transparent"
-                onMouseUp={dragEnd}
-                onMouseMove={dragMove}
-                onMouseLeave={dragEnd}
+                onPointerUp={dragEnd}
+                onPointerMove={dragMove}
+                onPointerLeave={dragEnd}
                 style={DRAGGING_OVERLAY_STYLES}
               />
             )}
@@ -131,20 +129,20 @@ export default class BrushSelection extends React.Component<
               width={width}
               height={height}
               className="visx-brush-selection"
-              onMouseDown={disableDraggingSelection ? undefined : dragStart}
-              onMouseLeave={event => {
+              onPointerDown={disableDraggingSelection ? undefined : dragStart}
+              onPointerLeave={event => {
                 if (onMouseLeave) onMouseLeave(event);
               }}
-              onMouseMove={event => {
+              onPointerMove={event => {
                 dragMove(event);
                 if (onMouseMove) onMouseMove(event);
               }}
-              onMouseUp={event => {
+              onPointerUp={event => {
                 dragEnd(event);
                 if (onMouseUp) onMouseUp(event);
               }}
               onClick={event => {
-                if (onClick) onClick(event);
+                if (onClick) onClick(event as React.PointerEvent<SVGRectElement>);
               }}
               style={{
                 pointerEvents: brush.isBrushing || brush.activeHandle ? 'none' : 'all',

diff --git a/packages/visx-drag/src/Drag.tsx b/packages/visx-drag/src/Drag.tsx
@@ -37,8 +37,8 @@ export default function Drag({
         <rect
           width={width}
           height={height}
-          onMouseMove={drag.dragMove}
-          onMouseUp={drag.dragEnd}
+          onPointerMove={drag.dragMove}
+          onPointerUp={drag.dragEnd}
           fill="transparent"
         />
       )}