diff --git a/types/react-native/index.d.ts b/types/react-native/index.d.ts index 2c8575b211..aaa12ce96e 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 f3dfb45b51..6e6630fe14 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..11d879b2ff 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 @@ -905,51 +906,47 @@ declare namespace React { // // Event System // ---------------------------------------------------------------------- - - interface SyntheticEvent { + // TODO: change any to unknown when moving to TS v3 + interface BaseSyntheticEvent { + nativeEvent: E; + currentTarget: C; + target: T; 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 +955,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 +974,7 @@ declare namespace React { target: EventTarget & T; } - interface KeyboardEvent extends SyntheticEvent { + interface KeyboardEvent extends SyntheticEvent { altKey: boolean; charCode: number; ctrlKey: boolean; @@ -995,13 +990,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 +1009,6 @@ declare namespace React { metaKey: boolean; movementX: number; movementY: number; - nativeEvent: NativeMouseEvent; pageX: number; pageY: number; relatedTarget: EventTarget; @@ -1024,7 +1017,7 @@ declare namespace React { shiftKey: boolean; } - interface TouchEvent extends SyntheticEvent { + interface TouchEvent extends SyntheticEvent { altKey: boolean; changedTouches: TouchList; ctrlKey: boolean; @@ -1033,36 +1026,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 // --------------------------------------------------------------------------