diff --git a/react/README.md b/react/README.md index 07a203920..0c773fd38 100644 --- a/react/README.md +++ b/react/README.md @@ -1,4 +1,4 @@ -# React v0.13.0-beta Type Definitions +# React v0.13.0 Type Definitions This folder contains the following `.d.ts` files: * `react-0.13.0.d.ts` declares the external module `"react"` diff --git a/react/react-addons-global.d.ts b/react/react-addons-global.d.ts index c50ecdc21..891e0d101 100644 --- a/react/react-addons-global.d.ts +++ b/react/react-addons-global.d.ts @@ -1,4 +1,4 @@ -// Type definitions for ReactWithAddons v0.13.0 RC2 (internal module) +// Type definitions for ReactWithAddons v0.13.1 (internal module) // Project: http://facebook.github.io/react/ // Definitions by: Asana , AssureSign // Definitions: https://github.com/borisyankov/DefinitelyTyped @@ -179,6 +179,8 @@ declare module React { findRenderedComponentWithType>( tree: Component, type: ComponentClass): C; + + createRenderer(): ShallowRenderer; } interface SyntheticEventData { @@ -255,5 +257,11 @@ declare module React { touchStart: EventSimulator; wheel: EventSimulator; } + + class ShallowRenderer { + getRenderOutput>(): C; + render(element: ReactElement, context?: any): void; + unmount(): void; + } } diff --git a/react/react-addons-tests.ts b/react/react-addons-tests.ts index 9bd3d5505..72d6db486 100644 --- a/react/react-addons-tests.ts +++ b/react/react-addons-tests.ts @@ -224,6 +224,20 @@ React.DOM.div(htmlAttr); React.DOM.span(htmlAttr); React.DOM.input(htmlAttr); +React.DOM.svg({ viewBox: "0 0 48 48" }, + React.DOM.rect({ + x: 22, + y: 10, + width: 4, + height: 28 + }), + React.DOM.rect({ + x: 10, + y: 22, + width: 28, + height: 4 + })); + // // React.PropTypes // -------------------------------------------------------------------------- @@ -324,7 +338,7 @@ interface TimerState { secondsElapsed: number; } class Timer extends React.Component, TimerState> { - static state = { + state = { secondsElapsed: 0 } private _interval: number; @@ -387,3 +401,8 @@ React.addons.TestUtils.Simulate.click(node); React.addons.TestUtils.Simulate.change(node); React.addons.TestUtils.Simulate.keyDown(node, { key: "Enter" }); +var renderer: React.ShallowRenderer = + React.addons.TestUtils.createRenderer(); +renderer.render(React.createElement(Timer)); +var output: Timer = renderer.getRenderOutput(); + diff --git a/react/react-addons.d.ts b/react/react-addons.d.ts index 19cf44ed2..54fce3ada 100644 --- a/react/react-addons.d.ts +++ b/react/react-addons.d.ts @@ -1,4 +1,4 @@ -// Type definitions for ReactWithAddons v0.13.0 RC2 (external module) +// 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 @@ -131,7 +131,7 @@ declare module "react/addons" { // Base component for plain JS classes class Component implements ComponentLifecycle { - constructor(props: P, context: any); + constructor(props?: P, context?: any); setState(f: (prevState: S, props: P) => S, callback?: () => any): void; setState(state: S, callback?: () => any): void; forceUpdate(): void; @@ -368,14 +368,18 @@ declare module "react/addons" { }; } + // 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; + fontWeight?: number | string; lineClamp?: number; - lineHeight?: number; + lineHeight?: number | string; opacity?: number; order?: number; orphans?: number; @@ -386,6 +390,7 @@ declare module "react/addons" { // SVG-related properties fillOpacity?: number; strokeOpacity?: number; + strokeWidth?: number; } interface HTMLAttributes extends DOMAttributes { @@ -501,18 +506,18 @@ declare module "react/addons" { interface SVGAttributes extends DOMAttributes { ref?: string | ((component: SVGComponent) => void); - cx?: SVGLength | SVGAnimatedLength; - cy?: any; + cx?: number | string; + cy?: number | string; d?: string; - dx?: SVGLength | SVGAnimatedLength; - dy?: SVGLength | SVGAnimatedLength; - fill?: any; // SVGPaint | string + dx?: number | string; + dy?: number | string; + fill?: string; fillOpacity?: number | string; fontFamily?: string; fontSize?: number | string; - fx?: SVGLength | SVGAnimatedLength; - fy?: SVGLength | SVGAnimatedLength; - gradientTransform?: SVGTransformList | SVGAnimatedTransformList; + fx?: number | string; + fy?: number | string; + gradientTransform?: string; gradientUnits?: string; markerEnd?: string; markerMid?: string; @@ -523,27 +528,27 @@ declare module "react/addons" { patternUnits?: string; points?: string; preserveAspectRatio?: string; - r?: SVGLength | SVGAnimatedLength; - rx?: SVGLength | SVGAnimatedLength; - ry?: SVGLength | SVGAnimatedLength; + r?: number | string; + rx?: number | string; + ry?: number | string; spreadMethod?: string; - stopColor?: any; // SVGColor | string + stopColor?: string; stopOpacity?: number | string; - stroke?: any; // SVGPaint + stroke?: string; strokeDasharray?: string; strokeLinecap?: string; strokeOpacity?: number | string; - strokeWidth?: SVGLength | SVGAnimatedLength; + strokeWidth?: number | string; textAnchor?: string; - transform?: SVGTransformList | SVGAnimatedTransformList; + transform?: string; version?: string; viewBox?: string; - x1?: SVGLength | SVGAnimatedLength; - x2?: SVGLength | SVGAnimatedLength; - x?: SVGLength | SVGAnimatedLength; - y1?: SVGLength | SVGAnimatedLength; - y2?: SVGLength | SVGAnimatedLength - y?: SVGLength | SVGAnimatedLength; + x1?: number | string; + x2?: number | string; + x?: number | string; + y1?: number | string; + y2?: number | string + y?: number | string; } // @@ -904,6 +909,8 @@ declare module "react/addons" { findRenderedComponentWithType>( tree: Component, type: ComponentClass): C; + + createRenderer(): ShallowRenderer; } interface SyntheticEventData { @@ -981,6 +988,12 @@ declare module "react/addons" { wheel: EventSimulator; } + class ShallowRenderer { + getRenderOutput>(): C; + render(element: ReactElement, context?: any): void; + unmount(): void; + } + // // Browser Interfaces // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts diff --git a/react/react-global.d.ts b/react/react-global.d.ts index 268d4bf86..f7b7859d4 100644 --- a/react/react-global.d.ts +++ b/react/react-global.d.ts @@ -1,4 +1,4 @@ -// Type definitions for React v0.13.0 RC2 (internal module) +// Type definitions for React v0.13.1 (internal module) // Project: http://facebook.github.io/react/ // Definitions by: Asana , AssureSign // Definitions: https://github.com/borisyankov/DefinitelyTyped @@ -131,7 +131,7 @@ declare module React { // Base component for plain JS classes class Component implements ComponentLifecycle { - constructor(props: P, context: any); + constructor(props?: P, context?: any); setState(f: (prevState: S, props: P) => S, callback?: () => any): void; setState(state: S, callback?: () => any): void; forceUpdate(): void; @@ -368,14 +368,18 @@ declare module React { }; } + // 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; + fontWeight?: number | string; lineClamp?: number; - lineHeight?: number; + lineHeight?: number | string; opacity?: number; order?: number; orphans?: number; @@ -386,6 +390,7 @@ declare module React { // SVG-related properties fillOpacity?: number; strokeOpacity?: number; + strokeWidth?: number; } interface HTMLAttributes extends DOMAttributes { @@ -501,18 +506,18 @@ declare module React { interface SVGAttributes extends DOMAttributes { ref?: string | ((component: SVGComponent) => void); - cx?: SVGLength | SVGAnimatedLength; - cy?: any; + cx?: number | string; + cy?: number | string; d?: string; - dx?: SVGLength | SVGAnimatedLength; - dy?: SVGLength | SVGAnimatedLength; - fill?: any; // SVGPaint | string + dx?: number | string; + dy?: number | string; + fill?: string; fillOpacity?: number | string; fontFamily?: string; fontSize?: number | string; - fx?: SVGLength | SVGAnimatedLength; - fy?: SVGLength | SVGAnimatedLength; - gradientTransform?: SVGTransformList | SVGAnimatedTransformList; + fx?: number | string; + fy?: number | string; + gradientTransform?: string; gradientUnits?: string; markerEnd?: string; markerMid?: string; @@ -523,27 +528,27 @@ declare module React { patternUnits?: string; points?: string; preserveAspectRatio?: string; - r?: SVGLength | SVGAnimatedLength; - rx?: SVGLength | SVGAnimatedLength; - ry?: SVGLength | SVGAnimatedLength; + r?: number | string; + rx?: number | string; + ry?: number | string; spreadMethod?: string; - stopColor?: any; // SVGColor | string + stopColor?: string; stopOpacity?: number | string; - stroke?: any; // SVGPaint + stroke?: string; strokeDasharray?: string; strokeLinecap?: string; strokeOpacity?: number | string; - strokeWidth?: SVGLength | SVGAnimatedLength; + strokeWidth?: number | string; textAnchor?: string; - transform?: SVGTransformList | SVGAnimatedTransformList; + transform?: string; version?: string; viewBox?: string; - x1?: SVGLength | SVGAnimatedLength; - x2?: SVGLength | SVGAnimatedLength; - x?: SVGLength | SVGAnimatedLength; - y1?: SVGLength | SVGAnimatedLength; - y2?: SVGLength | SVGAnimatedLength - y?: SVGLength | SVGAnimatedLength; + x1?: number | string; + x2?: number | string; + x?: number | string; + y1?: number | string; + y2?: number | string + y?: number | string; } // diff --git a/react/react-tests.ts b/react/react-tests.ts index a9b693cab..2802a34cd 100644 --- a/react/react-tests.ts +++ b/react/react-tests.ts @@ -224,6 +224,21 @@ React.DOM.div(htmlAttr); React.DOM.span(htmlAttr); React.DOM.input(htmlAttr); +React.DOM.svg({ viewBox: "0 0 48 48" }, + React.DOM.rect({ + x: 22, + y: 10, + width: 4, + height: 28 + }), + React.DOM.rect({ + x: 10, + y: 22, + width: 28, + height: 4 + })); + + // // React.PropTypes // -------------------------------------------------------------------------- @@ -324,7 +339,7 @@ interface TimerState { secondsElapsed: number; } class Timer extends React.Component<{}, TimerState> { - static state = { + state = { secondsElapsed: 0 } private _interval: number; @@ -334,8 +349,7 @@ class Timer extends React.Component<{}, TimerState> { })); } componentDidMount() { - var me = this; - this._interval = setInterval(() => me.tick(), 1000); + this._interval = setInterval(() => this.tick(), 1000); } componentWillUnmount() { clearInterval(this._interval); diff --git a/react/react.d.ts b/react/react.d.ts index 114938808..64796ddf4 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -1,4 +1,4 @@ -// Type definitions for React v0.13.0 RC2 (external module) +// Type definitions for React v0.13.1 (external module) // Project: http://facebook.github.io/react/ // Definitions by: Asana , AssureSign // Definitions: https://github.com/borisyankov/DefinitelyTyped @@ -131,7 +131,7 @@ declare module "react" { // Base component for plain JS classes class Component implements ComponentLifecycle { - constructor(props: P, context: any); + constructor(props?: P, context?: any); setState(f: (prevState: S, props: P) => S, callback?: () => any): void; setState(state: S, callback?: () => any): void; forceUpdate(): void; @@ -368,14 +368,18 @@ declare module "react" { }; } + // 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; + fontWeight?: number | string; lineClamp?: number; - lineHeight?: number; + lineHeight?: number | string; opacity?: number; order?: number; orphans?: number; @@ -386,6 +390,7 @@ declare module "react" { // SVG-related properties fillOpacity?: number; strokeOpacity?: number; + strokeWidth?: number; } interface HTMLAttributes extends DOMAttributes { @@ -501,18 +506,18 @@ declare module "react" { interface SVGAttributes extends DOMAttributes { ref?: string | ((component: SVGComponent) => void); - cx?: SVGLength | SVGAnimatedLength; - cy?: any; + cx?: number | string; + cy?: number | string; d?: string; - dx?: SVGLength | SVGAnimatedLength; - dy?: SVGLength | SVGAnimatedLength; - fill?: any; // SVGPaint | string + dx?: number | string; + dy?: number | string; + fill?: string; fillOpacity?: number | string; fontFamily?: string; fontSize?: number | string; - fx?: SVGLength | SVGAnimatedLength; - fy?: SVGLength | SVGAnimatedLength; - gradientTransform?: SVGTransformList | SVGAnimatedTransformList; + fx?: number | string; + fy?: number | string; + gradientTransform?: string; gradientUnits?: string; markerEnd?: string; markerMid?: string; @@ -523,27 +528,27 @@ declare module "react" { patternUnits?: string; points?: string; preserveAspectRatio?: string; - r?: SVGLength | SVGAnimatedLength; - rx?: SVGLength | SVGAnimatedLength; - ry?: SVGLength | SVGAnimatedLength; + r?: number | string; + rx?: number | string; + ry?: number | string; spreadMethod?: string; - stopColor?: any; // SVGColor | string + stopColor?: string; stopOpacity?: number | string; - stroke?: any; // SVGPaint + stroke?: string; strokeDasharray?: string; strokeLinecap?: string; strokeOpacity?: number | string; - strokeWidth?: SVGLength | SVGAnimatedLength; + strokeWidth?: number | string; textAnchor?: string; - transform?: SVGTransformList | SVGAnimatedTransformList; + transform?: string; version?: string; viewBox?: string; - x1?: SVGLength | SVGAnimatedLength; - x2?: SVGLength | SVGAnimatedLength; - x?: SVGLength | SVGAnimatedLength; - y1?: SVGLength | SVGAnimatedLength; - y2?: SVGLength | SVGAnimatedLength - y?: SVGLength | SVGAnimatedLength; + x1?: number | string; + x2?: number | string; + x?: number | string; + y1?: number | string; + y2?: number | string + y?: number | string; } //