Tidy capturePointer (#3071)

* Fixing nested onClick

* Latest

* Remove unused var

Author: mattgperry

dev/react/src/examples/Drag-draggable.tsx

@@ -1,5 +1,5 @@
-import { useState, useRef, useEffect } from "react"
 import { motion } from "framer-motion"
+import { useRef, useState } from "react"
 
 const styleA = {
     width: 200,

packages/framer-motion/src/gestures/pan/PanSession.ts

@@ -1,4 +1,4 @@
-import { isPrimaryPointer } from "motion-dom"
+import { capturePointer, isPrimaryPointer } from "motion-dom"
 import { millisecondsToSeconds, secondsToMilliseconds } from "motion-utils"
 import { addPointerEvent } from "../../events/add-pointer-event"
 import { extractEventInfo } from "../../events/event-info"
@@ -353,19 +353,3 @@ function getVelocity(history: TimestampedPoint[], timeDelta: number): Point {
 
     return currentVelocity
 }
-
-function capturePointer(event: PointerEvent, action: "set" | "release") {
-    const actionName = `${action}PointerCapture` as
-        | "setPointerCapture"
-        | "releasePointerCapture"
-
-    if (
-        event.currentTarget instanceof Element &&
-        actionName in event.currentTarget &&
-        event.pointerId !== undefined
-    ) {
-        try {
-            event.currentTarget[actionName](event.pointerId)
-        } catch (e) {}
-    }
-}

packages/motion-dom/src/gestures/press/index.ts

@@ -1,6 +1,7 @@
 import { ElementOrSelector } from "../../utils/resolve-elements"
 import { isDragActive } from "../drag/state/is-active"
 import { EventOptions } from "../types"
+import { capturePointer } from "../utils/capture-pointer"
 import { isNodeOrChild } from "../utils/is-node-or-child"
 import { isPrimaryPointer } from "../utils/is-primary-pointer"
 import { setupGesture } from "../utils/setup"
@@ -51,37 +52,22 @@ export function press(
     )
 
     const startPress = (startEvent: PointerEvent) => {
-        const lockTarget = startEvent.target as Element
         const target = startEvent.currentTarget as Element
 
         if (!target || !isValidPressEvent(startEvent) || isPressing.has(target))
             return
 
         isPressing.add(target)
 
-        if (
-            lockTarget.setPointerCapture &&
-            startEvent.pointerId !== undefined
-        ) {
-            try {
-                lockTarget.setPointerCapture(startEvent.pointerId)
-            } catch (e) {}
-        }
+        capturePointer(startEvent, "set")
 
         const onPressEnd = onPressStart(target, startEvent)
 
         const onPointerEnd = (endEvent: PointerEvent, success: boolean) => {
             target.removeEventListener("pointerup", onPointerUp)
             target.removeEventListener("pointercancel", onPointerCancel)
 
-            if (
-                lockTarget.releasePointerCapture &&
-                endEvent.pointerId !== undefined
-            ) {
-                try {
-                    lockTarget.releasePointerCapture(endEvent.pointerId)
-                } catch (e) {}
-            }
+            capturePointer(endEvent, "release")
 
             if (!isValidPressEvent(endEvent) || !isPressing.has(target)) {
                 return

packages/motion-dom/src/gestures/utils/capture-pointer.ts

@@ -0,0 +1,15 @@
+export function capturePointer(event: PointerEvent, action: "set" | "release") {
+    const actionName = `${action}PointerCapture` as
+        | "setPointerCapture"
+        | "releasePointerCapture"
+
+    if (
+        event.target instanceof Element &&
+        actionName in event.target &&
+        event.pointerId !== undefined
+    ) {
+        try {
+            event.target[actionName](event.pointerId)
+        } catch (e) {}
+    }
+}

packages/motion-dom/src/index.ts

@@ -15,6 +15,7 @@ export * from "./gestures/hover"
 export * from "./gestures/press"
 export * from "./gestures/press/types"
 export * from "./gestures/types"
+export * from "./gestures/utils/capture-pointer"
 
 export * from "./render/svg/types"