diff --git a/react-addons/react-addons-tests.ts b/react-addons/react-addons-tests.ts new file mode 100644 index 000000000..e9248854a --- /dev/null +++ b/react-addons/react-addons-tests.ts @@ -0,0 +1,107 @@ +/// +import React = require("react/addons"); + +var PropTypesSpecification: React.Specification = { + propTypes: { + // You can declare that a prop is a specific JS primitive. By default, these + // are all optional. + optionalArray: React.PropTypes.array, + optionalBool: React.PropTypes.bool, + optionalFunc: React.PropTypes.func, + optionalNumber: React.PropTypes.number, + optionalObject: React.PropTypes.object, + optionalString: React.PropTypes.string, + + // Anything that can be rendered: numbers, strings, components or an array + // containing these types. + optionalRenderable: React.PropTypes.renderable, + + // A React component. + optionalComponent: React.PropTypes.component, + + // You can also declare that a prop is an instance of a class. This uses + // JS's instanceof operator. + optionalMessage: React.PropTypes.instanceOf(Date), + + // You can ensure that your prop is limited to specific values by treating + // it as an enum. + optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), + + // An object that could be one of many types + optionalUnion: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.number, + React.PropTypes.instanceOf(Date) + ]), + + // An array of a certain type + optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), + + // An object with property values of a certain type + optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), + + // An object taking on a particular shape + optionalObjectWithShape: React.PropTypes.shape({ + color: React.PropTypes.string, + fontSize: React.PropTypes.number + }), + + // You can chain any of the above with `isRequired` to make sure a warning + // is shown if the prop isn't provided. + requiredFunc: React.PropTypes.func.isRequired, + + // A value of any data type + requiredAny: React.PropTypes.any.isRequired, + + // You can also specify a custom validator. It should return an Error + // object if the validation fails. Don't `console.warn` or throw, as this + // won't work inside `oneOfType`. + customProp: function(props, propName, componentName) { + if (!/matchme/.test(props[propName])) { + return new Error('Validation failed!'); + } + return null; + } + }, + render: (): React.Descriptor => { + return null; + } +}; + +React.createClass(PropTypesSpecification); + +var mountNode: Element; + +var HelloMessage = React.createClass({displayName: 'HelloMessage', + render: function() { + return React.DOM.div(null, "Hello ", (>this).props.name); + } +}); + +React.renderComponent(HelloMessage({name: "John"}), mountNode); + +var Timer = React.createClass({displayName: 'Timer', + getInitialState: function() { + return {secondsElapsed: 0}; + }, + tick: function() { + (>this).setState({ + secondsElapsed: (>this).state.secondsElapsed + 1 + }); + }, + componentDidMount: function() { + this.interval = setInterval(this.tick, 1000); + }, + componentWillUnmount: function() { + clearInterval(this.interval); + }, + render: function() { + return React.DOM.div( + null, + "Seconds Elapsed: ", + (>this).state.secondsElapsed + ); + } +}); + +React.renderComponent(Timer(null), mountNode); diff --git a/react-addons/react-addons.d.ts b/react-addons/react-addons.d.ts new file mode 100644 index 000000000..301e839be --- /dev/null +++ b/react-addons/react-addons.d.ts @@ -0,0 +1,14 @@ +// Type definitions for React with Addons 0.11.2 +// Project: http://facebook.github.io/react/ +// Definitions by: Asana +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare module "react/addons" { + export = React; +} + +declare module React { + export var addons: {}; +} \ No newline at end of file diff --git a/react/react.d.ts b/react/react.d.ts index c97810448..dca769d6c 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -4,6 +4,10 @@ // Definitions: https://github.com/borisyankov/DefinitelyTyped declare module "react" { + export = React; +} + +declare module React { export function createClass(specification: Specification): Factory

; export function renderComponent(component: Descriptor, container: Element, callback?: () => void): void;