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} +}