diff --git a/fluxxor/fluxxor.d.ts b/fluxxor/fluxxor.d.ts index e857a6b150..e8b89a66d0 100644 --- a/fluxxor/fluxxor.d.ts +++ b/fluxxor/fluxxor.d.ts @@ -3,7 +3,7 @@ // Definitions by: Yuichi Murata // Definitions: https://github.com/borisyankov/DefinitelyTyped -/// +/// /// declare module Fluxxor { diff --git a/jsnox/jsnox.d.ts b/jsnox/jsnox.d.ts index b3e4460c03..72584563b2 100644 --- a/jsnox/jsnox.d.ts +++ b/jsnox/jsnox.d.ts @@ -3,7 +3,7 @@ // Definitions by: Steve Baker // Definitions: https://github.com/borisyankov/DefinitelyTyped -/// +/// declare module 'jsnox' { diff --git a/react-router/react-router.d.ts b/react-router/react-router.d.ts index 13c573b4b9..8f63f2d69f 100644 --- a/react-router/react-router.d.ts +++ b/react-router/react-router.d.ts @@ -3,7 +3,7 @@ // Definitions by: Yuichi Murata // Definitions: https://github.com/borisyankov/DefinitelyTyped -/// +/// declare module ReactRouter { // diff --git a/react/future/README.md b/react/README.md similarity index 100% rename from react/future/README.md rename to react/README.md diff --git a/react/future/react-0.13.0-tests.ts b/react/future/react-0.13.0-tests.ts deleted file mode 100644 index 358359dcf6..0000000000 --- a/react/future/react-0.13.0-tests.ts +++ /dev/null @@ -1,354 +0,0 @@ -/// -// requiring react/addons instead of react so react.d.ts doesn't get picked up -// TODO: import "react" once 0.13.0 is released -import React = require("react/addons"); - -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 - }; - }, - 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 - } - - 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 = ["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.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 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((prevState, props) => ({ - secondsElapsed: prevState.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); - diff --git a/react/future/react-addons-0.13.0-tests.ts b/react/future/react-addons-0.13.0-tests.ts deleted file mode 100644 index bea751b70d..0000000000 --- a/react/future/react-addons-0.13.0-tests.ts +++ /dev/null @@ -1,389 +0,0 @@ -/// -import React = require("react/addons"); - -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 - }; - }, - 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 - } - - 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 = ["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.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 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((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; -React.addons.TestUtils.Simulate.click(node); -React.addons.TestUtils.Simulate.change(node); -React.addons.TestUtils.Simulate.keyDown(node, { key: "Enter" }); - diff --git a/react/legacy/react-0.12-tests.ts b/react/legacy/react-0.12-tests.ts new file mode 100644 index 0000000000..27eae4c64e --- /dev/null +++ b/react/legacy/react-0.12-tests.ts @@ -0,0 +1,235 @@ +/// +import React = require("react"); + +interface Props { + hello: string; + world?: string; + foo: number; + bar: boolean; +} + +interface State { + inputValue?: string; + seconds?: number; +} + +interface MyComponent extends React.CompositeComponent { + 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 reactClass: React.ComponentClass = React.createClass({ + getDefaultProps: () => { + return { + hello: undefined, + world: "peace", + foo: undefined, + bar: undefined + }; + }, + getInitialState: () => { + return { + inputValue: "React.js", + seconds: 0 + }; + }, + reset: () => { + this.replaceState(this.getInitialState()); + }, + render: () => { + return React.DOM.div(null, + React.DOM.input({ + ref: INPUT_REF, + value: this.state.inputValue + })); + } +}); + +var reactElement: React.ReactElement = + React.createElement(reactClass, props); + +var reactFactory: React.ComponentFactory = + React.createFactory(reactClass); + +var component: React.Component = + React.render(reactElement, container); + +var unmounted: boolean = React.unmountComponentAtNode(container); +var str: string = React.renderToString(reactElement); +var markup: string = React.renderToStaticMarkup(reactElement); +var notValid: boolean = React.isValidElement(props); // false +var isValid = React.isValidElement(reactElement); // true +React.initializeTouchEvents(true); + +// +// React Elements +// -------------------------------------------------------------------------- + +var type = reactElement.type; +var elementProps: Props = reactElement.props; +var key = reactElement.key; +var ref: string = reactElement.ref; +var factoryElement: React.ReactElement = reactFactory(elementProps); + +// +// React Components +// -------------------------------------------------------------------------- + +var displayName: string = reactClass.displayName; +var defaultProps: Props = reactClass.getDefaultProps(); +var propTypes: React.ValidationMap = reactClass.propTypes; + +// +// Component API +// -------------------------------------------------------------------------- + +var htmlElement: Element = component.getDOMNode(); +var divElement: HTMLDivElement = component.getDOMNode(); +var isMounted: boolean = component.isMounted(); +component.setProps(elementProps); +component.replaceProps(props); + +var compComponent: React.CompositeComponent = + >component; +var initialState: State = compComponent.state; +compComponent.setState({ inputValue: "!!!" }); +compComponent.replaceState({ inputValue: "???", seconds: 60 }); +compComponent.forceUpdate(); + +var inputRef: React.HTMLComponent = + compComponent.refs[INPUT_REF]; +var value: string = inputRef.getDOMNode().value; + +var myComponent = compComponent; +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; + } +}; + +// +// 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; +} +interface Timer extends React.CompositeComponent<{}, TimerState> { +} +var Timer = React.createClass({ + displayName: "Timer", + getInitialState: () => { + return { secondsElapsed: 0 }; + }, + tick: () => { + var me = this; + me.setState({ + secondsElapsed: me.state.secondsElapsed + 1 + }); + }, + componentDidMount: () => { + this.interval = setInterval(this.tick, 1000); + }, + componentWillUnmount: () => { + clearInterval(this.interval); + }, + render: () => { + var me = this; + return React.DOM.div( + null, + "Seconds Elapsed: ", + me.state.secondsElapsed + ); + } +}); +var mountNode: Element; +React.render(React.createElement(Timer, null), mountNode); + diff --git a/react/future/react-0.13.0.d.ts b/react/legacy/react-0.12.d.ts similarity index 61% rename from react/future/react-0.13.0.d.ts rename to react/legacy/react-0.12.d.ts index b91847adfe..f2786cbc88 100644 --- a/react/future/react-0.13.0.d.ts +++ b/react/legacy/react-0.12.d.ts @@ -1,56 +1,27 @@ -// Type definitions for React v0.13.0 RC2 (external module) +// Type definitions for React 0.12.1 // Project: http://facebook.github.io/react/ -// Definitions by: Asana , AssureSign +// Definitions by: Asana // Definitions: https://github.com/borisyankov/DefinitelyTyped -declare module "react" { +declare module React { // - // React Elements + // React Elements // ---------------------------------------------------------------------- type ReactType = ComponentClass | string; interface ReactElement

{ - type: string | ComponentClass

; + type: ComponentClass

| string; props: P; - key: string | number; - ref: string | ((component: Component) => any); + key: number | string; + ref: string; } - interface ClassicElement

extends ReactElement

{ - type: string | ClassicComponentClass

; - ref: string | ((component: ClassicComponent) => any); - } - - interface DOMElement

extends ClassicElement

{ - type: string; - ref: string | ((component: DOMComponent

) => any); - } - - type HTMLElement = DOMElement; - type SVGElement = DOMElement; + interface ReactHTMLElement extends ReactElement {} + interface ReactSVGElement extends ReactElement {} // - // Factories - // ---------------------------------------------------------------------- - - interface Factory

{ - (props?: P, ...children: ReactNode[]): ReactElement

; - } - - interface ClassicFactory

extends Factory

{ - (props?: P, ...children: ReactNode[]): ClassicElement

; - } - - interface DOMFactory

extends ClassicFactory

{ - (props?: P, ...children: ReactNode[]): DOMElement

; - } - - type HTMLFactory = DOMFactory; - type SVGFactory = DOMFactory; - - // - // React Nodes + // React Nodes // http://facebook.github.io/react/docs/glossary.html // ---------------------------------------------------------------------- @@ -58,157 +29,106 @@ declare module "react" { type ReactChild = ReactElement | ReactText; // Should be Array but type aliases cannot be recursive - type ReactFragment = {} | Array; + type ReactFragment = Array; type ReactNode = ReactChild | ReactFragment | boolean; // - // Top Level API + // React Components // ---------------------------------------------------------------------- - function createClass

(spec: ComponentSpec): ClassicComponentClass

; + interface ComponentStatics

{ + displayName?: string; + getDefaultProps?(): P; + propTypes?: ValidationMap

; + } - function createFactory

(type: string): DOMFactory

; - function createFactory

(type: ClassicComponentClass

| string): ClassicFactory

; - function createFactory

(type: ComponentClass

): Factory

; + interface ComponentClass

extends ComponentStatics

{ + // Deprecated in 0.12. See http://fb.me/react-legacyfactory + // new(props: P): ReactElement

; + // (props: P): ReactElement

; + } - function createElement

( - type: string, - props?: P, - ...children: ReactNode[]): DOMElement

; - function createElement

( - type: ClassicComponentClass

| string, - props?: P, - ...children: ReactNode[]): ClassicElement

; - function createElement

( - type: ComponentClass

, - props?: P, - ...children: ReactNode[]): ReactElement

; + // + // ReactElement Factories + // ---------------------------------------------------------------------- - function cloneElement

( - element: DOMElement

, - props?: P, - ...children: ReactNode[]): DOMElement

; - function cloneElement

( - element: ClassicElement

, - props?: P, - ...children: ReactNode[]): ClassicElement

; - function cloneElement

( - element: ReactElement

, - props?: P, - ...children: ReactNode[]): ReactElement

; + interface ComponentFactory

{ + (props?: P, ...children: ReactNode[]): ReactElement

; + } + + interface HTMLFactory extends ComponentFactory {} + interface SVGFactory extends ComponentFactory {} - function render

( - element: DOMElement

, - container: Element, - callback?: () => any): DOMComponent

; - function render( - element: ClassicElement

, - container: Element, - callback?: () => any): ClassicComponent; - function render( - element: ReactElement

, - container: Element, - callback?: () => any): Component; + // + // Top-Level API + // ---------------------------------------------------------------------- - function unmountComponentAtNode(container: Element): boolean; - function renderToString(element: ReactElement): string; - function renderToStaticMarkup(element: ReactElement): string; - function isValidElement(object: {}): boolean; - function initializeTouchEvents(shouldUseTouch: boolean): void; - - function findDOMNode( - componentOrElement: Component | Element): TElement; - function findDOMNode( - componentOrElement: Component | Element): Element; - - var DOM: ReactDOM; - var PropTypes: ReactPropTypes; - var Children: ReactChildren; + interface TopLevelAPI { + createClass

(spec: ComponentSpec): ComponentClass

; + createElement

(type: ComponentClass

| string, props: P, ...children: ReactNode[]): ReactElement

; + createFactory

(componentClass: ComponentClass

): ComponentFactory

; + render

(element: ReactElement

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

; + unmountComponentAtNode(container: Element): boolean; + renderToString(element: ReactElement): string; + renderToStaticMarkup(element: ReactElement): string; + isValidElement(object: {}): boolean; + initializeTouchEvents(shouldUseTouch: boolean): void; + } // // Component API // ---------------------------------------------------------------------- - // Base component for plain JS classes - class Component implements ComponentLifecycle { - constructor(props: P, context: any); - setState(f: (prevState: S, props: P) => S, callback?: () => any): void; - setState(state: S, callback?: () => any): void; - forceUpdate(): void; - props: P; - state: S; - context: any; - refs: { - [key: string]: Component - }; - } - - interface ClassicComponent extends Component { - replaceState(nextState: S, callback?: () => any): void; + 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; getDOMNode(): Element; isMounted(): boolean; - getInitialState?(): S; + + props: P; setProps(nextProps: P, callback?: () => any): void; replaceProps(nextProps: P, callback?: () => any): void; } - interface DOMComponent

extends ClassicComponent { + interface DOMComponent

extends Component

{ tagName: string; } - type HTMLComponent = DOMComponent; - type SVGComponent = DOMComponent; - - interface ChildContextProvider { - getChildContext(): CC; - } - - // - // Class Interfaces - // ---------------------------------------------------------------------- - - interface ComponentClass

{ - new(props?: P, context?: any): Component; - propTypes?: ValidationMap

; - contextTypes?: ValidationMap; - childContextTypes?: ValidationMap; - defaultProps?: P; - } - - interface ClassicComponentClass

extends ComponentClass

{ - new(props?: P, context?: any): ClassicComponent; - getDefaultProps?(): P; - displayName?: string; + interface HTMLComponent extends DOMComponent {} + interface SVGComponent extends DOMComponent {} + + interface CompositeComponent extends Component

, ComponentSpec { + state: S; + setState(nextState: S, callback?: () => any): void; + replaceState(nextState: S, callback?: () => any): void; + forceUpdate(callback?: () => any): void; + refs: { + [key: string]: Component + }; } // // Component Specs and Lifecycle // ---------------------------------------------------------------------- - interface ComponentLifecycle { - componentWillMount?(): void; - componentDidMount?(): void; - componentWillReceiveProps?(nextProps: P, nextContext: any): void; - shouldComponentUpdate?(nextProps: P, nextState: S, nextContext: any): boolean; - componentWillUpdate?(nextProps: P, nextState: S, nextContext: any): void; - componentDidUpdate?(prevProps: P, prevState: S, prevContext: any): void; - componentWillUnmount?(): void; - } - - interface Mixin extends ComponentLifecycle { + interface Mixin extends ComponentStatics

{ mixins?: Mixin; statics?: { [key: string]: any; }; - displayName?: string; - propTypes?: ValidationMap; - contextTypes?: ValidationMap; - childContextTypes?: ValidationMap - - getDefaultProps?(): P; + // Definition methods getInitialState?(): S; + + // Delegate methods + componentWillMount?(): void; + componentDidMount?(): void; + componentWillReceiveProps?(nextProps: P): void; + shouldComponentUpdate?(nextProps: P, nextState: S): boolean; + componentWillUpdate?(nextProps: P, nextState: S): void; + componentDidUpdate?(prevProps: P, prevState: S): void; + componentWillUnmount?(): void; } interface ComponentSpec extends Mixin { @@ -318,16 +238,15 @@ declare module "react" { interface WheelEventHandler extends EventHandler {} // - // Props / DOM Attributes + // Attributes // ---------------------------------------------------------------------- - interface Props { + export interface ReactAttributes { children?: ReactNode; - key?: string | number; - ref?: string | ((component: T) => any); - } + key?: number | string; + ref?: string; - interface DOMAttributes extends Props> { + // Event Attributes onCopy?: ClipboardEventHandler; onCut?: ClipboardEventHandler; onPaste?: ClipboardEventHandler; @@ -388,9 +307,7 @@ declare module "react" { strokeOpacity?: number; } - interface HTMLAttributes extends DOMAttributes { - ref?: string | ((component: HTMLComponent) => void); - + interface HTMLAttributes extends ReactAttributes { accept?: string; acceptCharset?: string; accessKey?: string; @@ -498,11 +415,9 @@ declare module "react" { itemType?: string; } - interface SVGAttributes extends DOMAttributes { - ref?: string | ((component: SVGComponent) => void); - + interface SVGAttributes extends ReactAttributes { cx?: SVGLength | SVGAnimatedLength; - cy?: any; + cy?: any; d?: string; dx?: SVGLength | SVGAnimatedLength; dy?: SVGLength | SVGAnimatedLength; @@ -547,7 +462,7 @@ declare module "react" { } // - // React.DOM + // React.DOM // ---------------------------------------------------------------------- interface ReactDOM { @@ -730,6 +645,254 @@ declare module "react" { only(children: ReactNode): ReactChild; } + // + // React.addons + // ---------------------------------------------------------------------- + + interface ClassSet { + [key: string]: boolean; + } + + // + // React.addons (Transitions) + // ---------------------------------------------------------------------- + + interface TransitionGroupProps { + component?: ReactType; + childFactory?: (child: ReactElement) => ReactElement; + } + + interface CSSTransitionGroupProps extends TransitionGroupProps { + transitionName: string; + transitionAppear?: boolean; + transitionEnter?: boolean; + transitionLeave?: boolean; + } + + interface CSSTransitionGroup extends ComponentClass {} + interface TransitionGroup extends ComponentClass {} + + // + // React.addons (Mixins) + // ---------------------------------------------------------------------- + + interface ReactLink { + value: T; + requestChange(newValue: T): void; + } + + interface LinkedStateMixin extends Mixin { + linkState(key: string): ReactLink; + } + + interface PureRenderMixin extends Mixin { + } + + // + // Reat.addons.update + // ---------------------------------------------------------------------- + + interface UpdateSpec { + $set: any; + $merge: {}; + $apply(value: any): any; + // [key: string]: UpdateSpec; + } + + interface UpdateArraySpec extends UpdateSpec { + $push?: any[]; + $unshift?: any[]; + $splice?: any[][]; + } + + // + // React.addons.Perf + // ---------------------------------------------------------------------- + + 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; + } + + interface ReactPerf { + start(): void; + stop(): void; + printInclusive(measurements: Measurements[]): void; + printExclusive(measurements: Measurements[]): void; + printWasted(measurements: Measurements[]): void; + printDOM(measurements: Measurements[]): void; + getLastMeasurements(): Measurements[]; + } + + // + // React.addons.TestUtils + // ---------------------------------------------------------------------- + + interface MockedComponentClass { + new(): any; + } + + interface ReactTestUtils { + Simulate: Simulate; + + renderIntoDocument

(element: ReactElement

): Component

; + renderIntoDocument>(element: ReactElement): C; + + mockComponent(mocked: MockedComponentClass, mockTagName?: string): ReactTestUtils; + + isElementOfType(element: ReactElement, type: ReactType): boolean; + isDOMComponent(instance: Component): boolean; + isCompositeComponent(instance: Component): boolean; + isCompositeComponentWithType(instance: Component, type: ComponentClass): boolean; + isTextComponent(instance: Component): boolean; + + findAllInRenderedTree(tree: Component, fn: (i: Component) => boolean): Component; + + scryRenderedDOMComponentsWithClass(tree: Component, className: string): DOMComponent[]; + findRenderedDOMComponentWithClass(tree: Component, className: string): DOMComponent; + + scryRenderedDOMComponentsWithTag(tree: Component, tagName: string): DOMComponent[]; + findRenderedDOMComponentWithTag(tree: Component, tagName: string): DOMComponent; + + 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 { + 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; + (descriptor: Component, eventData?: SyntheticEventData): void; + } + + interface Simulate { + blur: EventSimulator; + change: EventSimulator; + click: EventSimulator; + cut: EventSimulator; + doubleClick: EventSimulator; + drag: EventSimulator; + dragEnd: EventSimulator; + dragEnter: EventSimulator; + dragExit: EventSimulator; + dragLeave: EventSimulator; + dragOver: EventSimulator; + dragStart: EventSimulator; + drop: EventSimulator; + focus: EventSimulator; + input: EventSimulator; + keyDown: EventSimulator; + keyPress: EventSimulator; + keyUp: EventSimulator; + mouseDown: EventSimulator; + mouseEnter: EventSimulator; + mouseLeave: EventSimulator; + mouseMove: EventSimulator; + mouseOut: EventSimulator; + mouseOver: EventSimulator; + mouseUp: EventSimulator; + paste: EventSimulator; + scroll: EventSimulator; + submit: EventSimulator; + touchCancel: EventSimulator; + touchEnd: EventSimulator; + touchMove: EventSimulator; + touchStart: EventSimulator; + wheel: EventSimulator; + } + + // + // react Exports + // ---------------------------------------------------------------------- + + interface Exports extends TopLevelAPI { + DOM: ReactDOM; + PropTypes: ReactPropTypes; + Children: ReactChildren; + } + + // + // react/addons Exports + // ---------------------------------------------------------------------- + + interface AddonsExports extends Exports { + addons: { + CSSTransitionGroup: CSSTransitionGroup; + LinkedStateMixin: LinkedStateMixin; + PureRenderMixin: PureRenderMixin; + TransitionGroup: TransitionGroup; + + 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: 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 @@ -759,3 +922,13 @@ 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/legacy/react-addons-0.12-tests.ts b/react/legacy/react-addons-0.12-tests.ts new file mode 100644 index 0000000000..ca05c00ca5 --- /dev/null +++ b/react/legacy/react-addons-0.12-tests.ts @@ -0,0 +1,68 @@ +/// +import React = require("react/addons"); + +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); +React.addons.TestUtils.Simulate.change(node); +React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"}); + +interface GreetingProps { + name: string; +} +interface GreetingState { + morning: boolean; +} +interface Greeting extends React.CompositeComponent { +} +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/future/react-addons-global-0.13.0.d.ts b/react/react-addons-global.d.ts similarity index 99% rename from react/future/react-addons-global-0.13.0.d.ts rename to react/react-addons-global.d.ts index 343590f98e..c50ecdc211 100644 --- a/react/future/react-addons-global-0.13.0.d.ts +++ b/react/react-addons-global.d.ts @@ -2,7 +2,7 @@ // Project: http://facebook.github.io/react/ // Definitions by: Asana , AssureSign // Definitions: https://github.com/borisyankov/DefinitelyTyped -/// +/// declare module React { // diff --git a/react/react-addons-tests.ts b/react/react-addons-tests.ts index 7ce0fa23fc..9bd3d55056 100644 --- a/react/react-addons-tests.ts +++ b/react/react-addons-tests.ts @@ -1,15 +1,366 @@ -/// +/// 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 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 + }; + }, + 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 + } + + 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 = ["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.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 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((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 classes: string = cx(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) @@ -31,38 +382,8 @@ React.createFactory(React.addons.CSSTransitionGroup)({ // React.addons.TestUtils // -------------------------------------------------------------------------- -var that: React.CompositeComponent; -var node = that.refs["input"].getDOMNode(); +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.CompositeComponent { -} -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/future/react-addons-0.13.0.d.ts b/react/react-addons.d.ts similarity index 100% rename from react/future/react-addons-0.13.0.d.ts rename to react/react-addons.d.ts diff --git a/react/future/react-global-0.13.0.d.ts b/react/react-global.d.ts similarity index 100% rename from react/future/react-global-0.13.0.d.ts rename to react/react-global.d.ts diff --git a/react/react-tests.ts b/react/react-tests.ts index 07c8a89d43..a9b693cabe 100644 --- a/react/react-tests.ts +++ b/react/react-tests.ts @@ -1,7 +1,7 @@ /// import React = require("react"); -interface Props { +interface Props extends React.Props { hello: string; world?: string; foo: number; @@ -13,7 +13,15 @@ interface State { seconds?: number; } -interface MyComponent extends React.CompositeComponent { +interface Context { + someValue?: string; +} + +interface ChildContext { + someOtherValue: string; +} + +interface MyComponent extends React.Component { reset(): void; } @@ -26,95 +34,167 @@ var props: Props = { }; var container: Element; -var INPUT_REF: string = "input"; // // Top-Level API // -------------------------------------------------------------------------- -var reactClass: React.ComponentClass = React.createClass({ - getDefaultProps: () => { - return { - hello: undefined, - world: "peace", - foo: undefined, - bar: undefined - }; - }, - getInitialState: () => { +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 => 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 + } + + getChildContext() { return { - inputValue: "React.js", - seconds: 0 - }; - }, - reset: () => { - this.replaceState(this.getInitialState()); - }, - render: () => { + 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_REF, + ref: input => this._input = input, value: this.state.inputValue })); } -}); +} -var reactElement: React.ReactElement = - React.createElement(reactClass, props); +// React.createFactory +var factory: React.Factory = + React.createFactory(ModernComponent); +var factoryElement: React.ReactElement = + factory(props); -var reactFactory: React.ComponentFactory = - React.createFactory(reactClass); +var classicFactory: React.ClassicFactory = + React.createFactory(ClassicComponent); +var classicFactoryElement: React.ClassicElement = + classicFactory(props); -var component: React.Component = - React.render(reactElement, container); +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(reactElement); -var markup: string = React.renderToStaticMarkup(reactElement); +var str: string = React.renderToString(element); +var markup: string = React.renderToStaticMarkup(element); var notValid: boolean = React.isValidElement(props); // false -var isValid = React.isValidElement(reactElement); // true +var isValid = React.isValidElement(element); // true React.initializeTouchEvents(true); +var domNode: Element = React.findDOMNode(component); +domNode = React.findDOMNode(domNode); // // React Elements // -------------------------------------------------------------------------- -var type = reactElement.type; -var elementProps: Props = reactElement.props; -var key = reactElement.key; -var ref: string = reactElement.ref; -var factoryElement: React.ReactElement = reactFactory(elementProps); +var type = element.type; +var elementProps: Props = element.props; +var key = element.key; // // React Components // -------------------------------------------------------------------------- -var displayName: string = reactClass.displayName; -var defaultProps: Props = reactClass.getDefaultProps(); -var propTypes: React.ValidationMap = reactClass.propTypes; +var displayName: string = ClassicComponent.displayName; +var defaultProps: Props = ClassicComponent.getDefaultProps(); +var propTypes: React.ValidationMap = ClassicComponent.propTypes; // // Component API // -------------------------------------------------------------------------- -var htmlElement: Element = component.getDOMNode(); -var divElement: HTMLDivElement = component.getDOMNode(); -var isMounted: boolean = component.isMounted(); -component.setProps(elementProps); -component.replaceProps(props); +// modern +var componentState: State = component.state; +component.setState({ inputValue: "!!!" }); +component.forceUpdate(); -var compComponent: React.CompositeComponent = - >component; -var initialState: State = compComponent.state; -compComponent.setState({ inputValue: "!!!" }); -compComponent.replaceState({ inputValue: "???", seconds: 60 }); -compComponent.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 = - compComponent.refs[INPUT_REF]; -var value: string = inputRef.getDOMNode().value; - -var myComponent = compComponent; +var myComponent = component; myComponent.reset(); // @@ -180,7 +260,48 @@ var PropTypesSpecification: React.ComponentSpec = { return null; } }, - render: (): React.ReactHTMLElement => { + 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; } }; @@ -202,34 +323,30 @@ var onlyChild = React.Children.only([null, [[["Hallo"], true]], false]); interface TimerState { secondsElapsed: number; } -interface Timer extends React.CompositeComponent<{}, TimerState> { -} -var Timer = React.createClass({ - displayName: "Timer", - getInitialState: () => { - return { secondsElapsed: 0 }; - }, - tick: () => { - var me = this; - me.setState({ - secondsElapsed: me.state.secondsElapsed + 1 - }); - }, - componentDidMount: () => { - this.interval = setInterval(this.tick, 1000); - }, - componentWillUnmount: () => { - clearInterval(this.interval); - }, - render: () => { - var me = this; +class Timer extends React.Component<{}, TimerState> { + static state = { + secondsElapsed: 0 + } + private _interval: number; + tick() { + this.setState((prevState, props) => ({ + secondsElapsed: prevState.secondsElapsed + 1 + })); + } + componentDidMount() { + var me = this; + this._interval = setInterval(() => me.tick(), 1000); + } + componentWillUnmount() { + clearInterval(this._interval); + } + render() { return React.DOM.div( null, "Seconds Elapsed: ", - me.state.secondsElapsed + this.state.secondsElapsed ); } -}); -var mountNode: Element; -React.render(React.createElement(Timer, null), mountNode); +} +React.render(React.createElement(Timer), container); diff --git a/react/react.d.ts b/react/react.d.ts index f2786cbc88..1149388088 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -1,27 +1,56 @@ -// Type definitions for React 0.12.1 +// Type definitions for React v0.13.0 RC2 (external module) // Project: http://facebook.github.io/react/ -// Definitions by: Asana +// Definitions by: Asana , AssureSign // Definitions: https://github.com/borisyankov/DefinitelyTyped -declare module React { +declare module "react" { // - // React Elements + // React Elements // ---------------------------------------------------------------------- type ReactType = ComponentClass | string; interface ReactElement

{ - type: ComponentClass

| string; + type: string | ComponentClass

; props: P; - key: number | string; - ref: string; + key: string | number; + ref: string | ((component: Component) => any); } - interface ReactHTMLElement extends ReactElement {} - interface ReactSVGElement extends ReactElement {} + interface ClassicElement

extends ReactElement

{ + type: string | ClassicComponentClass

; + ref: string | ((component: ClassicComponent) => any); + } + + interface DOMElement

extends ClassicElement

{ + type: string; + ref: string | ((component: DOMComponent

) => any); + } + + type HTMLElement = DOMElement; + type SVGElement = DOMElement; // - // React Nodes + // Factories + // ---------------------------------------------------------------------- + + interface Factory

{ + (props?: P, ...children: ReactNode[]): ReactElement

; + } + + interface ClassicFactory

extends Factory

{ + (props?: P, ...children: ReactNode[]): ClassicElement

; + } + + interface DOMFactory

extends ClassicFactory

{ + (props?: P, ...children: ReactNode[]): DOMElement

; + } + + type HTMLFactory = DOMFactory; + type SVGFactory = DOMFactory; + + // + // React Nodes // http://facebook.github.io/react/docs/glossary.html // ---------------------------------------------------------------------- @@ -29,106 +58,157 @@ declare module React { type ReactChild = ReactElement | ReactText; // Should be Array but type aliases cannot be recursive - type ReactFragment = Array; + type ReactFragment = {} | Array; type ReactNode = ReactChild | ReactFragment | boolean; // - // React Components + // Top Level API // ---------------------------------------------------------------------- - interface ComponentStatics

{ - displayName?: string; - getDefaultProps?(): P; - propTypes?: ValidationMap

; - } + function createClass(spec: ComponentSpec): ClassicComponentClass

; - interface ComponentClass

extends ComponentStatics

{ - // Deprecated in 0.12. See http://fb.me/react-legacyfactory - // new(props: P): ReactElement

; - // (props: P): ReactElement

; - } + function createFactory

(type: string): DOMFactory

; + function createFactory

(type: ClassicComponentClass

| string): ClassicFactory

; + function createFactory

(type: ComponentClass

): Factory

; - // - // ReactElement Factories - // ---------------------------------------------------------------------- + function createElement

( + type: string, + props?: P, + ...children: ReactNode[]): DOMElement

; + function createElement

( + type: ClassicComponentClass

| string, + props?: P, + ...children: ReactNode[]): ClassicElement

; + function createElement

( + type: ComponentClass

, + props?: P, + ...children: ReactNode[]): ReactElement

; - interface ComponentFactory

{ - (props?: P, ...children: ReactNode[]): ReactElement

; - } - - interface HTMLFactory extends ComponentFactory {} - interface SVGFactory extends ComponentFactory {} + function cloneElement

( + element: DOMElement

, + props?: P, + ...children: ReactNode[]): DOMElement

; + function cloneElement

( + element: ClassicElement

, + props?: P, + ...children: ReactNode[]): ClassicElement

; + function cloneElement

( + element: ReactElement

, + props?: P, + ...children: ReactNode[]): ReactElement

; - // - // Top-Level API - // ---------------------------------------------------------------------- + function render

( + element: DOMElement

, + container: Element, + callback?: () => any): DOMComponent

; + function render( + element: ClassicElement

, + container: Element, + callback?: () => any): ClassicComponent; + function render( + element: ReactElement

, + container: Element, + callback?: () => any): Component; - interface TopLevelAPI { - createClass

(spec: ComponentSpec): ComponentClass

; - createElement

(type: ComponentClass

| string, props: P, ...children: ReactNode[]): ReactElement

; - createFactory

(componentClass: ComponentClass

): ComponentFactory

; - render

(element: ReactElement

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

; - unmountComponentAtNode(container: Element): boolean; - renderToString(element: ReactElement): string; - renderToStaticMarkup(element: ReactElement): string; - isValidElement(object: {}): boolean; - initializeTouchEvents(shouldUseTouch: boolean): void; - } + function unmountComponentAtNode(container: Element): boolean; + function renderToString(element: ReactElement): string; + function renderToStaticMarkup(element: ReactElement): string; + function isValidElement(object: {}): boolean; + function initializeTouchEvents(shouldUseTouch: boolean): void; + + function findDOMNode( + componentOrElement: Component | Element): TElement; + function findDOMNode( + componentOrElement: Component | Element): Element; + + var DOM: ReactDOM; + var PropTypes: ReactPropTypes; + var Children: ReactChildren; // // Component API // ---------------------------------------------------------------------- - interface Component

{ - // Use this overload to cast the returned element to a more specific type. - // Eg: var name = this.refs['name'].getDOMNode().value; + // Base component for plain JS classes + class Component implements ComponentLifecycle { + constructor(props: P, context: any); + setState(f: (prevState: S, props: P) => S, callback?: () => any): void; + setState(state: S, callback?: () => any): void; + forceUpdate(): void; + props: P; + state: S; + context: any; + refs: { + [key: string]: Component + }; + } + + interface ClassicComponent extends Component { + replaceState(nextState: S, callback?: () => any): void; getDOMNode(): TElement; getDOMNode(): Element; isMounted(): boolean; - - props: P; + getInitialState?(): S; setProps(nextProps: P, callback?: () => any): void; replaceProps(nextProps: P, callback?: () => any): void; } - interface DOMComponent

extends Component

{ + interface DOMComponent

extends ClassicComponent { tagName: string; } - interface HTMLComponent extends DOMComponent {} - interface SVGComponent extends DOMComponent {} - - interface CompositeComponent extends Component

, ComponentSpec { - state: S; - setState(nextState: S, callback?: () => any): void; - replaceState(nextState: S, callback?: () => any): void; - forceUpdate(callback?: () => any): void; - refs: { - [key: string]: Component - }; + type HTMLComponent = DOMComponent; + type SVGComponent = DOMComponent; + + interface ChildContextProvider { + getChildContext(): CC; + } + + // + // Class Interfaces + // ---------------------------------------------------------------------- + + interface ComponentClass

{ + new(props?: P, context?: any): Component; + propTypes?: ValidationMap

; + contextTypes?: ValidationMap; + childContextTypes?: ValidationMap; + defaultProps?: P; + } + + interface ClassicComponentClass

extends ComponentClass

{ + new(props?: P, context?: any): ClassicComponent; + getDefaultProps?(): P; + displayName?: string; } // // Component Specs and Lifecycle // ---------------------------------------------------------------------- - interface Mixin extends ComponentStatics

{ + interface ComponentLifecycle { + componentWillMount?(): void; + componentDidMount?(): void; + componentWillReceiveProps?(nextProps: P, nextContext: any): void; + shouldComponentUpdate?(nextProps: P, nextState: S, nextContext: any): boolean; + componentWillUpdate?(nextProps: P, nextState: S, nextContext: any): void; + componentDidUpdate?(prevProps: P, prevState: S, prevContext: any): void; + componentWillUnmount?(): void; + } + + interface Mixin extends ComponentLifecycle { mixins?: Mixin; statics?: { [key: string]: any; }; - // Definition methods - getInitialState?(): S; + displayName?: string; + propTypes?: ValidationMap; + contextTypes?: ValidationMap; + childContextTypes?: ValidationMap - // Delegate methods - componentWillMount?(): void; - componentDidMount?(): void; - componentWillReceiveProps?(nextProps: P): void; - shouldComponentUpdate?(nextProps: P, nextState: S): boolean; - componentWillUpdate?(nextProps: P, nextState: S): void; - componentDidUpdate?(prevProps: P, prevState: S): void; - componentWillUnmount?(): void; + getDefaultProps?(): P; + getInitialState?(): S; } interface ComponentSpec extends Mixin { @@ -238,15 +318,16 @@ declare module React { interface WheelEventHandler extends EventHandler {} // - // Attributes + // Props / DOM Attributes // ---------------------------------------------------------------------- - export interface ReactAttributes { + interface Props { children?: ReactNode; - key?: number | string; - ref?: string; + key?: string | number; + ref?: string | ((component: T) => any); + } - // Event Attributes + interface DOMAttributes extends Props> { onCopy?: ClipboardEventHandler; onCut?: ClipboardEventHandler; onPaste?: ClipboardEventHandler; @@ -307,7 +388,9 @@ declare module React { strokeOpacity?: number; } - interface HTMLAttributes extends ReactAttributes { + interface HTMLAttributes extends DOMAttributes { + ref?: string | ((component: HTMLComponent) => void); + accept?: string; acceptCharset?: string; accessKey?: string; @@ -415,9 +498,11 @@ declare module React { itemType?: string; } - interface SVGAttributes extends ReactAttributes { + interface SVGAttributes extends DOMAttributes { + ref?: string | ((component: SVGComponent) => void); + cx?: SVGLength | SVGAnimatedLength; - cy?: any; + cy?: any; d?: string; dx?: SVGLength | SVGAnimatedLength; dy?: SVGLength | SVGAnimatedLength; @@ -462,7 +547,7 @@ declare module React { } // - // React.DOM + // React.DOM // ---------------------------------------------------------------------- interface ReactDOM { @@ -645,254 +730,6 @@ declare module React { only(children: ReactNode): ReactChild; } - // - // React.addons - // ---------------------------------------------------------------------- - - interface ClassSet { - [key: string]: boolean; - } - - // - // React.addons (Transitions) - // ---------------------------------------------------------------------- - - interface TransitionGroupProps { - component?: ReactType; - childFactory?: (child: ReactElement) => ReactElement; - } - - interface CSSTransitionGroupProps extends TransitionGroupProps { - transitionName: string; - transitionAppear?: boolean; - transitionEnter?: boolean; - transitionLeave?: boolean; - } - - interface CSSTransitionGroup extends ComponentClass {} - interface TransitionGroup extends ComponentClass {} - - // - // React.addons (Mixins) - // ---------------------------------------------------------------------- - - interface ReactLink { - value: T; - requestChange(newValue: T): void; - } - - interface LinkedStateMixin extends Mixin { - linkState(key: string): ReactLink; - } - - interface PureRenderMixin extends Mixin { - } - - // - // Reat.addons.update - // ---------------------------------------------------------------------- - - interface UpdateSpec { - $set: any; - $merge: {}; - $apply(value: any): any; - // [key: string]: UpdateSpec; - } - - interface UpdateArraySpec extends UpdateSpec { - $push?: any[]; - $unshift?: any[]; - $splice?: any[][]; - } - - // - // React.addons.Perf - // ---------------------------------------------------------------------- - - 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; - } - - interface ReactPerf { - start(): void; - stop(): void; - printInclusive(measurements: Measurements[]): void; - printExclusive(measurements: Measurements[]): void; - printWasted(measurements: Measurements[]): void; - printDOM(measurements: Measurements[]): void; - getLastMeasurements(): Measurements[]; - } - - // - // React.addons.TestUtils - // ---------------------------------------------------------------------- - - interface MockedComponentClass { - new(): any; - } - - interface ReactTestUtils { - Simulate: Simulate; - - renderIntoDocument

(element: ReactElement

): Component

; - renderIntoDocument>(element: ReactElement): C; - - mockComponent(mocked: MockedComponentClass, mockTagName?: string): ReactTestUtils; - - isElementOfType(element: ReactElement, type: ReactType): boolean; - isDOMComponent(instance: Component): boolean; - isCompositeComponent(instance: Component): boolean; - isCompositeComponentWithType(instance: Component, type: ComponentClass): boolean; - isTextComponent(instance: Component): boolean; - - findAllInRenderedTree(tree: Component, fn: (i: Component) => boolean): Component; - - scryRenderedDOMComponentsWithClass(tree: Component, className: string): DOMComponent[]; - findRenderedDOMComponentWithClass(tree: Component, className: string): DOMComponent; - - scryRenderedDOMComponentsWithTag(tree: Component, tagName: string): DOMComponent[]; - findRenderedDOMComponentWithTag(tree: Component, tagName: string): DOMComponent; - - 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 { - 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; - (descriptor: Component, eventData?: SyntheticEventData): void; - } - - interface Simulate { - blur: EventSimulator; - change: EventSimulator; - click: EventSimulator; - cut: EventSimulator; - doubleClick: EventSimulator; - drag: EventSimulator; - dragEnd: EventSimulator; - dragEnter: EventSimulator; - dragExit: EventSimulator; - dragLeave: EventSimulator; - dragOver: EventSimulator; - dragStart: EventSimulator; - drop: EventSimulator; - focus: EventSimulator; - input: EventSimulator; - keyDown: EventSimulator; - keyPress: EventSimulator; - keyUp: EventSimulator; - mouseDown: EventSimulator; - mouseEnter: EventSimulator; - mouseLeave: EventSimulator; - mouseMove: EventSimulator; - mouseOut: EventSimulator; - mouseOver: EventSimulator; - mouseUp: EventSimulator; - paste: EventSimulator; - scroll: EventSimulator; - submit: EventSimulator; - touchCancel: EventSimulator; - touchEnd: EventSimulator; - touchMove: EventSimulator; - touchStart: EventSimulator; - wheel: EventSimulator; - } - - // - // react Exports - // ---------------------------------------------------------------------- - - interface Exports extends TopLevelAPI { - DOM: ReactDOM; - PropTypes: ReactPropTypes; - Children: ReactChildren; - } - - // - // react/addons Exports - // ---------------------------------------------------------------------- - - interface AddonsExports extends Exports { - addons: { - CSSTransitionGroup: CSSTransitionGroup; - LinkedStateMixin: LinkedStateMixin; - PureRenderMixin: PureRenderMixin; - TransitionGroup: TransitionGroup; - - 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: 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 @@ -922,13 +759,3 @@ declare module React { } } -declare module "react" { - var exports: React.Exports; - export = exports; -} - -declare module "react/addons" { - var exports: React.AddonsExports; - export = exports; -} -