// Type definitions for ReactWithAddons v0.13.1 (external module) // Project: http://facebook.github.io/react/ // Definitions by: Asana , AssureSign // Definitions: https://github.com/borisyankov/DefinitelyTyped declare module "react/addons" { // // React Elements // ---------------------------------------------------------------------- type ReactType = ComponentClass | string; interface ReactElement

{ type: string | ComponentClass

; props: P; key: string | number; ref: string | ((component: Component) => any); } 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; // // 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 // ---------------------------------------------------------------------- type ReactText = string | number; type ReactChild = ReactElement | ReactText; // Should be Array but type aliases cannot be recursive type ReactFragment = {} | Array; 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[]): DOMElement

; function createElement

( type: ClassicComponentClass

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

; function createElement

( type: ComponentClass

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

; 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

; 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; 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 // ---------------------------------------------------------------------- // 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; 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 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 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; }; displayName?: string; propTypes?: ValidationMap; contextTypes?: ValidationMap; childContextTypes?: ValidationMap getDefaultProps?(): P; getInitialState?(): S; } interface ComponentSpec extends Mixin { render(): ReactElement; } // // 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 DragEvent extends SyntheticEvent { dataTransfer: DataTransfer; } 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 DragEventHandler extends EventHandler {} 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?: string | number; ref?: string | ((component: T) => any); } 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?: DragEventHandler; onDragEnd?: DragEventHandler; onDragEnter?: DragEventHandler; onDragExit?: DragEventHandler; onDragLeave?: DragEventHandler; onDragOver?: DragEventHandler; onDragStart?: DragEventHandler; onDrop?: DragEventHandler; 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; }; } // This interface is not complete. Only properties accepting // unitless numbers are listed here (see CSSProperty.js in React) interface CSSProperties { boxFlex?: number; boxFlexGroup?: number; columnCount?: number; flex?: number | string; flexGrow?: number; flexShrink?: number; fontWeight?: number | string; lineClamp?: number; lineHeight?: number | string; opacity?: number; order?: number; orphans?: number; widows?: number; zIndex?: number; zoom?: number; // SVG-related properties fillOpacity?: number; strokeOpacity?: number; strokeWidth?: number; } interface HTMLAttributes extends DOMAttributes { ref?: string | ((component: HTMLComponent) => void); 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; formAction?: string; formEncType?: string; formMethod?: string; formNoValidate?: boolean; formTarget?: string; frameBorder?: number | string; headers?: string; height?: number | string; hidden?: boolean; high?: number; href?: string; hrefLang?: string; htmlFor?: string; httpEquiv?: string; icon?: string; id?: string; label?: string; lang?: string; list?: string; loop?: boolean; low?: number; manifest?: string; marginHeight?: number; marginWidth?: number; max?: number | string; maxLength?: number; media?: string; mediaGroup?: string; method?: string; min?: number | string; multiple?: boolean; muted?: boolean; name?: string; noValidate?: boolean; open?: boolean; optimum?: number; 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; scoped?: boolean; scrolling?: string; 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; unselectable?: boolean; } interface SVGAttributes extends DOMAttributes { ref?: string | ((component: SVGComponent) => void); cx?: number | string; cy?: number | string; d?: string; dx?: number | string; dy?: number | string; fill?: string; fillOpacity?: number | string; fontFamily?: string; fontSize?: number | string; fx?: number | string; fy?: number | string; gradientTransform?: string; gradientUnits?: string; markerEnd?: string; markerMid?: string; markerStart?: string; offset?: number | string; opacity?: number | string; patternContentUnits?: string; patternUnits?: string; points?: string; preserveAspectRatio?: string; r?: number | string; rx?: number | string; ry?: number | string; spreadMethod?: string; stopColor?: string; stopOpacity?: number | string; stroke?: string; strokeDasharray?: string; strokeLinecap?: string; strokeOpacity?: number | string; strokeWidth?: number | string; textAnchor?: string; transform?: string; version?: string; viewBox?: string; x1?: number | string; x2?: number | string; x?: number | string; y1?: number | string; y2?: number | string y?: number | string; } // // 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; } // // React.addons // ---------------------------------------------------------------------- export module addons { export var CSSTransitionGroup: CSSTransitionGroup; export var TransitionGroup: TransitionGroup; export var LinkedStateMixin: LinkedStateMixin; export var PureRenderMixin: PureRenderMixin; export function batchedUpdates( callback: (a: A, b: B) => any, a: A, b: B): void; export function batchedUpdates(callback: (a: A) => any, a: A): void; export function batchedUpdates(callback: () => any): void; // deprecated: use petehunt/react-classset or JedWatson/classnames export function classSet(cx: { [key: string]: boolean }): string; export function classSet(...classList: string[]): string; export function cloneWithProps

( element: DOMElement

, props: P): DOMElement

; export function cloneWithProps

( element: ClassicElement

, props: P): ClassicElement

; export function cloneWithProps

( element: ReactElement

, props: P): ReactElement

; export function createFragment( object: { [key: string]: ReactNode }): ReactFragment; export function update(value: any[], spec: UpdateArraySpec): any[]; export function update(value: {}, spec: UpdateSpec): any; // Development tools export import Perf = ReactPerf; export import TestUtils = ReactTestUtils; } // // React.addons (Transitions) // ---------------------------------------------------------------------- interface TransitionGroupProps { component?: ReactType; childFactory?: (child: ReactElement) => ReactElement; } interface CSSTransitionGroupProps extends TransitionGroupProps { transitionName: string; transitionAppear?: boolean; transitionEnter?: boolean; transitionLeave?: boolean; } type CSSTransitionGroup = ComponentClass; type TransitionGroup = 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; } module ReactPerf { export function start(): void; export function stop(): void; export function printInclusive(measurements: Measurements[]): void; export function printExclusive(measurements: Measurements[]): void; export function printWasted(measurements: Measurements[]): void; export function printDOM(measurements: Measurements[]): void; export function getLastMeasurements(): Measurements[]; } // // React.addons.TestUtils // ---------------------------------------------------------------------- interface MockedComponentClass { new(): any; } module ReactTestUtils { export import Simulate = ReactSimulate; export function renderIntoDocument

( element: ReactElement

): Component; export function renderIntoDocument>( element: ReactElement): C; export function mockComponent( mocked: MockedComponentClass, mockTagName?: string): typeof ReactTestUtils; export function isElementOfType( element: ReactElement, type: ReactType): boolean; export function isTextComponent(instance: Component): boolean; export function isDOMComponent(instance: Component): boolean; export function isCompositeComponent(instance: Component): boolean; export function isCompositeComponentWithType( instance: Component, type: ComponentClass): boolean; export function findAllInRenderedTree( tree: Component, fn: (i: Component) => boolean): Component; export function scryRenderedDOMComponentsWithClass( tree: Component, className: string): DOMComponent[]; export function findRenderedDOMComponentWithClass( tree: Component, className: string): DOMComponent; export function scryRenderedDOMComponentsWithTag( tree: Component, tagName: string): DOMComponent[]; export function findRenderedDOMComponentWithTag( tree: Component, tagName: string): DOMComponent; export function scryRenderedComponentsWithType

( tree: Component, type: ComponentClass

): Component[]; export function scryRenderedComponentsWithType>( tree: Component, type: ComponentClass): C[]; export function findRenderedComponentWithType

( tree: Component, type: ComponentClass

): Component; export function findRenderedComponentWithType>( tree: Component, type: ComponentClass): C; export function createRenderer(): ShallowRenderer; } interface SyntheticEventData { altKey?: boolean; button?: number; buttons?: number; clientX?: number; clientY?: number; changedTouches?: TouchList; charCode?: boolean; clipboardData?: DataTransfer; ctrlKey?: boolean; deltaMode?: number; deltaX?: number; deltaY?: number; deltaZ?: number; detail?: number; getModifierState?(key: string): boolean; key?: string; keyCode?: number; locale?: string; location?: number; metaKey?: boolean; pageX?: number; pageY?: number; relatedTarget?: EventTarget; repeat?: boolean; screenX?: number; screenY?: number; shiftKey?: boolean; targetTouches?: TouchList; touches?: TouchList; view?: AbstractView; which?: number; } interface EventSimulator { (element: Element, eventData?: SyntheticEventData): void; (component: Component, eventData?: SyntheticEventData): void; } module ReactSimulate { export var blur: EventSimulator; export var change: EventSimulator; export var click: EventSimulator; export var cut: EventSimulator; export var doubleClick: EventSimulator; export var drag: EventSimulator; export var dragEnd: EventSimulator; export var dragEnter: EventSimulator; export var dragExit: EventSimulator; export var dragLeave: EventSimulator; export var dragOver: EventSimulator; export var dragStart: EventSimulator; export var drop: EventSimulator; export var focus: EventSimulator; export var input: EventSimulator; export var keyDown: EventSimulator; export var keyPress: EventSimulator; export var keyUp: EventSimulator; export var mouseDown: EventSimulator; export var mouseEnter: EventSimulator; export var mouseLeave: EventSimulator; export var mouseMove: EventSimulator; export var mouseOut: EventSimulator; export var mouseOver: EventSimulator; export var mouseUp: EventSimulator; export var paste: EventSimulator; export var scroll: EventSimulator; export var submit: EventSimulator; export var touchCancel: EventSimulator; export var touchEnd: EventSimulator; export var touchMove: EventSimulator; export var touchStart: EventSimulator; export var wheel: EventSimulator; } class ShallowRenderer { getRenderOutput>(): E; getRenderOutput(): ReactElement; render(element: ReactElement, context?: any): void; unmount(): void; } // // 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; } }