diff --git a/react/react-addons-tests.ts b/react/react-addons-tests.ts index 059769bb9..7ce0fa23f 100644 --- a/react/react-addons-tests.ts +++ b/react/react-addons-tests.ts @@ -1,7 +1,36 @@ /// import React = require("react/addons"); -// TestUtils +var isImportant: boolean; +var isRead: boolean; +var classSet: React.ClassSet = { + "message": true, + "message-important": isImportant, + "message-read": isRead +}; +var cx = React.addons.classSet; +var classes: string = cx(classSet); + +// +// React.addons (Transitions) +// -------------------------------------------------------------------------- + +React.createFactory(React.addons.TransitionGroup)({ component: "div" }); +React.createFactory(React.addons.CSSTransitionGroup)({ + component: React.createClass({ + render: (): React.ReactElement => null + }), + childFactory: (c) => c, + transitionName: "transition", + transitionAppear: false, + transitionEnter: true, + transitionLeave: true +}); + +// +// React.addons.TestUtils +// -------------------------------------------------------------------------- + var that: React.CompositeComponent; var node = that.refs["input"].getDOMNode(); React.addons.TestUtils.Simulate.click(node); @@ -16,27 +45,24 @@ interface GreetingState { } 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; - return React.DOM.div(null, (me.state.morning ? "Hello" : "Goodbye "), me.props.name); + 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 root = React.addons.TestUtils.renderIntoDocument( + React.createElement(Greeting, {name: "John"})); +var greeting = React.addons.TestUtils + .findRenderedComponentWithType(root, Greeting); greeting.setState({ morning: false }); - -var isImportant: boolean; -var isRead: boolean; -var cx = React.addons.classSet; -var classes: string = cx({ - "message": true, - "message-important": isImportant, - "message-read": isRead -}); diff --git a/react/react-tests.ts b/react/react-tests.ts index 657155618..338e483a0 100644 --- a/react/react-tests.ts +++ b/react/react-tests.ts @@ -18,6 +18,8 @@ interface MyComponent extends React.CompositeComponent { } var props: Props = { + key: 42, + ref: "myComponent42", hello: "world", foo: 42, bar: true @@ -60,7 +62,7 @@ var reactClass: React.ComponentClass = React.createClass({ var reactElement: React.ReactElement = React.createElement(reactClass, props); -var reactFactory: React.Factory = +var reactFactory: React.ComponentFactory = React.createFactory(reactClass); var component: React.Component = @@ -116,7 +118,34 @@ var myComponent = compComponent; myComponent.reset(); // -// PropTypes +// Attributes +// -------------------------------------------------------------------------- + +var children = ["Hello world", [null], React.DOM.span(null)]; +var divStyle = { // CSSProperties + flex: "1 1 main-size", + backgroundImage: "url('hello.png')" +}; +var htmlAttr: React.HTMLAttributes = { + key: 36, + ref: "htmlComponent", + children: children, + className: "test-attr", + style: divStyle, + onClick: (event: React.MouseEvent) => { + event.preventDefault(); + event.stopPropagation(); + }, + dangerouslySetInnerHTML: { + __html: "STRONG" + } +}; +React.DOM.div(htmlAttr); +React.DOM.span(htmlAttr); +React.DOM.input(htmlAttr); + +// +// React.PropTypes // -------------------------------------------------------------------------- var PropTypesSpecification: React.ComponentSpec = { @@ -156,6 +185,18 @@ var PropTypesSpecification: React.ComponentSpec = { } }; +// +// React.Children +// -------------------------------------------------------------------------- + +var childMap: { [key: string]: number } = + React.Children.map(children, (child) => { return 42; }); +React.Children.forEach(children, (child) => {}); +var nChildren: number = React.Children.count(children); +var onlyChild = React.Children.only([null, [[["Hallo"], true]], false, { + test: null +}]); + // // Example from http://facebook.github.io/react/ // -------------------------------------------------------------------------- diff --git a/react/react.d.ts b/react/react.d.ts index 1356b1280..2b75bb3fd 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -19,7 +19,6 @@ declare module React { interface ReactHTMLElement extends ReactElement {} interface ReactSVGElement extends ReactElement {} - interface ComponentElement

extends ReactElement

{} // // React Nodes @@ -27,7 +26,10 @@ declare module React { // type ReactText = string | number; // type Fragment = ReactNode[]; - // type ReactNode = ReactElement | Fragment | ReactText; + // type ReactNode = ReactElement | Fragment | ReactText | KeyMap; + // interface KeyMap { + // [key: string]: ReactNode; + // } // // React Components @@ -49,13 +51,12 @@ declare module React { // ReactElement Factories // ---------------------------------------------------------------------- - interface Factory

{ + interface ComponentFactory

{ (props?: P, ...children: any/*ReactNode*/[]): ReactElement

; } - interface HTMLFactory extends Factory {} - interface SVGFactory extends Factory {} - interface ComponentFactory

extends Factory

{} + interface HTMLFactory extends ComponentFactory {} + interface SVGFactory extends ComponentFactory {} // // Top-Level API @@ -64,8 +65,8 @@ declare module React { interface TopLevelAPI { 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): Component

; + createFactory

(componentClass: ComponentClass

): ComponentFactory

; + render

(element: ReactElement

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

; unmountComponentAtNode(container: Element): boolean; renderToString(element: ReactElement): string; renderToStaticMarkup(element: ReactElement): string; @@ -85,8 +86,8 @@ declare module React { isMounted(): boolean; props: P; - setProps(nextProps: P, callback?: () => void): void; - replaceProps(nextProps: P, callback?: () => void): void; + setProps(nextProps: P, callback?: () => any): void; + replaceProps(nextProps: P, callback?: () => any): void; } interface DOMComponent

extends Component

{ @@ -98,9 +99,9 @@ declare module React { interface CompositeComponent extends Component

, ComponentSpec { state: S; - setState(nextState: S, callback?: () => void): void; - replaceState(nextState: S, callback?: () => void): void; - forceUpdate(callback?: () => void): void; + setState(nextState: S, callback?: () => any): void; + replaceState(nextState: S, callback?: () => any): void; + forceUpdate(callback?: () => any): void; refs: { [key: string]: Component }; @@ -241,7 +242,7 @@ declare module React { export interface ReactAttributes { children?: any; // ReactNode - key?: string; + key?: any; // number | string ref?: string; // Event Attributes @@ -287,7 +288,7 @@ declare module React { interface CSSProperties { columnCount?: number; - flex?: number; + flex?: any; // number | string flexGrow?: number; flexShrink?: number; fontWeight?: number; @@ -303,8 +304,6 @@ declare module React { // SVG-related properties fillOpacity?: number; strokeOpacity?: number; - - [key: string]: any; // number | string } interface HTMLAttributes extends ReactAttributes { @@ -638,29 +637,39 @@ declare module React { // React.Children // ---------------------------------------------------------------------- + // type Child = ReactElement | ReactText; + interface ReactChildren { - map(children: any/*ReactNode*/, fn: (child: any/*ReactNode*/) => T): { [key:string]: T }; - forEach(children: any/*ReactNode*/, fn: (child: any/*ReactNode*/) => any): void; + map(children: any/*ReactNode*/, fn: (child: any/*Child*/) => T): { [key:string]: T }; + forEach(children: any/*ReactNode*/, fn: (child: any/*Child*/) => any): void; count(children: any/*ReactNode*/): number; - only(children: any/*ReactNode*/): any; + only(children: any/*ReactNode*/): any/*Child*/; + } + + // + // React.addons + // ---------------------------------------------------------------------- + + interface ClassSet { + [key: string]: boolean; } // // React.addons (Transitions) // ---------------------------------------------------------------------- - interface CSSTransitionGroupProps { + interface TransitionGroupProps { + component?: any; // ReactType + childFactory?: (child: ReactElement) => ReactElement; + } + + interface CSSTransitionGroupProps extends TransitionGroupProps { transitionName: string; transitionAppear?: boolean; transitionEnter?: boolean; transitionLeave?: boolean; } - interface TransitionGroupProps { - component?: any; // ReactType - childFactory?: (child: ReactElement) => ReactElement; - } - interface CSSTransitionGroup extends ComponentClass {} interface TransitionGroup extends ComponentClass {} @@ -869,11 +878,11 @@ declare module React { PureRenderMixin: PureRenderMixin; TransitionGroup: TransitionGroup; - batchedUpdates(callback: (a: A, b: B) => void, a: A, b: B): void; - batchedUpdates(callback: (a: A) => void, a: A): void; - batchedUpdates(callback: () => void): void; + batchedUpdates(callback: (a: A, b: B) => any, a: A, b: B): void; + batchedUpdates(callback: (a: A) => any, a: A): void; + batchedUpdates(callback: () => any): void; - classSet(cx: { [key: string]: boolean }): string; + classSet(cx: ClassSet): string; cloneWithProps

(element: ReactElement

, props: P): ReactElement

; update(value: any[], spec: UpdateArraySpec): any[];