Merge pull request #26363 from lostfictions/add-react-pointer-events

[@types/react] Upgrade types for React 16.4; add Pointer Events support (wip, awaiting feedback)
DefinitelyTyped · Jun 18, 2018 · b618d98 · b618d98
2 parents bf760f5 + 4c50303
commit b618d98
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 11 deletions.
diff --git a/types/react-pointable/index.d.ts b/types/react-pointable/index.d.ts
@@ -1,4 +1,4 @@
-// Type definitions for react-pointable 1.1
+// Type definitions for react-pointable 1.2
 // Project: https://github.com/MilllerTime/react-pointable
 // Definitions by: Stefan Fochler <https://github.com/istefo>
 //                 Dibyo Majumdar <https://github.com/mdibyo>
@@ -13,14 +13,6 @@ export interface PointableProps extends React.HTMLAttributes<Element>, React.SVG
     tagName?: keyof ElementTagNameMap;
     touchAction?: TouchAction;
     elementRef?(el: HTMLElement|SVGElement): void;
-    onPointerMove?(evt: PointerEvent): void;
-    onPointerDown?(evt: PointerEvent): void;
-    onPointerUp?(evt: PointerEvent): void;
-    onPointerOver?(evt: PointerEvent): void;
-    onPointerOut?(evt: PointerEvent): void;
-    onPointerEnter?(evt: PointerEvent): void;
-    onPointerLeave?(evt: PointerEvent): void;
-    onPointerCancel?(evt: PointerEvent): void;
 }
 
 export default class Pointable extends React.Component<PointableProps> {

diff --git a/types/react-pointable/react-pointable-tests.tsx b/types/react-pointable/react-pointable-tests.tsx
@@ -3,7 +3,7 @@ import Pointable from 'react-pointable';
 
 class Test extends React.Component<object, object> {
     elementRef(el: HTMLElement) {}
-    somePointerEvent(evt: PointerEvent) {}
+    somePointerEvent(evt: React.PointerEvent) {}
 
     render() {
         return (

diff --git a/types/react/global.d.ts b/types/react/global.d.ts
@@ -13,6 +13,7 @@ interface FocusEvent extends Event { }
 interface KeyboardEvent extends Event { }
 interface MouseEvent extends Event { }
 interface TouchEvent extends Event { }
+interface PointerEvent extends Event { }
 interface TransitionEvent extends Event { }
 interface UIEvent extends Event { }
 interface WheelEvent extends Event { }

diff --git a/types/react/index.d.ts b/types/react/index.d.ts
@@ -1,4 +1,4 @@
-// Type definitions for React 16.3
+// Type definitions for React 16.4
 // Project: http://facebook.github.io/react/
 // Definitions by: Asana <https://asana.com>
 //                 AssureSign <http://www.assuresign.com>
@@ -31,6 +31,7 @@ type NativeFocusEvent = FocusEvent;
 type NativeKeyboardEvent = KeyboardEvent;
 type NativeMouseEvent = MouseEvent;
 type NativeTouchEvent = TouchEvent;
+type NativePointerEvent = PointerEvent;
 type NativeTransitionEvent = TransitionEvent;
 type NativeUIEvent = UIEvent;
 type NativeWheelEvent = WheelEvent;
@@ -590,6 +591,18 @@ declare namespace React {
         nativeEvent: NativeDragEvent;
     }
 
+    interface PointerEvent<T = Element> extends MouseEvent<T> {
+        pointerId: number;
+        pressure: number;
+        tiltX: number;
+        tiltY: number;
+        width: number;
+        height: number;
+        pointerType: 'mouse' | 'pen' | 'touch';
+        isPrimary: boolean;
+        nativeEvent: NativePointerEvent;
+    }
+
     interface FocusEvent<T = Element> extends SyntheticEvent<T> {
         nativeEvent: NativeFocusEvent;
         relatedTarget: EventTarget;
@@ -711,6 +724,7 @@ declare namespace React {
     type KeyboardEventHandler<T = Element> = EventHandler<KeyboardEvent<T>>;
     type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>;
     type TouchEventHandler<T = Element> = EventHandler<TouchEvent<T>>;
+    type PointerEventHandler<T = Element> = EventHandler<PointerEvent<T>>;
     type UIEventHandler<T = Element> = EventHandler<UIEvent<T>>;
     type WheelEventHandler<T = Element> = EventHandler<WheelEvent<T>>;
     type AnimationEventHandler<T = Element> = EventHandler<AnimationEvent<T>>;
@@ -898,6 +912,28 @@ declare namespace React {
         onTouchStart?: TouchEventHandler<T>;
         onTouchStartCapture?: TouchEventHandler<T>;
 
+        // Pointer Events
+        onPointerDown?: PointerEventHandler<T>;
+        onPointerDownCapture?: PointerEventHandler<T>;
+        onPointerMove?: PointerEventHandler<T>;
+        onPointerMoveCapture?: PointerEventHandler<T>;
+        onPointerUp?: PointerEventHandler<T>;
+        onPointerUpCapture?: PointerEventHandler<T>;
+        onPointerCancel?: PointerEventHandler<T>;
+        onPointerCancelCapture?: PointerEventHandler<T>;
+        onPointerEnter?: PointerEventHandler<T>;
+        onPointerEnterCapture?: PointerEventHandler<T>;
+        onPointerLeave?: PointerEventHandler<T>;
+        onPointerLeaveCapture?: PointerEventHandler<T>;
+        onPointerOver?: PointerEventHandler<T>;
+        onPointerOverCapture?: PointerEventHandler<T>;
+        onPointerOut?: PointerEventHandler<T>;
+        onPointerOutCapture?: PointerEventHandler<T>;
+        onGotPointerCapture?: PointerEventHandler<T>;
+        onGotPointerCaptureCapture?: PointerEventHandler<T>;
+        onLostPointerCapture?: PointerEventHandler<T>;
+        onLostPointerCaptureCapture?: PointerEventHandler<T>;
+
         // UI Events
         onScroll?: UIEventHandler<T>;
         onScrollCapture?: UIEventHandler<T>;