From c01768cc277b20bd620eed5e7dfb293abfe64953 Mon Sep 17 00:00:00 2001 From: Austen Talbot Date: Wed, 1 Oct 2014 18:38:22 -0700 Subject: [PATCH] Added type definitions for react-addons --- react-addons/react-addons-tests.ts | 26 +++++ react-addons/react-addons.d.ts | 161 ++++++++++++++++++++++++++++- react/react.d.ts | 28 ++--- 3 files changed, 199 insertions(+), 16 deletions(-) diff --git a/react-addons/react-addons-tests.ts b/react-addons/react-addons-tests.ts index e9248854af..cdfae12664 100644 --- a/react-addons/react-addons-tests.ts +++ b/react-addons/react-addons-tests.ts @@ -105,3 +105,29 @@ var Timer = React.createClass({displayName: 'Timer', }); React.renderComponent(Timer(null), mountNode); + +// TestUtils +var that: React.Component; +var node = that.refs['input'].getDOMNode(); +React.addons.TestUtils.Simulate.click(node); +React.addons.TestUtils.Simulate.change(node); +React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"}); + +var GoodbyeMessage = React.createClass({displayName: 'GoodbyeMessage', + render: function() { + return React.DOM.div(null, "Goodbye ", (>this).props.name); + } +}); +React.addons.TestUtils.renderIntoDocument(GoodbyeMessage({name: "John"})); + +var isImportant: boolean; +var isRead: boolean; +var cx = React.addons.classSet; +var classes = cx({ + 'message': true, + 'message-important': isImportant, + 'message-read': isRead +}); + + + diff --git a/react-addons/react-addons.d.ts b/react-addons/react-addons.d.ts index 301e839beb..2e13445b9d 100644 --- a/react-addons/react-addons.d.ts +++ b/react-addons/react-addons.d.ts @@ -10,5 +10,162 @@ declare module "react/addons" { } declare module React { - export var addons: {}; -} \ No newline at end of file + export var addons: { + classSet: (classes: {[key: string]: boolean}) => string; + cloneWithProps: CloneWithProps; + CSSTransitionGroup: Factory; + LinkedStateMixin: LinkedStateMixin; + Perf: Perf; + PureRenderMixin: Mixin; + TestUtils: TestUtils; + TransitionGroup: Factory; + update(object: Object, changes: Object): Object; + }; + + export interface CloneWithProps

{ + (instance: Descriptor

, extraProps?: P): Descriptor

; + } + + export interface ReactLink { + value: T; + requestChange(newValue: T): void; + } + + export interface LinkedStateMixin extends Mixin { + linkState(key: string): ReactLink; + } + + export interface ComponentPerfContext { + current: string; + owner: string; + } + + export interface CSSTransitionGroupProps { + transitionName: string; + } + + export interface TransitionsSpecification extends Specification { + componentWillEnter?(callback: () => void): void; + componentDidEnter?(): void; + componentWillLeave?(callback: () => void): void; + componentDidLeave?(): void; + } + + export interface NumericPerfContext { + [key: string]: number; + } + + export interface Measurements { + exclusive: NumericPerfContext; + inclusive: NumericPerfContext; + render: NumericPerfContext; + counts: NumericPerfContext; + writes: NumericPerfContext; + displayNames: { + [key: string]: ComponentPerfContext; + }; + totalTime: number; + } + + export interface Perf { + start(): void; + stop(): void; + printInclusive(measurements: Measurements[]): void; + printExclusive(measurements: Measurements[]): void; + printWasted(measurements: Measurements[]): void; + printDOM(measurements: Measurements[]): void; + getLastMeasurements(): Measurements[]; + } + + export interface TestUtils { + Simulate: Simulate; + renderIntoDocument(instance: Descriptor): Descriptor; + mockComponent(componentClass: Factory, mockTagName?: string): TestUtils; + isDescriptorOfType(descriptor: Descriptor, componentClass: Factory): boolean; + isDOMComponent(instance: Descriptor): boolean; + isCompositeComponent(instance: Descriptor): boolean; + isCompositeComponentWithType(instance: Descriptor, componentClass: Function): boolean; + isTextComponent(instance: Descriptor): boolean; + findAllInRenderedTree(tree: Descriptor, test: Function): Descriptor[]; + scryRenderedDOMComponentsWithClass(tree: Descriptor, className: string): Descriptor[]; + findRenderedDOMComponentWithClass(tree: Descriptor, className: string): Descriptor; + scryRenderedDOMComponentsWithTag(tree: Descriptor, className: string): Descriptor[]; + findRenderedDOMComponentWithTag(tree: Descriptor, tagName: string): Descriptor; + scryFindRenderedComponentsWithTag(tree: Descriptor, componentClass: Function): Descriptor[]; + findRenderedComponentWithType(tree: Descriptor, componentClass: Function): Descriptor; + } + + export interface SyntheticEventData { + altKey?: boolean; + button?: number; + buttons?: number; + clientX?: number; + clientY?: number; + changedTouches?: TouchList; + charCode?: boolean; + clipboardData?: DataTransfer; + ctrlKey?: boolean; + deltaMode?: number; + deltaX?: number; + deltaY?: number; + deltaZ?: number; + detail?: number; + getModifierState?(key: string): boolean; + key?: string; + keyCode?: number; + locale?: string; + location?: number; + metaKey?: boolean; + pageX?: number; + pageY?: number; + relatedTarget?: EventTarget; + repeat?: boolean; + screenX?: number; + screenY?: number; + shiftKey?: boolean; + targetTouches?: TouchList; + touches?: TouchList; + view?: AbstractView; + which?: number; + } + + export interface EventSimulator { + (element: Element, eventData?: SyntheticEventData): void; + } + + export interface Simulate { + blur: EventSimulator; + change: EventSimulator; + click: EventSimulator; + cut: EventSimulator; + doubleClick: EventSimulator; + drag: EventSimulator; + dragEnd: EventSimulator; + dragEnter: EventSimulator; + dragExit: EventSimulator; + dragLeave: EventSimulator; + dragOver: EventSimulator; + dragStart: EventSimulator; + drop: EventSimulator; + focus: EventSimulator; + input: EventSimulator; + keyDown: EventSimulator; + keyPress: EventSimulator; + keyUp: EventSimulator; + mouseDown: EventSimulator; + mouseEnter: EventSimulator; + mouseLeave: EventSimulator; + mouseMove: EventSimulator; + mouseOut: EventSimulator; + mouseOver: EventSimulator; + mouseUp: EventSimulator; + paste: EventSimulator; + scroll: EventSimulator; + submit: EventSimulator; + touchCancel: EventSimulator; + touchEnd: EventSimulator; + touchMove: EventSimulator; + touchStart: EventSimulator; + wheel: EventSimulator; + } +} diff --git a/react/react.d.ts b/react/react.d.ts index dca769d6cc..507a18f399 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -54,8 +54,8 @@ declare module React { render(): Descriptor; } - interface DomReferencer { - getDomNode(): Element; + export interface DomReferencer { + getDOMNode(): Element; } export interface Component extends DomReferencer { @@ -73,19 +73,19 @@ declare module React { replaceProps(nextProps: P, callback?: () => void): void; } - interface Constructable { + export interface Constructable { new(): any; } - interface Validator

{ + export interface Validator

{ (props: P, propName: string, componentName: string): Error; } - interface Requireable

extends Validator

{ + export interface Requireable

extends Validator

{ isRequired: Validator

; } - interface ValidationMap

{ + export interface ValidationMap

{ [key: string]: Validator

; } @@ -116,12 +116,12 @@ declare module React { // Browser Interfaces // Taken from https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts - interface AbstractView { + export interface AbstractView { styleMedia: StyleMedia; document: Document; } - interface Touch { + export interface Touch { identifier: number; target: EventTarget; screenX: number; @@ -132,7 +132,7 @@ declare module React { pageY: number; } - interface TouchList { + export interface TouchList { [index: number]: Touch; length: number; item(index: number): Touch; @@ -218,7 +218,7 @@ declare module React { } // Attributes - interface EventAttributes { + export interface EventAttributes { onCopy?: (event: ClipboardEvent) => void; onCut?: (event: ClipboardEvent) => void; onPaste?: (event: ClipboardEvent) => void; @@ -255,7 +255,7 @@ declare module React { onWheel?: (event: WheelEvent) => void; } - interface DomAttributes extends EventAttributes { + export interface DomAttributes extends EventAttributes { // HTML Attributes accept?: any; accessKey?: any; @@ -351,7 +351,7 @@ declare module React { wmode?: any; } - interface SvgAttributes extends EventAttributes { + export interface SvgAttributes extends EventAttributes { cx?: any; cy?: any; d?: any; @@ -397,10 +397,10 @@ declare module React { y?: any; } - interface DomElement extends Factory { + export interface DomElement extends Factory { } - interface SvgElement extends Factory { + export interface SvgElement extends Factory { } export var DOM: {