(callback: (a: A) => any, a: A): void;
- batchedUpdates(callback: () => any): void;
-
- classSet(cx: ClassSet): string;
- cloneWithProps(element: ReactElement
, props: P): ReactElement
;
-
- update(value: any[], spec: UpdateArraySpec): any[];
- update(value: {}, spec: UpdateSpec): any;
-
- // Development tools
- Perf: ReactPerf;
- TestUtils: ReactTestUtils;
- };
- }
-
//
// Browser Interfaces
// https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts
@@ -951,13 +744,3 @@ declare module React {
}
}
-declare module "react" {
- var exports: React.Exports;
- export = exports;
-}
-
-declare module "react/addons" {
- var exports: React.AddonsExports;
- export = exports;
-}
-
diff --git a/react/react-addons-0.13.0-tests.ts b/react/react-addons-0.13.0-tests.ts
index 6081a9824..fe5b772a3 100644
--- a/react/react-addons-0.13.0-tests.ts
+++ b/react/react-addons-0.13.0-tests.ts
@@ -1,15 +1,364 @@
-///
+///
import React = require("react/addons");
-var isImportant: boolean;
-var isRead: boolean;
-var classSet: React.ClassSet = {
- "message": true,
- "message-important": isImportant,
- "message-read": isRead
+interface Props {
+ hello: string;
+ world?: string;
+ foo: number;
+ bar: boolean;
+}
+
+interface State {
+ inputValue?: string;
+ seconds?: number;
+}
+
+interface Context {
+ someValue?: string;
+}
+
+interface ChildContext {
+ someOtherValue: string;
+}
+
+interface MyComponent extends React.Component {
+ reset(): void;
+}
+
+var props: Props = {
+ key: 42,
+ ref: "myComponent42",
+ hello: "world",
+ foo: 42,
+ bar: true
};
+
+var container: Element;
+var INPUT_REF: string = "input";
+
+//
+// Top-Level API
+// --------------------------------------------------------------------------
+
+var ClassicComponent: React.ClassicComponentClass =
+ React.createClass({
+ getDefaultProps: () => {
+ return {
+ hello: undefined,
+ world: "peace",
+ foo: undefined,
+ bar: undefined
+ };
+ },
+ getInitialState: () => {
+ return {
+ inputValue: this.context.someValue,
+ seconds: this.props.foo
+ };
+ },
+ reset: () => {
+ this.replaceState(this.getInitialState());
+ },
+ render: () => {
+ return React.DOM.div(null,
+ React.DOM.input({
+ ref: INPUT_REF,
+ value: this.state.inputValue
+ }));
+ }
+ });
+
+class ModernComponent extends React.Component
+ implements React.ChildContextProvider {
+
+ constructor(props: Props, context: Context) {
+ super(props, context);
+ this.state = {
+ inputValue: context.someValue,
+ seconds: props.foo
+ };
+ }
+
+ static propTypes: React.ValidationMap = {
+ foo: React.PropTypes.number
+ }
+
+ static contextTypes: React.ValidationMap = {
+ someValue: React.PropTypes.string
+ }
+
+ static childContextTypes: React.ValidationMap = {
+ someOtherValue: React.PropTypes.string
+ }
+
+ getChildContext() {
+ return {
+ someOtherValue: 'foo'
+ }
+ }
+
+ state = {
+ inputValue: this.context.someValue,
+ seconds: this.props.foo
+ }
+
+ reset() {
+ this.setState({
+ inputValue: this.context.someValue,
+ seconds: this.props.foo
+ });
+ }
+
+ render() {
+ return React.DOM.div(null,
+ React.DOM.input({
+ ref: INPUT_REF,
+ value: this.state.inputValue
+ }));
+ }
+}
+
+// React.createFactory
+var factory: React.Factory =
+ React.createFactory(ModernComponent);
+var factoryElement: React.ReactElement =
+ factory(props);
+
+var classicFactory: React.ClassicFactory =
+ React.createFactory(ClassicComponent);
+var classicFactoryElement: React.ReactClassicElement =
+ classicFactory(props);
+
+var domFactory: React.DOMFactory =
+ React.createFactory("foo");
+var domFactoryElement: React.ReactDOMElement =
+ domFactory();
+
+// React.createElement
+var element: React.ReactElement =
+ React.createElement(ModernComponent, props);
+var classicElement: React.ReactClassicElement =
+ React.createElement(ClassicComponent, props);
+var domElement: React.ReactHTMLElement =
+ React.createElement("div");
+
+// React.render
+var component: React.Component =
+ React.render(element, container);
+var classicComponent: React.ClassicComponent =
+ React.render(classicElement, container);
+var domComponent: React.DOMComponent =
+ React.render(domElement, container);
+
+// Other Top-Level API
+var unmounted: boolean = React.unmountComponentAtNode(container);
+var str: string = React.renderToString(element);
+var markup: string = React.renderToStaticMarkup(element);
+var notValid: boolean = React.isValidElement(props); // false
+var isValid = React.isValidElement(element); // true
+React.initializeTouchEvents(true);
+var domNode: Element = React.findDOMNode(component);
+domNode = React.findDOMNode(domNode);
+
+//
+// React Elements
+// --------------------------------------------------------------------------
+
+var type = element.type;
+var elementProps: Props = element.props;
+var key = element.key;
+var ref: string = element.ref;
+
+//
+// React Components
+// --------------------------------------------------------------------------
+
+var displayName: string = ClassicComponent.displayName;
+var defaultProps: Props = ClassicComponent.getDefaultProps();
+var propTypes: React.ValidationMap = ClassicComponent.propTypes;
+
+//
+// Component API
+// --------------------------------------------------------------------------
+
+// modern
+var componentState: State = component.state;
+component.setState({ inputValue: "!!!" });
+component.forceUpdate();
+
+// classic
+var htmlElement: Element = classicComponent.getDOMNode();
+var divElement: HTMLDivElement = classicComponent.getDOMNode();
+var isMounted: boolean = classicComponent.isMounted();
+classicComponent.setProps(elementProps);
+classicComponent.replaceProps(props);
+classicComponent.replaceState({ inputValue: "???", seconds: 60 });
+
+var inputRef: React.HTMLComponent =
+ component.refs[INPUT_REF];
+var value: string = inputRef.getDOMNode().value;
+
+var myComponent = component;
+myComponent.reset();
+
+//
+// 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 = {
+ propTypes: {
+ optionalArray: React.PropTypes.array,
+ optionalBool: React.PropTypes.bool,
+ optionalFunc: React.PropTypes.func,
+ optionalNumber: React.PropTypes.number,
+ optionalObject: React.PropTypes.object,
+ optionalString: React.PropTypes.string,
+ optionalNode: React.PropTypes.node,
+ optionalElement: React.PropTypes.element,
+ optionalMessage: React.PropTypes.instanceOf(Date),
+ optionalEnum: React.PropTypes.oneOf(["News", "Photos"]),
+ optionalUnion: React.PropTypes.oneOfType([
+ React.PropTypes.string,
+ React.PropTypes.number,
+ React.PropTypes.instanceOf(Date)
+ ]),
+ optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
+ optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
+ optionalObjectWithShape: React.PropTypes.shape({
+ color: React.PropTypes.string,
+ fontSize: React.PropTypes.number
+ }),
+ requiredFunc: React.PropTypes.func.isRequired,
+ requiredAny: React.PropTypes.any.isRequired,
+ customProp: function(props: any, propName: string, componentName: string) {
+ if (!/matchme/.test(props[propName])) {
+ return new Error("Validation failed!");
+ }
+ return null;
+ }
+ },
+ render: (): React.ReactHTMLElement => {
+ return null;
+ }
+};
+
+//
+// ContextTypes
+// --------------------------------------------------------------------------
+
+var ContextTypesSpecification: React.ComponentSpec = {
+ contextTypes: {
+ optionalArray: React.PropTypes.array,
+ optionalBool: React.PropTypes.bool,
+ optionalFunc: React.PropTypes.func,
+ optionalNumber: React.PropTypes.number,
+ optionalObject: React.PropTypes.object,
+ optionalString: React.PropTypes.string,
+ optionalNode: React.PropTypes.node,
+ optionalElement: React.PropTypes.element,
+ optionalMessage: React.PropTypes.instanceOf(Date),
+ optionalEnum: React.PropTypes.oneOf(["News", "Photos"]),
+ optionalUnion: React.PropTypes.oneOfType([
+ React.PropTypes.string,
+ React.PropTypes.number,
+ React.PropTypes.instanceOf(Date)
+ ]),
+ optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
+ optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
+ optionalObjectWithShape: React.PropTypes.shape({
+ color: React.PropTypes.string,
+ fontSize: React.PropTypes.number
+ }),
+ requiredFunc: React.PropTypes.func.isRequired,
+ requiredAny: React.PropTypes.any.isRequired,
+ customProp: function(props: any, propName: string, componentName: string) {
+ if (!/matchme/.test(props[propName])) {
+ return new Error("Validation failed!");
+ }
+ return null;
+ }
+ },
+ render: (): React.ReactHTMLElement => {
+ return null;
+ }
+};
+
+//
+// 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]);
+
+//
+// Example from http://facebook.github.io/react/
+// --------------------------------------------------------------------------
+
+interface TimerState {
+ secondsElapsed: number;
+}
+class Timer extends React.Component<{}, TimerState, {}> {
+ static state = {
+ secondsElapsed: 0
+ }
+ private _interval: number;
+ tick() {
+ this.setState({ secondsElapsed: this.state.secondsElapsed + 1 });
+ }
+ componentDidMount() {
+ var me = this;
+ this._interval = setInterval(() => me.tick(), 1000);
+ }
+ componentWillUnmount() {
+ clearInterval(this._interval);
+ }
+ render() {
+ return React.DOM.div(
+ null,
+ "Seconds Elapsed: ",
+ this.state.secondsElapsed
+ );
+ }
+}
+React.render(React.createElement(Timer), container);
+
+//
+// React.addons
+// --------------------------------------------------------------------------
+
var cx = React.addons.classSet;
-var classes: string = cx(classSet);
+var className: string = cx({ a: true, b: false, c: true });
+className = cx("a", null, "b");
//
// React.addons (Transitions)
@@ -31,38 +380,8 @@ React.createFactory(React.addons.CSSTransitionGroup)({
// React.addons.TestUtils
// --------------------------------------------------------------------------
-var that: React.Component;
-var node = React.findDOMNode(that.refs["input"]);
+var node: Element;
React.addons.TestUtils.Simulate.click(node);
React.addons.TestUtils.Simulate.change(node);
-React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"});
+React.addons.TestUtils.Simulate.keyDown(node, { key: "Enter" });
-interface GreetingProps {
- name: string;
-}
-interface GreetingState {
- morning: boolean;
-}
-interface Greeting extends React.Component {
-}
-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);
- }
-});
-
-var root = React.addons.TestUtils.renderIntoDocument(
- React.createElement(Greeting, {name: "John"}));
-var greeting = React.addons.TestUtils
- .findRenderedComponentWithType(root, Greeting);
-greeting.setState({
- morning: false
-});
diff --git a/react/react-addons-0.13.0.d.ts b/react/react-addons-0.13.0.d.ts
new file mode 100644
index 000000000..80afbb46d
--- /dev/null
+++ b/react/react-addons-0.13.0.d.ts
@@ -0,0 +1,997 @@
+// Type definitions for ReactWithAddons 0.13.0
+// Project: http://facebook.github.io/react/
+// Definitions by: Asana , AssureSign
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+declare module "react/addons" {
+ //
+ // React Elements
+ // ----------------------------------------------------------------------
+
+ interface ReactElementBase {
+ type: T;
+ props: P;
+ key: number | string;
+ ref: string;
+ }
+
+ interface ReactElement
+ extends ReactElementBase, P> {}
+
+ interface ReactClassicElement
+ extends ReactElementBase