From cd5f74818b09a87465f97f5352dcad515c11c47b Mon Sep 17 00:00:00 2001 From: Paul Sherman Date: Thu, 13 Dec 2018 12:17:13 -0600 Subject: [PATCH 1/3] Synthetic event types extend BaseSyntheticEvent --- types/react-native/index.d.ts | 18 +-------- types/react-native/test/index.tsx | 6 +++ types/react/index.d.ts | 64 ++++++++++++------------------- types/react/test/index.ts | 9 +++++ 4 files changed, 41 insertions(+), 56 deletions(-) diff --git a/types/react-native/index.d.ts b/types/react-native/index.d.ts index ae3127bc1d..6728d9cd52 100644 --- a/types/react-native/index.d.ts +++ b/types/react-native/index.d.ts @@ -359,23 +359,7 @@ type TaskProvider = () => Task; type NodeHandle = number; // Similar to React.SyntheticEvent except for nativeEvent -export interface NativeSyntheticEvent { - bubbles: boolean; - cancelable: boolean; - currentTarget: NodeHandle; - defaultPrevented: boolean; - eventPhase: number; - isTrusted: boolean; - nativeEvent: T; - isPropagationStopped(): boolean; - isDefaultPrevented(): boolean; - persist(): void; - preventDefault(): void; - stopPropagation(): void; - target: NodeHandle; - timeStamp: number; - type: string; -} +export interface NativeSyntheticEvent extends React.BaseSyntheticEvent {} export interface NativeTouchEvent { /** diff --git a/types/react-native/test/index.tsx b/types/react-native/test/index.tsx index 79c5a111ca..894a0b82d6 100644 --- a/types/react-native/test/index.tsx +++ b/types/react-native/test/index.tsx @@ -203,6 +203,12 @@ const testNativeSyntheticEvent = (e: NativeSyntheticEvent): voi e.nativeEvent; } +function eventHandler(e: T) {} + +function handler(e: GestureResponderEvent) { + eventHandler(e); +} + type ElementProps = C extends React.Component ? P : never; class CustomView extends React.Component { diff --git a/types/react/index.d.ts b/types/react/index.d.ts index 730268f974..ce4ed4261e 100644 --- a/types/react/index.d.ts +++ b/types/react/index.d.ts @@ -905,51 +905,46 @@ declare namespace React { // // Event System // ---------------------------------------------------------------------- - - interface SyntheticEvent { + interface BaseSyntheticEvent { + nativeEvent: E; + target: T; + currentTarget: C; bubbles: boolean; - /** - * A reference to the element on which the event listener is registered. - */ - currentTarget: EventTarget & T; cancelable: boolean; defaultPrevented: boolean; eventPhase: number; isTrusted: boolean; - nativeEvent: Event; preventDefault(): void; isDefaultPrevented(): boolean; stopPropagation(): void; isPropagationStopped(): boolean; persist(): void; - // If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239 - /** - * A reference to the element from which the event was originally dispatched. - * This might be a child element to the element on which the event listener is registered. - * - * @see currentTarget - */ - target: EventTarget; timeStamp: number; type: string; } - interface ClipboardEvent extends SyntheticEvent { + /** + * currentTarget - a reference to the element on which the event listener is registered. + * + * target - a reference to the element from which the event was originally dispatched. + * This might be a child element to the element on which the event listener is registered. + * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239 + */ + interface SyntheticEvent extends BaseSyntheticEvent {} + + interface ClipboardEvent extends SyntheticEvent { clipboardData: DataTransfer; - nativeEvent: NativeClipboardEvent; } - interface CompositionEvent extends SyntheticEvent { + interface CompositionEvent extends SyntheticEvent { data: string; - nativeEvent: NativeCompositionEvent; } - interface DragEvent extends MouseEvent { + interface DragEvent extends MouseEvent { dataTransfer: DataTransfer; - nativeEvent: NativeDragEvent; } - interface PointerEvent extends MouseEvent { + interface PointerEvent extends MouseEvent { pointerId: number; pressure: number; tiltX: number; @@ -958,11 +953,9 @@ declare namespace React { height: number; pointerType: 'mouse' | 'pen' | 'touch'; isPrimary: boolean; - nativeEvent: NativePointerEvent; } - interface FocusEvent extends SyntheticEvent { - nativeEvent: NativeFocusEvent; + interface FocusEvent extends SyntheticEvent { relatedTarget: EventTarget; target: EventTarget & T; } @@ -979,7 +972,7 @@ declare namespace React { target: EventTarget & T; } - interface KeyboardEvent extends SyntheticEvent { + interface KeyboardEvent extends SyntheticEvent { altKey: boolean; charCode: number; ctrlKey: boolean; @@ -995,13 +988,12 @@ declare namespace React { locale: string; location: number; metaKey: boolean; - nativeEvent: NativeKeyboardEvent; repeat: boolean; shiftKey: boolean; which: number; } - interface MouseEvent extends SyntheticEvent { + interface MouseEvent extends SyntheticEvent { altKey: boolean; button: number; buttons: number; @@ -1015,7 +1007,6 @@ declare namespace React { metaKey: boolean; movementX: number; movementY: number; - nativeEvent: NativeMouseEvent; pageX: number; pageY: number; relatedTarget: EventTarget; @@ -1024,7 +1015,7 @@ declare namespace React { shiftKey: boolean; } - interface TouchEvent extends SyntheticEvent { + interface TouchEvent extends SyntheticEvent { altKey: boolean; changedTouches: TouchList; ctrlKey: boolean; @@ -1033,36 +1024,31 @@ declare namespace React { */ getModifierState(key: string): boolean; metaKey: boolean; - nativeEvent: NativeTouchEvent; shiftKey: boolean; targetTouches: TouchList; touches: TouchList; } - interface UIEvent extends SyntheticEvent { + interface UIEvent extends SyntheticEvent { detail: number; - nativeEvent: NativeUIEvent; view: AbstractView; } - interface WheelEvent extends MouseEvent { + interface WheelEvent extends MouseEvent { deltaMode: number; deltaX: number; deltaY: number; deltaZ: number; - nativeEvent: NativeWheelEvent; } - interface AnimationEvent extends SyntheticEvent { + interface AnimationEvent extends SyntheticEvent { animationName: string; elapsedTime: number; - nativeEvent: NativeAnimationEvent; pseudoElement: string; } - interface TransitionEvent extends SyntheticEvent { + interface TransitionEvent extends SyntheticEvent { elapsedTime: number; - nativeEvent: NativeTransitionEvent; propertyName: string; pseudoElement: string; } diff --git a/types/react/test/index.ts b/types/react/test/index.ts index 8a4a2bd89b..a2c6ebab36 100644 --- a/types/react/test/index.ts +++ b/types/react/test/index.ts @@ -695,6 +695,15 @@ React.createFactory(TransitionGroup)({ component: "div" }); const newObjShallow = update(obj, { $merge: { b: 6, c: 7 } }); // => {a: 5, b: 6, c: 7} } +// +// Events +// -------------------------------------------------------------------------- +function eventHandler(e: T) {} + +function handler(e: React.MouseEvent) { + eventHandler(e); +} + // // The SyntheticEvent.target.value should be accessible for onChange // -------------------------------------------------------------------------- From e393817a6ccac1e6618feff61e1a211d14feba9d Mon Sep 17 00:00:00 2001 From: Paul Sherman Date: Thu, 13 Dec 2018 12:33:11 -0600 Subject: [PATCH 2/3] Add name to authors list --- types/react/index.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/types/react/index.d.ts b/types/react/index.d.ts index ce4ed4261e..c3138f95e5 100644 --- a/types/react/index.d.ts +++ b/types/react/index.d.ts @@ -19,6 +19,7 @@ // Martin Hochel // Frank Li // Jessica Franco +// Paul Sherman // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 From 826ce0f1ce1d1887d199986283630d6f63075ad5 Mon Sep 17 00:00:00 2001 From: Paul Sherman Date: Thu, 20 Dec 2018 09:30:03 -0600 Subject: [PATCH 3/3] Re-order T & C, E defaults to object --- types/react/index.d.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/types/react/index.d.ts b/types/react/index.d.ts index c3138f95e5..11d879b2ff 100644 --- a/types/react/index.d.ts +++ b/types/react/index.d.ts @@ -906,10 +906,11 @@ declare namespace React { // // Event System // ---------------------------------------------------------------------- - interface BaseSyntheticEvent { + // TODO: change any to unknown when moving to TS v3 + interface BaseSyntheticEvent { nativeEvent: E; - target: T; currentTarget: C; + target: T; bubbles: boolean; cancelable: boolean; defaultPrevented: boolean; @@ -931,7 +932,7 @@ declare namespace React { * This might be a child element to the element on which the event listener is registered. * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239 */ - interface SyntheticEvent extends BaseSyntheticEvent {} + interface SyntheticEvent extends BaseSyntheticEvent {} interface ClipboardEvent extends SyntheticEvent { clipboardData: DataTransfer;