diff --git a/react-addons/react-addons-tests.ts b/react-addons/react-addons-tests.ts new file mode 100644 index 000000000..cdfae1266 --- /dev/null +++ b/react-addons/react-addons-tests.ts @@ -0,0 +1,133 @@ +/// +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); + +// TestUtils +var that: React.Component; +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"}); + +var GoodbyeMessage = React.createClass({displayName: 'GoodbyeMessage', + render: function() { + return React.DOM.div(null, "Goodbye ", (>this).props.name); + } +}); +React.addons.TestUtils.renderIntoDocument(GoodbyeMessage({name: "John"})); + +var isImportant: boolean; +var isRead: boolean; +var cx = React.addons.classSet; +var classes = cx({ + 'message': true, + 'message-important': isImportant, + 'message-read': isRead +}); + + + diff --git a/react-addons/react-addons.d.ts b/react-addons/react-addons.d.ts new file mode 100644 index 000000000..2e13445b9 --- /dev/null +++ b/react-addons/react-addons.d.ts @@ -0,0 +1,171 @@ +// 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: { + classSet: (classes: {[key: string]: boolean}) => string; + cloneWithProps: CloneWithProps; + CSSTransitionGroup: Factory; + LinkedStateMixin: LinkedStateMixin; + Perf: Perf; + PureRenderMixin: Mixin; + TestUtils: TestUtils; + TransitionGroup: Factory; + update(object: Object, changes: Object): Object; + }; + + export interface CloneWithProps

{ + (instance: Descriptor

, extraProps?: P): Descriptor

; + } + + export interface ReactLink { + value: T; + requestChange(newValue: T): void; + } + + export interface LinkedStateMixin extends Mixin { + linkState(key: string): ReactLink; + } + + export interface ComponentPerfContext { + current: string; + owner: string; + } + + export interface CSSTransitionGroupProps { + transitionName: string; + } + + export interface TransitionsSpecification extends Specification { + componentWillEnter?(callback: () => void): void; + componentDidEnter?(): void; + componentWillLeave?(callback: () => void): void; + componentDidLeave?(): void; + } + + export interface NumericPerfContext { + [key: string]: number; + } + + export interface Measurements { + exclusive: NumericPerfContext; + inclusive: NumericPerfContext; + render: NumericPerfContext; + counts: NumericPerfContext; + writes: NumericPerfContext; + displayNames: { + [key: string]: ComponentPerfContext; + }; + totalTime: number; + } + + export interface Perf { + start(): void; + stop(): void; + printInclusive(measurements: Measurements[]): void; + printExclusive(measurements: Measurements[]): void; + printWasted(measurements: Measurements[]): void; + printDOM(measurements: Measurements[]): void; + getLastMeasurements(): Measurements[]; + } + + export interface TestUtils { + Simulate: Simulate; + renderIntoDocument(instance: Descriptor): Descriptor; + mockComponent(componentClass: Factory, mockTagName?: string): TestUtils; + isDescriptorOfType(descriptor: Descriptor, componentClass: Factory): boolean; + isDOMComponent(instance: Descriptor): boolean; + isCompositeComponent(instance: Descriptor): boolean; + isCompositeComponentWithType(instance: Descriptor, componentClass: Function): boolean; + isTextComponent(instance: Descriptor): boolean; + findAllInRenderedTree(tree: Descriptor, test: Function): Descriptor[]; + scryRenderedDOMComponentsWithClass(tree: Descriptor, className: string): Descriptor[]; + findRenderedDOMComponentWithClass(tree: Descriptor, className: string): Descriptor; + scryRenderedDOMComponentsWithTag(tree: Descriptor, className: string): Descriptor[]; + findRenderedDOMComponentWithTag(tree: Descriptor, tagName: string): Descriptor; + scryFindRenderedComponentsWithTag(tree: Descriptor, componentClass: Function): Descriptor[]; + findRenderedComponentWithType(tree: Descriptor, componentClass: Function): Descriptor; + } + + export 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; + } + + export interface EventSimulator { + (element: Element, eventData?: SyntheticEventData): void; + } + + export 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; + } +} diff --git a/react/react.d.ts b/react/react.d.ts index c97810448..507a18f39 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; @@ -50,8 +54,8 @@ declare module "react" { render(): Descriptor; } - interface DomReferencer { - getDomNode(): Element; + export interface DomReferencer { + getDOMNode(): Element; } export interface Component extends DomReferencer { @@ -69,19 +73,19 @@ declare module "react" { replaceProps(nextProps: P, callback?: () => void): void; } - interface Constructable { + export interface Constructable { new(): any; } - interface Validator

{ + export interface Validator

{ (props: P, propName: string, componentName: string): Error; } - interface Requireable

extends Validator

{ + export interface Requireable

extends Validator

{ isRequired: Validator

; } - interface ValidationMap

{ + export interface ValidationMap

{ [key: string]: Validator

; } @@ -112,12 +116,12 @@ declare module "react" { // Browser Interfaces // Taken from https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts - interface AbstractView { + export interface AbstractView { styleMedia: StyleMedia; document: Document; } - interface Touch { + export interface Touch { identifier: number; target: EventTarget; screenX: number; @@ -128,7 +132,7 @@ declare module "react" { pageY: number; } - interface TouchList { + export interface TouchList { [index: number]: Touch; length: number; item(index: number): Touch; @@ -214,7 +218,7 @@ declare module "react" { } // Attributes - interface EventAttributes { + export interface EventAttributes { onCopy?: (event: ClipboardEvent) => void; onCut?: (event: ClipboardEvent) => void; onPaste?: (event: ClipboardEvent) => void; @@ -251,7 +255,7 @@ declare module "react" { onWheel?: (event: WheelEvent) => void; } - interface DomAttributes extends EventAttributes { + export interface DomAttributes extends EventAttributes { // HTML Attributes accept?: any; accessKey?: any; @@ -347,7 +351,7 @@ declare module "react" { wmode?: any; } - interface SvgAttributes extends EventAttributes { + export interface SvgAttributes extends EventAttributes { cx?: any; cy?: any; d?: any; @@ -393,10 +397,10 @@ declare module "react" { y?: any; } - interface DomElement extends Factory { + export interface DomElement extends Factory { } - interface SvgElement extends Factory { + export interface SvgElement extends Factory { } export var DOM: {