diff --git a/react/react-addons-tests.ts b/react/react-addons-tests.ts index 1de8255f1..059769bb9 100644 --- a/react/react-addons-tests.ts +++ b/react/react-addons-tests.ts @@ -2,8 +2,8 @@ import React = require("react/addons"); // TestUtils -var that: React.ComponentInstance; -var node = that.refs['input'].getDOMNode(); +var that: React.CompositeComponent; +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"}); @@ -14,20 +14,20 @@ interface GreetingProps { interface GreetingState { morning: boolean; } -interface GreetingInstance extends React.ComponentInstance { +interface Greeting extends React.CompositeComponent { } -var Greeting = React.createClass({displayName: 'Greeting', +var Greeting = React.createClass({displayName: "Greeting", getInitialState: function() { return {morning: true}; }, render: function() { - var me = this; + var me = this; return React.DOM.div(null, (me.state.morning ? "Hello" : "Goodbye "), me.props.name); } }); var root = React.addons.TestUtils.renderIntoDocument(React.createElement(Greeting, {name: "John"})); -var greeting = React.addons.TestUtils.findRenderedComponentWithType(root, Greeting); +var greeting = React.addons.TestUtils.findRenderedComponentWithType(root, Greeting); greeting.setState({ morning: false }); @@ -36,7 +36,7 @@ var isImportant: boolean; var isRead: boolean; var cx = React.addons.classSet; var classes: string = cx({ - 'message': true, - 'message-important': isImportant, - 'message-read': isRead + "message": true, + "message-important": isImportant, + "message-read": isRead }); diff --git a/react/react-tests.ts b/react/react-tests.ts index 0ca0e9f7b..657155618 100644 --- a/react/react-tests.ts +++ b/react/react-tests.ts @@ -13,7 +13,7 @@ interface State { seconds?: number; } -interface MyComponentInstance extends React.ComponentInstance { +interface MyComponent extends React.CompositeComponent { reset(): void; } @@ -63,7 +63,7 @@ var reactElement: React.ReactElement = var reactFactory: React.Factory = React.createFactory(reactClass); -var reactInstance: React.ElementInstance = +var component: React.Component = React.render(reactElement, container); var unmounted: boolean = React.unmountComponentAtNode(container); @@ -95,25 +95,25 @@ var propTypes: React.ValidationMap = reactClass.propTypes; // Component API // -------------------------------------------------------------------------- -var htmlElement: Element = reactInstance.getDOMNode(); -var divElement: HTMLDivElement = reactInstance.getDOMNode(); -var isMounted: boolean = reactInstance.isMounted(); -reactInstance.setProps(elementProps); -reactInstance.replaceProps(props); +var htmlElement: Element = component.getDOMNode(); +var divElement: HTMLDivElement = component.getDOMNode(); +var isMounted: boolean = component.isMounted(); +component.setProps(elementProps); +component.replaceProps(props); -var componentInstance: React.ComponentInstance = - >reactInstance; -var initialState: State = componentInstance.state; -componentInstance.setState({ inputValue: "!!!" }); -componentInstance.replaceState({ inputValue: "???", seconds: 60 }); -componentInstance.forceUpdate(); +var compComponent: React.CompositeComponent = + >component; +var initialState: State = compComponent.state; +compComponent.setState({ inputValue: "!!!" }); +compComponent.replaceState({ inputValue: "???", seconds: 60 }); +compComponent.forceUpdate(); -var inputRef: React.ElementInstance = - componentInstance.refs[INPUT_REF]; +var inputRef: React.HTMLComponent = + compComponent.refs[INPUT_REF]; var value: string = inputRef.getDOMNode().value; -var myComponentInstance = componentInstance; -myComponentInstance.reset(); +var myComponent = compComponent; +myComponent.reset(); // // PropTypes @@ -163,7 +163,7 @@ var PropTypesSpecification: React.ComponentSpec = { interface TimerState { secondsElapsed: number; } -interface TimerInstance extends React.ComponentInstance<{}, TimerState> { +interface Timer extends React.CompositeComponent<{}, TimerState> { } var Timer = React.createClass({ displayName: "Timer", @@ -171,7 +171,7 @@ var Timer = React.createClass({ return { secondsElapsed: 0 }; }, tick: () => { - var me = this; + var me = this; me.setState({ secondsElapsed: me.state.secondsElapsed + 1 }); @@ -183,7 +183,7 @@ var Timer = React.createClass({ clearInterval(this.interval); }, render: () => { - var me = this; + var me = this; return React.DOM.div( null, "Seconds Elapsed: ", diff --git a/react/react.d.ts b/react/react.d.ts index 5b19f032a..1356b1280 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -65,7 +65,7 @@ declare module React { createClass

(spec: ComponentSpec): ComponentClass

; createElement

(type: any/*ReactType*/, props: P, ...children: any/*ReactNode*/[]): ReactElement

; createFactory

(componentClass: ComponentClass

): Factory

; - render

(element: ReactElement

, container: Element, callback?: () => void): ElementInstance

; + render

(element: ReactElement

, container: Element, callback?: () => void): Component

; unmountComponentAtNode(container: Element): boolean; renderToString(element: ReactElement): string; renderToStaticMarkup(element: ReactElement): string; @@ -77,7 +77,7 @@ declare module React { // Component API // ---------------------------------------------------------------------- - interface ElementInstance

{ + interface Component

{ // Use this overload to cast the returned element to a more specific type. // Eg: var name = this.refs['name'].getDOMNode().value; getDOMNode(): TElement; @@ -88,14 +88,21 @@ declare module React { setProps(nextProps: P, callback?: () => void): void; replaceProps(nextProps: P, callback?: () => void): void; } + + interface DOMComponent

extends Component

{ + tagName: string; + } + + interface HTMLComponent extends DOMComponent {} + interface SVGComponent extends DOMComponent {} - interface ComponentInstance extends ElementInstance

{ + interface CompositeComponent extends Component

, ComponentSpec { state: S; setState(nextState: S, callback?: () => void): void; replaceState(nextState: S, callback?: () => void): void; forceUpdate(callback?: () => void): void; refs: { - [key: string]: ElementInstance + [key: string]: Component }; } @@ -272,6 +279,10 @@ declare module React { onTouchStart?: TouchEventHandler; onScroll?: UIEventHandler; onWheel?: WheelEventHandler; + + dangerouslySetInnerHTML?: { + __html: string + }; } interface CSSProperties { @@ -298,6 +309,7 @@ declare module React { interface HTMLAttributes extends ReactAttributes { accept?: string; + acceptCharset?: string; accessKey?: string; action?: string; allowFullScreen?: boolean; @@ -311,6 +323,7 @@ declare module React { cellSpacing?: any; // number | string charSet?: string; checked?: boolean; + classID?: string; className?: string; cols?: number; colSpan?: number; @@ -343,8 +356,10 @@ declare module React { lang?: string; list?: string; loop?: boolean; + manifest?: string; max?: any; // number | string maxLength?: number; + media?: string; mediaGroup?: string; method?: string; min?: any; // number | string @@ -373,6 +388,7 @@ declare module React { selected?: boolean; shape?: string; size?: number; + sizes?: string; span?: number; spellCheck?: boolean; src?: string; @@ -397,11 +413,6 @@ declare module React { itemProp?: string; itemScope?: boolean; itemType?: string; - - // React-specific Attributes - dangerouslySetInnerHTML?: { - __html: string - }; } interface SVGAttributes extends ReactAttributes { @@ -532,6 +543,7 @@ declare module React { output: HTMLFactory; p: HTMLFactory; param: HTMLFactory; + picture: HTMLFactory; pre: HTMLFactory; progress: HTMLFactory; q: HTMLFactory; @@ -724,34 +736,41 @@ declare module React { // React.addons.TestUtils // ---------------------------------------------------------------------- - interface MockedComponent { - render: { - mockImplementation(impl: () => any): void; - }; + interface MockedComponentClass { + new(): any; } interface ReactTestUtils { Simulate: Simulate; - renderIntoDocument

(element: ReactElement

): ElementInstance

; - mockComponent(mocked: MockedComponent, mockTagName?: string): ReactTestUtils; + renderIntoDocument

(element: ReactElement

): Component

; + renderIntoDocument>(element: ReactElement): C; + + mockComponent(mocked: MockedComponentClass, mockTagName?: string): ReactTestUtils; isElementOfType(element: ReactElement, type: any/*ReactType*/): boolean; - isDOMComponent(instance: ElementInstance): boolean; - isCompositeComponent(instance: ElementInstance): boolean; - isCompositeComponentWithType(instance: ElementInstance, type: ComponentClass): boolean; - isTextComponent(instance: ElementInstance): boolean; + isDOMComponent(instance: Component): boolean; + isCompositeComponent(instance: Component): boolean; + isCompositeComponentWithType(instance: Component, type: ComponentClass): boolean; + isTextComponent(instance: Component): boolean; - findAllInRenderedTree(tree: ElementInstance, fn: (i: ElementInstance) => boolean): ElementInstance; + findAllInRenderedTree(tree: Component, fn: (i: Component) => boolean): Component; - scryRenderedDOMComponentsWithClass(tree: ElementInstance, className: string): ElementInstance[]; - findRenderedDOMComponentWithClass(tree: ElementInstance, className: string): ElementInstance; + scryRenderedDOMComponentsWithClass(tree: Component, className: string): DOMComponent[]; + findRenderedDOMComponentWithClass(tree: Component, className: string): DOMComponent; - scryRenderedDOMComponentsWithTag(tree: ElementInstance, tagName: string): ElementInstance[]; - findRenderedDOMComponentWithTag(tree: ElementInstance, tagName: string): ElementInstance; + scryRenderedDOMComponentsWithTag(tree: Component, tagName: string): DOMComponent[]; + findRenderedDOMComponentWithTag(tree: Component, tagName: string): DOMComponent; - scryRenderedComponentsWithType

(tree: ElementInstance, type: ComponentClass

): ElementInstance

[]; - findRenderedComponentWithType

(tree: ElementInstance, type: ComponentClass

): ElementInstance

; + scryRenderedComponentsWithType( + tree: Component, type: ComponentClass

): CompositeComponent[]; + scryRenderedComponentsWithType>( + tree: Component, type: ComponentClass): C[]; + + findRenderedComponentWithType( + tree: Component, type: ComponentClass

): CompositeComponent; + findRenderedComponentWithType>( + tree: Component, type: ComponentClass): C; } interface SyntheticEventData { @@ -790,7 +809,7 @@ declare module React { interface EventSimulator { (element: Element, eventData?: SyntheticEventData): void; - (descriptor: ElementInstance, eventData?: SyntheticEventData): void; + (descriptor: Component, eventData?: SyntheticEventData): void; } interface Simulate {