Skip to content

Commit

Permalink
[PR] Add type definitions for pointer events
Browse files Browse the repository at this point in the history 
Summary:
Closes #6373, closes #3227.

The definition of `SyntheticPointerEvent` here was originally based on facebook/react#12507 (released in React DOM 16.4.0) which was missing a couple of fields (`twist` and `tangentialPressure`) from the official spec.

I've now updated this branch to include those fields, since facebook/react#13374 has been merged. However, for maximum correctness we should probably wait for that to be _released_ before releasing the corresponding type definitions. I'll update this notice once the relevant React DOM release happens.
Pull Request resolved: #6728

Reviewed By: fishythefish

Differential Revision: D9338459

Pulled By: mrkev

fbshipit-source-id: 263f4922e8a6765e4a2d6553b5af785bdc65a894
  • Loading branch information
@motiz88 @facebook-github-bot
motiz88 authored and facebook-github-bot committed Sep 5, 2018
1 parent 93d87db commit 2b3cee7
Show file tree
Hide file tree
Showing 6 changed files with 338 additions and 276 deletions.
47 changes: 47 additions & 0 deletions lib/dom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,8 @@ type ProgressEventHandler = (event: ProgressEvent) => mixed
type ProgressEventListener = {handleEvent: ProgressEventHandler} | ProgressEventHandler
type DragEventHandler = (event: DragEvent) => mixed
type DragEventListener = {handleEvent: DragEventHandler} | DragEventHandler
type PointerEventHandler = (event: PointerEvent) => mixed
type PointerEventListener = {handleEvent: PointerEventHandler} | PointerEventHandler
type AnimationEventHandler = (event: AnimationEvent) => mixed
type AnimationEventListener = {handleEvent: AnimationEventHandler} | AnimationEventHandler
type ClipboardEventHandler = (event: ClipboardEvent) => mixed
Expand All @@ -146,6 +148,7 @@ type TouchEventTypes = 'touchstart' | 'touchmove' | 'touchend' | 'touchcancel';
type WheelEventTypes = 'wheel';
type ProgressEventTypes = 'abort' | 'error' | 'load' | 'loadend' | 'loadstart' | 'progress' | 'timeout';
type DragEventTypes = 'drag' | 'dragend' | 'dragenter' | 'dragexit' | 'dragleave' | 'dragover' | 'dragstart' | 'drop';
type PointerEventTypes = 'pointerover' | 'pointerenter' | 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel' | 'pointerout' | 'pointerleave' | 'gotpointercapture' | 'lostpointercapture';
type AnimationEventTypes = 'animationstart' | 'animationend' | 'animationiteration';
type ClipboardEventTypes = 'clipboardchange' | 'cut' | 'copy' | 'paste';

Expand All @@ -163,6 +166,7 @@ declare class EventTarget {
addEventListener(type: WheelEventTypes, listener: WheelEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
addEventListener(type: ProgressEventTypes, listener: ProgressEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
addEventListener(type: DragEventTypes, listener: DragEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
addEventListener(type: PointerEventTypes, listener: PointerEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
addEventListener(type: AnimationEventTypes, listener: AnimationEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
addEventListener(type: ClipboardEventTypes, listener: ClipboardEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
addEventListener(type: string, listener: EventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
Expand All @@ -174,6 +178,7 @@ declare class EventTarget {
removeEventListener(type: WheelEventTypes, listener: WheelEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
removeEventListener(type: ProgressEventTypes, listener: ProgressEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
removeEventListener(type: DragEventTypes, listener: DragEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
removeEventListener(type: PointerEventTypes, listener: PointerEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
removeEventListener(type: AnimationEventTypes, listener: AnimationEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
removeEventListener(type: ClipboardEventTypes, listener: ClipboardEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
removeEventListener(type: string, listener: EventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
Expand All @@ -185,6 +190,7 @@ declare class EventTarget {
attachEvent?: (type: WheelEventTypes, listener: WheelEventListener) => void;
attachEvent?: (type: ProgressEventTypes, listener: ProgressEventListener) => void;
attachEvent?: (type: DragEventTypes, listener: DragEventListener) => void;
attachEvent?: (type: PointerEventTypes, listener: PointerEventListener) => void;
attachEvent?: (type: AnimationEventTypes, listener: AnimationEventListener) => void;
attachEvent?: (type: ClipboardEventTypes, listener: ClipboardEventListener) => void;
attachEvent?: (type: string, listener: EventListener) => void;
Expand All @@ -196,6 +202,7 @@ declare class EventTarget {
detachEvent?: (type: WheelEventTypes, listener: WheelEventListener) => void;
detachEvent?: (type: ProgressEventTypes, listener: ProgressEventListener) => void;
detachEvent?: (type: DragEventTypes, listener: DragEventListener) => void;
detachEvent?: (type: PointerEventTypes, listener: PointerEventListener) => void;
detachEvent?: (type: AnimationEventTypes, listener: AnimationEventListener) => void;
detachEvent?: (type: ClipboardEventTypes, listener: ClipboardEventListener) => void;
detachEvent?: (type: string, listener: EventListener) => void;
Expand Down Expand Up @@ -322,6 +329,36 @@ declare class DragEvent extends MouseEvent {
dataTransfer: ?DataTransfer; // readonly
}

type PointerEvent$PointerEventInit = MouseEvent$MouseEventInit & {
pointerId?: number;
width?: number;
height?: number;
pressure?: number;
tangentialPressure?: number;
tiltX?: number;
tiltY?: number;
twist?: number;
pointerType?: string;
isPrimary?: boolean;
};

declare class PointerEvent extends MouseEvent {
constructor(
typeArg: string,
pointerEventInit?: PointerEvent$PointerEventInit,
): void;
pointerId: number;
width: number;
height: number;
pressure: number;
tangentialPressure: number;
tiltX: number;
tiltY: number;
twist: number;
pointerType: string;
isPrimary: boolean;
}

declare class ProgressEvent extends Event {
lengthComputable: boolean;
loaded: number;
Expand Down Expand Up @@ -1523,6 +1560,7 @@ declare class HTMLElement extends Element {
onended: ?Function;
onerror: ?Function;
onfocus: ?Function;
ongotpointercapture: ?Function,
oninput: ?Function;
oninvalid: ?Function;
onkeydown: ?Function;
Expand All @@ -1532,6 +1570,7 @@ declare class HTMLElement extends Element {
onloadeddata: ?Function;
onloadedmetadata: ?Function;
onloadstart: ?Function;
onlostpointercapture: ?Function,
onmousedown: ?Function;
onmouseenter: ?Function;
onmouseleave: ?Function;
Expand All @@ -1543,6 +1582,14 @@ declare class HTMLElement extends Element {
onpause: ?Function;
onplay: ?Function;
onplaying: ?Function;
onpointercancel: ?Function,
onpointerdown: ?Function,
onpointerenter: ?Function,
onpointerleave: ?Function,
onpointermove: ?Function,
onpointerout: ?Function,
onpointerover: ?Function,
onpointerup: ?Function,
onprogress: ?Function;
onratechange: ?Function;
onreadystatechange: ?Function;
Expand Down
15 changes: 15 additions & 0 deletions lib/react-dom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,6 +224,21 @@ declare class SyntheticWheelEvent<
deltaZ: number;
}

declare class SyntheticPointerEvent<
+T: EventTarget = EventTarget,
> extends SyntheticMouseEvent<T> {
pointerId: number;
width: number;
height: number;
pressure: number;
tangentialPressure: number;
tiltX: number;
tiltY: number;
twist: number;
pointerType: string;
isPrimary: boolean;
}

declare class SyntheticTouchEvent<
+T: EventTarget = EventTarget,
> extends SyntheticUIEvent<T> {
Expand Down
4 changes: 2 additions & 2 deletions tests/bom/bom.exp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ with `HTMLFormElement` [2].
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

References:
<BUILTINS>/dom.js:617:36
617| createElement(tagName: 'input'): HTMLInputElement;
<BUILTINS>/dom.js:654:36
654| createElement(tagName: 'input'): HTMLInputElement;
^^^^^^^^^^^^^^^^ [1]
<BUILTINS>/bom.js:330:24
330| constructor(form?: HTMLFormElement): void;
Expand Down
Loading

0 comments on commit 2b3cee7

Please sign in to comment.