;
+ type ReactNode = ReactChild | ReactFragment | boolean;
+
+ //
+ // Top Level API
+ // ----------------------------------------------------------------------
+
+ function createClass(
+ spec: ComponentSpec
): ClassicComponentClass
;
+
+ function createFactory
(
+ type: string): DOMFactory
;
+ function createFactory
(
+ type: ClassicComponentClass
| string): ClassicFactory
;
+ function createFactory
(
+ type: ComponentClass
): Factory
;
+
+ function createElement
(
+ type: string,
+ props?: P,
+ ...children: ReactNode[]): ReactDOMElement
;
+ function createElement
(
+ type: ClassicComponentClass
| string,
+ props?: P,
+ ...children: ReactNode[]): ReactClassicElement
;
+ function createElement
(
+ type: ComponentClass
,
+ props?: P,
+ ...children: ReactNode[]): ReactElement
;
+
+ function render
(
+ element: ReactDOMElement
,
+ container: Element,
+ callback?: () => any): DOMComponent
;
+ function render
(
+ element: ReactClassicElement
,
+ container: Element,
+ callback?: () => any): ClassicComponent
;
+ function render
(
+ element: ReactElement
,
+ container: Element,
+ callback?: () => any): Component
;
+
+ function unmountComponentAtNode(container: Element): boolean;
+ function renderToString(element: ReactElementBase): string;
+ function renderToStaticMarkup(element: ReactElementBase): 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
+ // ----------------------------------------------------------------------
+
+ // Base component for plain JS classes
+ class Component implements ComponentLifecycle
{
+ constructor(props: P, context: C);
+ setState(state: S, callback?: () => any): void;
+ forceUpdate(): void;
+ props: P;
+ state: S;
+ context: C;
+ refs: {
+ [key: string]: Component
+ };
+ }
+
+ interface ClassicComponent extends Component
{
+ replaceState(nextState: S, callback?: () => any): void;
+ getDOMNode(): TElement;
+ getDOMNode(): Element;
+ isMounted(): boolean;
+ getInitialState?(): S;
+ setProps(nextProps: P, callback?: () => any): void;
+ replaceProps(nextProps: P, callback?: () => any): void;
+ }
+
+ interface DOMComponent extends ClassicComponent
{
+ tagName: string;
+ }
+
+ type HTMLComponent = DOMComponent;
+ type SVGComponent = DOMComponent;
+
+ interface ChildContextProvider {
+ getChildContext(): CC;
+ }
+
+ //
+ // Class Interfaces
+ // ----------------------------------------------------------------------
+
+ interface ComponentClassBase {
+ propTypes?: ValidationMap
;
+ contextTypes?: ValidationMap;
+ childContextTypes?: ValidationMap<{}>;
+ }
+
+ interface ComponentClass extends ComponentClassBase
{
+ new(props?: P, context?: C): Component
;
+ defaultProps?: P;
+ }
+
+ interface ClassicComponentClass
extends ComponentClassBase
{
+ new(props?: P, context?: C): ClassicComponent
;
+ getDefaultProps?(): P;
+ displayName?: string;
+ }
+
+ //
+ // Component Specs and Lifecycle
+ // ----------------------------------------------------------------------
+
+ interface ComponentLifecycle
{
+ componentWillMount?(): void;
+ componentDidMount?(): void;
+ componentWillReceiveProps?(nextProps: P, nextContext: C): void;
+ shouldComponentUpdate?(nextProps: P, nextState: S, nextContext: C): boolean;
+ componentWillUpdate?(nextProps: P, nextState: S, nextContext: C): void;
+ componentDidUpdate?(prevProps: P, prevState: S, prevContext: C): void;
+ componentWillUnmount?(): void;
+ }
+
+ interface Mixin
extends ComponentLifecycle
{
+ mixins?: Mixin
;
+ statics?: {
+ [key: string]: any;
+ };
+
+ displayName?: string;
+ propTypes?: ValidationMap;
+ contextTypes?: ValidationMap;
+ childContextTypes?: ValidationMap
+
+ getInitialState?(): S;
+ getDefaultProps?(): P;
+ }
+
+ interface ComponentSpec extends Mixin
{
+ render(): ReactElementBase;
+ }
+
+ //
+ // Event System
+ // ----------------------------------------------------------------------
+
+ interface SyntheticEvent {
+ bubbles: boolean;
+ cancelable: boolean;
+ currentTarget: EventTarget;
+ defaultPrevented: boolean;
+ eventPhase: number;
+ isTrusted: boolean;
+ nativeEvent: Event;
+ preventDefault(): void;
+ stopPropagation(): void;
+ target: EventTarget;
+ timeStamp: Date;
+ type: string;
+ }
+
+ interface ClipboardEvent extends SyntheticEvent {
+ clipboardData: DataTransfer;
+ }
+
+ interface KeyboardEvent extends SyntheticEvent {
+ altKey: boolean;
+ charCode: number;
+ ctrlKey: boolean;
+ getModifierState(key: string): boolean;
+ key: string;
+ keyCode: number;
+ locale: string;
+ location: number;
+ metaKey: boolean;
+ repeat: boolean;
+ shiftKey: boolean;
+ which: number;
+ }
+
+ interface FocusEvent extends SyntheticEvent {
+ relatedTarget: EventTarget;
+ }
+
+ interface FormEvent extends SyntheticEvent {
+ }
+
+ interface MouseEvent extends SyntheticEvent {
+ altKey: boolean;
+ button: number;
+ buttons: number;
+ clientX: number;
+ clientY: number;
+ ctrlKey: boolean;
+ getModifierState(key: string): boolean;
+ metaKey: boolean;
+ pageX: number;
+ pageY: number;
+ relatedTarget: EventTarget;
+ screenX: number;
+ screenY: number;
+ shiftKey: boolean;
+ }
+
+ interface TouchEvent extends SyntheticEvent {
+ altKey: boolean;
+ changedTouches: TouchList;
+ ctrlKey: boolean;
+ getModifierState(key: string): boolean;
+ metaKey: boolean;
+ shiftKey: boolean;
+ targetTouches: TouchList;
+ touches: TouchList;
+ }
+
+ interface UIEvent extends SyntheticEvent {
+ detail: number;
+ view: AbstractView;
+ }
+
+ interface WheelEvent extends SyntheticEvent {
+ deltaMode: number;
+ deltaX: number;
+ deltaY: number;
+ deltaZ: number;
+ }
+
+ //
+ // Event Handler Types
+ // ----------------------------------------------------------------------
+
+ interface EventHandler {
+ (event: E): void;
+ }
+
+ interface ClipboardEventHandler extends EventHandler {}
+ interface KeyboardEventHandler extends EventHandler {}
+ interface FocusEventHandler extends EventHandler {}
+ interface FormEventHandler extends EventHandler {}
+ interface MouseEventHandler extends EventHandler {}
+ interface TouchEventHandler extends EventHandler {}
+ interface UIEventHandler extends EventHandler {}
+ interface WheelEventHandler extends EventHandler {}
+
+ //
+ // Props / DOM Attributes
+ // ----------------------------------------------------------------------
+
+ interface Props {
+ children?: ReactNode;
+ key?: number | string;
+ ref?: string;
+ }
+
+ interface DOMAttributes extends Props {
+ onCopy?: ClipboardEventHandler;
+ onCut?: ClipboardEventHandler;
+ onPaste?: ClipboardEventHandler;
+ onKeyDown?: KeyboardEventHandler;
+ onKeyPress?: KeyboardEventHandler;
+ onKeyUp?: KeyboardEventHandler;
+ onFocus?: FocusEventHandler;
+ onBlur?: FocusEventHandler;
+ onChange?: FormEventHandler;
+ onInput?: FormEventHandler;
+ onSubmit?: FormEventHandler;
+ onClick?: MouseEventHandler;
+ onDoubleClick?: MouseEventHandler;
+ onDrag?: MouseEventHandler;
+ onDragEnd?: MouseEventHandler;
+ onDragEnter?: MouseEventHandler;
+ onDragExit?: MouseEventHandler;
+ onDragLeave?: MouseEventHandler;
+ onDragOver?: MouseEventHandler;
+ onDragStart?: MouseEventHandler;
+ onDrop?: MouseEventHandler;
+ onMouseDown?: MouseEventHandler;
+ onMouseEnter?: MouseEventHandler;
+ onMouseLeave?: MouseEventHandler;
+ onMouseMove?: MouseEventHandler;
+ onMouseOut?: MouseEventHandler;
+ onMouseOver?: MouseEventHandler;
+ onMouseUp?: MouseEventHandler;
+ onTouchCancel?: TouchEventHandler;
+ onTouchEnd?: TouchEventHandler;
+ onTouchMove?: TouchEventHandler;
+ onTouchStart?: TouchEventHandler;
+ onScroll?: UIEventHandler;
+ onWheel?: WheelEventHandler;
+
+ dangerouslySetInnerHTML?: {
+ __html: string;
+ };
+ }
+
+ interface CSSProperties {
+ columnCount?: number;
+ flex?: number | string;
+ flexGrow?: number;
+ flexShrink?: number;
+ fontWeight?: number;
+ lineClamp?: number;
+ lineHeight?: number;
+ opacity?: number;
+ order?: number;
+ orphans?: number;
+ widows?: number;
+ zIndex?: number;
+ zoom?: number;
+
+ // SVG-related properties
+ fillOpacity?: number;
+ strokeOpacity?: number;
+ }
+
+ interface HTMLAttributes extends DOMAttributes {
+ accept?: string;
+ acceptCharset?: string;
+ accessKey?: string;
+ action?: string;
+ allowFullScreen?: boolean;
+ allowTransparency?: boolean;
+ alt?: string;
+ async?: boolean;
+ autoComplete?: boolean;
+ autoFocus?: boolean;
+ autoPlay?: boolean;
+ cellPadding?: number | string;
+ cellSpacing?: number | string;
+ charSet?: string;
+ checked?: boolean;
+ classID?: string;
+ className?: string;
+ cols?: number;
+ colSpan?: number;
+ content?: string;
+ contentEditable?: boolean;
+ contextMenu?: string;
+ controls?: any;
+ coords?: string;
+ crossOrigin?: string;
+ data?: string;
+ dateTime?: string;
+ defer?: boolean;
+ dir?: string;
+ disabled?: boolean;
+ download?: any;
+ draggable?: boolean;
+ encType?: string;
+ form?: string;
+ formNoValidate?: boolean;
+ frameBorder?: number | string;
+ height?: number | string;
+ hidden?: boolean;
+ href?: string;
+ hrefLang?: string;
+ htmlFor?: string;
+ httpEquiv?: string;
+ icon?: string;
+ id?: string;
+ label?: string;
+ lang?: string;
+ list?: string;
+ loop?: boolean;
+ manifest?: string;
+ max?: number | string;
+ maxLength?: number;
+ media?: string;
+ mediaGroup?: string;
+ method?: string;
+ min?: number | string;
+ multiple?: boolean;
+ muted?: boolean;
+ name?: string;
+ noValidate?: boolean;
+ open?: boolean;
+ pattern?: string;
+ placeholder?: string;
+ poster?: string;
+ preload?: string;
+ radioGroup?: string;
+ readOnly?: boolean;
+ rel?: string;
+ required?: boolean;
+ role?: string;
+ rows?: number;
+ rowSpan?: number;
+ sandbox?: string;
+ scope?: string;
+ scrollLeft?: number;
+ scrolling?: string;
+ scrollTop?: number;
+ seamless?: boolean;
+ selected?: boolean;
+ shape?: string;
+ size?: number;
+ sizes?: string;
+ span?: number;
+ spellCheck?: boolean;
+ src?: string;
+ srcDoc?: string;
+ srcSet?: string;
+ start?: number;
+ step?: number | string;
+ style?: CSSProperties;
+ tabIndex?: number;
+ target?: string;
+ title?: string;
+ type?: string;
+ useMap?: string;
+ value?: string;
+ width?: number | string;
+ wmode?: string;
+
+ // Non-standard Attributes
+ autoCapitalize?: boolean;
+ autoCorrect?: boolean;
+ property?: string;
+ itemProp?: string;
+ itemScope?: boolean;
+ itemType?: string;
+ }
+
+ interface SVGAttributes extends DOMAttributes {
+ cx?: SVGLength | SVGAnimatedLength;
+ cy?: any;
+ d?: string;
+ dx?: SVGLength | SVGAnimatedLength;
+ dy?: SVGLength | SVGAnimatedLength;
+ fill?: any; // SVGPaint | string
+ fillOpacity?: number | string;
+ fontFamily?: string;
+ fontSize?: number | string;
+ fx?: SVGLength | SVGAnimatedLength;
+ fy?: SVGLength | SVGAnimatedLength;
+ gradientTransform?: SVGTransformList | SVGAnimatedTransformList;
+ gradientUnits?: string;
+ markerEnd?: string;
+ markerMid?: string;
+ markerStart?: string;
+ offset?: number | string;
+ opacity?: number | string;
+ patternContentUnits?: string;
+ patternUnits?: string;
+ points?: string;
+ preserveAspectRatio?: string;
+ r?: SVGLength | SVGAnimatedLength;
+ rx?: SVGLength | SVGAnimatedLength;
+ ry?: SVGLength | SVGAnimatedLength;
+ spreadMethod?: string;
+ stopColor?: any; // SVGColor | string
+ stopOpacity?: number | string;
+ stroke?: any; // SVGPaint
+ strokeDasharray?: string;
+ strokeLinecap?: string;
+ strokeOpacity?: number | string;
+ strokeWidth?: SVGLength | SVGAnimatedLength;
+ textAnchor?: string;
+ transform?: SVGTransformList | SVGAnimatedTransformList;
+ version?: string;
+ viewBox?: string;
+ x1?: SVGLength | SVGAnimatedLength;
+ x2?: SVGLength | SVGAnimatedLength;
+ x?: SVGLength | SVGAnimatedLength;
+ y1?: SVGLength | SVGAnimatedLength;
+ y2?: SVGLength | SVGAnimatedLength
+ y?: SVGLength | SVGAnimatedLength;
+ }
+
+ //
+ // React.DOM
+ // ----------------------------------------------------------------------
+
+ interface ReactDOM {
+ // HTML
+ a: HTMLFactory;
+ abbr: HTMLFactory;
+ address: HTMLFactory;
+ area: HTMLFactory;
+ article: HTMLFactory;
+ aside: HTMLFactory;
+ audio: HTMLFactory;
+ b: HTMLFactory;
+ base: HTMLFactory;
+ bdi: HTMLFactory;
+ bdo: HTMLFactory;
+ big: HTMLFactory;
+ blockquote: HTMLFactory;
+ body: HTMLFactory;
+ br: HTMLFactory;
+ button: HTMLFactory;
+ canvas: HTMLFactory;
+ caption: HTMLFactory;
+ cite: HTMLFactory;
+ code: HTMLFactory;
+ col: HTMLFactory;
+ colgroup: HTMLFactory;
+ data: HTMLFactory;
+ datalist: HTMLFactory;
+ dd: HTMLFactory;
+ del: HTMLFactory;
+ details: HTMLFactory;
+ dfn: HTMLFactory;
+ dialog: HTMLFactory;
+ div: HTMLFactory;
+ dl: HTMLFactory;
+ dt: HTMLFactory;
+ em: HTMLFactory;
+ embed: HTMLFactory;
+ fieldset: HTMLFactory;
+ figcaption: HTMLFactory;
+ figure: HTMLFactory;
+ footer: HTMLFactory;
+ form: HTMLFactory;
+ h1: HTMLFactory;
+ h2: HTMLFactory;
+ h3: HTMLFactory;
+ h4: HTMLFactory;
+ h5: HTMLFactory;
+ h6: HTMLFactory;
+ head: HTMLFactory;
+ header: HTMLFactory;
+ hr: HTMLFactory;
+ html: HTMLFactory;
+ i: HTMLFactory;
+ iframe: HTMLFactory;
+ img: HTMLFactory;
+ input: HTMLFactory;
+ ins: HTMLFactory;
+ kbd: HTMLFactory;
+ keygen: HTMLFactory;
+ label: HTMLFactory;
+ legend: HTMLFactory;
+ li: HTMLFactory;
+ link: HTMLFactory;
+ main: HTMLFactory;
+ map: HTMLFactory;
+ mark: HTMLFactory;
+ menu: HTMLFactory;
+ menuitem: HTMLFactory;
+ meta: HTMLFactory;
+ meter: HTMLFactory;
+ nav: HTMLFactory;
+ noscript: HTMLFactory;
+ object: HTMLFactory;
+ ol: HTMLFactory;
+ optgroup: HTMLFactory;
+ option: HTMLFactory;
+ output: HTMLFactory;
+ p: HTMLFactory;
+ param: HTMLFactory;
+ picture: HTMLFactory;
+ pre: HTMLFactory;
+ progress: HTMLFactory;
+ q: HTMLFactory;
+ rp: HTMLFactory;
+ rt: HTMLFactory;
+ ruby: HTMLFactory;
+ s: HTMLFactory;
+ samp: HTMLFactory;
+ script: HTMLFactory;
+ section: HTMLFactory;
+ select: HTMLFactory;
+ small: HTMLFactory;
+ source: HTMLFactory;
+ span: HTMLFactory;
+ strong: HTMLFactory;
+ style: HTMLFactory;
+ sub: HTMLFactory;
+ summary: HTMLFactory;
+ sup: HTMLFactory;
+ table: HTMLFactory;
+ tbody: HTMLFactory;
+ td: HTMLFactory;
+ textarea: HTMLFactory;
+ tfoot: HTMLFactory;
+ th: HTMLFactory;
+ thead: HTMLFactory;
+ time: HTMLFactory;
+ title: HTMLFactory;
+ tr: HTMLFactory;
+ track: HTMLFactory;
+ u: HTMLFactory;
+ ul: HTMLFactory;
+ "var": HTMLFactory;
+ video: HTMLFactory;
+ wbr: HTMLFactory;
+
+ // SVG
+ circle: SVGFactory;
+ defs: SVGFactory;
+ ellipse: SVGFactory;
+ g: SVGFactory;
+ line: SVGFactory;
+ linearGradient: SVGFactory;
+ mask: SVGFactory;
+ path: SVGFactory;
+ pattern: SVGFactory;
+ polygon: SVGFactory;
+ polyline: SVGFactory;
+ radialGradient: SVGFactory;
+ rect: SVGFactory;
+ stop: SVGFactory;
+ svg: SVGFactory;
+ text: SVGFactory;
+ tspan: SVGFactory;
+ }
+
+ //
+ // React.PropTypes
+ // ----------------------------------------------------------------------
+
+ interface Validator {
+ (object: T, key: string, componentName: string): Error;
+ }
+
+ interface Requireable extends Validator {
+ isRequired: Validator;
+ }
+
+ interface ValidationMap {
+ [key: string]: Validator;
+ }
+
+ interface ReactPropTypes {
+ any: Requireable;
+ array: Requireable;
+ bool: Requireable;
+ func: Requireable;
+ number: Requireable;
+ object: Requireable;
+ string: Requireable;
+ node: Requireable;
+ element: Requireable;
+ instanceOf(expectedClass: {}): Requireable;
+ oneOf(types: any[]): Requireable;
+ oneOfType(types: Validator[]): Requireable;
+ arrayOf(type: Validator): Requireable;
+ objectOf(type: Validator): Requireable;
+ shape(type: ValidationMap): Requireable;
+ }
+
+ //
+ // React.Children
+ // ----------------------------------------------------------------------
+
+ interface ReactChildren {
+ map(children: ReactNode, fn: (child: ReactChild) => T): { [key:string]: T };
+ forEach(children: ReactNode, fn: (child: ReactChild) => any): void;
+ count(children: ReactNode): number;
+ only(children: ReactNode): ReactChild;
+ }
+
+ //
+ // Browser Interfaces
+ // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts
+ // ----------------------------------------------------------------------
+
+ interface AbstractView {
+ styleMedia: StyleMedia;
+ document: Document;
+ }
+
+ interface Touch {
+ identifier: number;
+ target: EventTarget;
+ screenX: number;
+ screenY: number;
+ clientX: number;
+ clientY: number;
+ pageX: number;
+ pageY: number;
+ }
+
+ interface TouchList {
+ [index: number]: Touch;
+ length: number;
+ item(index: number): Touch;
+ identifiedTouch(identifier: number): Touch;
+ }
+}
+
diff --git a/react/future/react-addons-0.13.0-tests.ts b/react/future/react-addons-0.13.0-tests.ts
new file mode 100644
index 000000000..a1be24add
--- /dev/null
+++ b/react/future/react-addons-0.13.0-tests.ts
@@ -0,0 +1,387 @@
+///
+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;
+var INPUT_REF: string = "input";
+
+//
+// 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_REF,
+ value: this.state.inputValue
+ }));
+ }
+ });
+
+class ModernComponent extends React.Component
+ implements React.ChildContextProvider {
+
+ constructor(props: Props, context: Context) {
+ super(props, context);
+ this.state = {
+ inputValue: context.someValue,
+ seconds: props.foo
+ };
+ }
+
+ 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
+ });
+ }
+
+ render() {
+ return React.DOM.div(null,
+ React.DOM.input({
+ ref: INPUT_REF,
+ 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.ReactClassicElement =
+ classicFactory(props);
+
+var domFactory: React.DOMFactory =
+ React.createFactory("foo");
+var domFactoryElement: React.ReactDOMElement =
+ domFactory();
+
+// React.createElement
+var element: React.ReactElement =
+ React.createElement(ModernComponent, props);
+var classicElement: React.ReactClassicElement =
+ React.createElement(ClassicComponent, props);
+var domElement: React.ReactHTMLElement =
+ React.createElement("div");
+
+// 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;
+var ref: string = element.ref;
+
+//
+// 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 inputRef: React.HTMLComponent =
+ component.refs[INPUT_REF];
+var value: string = inputRef.getDOMNode().value;
+
+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.ReactHTMLElement => {
+ 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.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;
+}
+class Timer extends React.Component<{}, TimerState, {}> {
+ static state = {
+ secondsElapsed: 0
+ }
+ private _interval: number;
+ tick() {
+ this.setState({ secondsElapsed: this.state.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);
+
+//
+// React.addons
+// --------------------------------------------------------------------------
+
+var cx = React.addons.classSet;
+var className: string = cx({ a: true, b: false, c: true });
+className = cx("a", null, "b");
+
+//
+// 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/react-0.13.0.d.ts b/react/future/react-addons-0.13.0.d.ts
similarity index 79%
rename from react/react-0.13.0.d.ts
rename to react/future/react-addons-0.13.0.d.ts
index 9ee102541..dd06aa1e9 100644
--- a/react/react-0.13.0.d.ts
+++ b/react/future/react-addons-0.13.0.d.ts
@@ -1,42 +1,179 @@
-// Type definitions for React 0.13.0
+// Type definitions for ReactWithAddons v0.13.0 (external module)
// Project: http://facebook.github.io/react/
// Definitions by: Asana , AssureSign
// Definitions: https://github.com/borisyankov/DefinitelyTyped
-declare module React {
+declare module "react/addons" {
//
- // React Elements
+ // React Elements
// ----------------------------------------------------------------------
-
- type ReactType = ComponentClass | string;
- interface ReactElement {
- type: ComponentClass
| string;
+ interface ReactElementBase {
+ type: T;
props: P;
key: number | string;
ref: string;
}
- interface ReactClassicElement extends ReactElement
{
- }
+ interface ReactElement
+ extends ReactElementBase, P> {}
- interface ReactHTMLElement extends ReactElement {}
- interface ReactSVGElement extends ReactElement {}
+ interface ReactClassicElement
+ extends ReactElementBase | string, P> {}
+
+ interface ReactDOMElement // subtype of ReactClassicElement
+ extends ReactElementBase {}
+
+ type ReactHTMLElement = ReactDOMElement;
+ type ReactSVGElement = ReactDOMElement;
//
- // React Nodes
+ // Factories
+ // ----------------------------------------------------------------------
+
+ interface Factory {
+ (props?: P, ...children: ReactNode[]): ReactElement
;
+ }
+
+ interface ClassicFactory
{
+ (props?: P, ...children: ReactNode[]): ReactClassicElement
;
+ }
+
+ interface DOMFactory
{
+ (props?: P, ...children: ReactNode[]): ReactDOMElement
;
+ }
+
+ type HTMLFactory = DOMFactory;
+ type SVGFactory = DOMFactory;
+
+ //
+ // React Nodes
// http://facebook.github.io/react/docs/glossary.html
// ----------------------------------------------------------------------
type ReactText = string | number;
- type ReactChild = ReactElement | ReactText;
+ type ReactChild = ReactElementBase | ReactText;
// Should be Array but type aliases cannot be recursive
type ReactFragment = Array;
type ReactNode = ReactChild | ReactFragment | boolean;
//
- // React Components
+ // Top Level API
+ // ----------------------------------------------------------------------
+
+ function createClass(
+ spec: ComponentSpec
): ClassicComponentClass
;
+
+ function createFactory
(
+ type: string): DOMFactory
;
+ function createFactory
(
+ type: ClassicComponentClass
| string): ClassicFactory
;
+ function createFactory
(
+ type: ComponentClass
): Factory
;
+
+ function createElement
(
+ type: string,
+ props?: P,
+ ...children: ReactNode[]): ReactDOMElement
;
+ function createElement
(
+ type: ClassicComponentClass
| string,
+ props?: P,
+ ...children: ReactNode[]): ReactClassicElement
;
+ function createElement
(
+ type: ComponentClass
,
+ props?: P,
+ ...children: ReactNode[]): ReactElement
;
+
+ function render
(
+ element: ReactDOMElement
,
+ container: Element,
+ callback?: () => any): DOMComponent
;
+ function render
(
+ element: ReactClassicElement
,
+ container: Element,
+ callback?: () => any): ClassicComponent
;
+ function render
(
+ element: ReactElement
,
+ container: Element,
+ callback?: () => any): Component
;
+
+ function unmountComponentAtNode(container: Element): boolean;
+ function renderToString(element: ReactElementBase): string;
+ function renderToStaticMarkup(element: ReactElementBase): 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
+ // ----------------------------------------------------------------------
+
+ // Base component for plain JS classes
+ class Component implements ComponentLifecycle
{
+ constructor(props: P, context: C);
+ setState(state: S, callback?: () => any): void;
+ forceUpdate(): void;
+ props: P;
+ state: S;
+ context: C;
+ refs: {
+ [key: string]: Component
+ };
+ }
+
+ interface ClassicComponent extends Component
{
+ replaceState(nextState: S, callback?: () => any): void;
+ getDOMNode(): TElement;
+ getDOMNode(): Element;
+ isMounted(): boolean;
+ getInitialState?(): S;
+ setProps(nextProps: P, callback?: () => any): void;
+ replaceProps(nextProps: P, callback?: () => any): void;
+ }
+
+ interface DOMComponent extends ClassicComponent
{
+ tagName: string;
+ }
+
+ type HTMLComponent = DOMComponent;
+ type SVGComponent = DOMComponent;
+
+ interface ChildContextProvider {
+ getChildContext(): CC;
+ }
+
+ //
+ // Class Interfaces
+ // ----------------------------------------------------------------------
+
+ interface ComponentClassBase {
+ propTypes?: ValidationMap
;
+ contextTypes?: ValidationMap;
+ childContextTypes?: ValidationMap<{}>;
+ }
+
+ interface ComponentClass extends ComponentClassBase
{
+ new(props?: P, context?: C): Component
;
+ defaultProps?: P;
+ }
+
+ interface ClassicComponentClass
extends ComponentClassBase
{
+ new(props?: P, context?: C): ClassicComponent
;
+ getDefaultProps?(): P;
+ displayName?: string;
+ }
+
+ //
+ // Component Specs and Lifecycle
// ----------------------------------------------------------------------
interface ComponentLifecycle
{
@@ -48,102 +185,7 @@ declare module React {
componentDidUpdate?(prevProps: P, prevState: S, prevContext: C): void;
componentWillUnmount?(): void;
}
-
- // "modern" ES6 classes
- class Component
implements ComponentLifecycle
{
- constructor(props: P, context: C);
- // static members can't be type checked with generics. However, see ComponentClass
- static defaultProps: any;
- static propTypes: ValidationMap;
- static contextTypes: ValidationMap;
- static childContextTypes: ValidationMap;
- static displayName: string;
- setState(state: S, callback?: () => any): void;
- forceUpdate(): void;
- props: P;
- state: S;
- context: C;
- refs: {
- [key: string]: Component
- };
- }
-
- interface ComponentClass {
- new (props: P, context: C): Component
;
- // can cast to get type checking for generics if desired
- defaultProps: P;
- getDefaultProps?(): P;
- propTypes: ValidationMap
;
- contextTypes: ValidationMap;
- childContextTypes: ValidationMap;
- displayName: string;
- }
-
- // "classic" createClass
- class ClassicComponent extends Component
{
- replaceState(nextState: S, callback?: () => any): void;
- getDOMNode(): TElement;
- getDOMNode(): Element;
- isMounted(): boolean;
- getInitialState(): S;
- setProps(nextProps: P, callback?: () => any): void;
- replaceProps(nextProps: P, callback?: () => any): void;
- }
-
- interface ClassicComponentClass extends ComponentClass
{
- new (props: P, context: C): ClassicComponent
;
- }
-
- interface ChildContextProvider {
- getChildContext: () => C;
- }
-
- //
- // ReactElement Factories
- // ----------------------------------------------------------------------
- interface ComponentFactory {
- (props?: P, ...children: ReactNode[]): ReactElement
;
- }
-
- interface HTMLFactory extends ComponentFactory {}
- interface SVGFactory extends ComponentFactory {}
-
- //
- // Top-Level API
- // ----------------------------------------------------------------------
-
- interface TopLevelAPI {
- createClass(spec: ComponentSpec
): ClassicComponentClass
;
- createElement
(type: ClassicComponentClass
, props: P, ...children: ReactNode[]): ReactClassicElement
;
- createElement
(type: ComponentClass
| string, props: P, ...children: ReactNode[]): ReactElement
;
- createFactory
(type: ComponentClass
| string): ComponentFactory
;
- render
(element: ReactClassicElement
, container: Element, callback?: () => any): ClassicComponent
;
- 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;
- findDOMNode(component: Component): Element;
- findDOMNode(component: Component): TElement;
- }
-
- //
- // Component API
- // ----------------------------------------------------------------------
-
- class DOMComponent extends ClassicComponent
{
- tagName: string;
- }
-
- interface HTMLComponent extends DOMComponent {}
- interface SVGComponent extends DOMComponent {}
-
- //
- // Component Specs and Lifecycle
- // ----------------------------------------------------------------------
-
interface Mixin extends ComponentLifecycle
{
mixins?: Mixin
;
statics?: {
@@ -154,13 +196,13 @@ declare module React {
propTypes?: ValidationMap;
contextTypes?: ValidationMap;
childContextTypes?: ValidationMap
-
+
getInitialState?(): S;
getDefaultProps?(): P;
}
interface ComponentSpec extends Mixin
{
- render(): ReactElement;
+ render(): ReactElementBase;
}
//
@@ -266,15 +308,16 @@ declare module React {
interface WheelEventHandler extends EventHandler {}
//
- // Attributes
+ // Props / DOM Attributes
// ----------------------------------------------------------------------
- interface ReactAttributes {
+ interface Props {
children?: ReactNode;
key?: number | string;
ref?: string;
+ }
- // Event Attributes
+ interface DOMAttributes extends Props {
onCopy?: ClipboardEventHandler;
onCut?: ClipboardEventHandler;
onPaste?: ClipboardEventHandler;
@@ -335,7 +378,7 @@ declare module React {
strokeOpacity?: number;
}
- interface HTMLAttributes extends ReactAttributes {
+ interface HTMLAttributes extends DOMAttributes {
accept?: string;
acceptCharset?: string;
accessKey?: string;
@@ -443,9 +486,9 @@ declare module React {
itemType?: string;
}
- interface SVGAttributes extends ReactAttributes {
+ interface SVGAttributes extends DOMAttributes {
cx?: SVGLength | SVGAnimatedLength;
- cy?: any;
+ cy?: any;
d?: string;
dx?: SVGLength | SVGAnimatedLength;
dy?: SVGLength | SVGAnimatedLength;
@@ -490,7 +533,7 @@ declare module React {
}
//
- // React.DOM
+ // React.DOM
// ----------------------------------------------------------------------
interface ReactDOM {
@@ -677,14 +720,36 @@ declare module React {
// React.addons
// ----------------------------------------------------------------------
- interface ClassSet {
- [key: string]: boolean;
- }
+ export var 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;
+
+ // deprecated: use petehunt/react-classset or JedWatson/classnames
+ classSet(cx: { [key: string]: boolean }): string;
+ classSet(...classList: string[]): string;
+
+ cloneWithProps(element: ReactElement
, props: P): ReactElement
;
+
+ update(value: any[], spec: UpdateArraySpec): any[];
+ update(value: {}, spec: UpdateSpec): any;
+
+ // Development tools
+ Perf: ReactPerf;
+ TestUtils: ReactTestUtils;
+ };
//
// React.addons (Transitions)
// ----------------------------------------------------------------------
+ type ReactType = ComponentClass | string;
+
interface TransitionGroupProps {
component?: ReactType;
childFactory?: (child: ReactElement) => ReactElement;
@@ -697,8 +762,10 @@ declare module React {
transitionLeave?: boolean;
}
- interface CSSTransitionGroup extends ComponentClass {}
- interface TransitionGroup extends ComponentClass {}
+ type CSSTransitionGroup =
+ ComponentClass;
+ type TransitionGroup =
+ ComponentClass;
//
// React.addons (Mixins)
@@ -785,28 +852,44 @@ declare module React {
mockComponent(mocked: MockedComponentClass, mockTagName?: string): ReactTestUtils;
isElementOfType(element: ReactElement, type: ReactType): boolean;
+ isTextComponent(instance: Component): boolean;
isDOMComponent(instance: Component): boolean;
isCompositeComponent(instance: Component): boolean;
- isCompositeComponentWithType(instance: Component, type: ComponentClass): boolean;
- isTextComponent(instance: Component): boolean;
+ isCompositeComponentWithType(
+ instance: Component,
+ type: ComponentClass): boolean;
- findAllInRenderedTree(tree: Component, fn: (i: Component) => boolean): Component;
+ findAllInRenderedTree(
+ tree: Component,
+ fn: (i: Component) => boolean): Component;
- scryRenderedDOMComponentsWithClass(tree: Component, className: string): DOMComponent[];
- findRenderedDOMComponentWithClass(tree: Component, className: string): DOMComponent;
+ scryRenderedDOMComponentsWithClass(
+ tree: Component,
+ className: string): DOMComponent[];
+ findRenderedDOMComponentWithClass(
+ tree: Component,
+ className: string): DOMComponent;
- scryRenderedDOMComponentsWithTag(tree: Component, tagName: string): DOMComponent[];
- findRenderedDOMComponentWithTag(tree: Component, tagName: string): DOMComponent;
+ scryRenderedDOMComponentsWithTag(
+ tree: Component,
+ tagName: string): DOMComponent[];
+ findRenderedDOMComponentWithTag(
+ tree: Component