diff --git a/react/react-addons-css-transition-group.d.ts b/react/react-addons-css-transition-group.d.ts
index bcc347124..fb1d1ab83 100644
--- a/react/react-addons-css-transition-group.d.ts
+++ b/react/react-addons-css-transition-group.d.ts
@@ -7,20 +7,22 @@
///
declare namespace __React {
+ interface CSSTransitionGroupProps extends TransitionGroupProps {
+ transitionName: string;
+ transitionAppear?: boolean;
+ transitionEnter?: boolean;
+ transitionLeave?: boolean;
+ }
+
+ type CSSTransitionGroup = ComponentClass;
+
namespace __Addons {
- interface CSSTransitionGroupProps extends TransitionGroupProps {
- transitionName: string;
- transitionAppear?: boolean;
- transitionEnter?: boolean;
- transitionLeave?: boolean;
- }
-
- type CSSTransitionGroup = ComponentClass;
+ export var CSSTransitionGroup: __React.CSSTransitionGroup;
}
}
declare module "react-addons-css-transition-group" {
- var CSSTransitionGroup: __React.__Addons.CSSTransitionGroup;
- type CSSTransitionGroup = __React.__Addons.CSSTransitionGroup;
+ var CSSTransitionGroup: __React.CSSTransitionGroup;
+ type CSSTransitionGroup = __React.CSSTransitionGroup;
export = CSSTransitionGroup;
}
diff --git a/react/react-addons-linked-state-mixin.d.ts b/react/react-addons-linked-state-mixin.d.ts
index ce1022cd8..5cee5fd5d 100644
--- a/react/react-addons-linked-state-mixin.d.ts
+++ b/react/react-addons-linked-state-mixin.d.ts
@@ -6,20 +6,22 @@
///
declare namespace __React {
- namespace __Addons {
- interface ReactLink {
- value: T;
- requestChange(newValue: T): void;
- }
+ interface ReactLink {
+ value: T;
+ requestChange(newValue: T): void;
+ }
+
+ interface LinkedStateMixin extends Mixin {
+ linkState(key: string): ReactLink;
+ }
- interface LinkedStateMixin extends Mixin {
- linkState(key: string): ReactLink;
- }
+ namespace __Addons {
+ export var LinkedStateMixin: LinkedStateMixin;
}
}
declare module "react-addons-linked-state-mixin" {
- var LinkedStateMixin: __React.__Addons.LinkedStateMixin;
- type LinkedStateMixin = __React.__Addons.LinkedStateMixin;
+ var LinkedStateMixin: __React.LinkedStateMixin;
+ type LinkedStateMixin = __React.LinkedStateMixin;
export = LinkedStateMixin;
}
diff --git a/react/react-addons-perf.d.ts b/react/react-addons-perf.d.ts
index 7ca369db8..22a9381ef 100644
--- a/react/react-addons-perf.d.ts
+++ b/react/react-addons-perf.d.ts
@@ -6,28 +6,28 @@
///
declare namespace __React {
+ interface ComponentPerfContext {
+ current: string;
+ owner: string;
+ }
+
+ interface NumericPerfContext {
+ [key: string]: number;
+ }
+
+ interface Measurements {
+ exclusive: NumericPerfContext;
+ inclusive: NumericPerfContext;
+ render: NumericPerfContext;
+ counts: NumericPerfContext;
+ writes: NumericPerfContext;
+ displayNames: {
+ [key: string]: ComponentPerfContext;
+ };
+ totalTime: number;
+ }
+
namespace __Addons {
- interface ComponentPerfContext {
- current: string;
- owner: string;
- }
-
- interface NumericPerfContext {
- [key: string]: number;
- }
-
- interface Measurements {
- exclusive: NumericPerfContext;
- inclusive: NumericPerfContext;
- render: NumericPerfContext;
- counts: NumericPerfContext;
- writes: NumericPerfContext;
- displayNames: {
- [key: string]: ComponentPerfContext;
- };
- totalTime: number;
- }
-
namespace Perf {
export function start(): void;
export function stop(): void;
diff --git a/react/react-addons-pure-render-mixin.d.ts b/react/react-addons-pure-render-mixin.d.ts
index cc73a714d..83b4aee3d 100644
--- a/react/react-addons-pure-render-mixin.d.ts
+++ b/react/react-addons-pure-render-mixin.d.ts
@@ -6,13 +6,15 @@
///
declare namespace __React {
+ interface PureRenderMixin extends Mixin {}
+
namespace __Addons {
- interface PureRenderMixin extends Mixin {}
+ export var PureRenderMixin: PureRenderMixin;
}
}
declare module "react-addons-pure-render-mixin" {
- var PureRenderMixin: __React.__Addons.PureRenderMixin;
- type PureRenderMixin = __React.__Addons.PureRenderMixin;
+ var PureRenderMixin: __React.PureRenderMixin;
+ type PureRenderMixin = __React.PureRenderMixin;
export = PureRenderMixin;
}
diff --git a/react/react-addons-test-utils.d.ts b/react/react-addons-test-utils.d.ts
index 13f433657..1362f64c1 100644
--- a/react/react-addons-test-utils.d.ts
+++ b/react/react-addons-test-utils.d.ts
@@ -6,57 +6,57 @@
///
declare namespace __React {
- namespace __Addons {
- 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;
- }
+ 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;
+ }
+
+ interface EventSimulator {
+ (element: Element, eventData?: SyntheticEventData): void;
+ (component: Component, eventData?: SyntheticEventData): void;
+ }
- interface EventSimulator {
- (element: Element, eventData?: SyntheticEventData): void;
- (component: Component, eventData?: SyntheticEventData): void;
- }
-
- interface MockedComponentClass {
- new(): any;
- }
-
- class ShallowRenderer {
- getRenderOutput>(): E;
- getRenderOutput(): ReactElement;
- render(element: ReactElement, context?: any): void;
- unmount(): void;
- }
+ interface MockedComponentClass {
+ new(): any;
+ }
+
+ class ShallowRenderer {
+ getRenderOutput>(): E;
+ getRenderOutput(): ReactElement;
+ render(element: ReactElement, context?: any): void;
+ unmount(): void;
+ }
+ namespace __Addons {
namespace TestUtils {
namespace Simulate {
export var blur: EventSimulator;
diff --git a/react/react-addons-tests.ts b/react/react-addons-tests.ts
deleted file mode 100644
index 72f7a4f4e..000000000
--- a/react/react-addons-tests.ts
+++ /dev/null
@@ -1,416 +0,0 @@
-///
-import React = require("react/addons");
-
-import TestUtils = React.addons.TestUtils;
-
-interface Props extends React.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;
-
-//
-// 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
- };
- },
- // NOTE https://github.com/borisyankov/DefinitelyTyped/pull/5590
- // reset: () => {
- // this.replaceState(this.getInitialState());
- // },
- render: () => {
- return React.DOM.div(null,
- React.DOM.input({
- ref: input => this._input = input,
- value: this.state.inputValue
- }));
- }
- });
-
-class ModernComponent extends React.Component
- implements React.ChildContextProvider {
-
- static propTypes: React.ValidationMap = {
- foo: React.PropTypes.number
- }
-
- static contextTypes: React.ValidationMap = {
- someValue: React.PropTypes.string
- }
-
- static childContextTypes: React.ValidationMap = {
- someOtherValue: React.PropTypes.string
- }
-
- static defaultProps: Props;
-
- context: Context;
-
- getChildContext() {
- return {
- someOtherValue: 'foo'
- }
- }
-
- state = {
- inputValue: this.context.someValue,
- seconds: this.props.foo
- }
-
- reset() {
- this.setState({
- inputValue: this.context.someValue,
- seconds: this.props.foo
- });
- }
-
- private _input: React.HTMLComponent;
-
- render() {
- return React.DOM.div(null,
- React.DOM.input({
- ref: input => this._input = input,
- 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.ClassicElement =
- classicFactory(props);
-
-var domFactory: React.DOMFactory =
- React.createFactory("foo");
-var domFactoryElement: React.DOMElement =
- domFactory();
-
-// React.createElement
-var element: React.ReactElement =
- React.createElement(ModernComponent, props);
-var classicElement: React.ClassicElement =
- React.createElement(ClassicComponent, props);
-var domElement: React.HTMLElement =
- React.createElement("div");
-
-// React.cloneElement
-var clonedElement: React.ReactElement =
- React.cloneElement(element, props);
-var clonedClassicElement: React.ClassicElement =
- React.cloneElement(classicElement, props);
-var clonedDOMElement: React.HTMLElement =
- React.cloneElement(domElement);
-
-// 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;
-
-//
-// 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 myComponent = component;
-myComponent.reset();
-
-//
-// Attributes
-// --------------------------------------------------------------------------
-
-var children: any[] = ["Hello world", [null], React.DOM.span(null)];
-var divStyle: React.CSSProperties = { // 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.DOM.svg({ viewBox: "0 0 48 48" },
- React.DOM.rect({
- x: 22,
- y: 10,
- width: 4,
- height: 28
- }),
- React.DOM.rect({
- x: 10,
- y: 22,
- width: 28,
- height: 4
- }));
-
-//
-// 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.ReactElement => {
- 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.ReactElement => {
- return null;
- }
-};
-
-//
-// React.Children
-// --------------------------------------------------------------------------
-
-var mappedChildrenArray: 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]);
-var childrenToArray: React.ReactChild[] = React.Children.toArray(children);
-
-//
-// Example from http://facebook.github.io/react/
-// --------------------------------------------------------------------------
-
-interface TimerState {
- secondsElapsed: number;
-}
-class Timer extends React.Component, TimerState> {
- state = {
- secondsElapsed: 0
- }
- private _interval: number;
- tick() {
- this.setState((prevState, props) => ({
- secondsElapsed: prevState.secondsElapsed + 1
- }));
- }
- componentDidMount() {
- this._interval = setInterval(() => this.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 className: string = cx({ a: true, b: false, c: true });
-className = cx("a", null, "b");
-
-React.addons.createFragment({
- a: React.DOM.div(),
- b: ["a", false, React.createElement("span")]
-});
-
-//
-// 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 node: Element;
-TestUtils.Simulate.click(node);
-TestUtils.Simulate.change(node);
-TestUtils.Simulate.keyDown(node, { key: "Enter" });
-
-var renderer: React.ShallowRenderer =
- TestUtils.createRenderer();
-renderer.render(React.createElement(Timer));
-var output: React.ReactElement> =
- renderer.getRenderOutput();
diff --git a/react/react-addons-transition-group.d.ts b/react/react-addons-transition-group.d.ts
index fac2d76bc..728c52aa8 100644
--- a/react/react-addons-transition-group.d.ts
+++ b/react/react-addons-transition-group.d.ts
@@ -6,18 +6,21 @@
///
declare namespace __React {
+
+ interface TransitionGroupProps {
+ component?: ReactType;
+ childFactory?: (child: ReactElement) => ReactElement;
+ }
+
+ type TransitionGroup = ComponentClass;
+
namespace __Addons {
- interface TransitionGroupProps {
- component?: ReactType;
- childFactory?: (child: ReactElement) => ReactElement;
- }
-
- type TransitionGroup = ComponentClass;
+ export var TransitionGroup: __React.TransitionGroup;
}
}
declare module "react-addons-transition-group" {
- var TransitionGroup: __React.__Addons.TransitionGroup;
- type TransitionGroup = __React.__Addons.TransitionGroup;
+ var TransitionGroup: __React.TransitionGroup;
+ type TransitionGroup = __React.TransitionGroup;
export = TransitionGroup;
}
\ No newline at end of file
diff --git a/react/react-addons-update.d.ts b/react/react-addons-update.d.ts
index ece9e87c7..2140e2908 100644
--- a/react/react-addons-update.d.ts
+++ b/react/react-addons-update.d.ts
@@ -6,25 +6,25 @@
///
declare namespace __React {
+ interface UpdateSpecCommand {
+ $set?: any;
+ $merge?: {};
+ $apply?(value: any): any;
+ }
+
+ interface UpdateSpecPath {
+ [key: string]: UpdateSpec;
+ }
+
+ type UpdateSpec = UpdateSpecCommand | UpdateSpecPath;
+
+ interface UpdateArraySpec extends UpdateSpecCommand {
+ $push?: any[];
+ $unshift?: any[];
+ $splice?: any[][];
+ }
+
namespace __Addons {
- interface UpdateSpecCommand {
- $set?: any;
- $merge?: {};
- $apply?(value: any): any;
- }
-
- interface UpdateSpecPath {
- [key: string]: UpdateSpec;
- }
-
- type UpdateSpec = UpdateSpecCommand | UpdateSpecPath;
-
- interface UpdateArraySpec extends UpdateSpecCommand {
- $push?: any[];
- $unshift?: any[];
- $splice?: any[][];
- }
-
export function update(value: any[], spec: UpdateArraySpec): any[];
export function update(value: {}, spec: UpdateSpec): any;
}
diff --git a/react/react-global-tests.ts b/react/react-global-tests.ts
index bf3f68fa4..18596358b 100644
--- a/react/react-global-tests.ts
+++ b/react/react-global-tests.ts
@@ -148,21 +148,22 @@ var clonedDOMElement: React.HTMLElement =
// React.render
var component: React.Component =
- React.render(element, container);
+ ReactDOM.render(element, container);
var classicComponent: React.ClassicComponent =
- React.render(classicElement, container);
+ ReactDOM.render(classicElement, container);
var domComponent: React.DOMComponent =
- React.render(domElement, container);
+ ReactDOM.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 unmounted: boolean = ReactDOM.unmountComponentAtNode(container);
+
+// ReactDOMServer is not supported in global version
+// var str: string = ReactDOMServer.renderToString(element);
+// var markup: string = ReactDOMServer.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);
+var domNode: Element = ReactDOM.findDOMNode(component);
+domNode = ReactDOM.findDOMNode(domNode);
//
// React Elements
@@ -190,11 +191,7 @@ 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 myComponent = component;
@@ -366,5 +363,93 @@ class Timer extends React.Component<{}, TimerState> {
);
}
}
-React.render(React.createElement(Timer), container);
+ReactDOM.render(React.createElement(Timer), container);
+//
+// createFragment addon
+// --------------------------------------------------------------------------
+React.addons.createFragment({
+ a: React.DOM.div(),
+ b: ["a", false, React.createElement("span")]
+});
+
+//
+// CSSTransitionGroup addon
+// --------------------------------------------------------------------------
+React.createFactory(React.addons.CSSTransitionGroup)({
+ component: React.createClass({
+ render: (): React.ReactElement => null
+ }),
+ childFactory: (c) => c,
+ transitionName: "transition",
+ transitionAppear: false,
+ transitionEnter: true,
+ transitionLeave: true
+});
+
+//
+// LinkedStateMixin addon
+// --------------------------------------------------------------------------
+React.createClass({
+ mixins: [React.addons.LinkedStateMixin],
+ render: function() { return React.DOM.div(null) }
+});
+
+//
+// Perf addon
+// --------------------------------------------------------------------------
+React.addons.Perf.start();
+React.addons.Perf.stop();
+var measurements = React.addons.Perf.getLastMeasurements();
+React.addons.Perf.printInclusive(measurements);
+React.addons.Perf.printExclusive(measurements);
+React.addons.Perf.printWasted(measurements);
+React.addons.Perf.printDOM(measurements);
+
+//
+// PureRenderMixin addon
+// --------------------------------------------------------------------------
+React.createClass({
+ mixins: [React.addons.PureRenderMixin],
+ render: function() { return React.DOM.div(null) }
+});
+
+//
+// TestUtils addon
+// --------------------------------------------------------------------------
+var node: Element;
+React.addons.TestUtils.Simulate.click(node);
+React.addons.TestUtils.Simulate.change(node);
+React.addons.TestUtils.Simulate.keyDown(node, { key: "Enter" });
+
+var renderer: React.ShallowRenderer =
+ React.addons.TestUtils.createRenderer();
+renderer.render(React.createElement(Timer));
+var output: React.ReactElement> =
+ renderer.getRenderOutput();
+
+//
+// TransitionGroup addon
+// --------------------------------------------------------------------------
+React.createFactory(React.addons.TransitionGroup)({ component: "div" });
+
+//
+// update addon
+// --------------------------------------------------------------------------
+{
+// These are copied from https://facebook.github.io/react/docs/update.html
+let initialArray = [1, 2, 3];
+let newArray = React.addons.update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]
+
+let collection = [1, 2, {a: [12, 17, 15]}];
+let newCollection = React.addons.update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}});
+// => [1, 2, {a: [12, 13, 14, 15]}]
+
+let obj = {a: 5, b: 3};
+let newObj = React.addons.update(obj, {b: {$apply: function(x) {return x * 2;}}});
+// => {a: 5, b: 6}
+let newObj2 = React.addons.update(obj, {b: {$set: obj.b * 2}});
+
+let objShallow = {a: 5, b: 3};
+let newObjShallow = React.addons.update(obj, {$merge: {b: 6, c: 7}}); // => {a: 5, b: 6, c: 7}
+}
diff --git a/react/react-global.d.ts b/react/react-global.d.ts
index 3ed029240..1c50ce7e4 100644
--- a/react/react-global.d.ts
+++ b/react/react-global.d.ts
@@ -4,6 +4,7 @@
// Definitions: https://github.com/borisyankov/DefinitelyTyped
///
+///
///
///
///
@@ -12,53 +13,10 @@
///
///
///
-///
import React = __React;
import ReactDOM = __React.__DOM;
declare namespace __React {
- namespace addons {
- export var TransitionGroup: __React.__Addons.TransitionGroup;
- export var CSSTransitionGroup: __React.__Addons.CSSTransitionGroup;
-
- export var LinkedStateMixin: __React.__Addons.LinkedStateMixin;
- export var PureRenderMixin: __React.__Addons.PureRenderMixin;
-
- export import createFragment = __React.__Addons.createFragment;
- export import update = __React.__Addons.update;
-
- export import Perf = __React.__Addons.Perf;
- export import TestUtils = __React.__Addons.TestUtils;
- }
-
- // TransitionGroup types
- export import TransitionGroupProps = __React.__Addons.TransitionGroupProps;
- export import TransitionGroup = __React.__Addons.TransitionGroup;
- export import CSSTransitionGroupProps = __React.__Addons.CSSTransitionGroupProps;
- export import CSSTransitionGroup = __React.__Addons.CSSTransitionGroup;
-
- // LinkedStateMixin types
- export import ReactLink = __React.__Addons.ReactLink;
- export import LinkedStateMixin = __React.__Addons.LinkedStateMixin;
-
- // PureRenderMixin types
- export import PureRenderMixin = __React.__Addons.PureRenderMixin;
-
- // update types
- export import UpdateSpecCommand = __React.__Addons.UpdateSpecCommand;
- export import UpdateSpecPath = __React.__Addons.UpdateSpecPath;
- export import UpdateSpec = __React.__Addons.UpdateSpec;
- export import UpdateArraySpec = __React.__Addons.UpdateArraySpec;
-
- // Perf types
- export import ComponentPerfContext = __React.__Addons.ComponentPerfContext;
- export import NumericPerfContext = __React.__Addons.NumericPerfContext;
- export import Measurements = __React.__Addons.Measurements;
-
- // TestUtil types
- export import SyntheticEventData = __React.__Addons.SyntheticEventData;
- export import EventSimulator = __React.__Addons.EventSimulator;
- export import MockedComponentClass = __React.__Addons.MockedComponentClass;
- export import ShallowRenderer = __React.__Addons.ShallowRenderer;
+ export import addons = __React.__Addons;
}
diff --git a/react/react-tests.ts b/react/react-tests.ts
index f0c1060bd..33a114404 100644
--- a/react/react-tests.ts
+++ b/react/react-tests.ts
@@ -1,5 +1,24 @@
///
+///
+///
+///
+///
+///
+///
+///
+///
+///
import React = require("react");
+import ReactDOM = require("react-dom");
+import ReactDOMServer = require("react-dom/server");
+import createFragment = require("react-addons-create-fragment");
+import CSSTransitionGroup = require("react-addons-css-transition-group");
+import LinkedStateMixin = require("react-addons-linked-state-mixin");
+import Perf = require("react-addons-perf");
+import PureRenderMixin = require("react-addons-pure-render-mixin");
+import TestUtils = require("react-addons-test-utils");
+import TransitionGroup = require("react-addons-transition-group");
+import update = require("react-addons-update");
interface Props extends React.Props {
hello: string;
@@ -149,21 +168,20 @@ var clonedDOMElement: React.HTMLElement =
// React.render
var component: React.Component =
- React.render(element, container);
+ ReactDOM.render(element, container);
var classicComponent: React.ClassicComponent =
- React.render(classicElement, container);
+ ReactDOM.render(classicElement, container);
var domComponent: React.DOMComponent =
- React.render(domElement, container);
+ ReactDOM.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 unmounted: boolean = ReactDOM.unmountComponentAtNode(container);
+var str: string = ReactDOMServer.renderToString(element);
+var markup: string = ReactDOMServer.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);
+var domNode: Element = ReactDOM.findDOMNode(component);
+domNode = ReactDOM.findDOMNode(domNode);
//
// React Elements
@@ -191,11 +209,7 @@ 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 myComponent = component;
@@ -367,5 +381,93 @@ class Timer extends React.Component<{}, TimerState> {
);
}
}
-React.render(React.createElement(Timer), container);
+ReactDOM.render(React.createElement(Timer), container);
+//
+// createFragment addon
+// --------------------------------------------------------------------------
+createFragment({
+ a: React.DOM.div(),
+ b: ["a", false, React.createElement("span")]
+});
+
+//
+// CSSTransitionGroup addon
+// --------------------------------------------------------------------------
+React.createFactory(CSSTransitionGroup)({
+ component: React.createClass({
+ render: (): React.ReactElement => null
+ }),
+ childFactory: (c) => c,
+ transitionName: "transition",
+ transitionAppear: false,
+ transitionEnter: true,
+ transitionLeave: true
+});
+
+//
+// LinkedStateMixin addon
+// --------------------------------------------------------------------------
+React.createClass({
+ mixins: [LinkedStateMixin],
+ render: function() { return React.DOM.div(null) }
+});
+
+//
+// Perf addon
+// --------------------------------------------------------------------------
+Perf.start();
+Perf.stop();
+var measurements = Perf.getLastMeasurements();
+Perf.printInclusive(measurements);
+Perf.printExclusive(measurements);
+Perf.printWasted(measurements);
+Perf.printDOM(measurements);
+
+//
+// PureRenderMixin addon
+// --------------------------------------------------------------------------
+React.createClass({
+ mixins: [PureRenderMixin],
+ render: function() { return React.DOM.div(null) }
+});
+
+//
+// TestUtils addon
+// --------------------------------------------------------------------------
+var node: Element;
+TestUtils.Simulate.click(node);
+TestUtils.Simulate.change(node);
+TestUtils.Simulate.keyDown(node, { key: "Enter" });
+
+var renderer: React.ShallowRenderer =
+ TestUtils.createRenderer();
+renderer.render(React.createElement(Timer));
+var output: React.ReactElement> =
+ renderer.getRenderOutput();
+
+//
+// TransitionGroup addon
+// --------------------------------------------------------------------------
+React.createFactory(TransitionGroup)({ component: "div" });
+
+//
+// update addon
+// --------------------------------------------------------------------------
+{
+// These are copied from https://facebook.github.io/react/docs/update.html
+let initialArray = [1, 2, 3];
+let newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]
+
+let collection = [1, 2, {a: [12, 17, 15]}];
+let newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}});
+// => [1, 2, {a: [12, 13, 14, 15]}]
+
+let obj = {a: 5, b: 3};
+let newObj = update(obj, {b: {$apply: function(x) {return x * 2;}}});
+// => {a: 5, b: 6}
+let newObj2 = update(obj, {b: {$set: obj.b * 2}});
+
+let objShallow = {a: 5, b: 3};
+let newObjShallow = update(obj, {$merge: {b: 6, c: 7}}); // => {a: 5, b: 6, c: 7}
+}