mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-08-16 06:50:19 +00:00
Moving React 0.13 to be the default
React 0.13 is now released so it should be the default type definition. http://facebook.github.io/react/blog/2015/03/10/react-v0.13.html
This commit is contained in:
Phips Peter
Vendored
+1
-1
@@ -3,7 +3,7 @@
|
||||
// Definitions by: Yuichi Murata <https://github.com/mrk21>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
|
||||
///<reference path='../react/react.d.ts' />
|
||||
///<reference path='../react/legacy/react-0.12.d.ts' />
|
||||
///<reference path='../eventemitter3/eventemitter3.d.ts' />
|
||||
|
||||
declare module Fluxxor {
|
||||
|
||||
Vendored
+1
-1
@@ -3,7 +3,7 @@
|
||||
// Definitions by: Steve Baker <https://github.com/stkb/>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
|
||||
/// <reference path="../react/react.d.ts" />
|
||||
/// <reference path="../react/legacy/react-0.12.d.ts" />
|
||||
|
||||
declare module 'jsnox' {
|
||||
|
||||
|
||||
Vendored
+1
-1
@@ -3,7 +3,7 @@
|
||||
// Definitions by: Yuichi Murata <https://github.com/mrk21>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
|
||||
///<reference path='../react/react.d.ts' />
|
||||
///<reference path='../react/legacy/react-0.12.d.ts' />
|
||||
|
||||
declare module ReactRouter {
|
||||
//
|
||||
|
||||
@@ -1,354 +0,0 @@
|
||||
/// <reference path="react-addons-0.13.0.d.ts" />
|
||||
// requiring react/addons instead of react so react.d.ts doesn't get picked up
|
||||
// TODO: import "react" once 0.13.0 is released
|
||||
import React = require("react/addons");
|
||||
|
||||
interface Props extends React.Props<MyComponent> {
|
||||
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<Props, State> {
|
||||
reset(): void;
|
||||
}
|
||||
|
||||
var props: Props = {
|
||||
key: 42,
|
||||
ref: "myComponent42",
|
||||
hello: "world",
|
||||
foo: 42,
|
||||
bar: true
|
||||
};
|
||||
|
||||
var container: Element;
|
||||
|
||||
//
|
||||
// Top-Level API
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var ClassicComponent: React.ClassicComponentClass<Props> =
|
||||
React.createClass<Props, State>({
|
||||
getDefaultProps: () => {
|
||||
return <Props>{
|
||||
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 => this._input = input,
|
||||
value: this.state.inputValue
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
class ModernComponent extends React.Component<Props, State>
|
||||
implements React.ChildContextProvider<ChildContext> {
|
||||
|
||||
static propTypes: React.ValidationMap<Props> = {
|
||||
foo: React.PropTypes.number
|
||||
}
|
||||
|
||||
static contextTypes: React.ValidationMap<Context> = {
|
||||
someValue: React.PropTypes.string
|
||||
}
|
||||
|
||||
static childContextTypes: React.ValidationMap<ChildContext> = {
|
||||
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
|
||||
});
|
||||
}
|
||||
|
||||
private _input: React.HTMLComponent;
|
||||
|
||||
render() {
|
||||
return React.DOM.div(null,
|
||||
React.DOM.input({
|
||||
ref: input => this._input = input,
|
||||
value: this.state.inputValue
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
// React.createFactory
|
||||
var factory: React.Factory<Props> =
|
||||
React.createFactory(ModernComponent);
|
||||
var factoryElement: React.ReactElement<Props> =
|
||||
factory(props);
|
||||
|
||||
var classicFactory: React.ClassicFactory<Props> =
|
||||
React.createFactory(ClassicComponent);
|
||||
var classicFactoryElement: React.ClassicElement<Props> =
|
||||
classicFactory(props);
|
||||
|
||||
var domFactory: React.DOMFactory<any> =
|
||||
React.createFactory("foo");
|
||||
var domFactoryElement: React.DOMElement<any> =
|
||||
domFactory();
|
||||
|
||||
// React.createElement
|
||||
var element: React.ReactElement<Props> =
|
||||
React.createElement(ModernComponent, props);
|
||||
var classicElement: React.ClassicElement<Props> =
|
||||
React.createElement(ClassicComponent, props);
|
||||
var domElement: React.HTMLElement =
|
||||
React.createElement("div");
|
||||
|
||||
// React.cloneElement
|
||||
var clonedElement: React.ReactElement<Props> =
|
||||
React.cloneElement(element, props);
|
||||
var clonedClassicElement: React.ClassicElement<Props> =
|
||||
React.cloneElement(classicElement, props);
|
||||
var clonedDOMElement: React.HTMLElement =
|
||||
React.cloneElement(domElement);
|
||||
|
||||
// React.render
|
||||
var component: React.Component<Props, any> =
|
||||
React.render(element, container);
|
||||
var classicComponent: React.ClassicComponent<Props, any> =
|
||||
React.render(classicElement, container);
|
||||
var domComponent: React.DOMComponent<any> =
|
||||
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;
|
||||
|
||||
//
|
||||
// React Components
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var displayName: string = ClassicComponent.displayName;
|
||||
var defaultProps: Props = ClassicComponent.getDefaultProps();
|
||||
var propTypes: React.ValidationMap<Props> = 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<HTMLDivElement>();
|
||||
var isMounted: boolean = classicComponent.isMounted();
|
||||
classicComponent.setProps(elementProps);
|
||||
classicComponent.replaceProps(props);
|
||||
classicComponent.replaceState({ inputValue: "???", seconds: 60 });
|
||||
|
||||
var myComponent = <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>STRONG</strong>"
|
||||
}
|
||||
};
|
||||
React.DOM.div(htmlAttr);
|
||||
React.DOM.span(htmlAttr);
|
||||
React.DOM.input(htmlAttr);
|
||||
|
||||
//
|
||||
// React.PropTypes
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var PropTypesSpecification: React.ComponentSpec<any, any> = {
|
||||
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.ReactElement<any> => {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
//
|
||||
// ContextTypes
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var ContextTypesSpecification: React.ComponentSpec<any, any> = {
|
||||
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.ReactElement<any> => {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
//
|
||||
// React.Children
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var childMap: { [key: string]: number } =
|
||||
React.Children.map<number>(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((prevState, props) => ({
|
||||
secondsElapsed: prevState.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);
|
||||
|
||||
@@ -1,389 +0,0 @@
|
||||
/// <reference path="react-addons-0.13.0.d.ts" />
|
||||
import React = require("react/addons");
|
||||
|
||||
interface Props extends React.Props<MyComponent> {
|
||||
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<Props, State> {
|
||||
reset(): void;
|
||||
}
|
||||
|
||||
var props: Props = {
|
||||
key: 42,
|
||||
ref: "myComponent42",
|
||||
hello: "world",
|
||||
foo: 42,
|
||||
bar: true
|
||||
};
|
||||
|
||||
var container: Element;
|
||||
|
||||
//
|
||||
// Top-Level API
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var ClassicComponent: React.ClassicComponentClass<Props> =
|
||||
React.createClass<Props, State>({
|
||||
getDefaultProps: () => {
|
||||
return <Props>{
|
||||
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 => this._input = input,
|
||||
value: this.state.inputValue
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
class ModernComponent extends React.Component<Props, State>
|
||||
implements React.ChildContextProvider<ChildContext> {
|
||||
|
||||
static propTypes: React.ValidationMap<Props> = {
|
||||
foo: React.PropTypes.number
|
||||
}
|
||||
|
||||
static contextTypes: React.ValidationMap<Context> = {
|
||||
someValue: React.PropTypes.string
|
||||
}
|
||||
|
||||
static childContextTypes: React.ValidationMap<ChildContext> = {
|
||||
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
|
||||
});
|
||||
}
|
||||
|
||||
private _input: React.HTMLComponent;
|
||||
|
||||
render() {
|
||||
return React.DOM.div(null,
|
||||
React.DOM.input({
|
||||
ref: input => this._input = input,
|
||||
value: this.state.inputValue
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
// React.createFactory
|
||||
var factory: React.Factory<Props> =
|
||||
React.createFactory(ModernComponent);
|
||||
var factoryElement: React.ReactElement<Props> =
|
||||
factory(props);
|
||||
|
||||
var classicFactory: React.ClassicFactory<Props> =
|
||||
React.createFactory(ClassicComponent);
|
||||
var classicFactoryElement: React.ClassicElement<Props> =
|
||||
classicFactory(props);
|
||||
|
||||
var domFactory: React.DOMFactory<any> =
|
||||
React.createFactory("foo");
|
||||
var domFactoryElement: React.DOMElement<any> =
|
||||
domFactory();
|
||||
|
||||
// React.createElement
|
||||
var element: React.ReactElement<Props> =
|
||||
React.createElement(ModernComponent, props);
|
||||
var classicElement: React.ClassicElement<Props> =
|
||||
React.createElement(ClassicComponent, props);
|
||||
var domElement: React.HTMLElement =
|
||||
React.createElement("div");
|
||||
|
||||
// React.cloneElement
|
||||
var clonedElement: React.ReactElement<Props> =
|
||||
React.cloneElement(element, props);
|
||||
var clonedClassicElement: React.ClassicElement<Props> =
|
||||
React.cloneElement(classicElement, props);
|
||||
var clonedDOMElement: React.HTMLElement =
|
||||
React.cloneElement(domElement);
|
||||
|
||||
// React.render
|
||||
var component: React.Component<Props, any> =
|
||||
React.render(element, container);
|
||||
var classicComponent: React.ClassicComponent<Props, any> =
|
||||
React.render(classicElement, container);
|
||||
var domComponent: React.DOMComponent<any> =
|
||||
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;
|
||||
|
||||
//
|
||||
// React Components
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var displayName: string = ClassicComponent.displayName;
|
||||
var defaultProps: Props = ClassicComponent.getDefaultProps();
|
||||
var propTypes: React.ValidationMap<Props> = 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<HTMLDivElement>();
|
||||
var isMounted: boolean = classicComponent.isMounted();
|
||||
classicComponent.setProps(elementProps);
|
||||
classicComponent.replaceProps(props);
|
||||
classicComponent.replaceState({ inputValue: "???", seconds: 60 });
|
||||
|
||||
var myComponent = <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>STRONG</strong>"
|
||||
}
|
||||
};
|
||||
React.DOM.div(htmlAttr);
|
||||
React.DOM.span(htmlAttr);
|
||||
React.DOM.input(htmlAttr);
|
||||
|
||||
//
|
||||
// React.PropTypes
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var PropTypesSpecification: React.ComponentSpec<any, any> = {
|
||||
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.ReactElement<any> => {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
//
|
||||
// ContextTypes
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var ContextTypesSpecification: React.ComponentSpec<any, any> = {
|
||||
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.ReactElement<any> => {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
//
|
||||
// React.Children
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var childMap: { [key: string]: number } =
|
||||
React.Children.map<number>(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<React.Props<Timer>, TimerState> {
|
||||
static state = {
|
||||
secondsElapsed: 0
|
||||
}
|
||||
private _interval: number;
|
||||
tick() {
|
||||
this.setState((prevState, props) => ({
|
||||
secondsElapsed: prevState.secondsElapsed + 1
|
||||
}));
|
||||
}
|
||||
componentDidMount() {
|
||||
this._interval = setInterval(() => this.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.createFragment({
|
||||
a: React.DOM.div(),
|
||||
b: ["a", false, React.createElement("span")]
|
||||
});
|
||||
|
||||
//
|
||||
// React.addons (Transitions)
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
React.createFactory(React.addons.TransitionGroup)({ component: "div" });
|
||||
React.createFactory(React.addons.CSSTransitionGroup)({
|
||||
component: React.createClass({
|
||||
render: (): React.ReactElement<any> => 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" });
|
||||
|
||||
@@ -0,0 +1,235 @@
|
||||
/// <reference path="react-0.12.d.ts" />
|
||||
import React = require("react");
|
||||
|
||||
interface Props {
|
||||
hello: string;
|
||||
world?: string;
|
||||
foo: number;
|
||||
bar: boolean;
|
||||
}
|
||||
|
||||
interface State {
|
||||
inputValue?: string;
|
||||
seconds?: number;
|
||||
}
|
||||
|
||||
interface MyComponent extends React.CompositeComponent<Props, State> {
|
||||
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 reactClass: React.ComponentClass<Props> = React.createClass<Props>({
|
||||
getDefaultProps: () => {
|
||||
return <Props>{
|
||||
hello: undefined,
|
||||
world: "peace",
|
||||
foo: undefined,
|
||||
bar: undefined
|
||||
};
|
||||
},
|
||||
getInitialState: () => {
|
||||
return {
|
||||
inputValue: "React.js",
|
||||
seconds: 0
|
||||
};
|
||||
},
|
||||
reset: () => {
|
||||
this.replaceState(this.getInitialState());
|
||||
},
|
||||
render: () => {
|
||||
return React.DOM.div(null,
|
||||
React.DOM.input({
|
||||
ref: INPUT_REF,
|
||||
value: this.state.inputValue
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
var reactElement: React.ReactElement<Props> =
|
||||
React.createElement<Props>(reactClass, props);
|
||||
|
||||
var reactFactory: React.ComponentFactory<Props> =
|
||||
React.createFactory<Props>(reactClass);
|
||||
|
||||
var component: React.Component<Props> =
|
||||
React.render<Props>(reactElement, container);
|
||||
|
||||
var unmounted: boolean = React.unmountComponentAtNode(container);
|
||||
var str: string = React.renderToString(reactElement);
|
||||
var markup: string = React.renderToStaticMarkup(reactElement);
|
||||
var notValid: boolean = React.isValidElement(props); // false
|
||||
var isValid = React.isValidElement(reactElement); // true
|
||||
React.initializeTouchEvents(true);
|
||||
|
||||
//
|
||||
// React Elements
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var type = reactElement.type;
|
||||
var elementProps: Props = reactElement.props;
|
||||
var key = reactElement.key;
|
||||
var ref: string = reactElement.ref;
|
||||
var factoryElement: React.ReactElement<Props> = reactFactory(elementProps);
|
||||
|
||||
//
|
||||
// React Components
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var displayName: string = reactClass.displayName;
|
||||
var defaultProps: Props = reactClass.getDefaultProps();
|
||||
var propTypes: React.ValidationMap<Props> = reactClass.propTypes;
|
||||
|
||||
//
|
||||
// Component API
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var htmlElement: Element = component.getDOMNode();
|
||||
var divElement: HTMLDivElement = component.getDOMNode<HTMLDivElement>();
|
||||
var isMounted: boolean = component.isMounted();
|
||||
component.setProps(elementProps);
|
||||
component.replaceProps(props);
|
||||
|
||||
var compComponent: React.CompositeComponent<Props, State> =
|
||||
<React.CompositeComponent<Props, State>>component;
|
||||
var initialState: State = compComponent.state;
|
||||
compComponent.setState({ inputValue: "!!!" });
|
||||
compComponent.replaceState({ inputValue: "???", seconds: 60 });
|
||||
compComponent.forceUpdate();
|
||||
|
||||
var inputRef: React.HTMLComponent =
|
||||
<React.HTMLComponent>compComponent.refs[INPUT_REF];
|
||||
var value: string = inputRef.getDOMNode<HTMLInputElement>().value;
|
||||
|
||||
var myComponent = <MyComponent>compComponent;
|
||||
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>STRONG</strong>"
|
||||
}
|
||||
};
|
||||
React.DOM.div(htmlAttr);
|
||||
React.DOM.span(htmlAttr);
|
||||
React.DOM.input(htmlAttr);
|
||||
|
||||
//
|
||||
// React.PropTypes
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var PropTypesSpecification: React.ComponentSpec<any, any> = {
|
||||
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;
|
||||
}
|
||||
};
|
||||
|
||||
//
|
||||
// React.Children
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var childMap: { [key: string]: number } =
|
||||
React.Children.map<number>(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;
|
||||
}
|
||||
interface Timer extends React.CompositeComponent<{}, TimerState> {
|
||||
}
|
||||
var Timer = React.createClass({
|
||||
displayName: "Timer",
|
||||
getInitialState: () => {
|
||||
return { secondsElapsed: 0 };
|
||||
},
|
||||
tick: () => {
|
||||
var me = <Timer>this;
|
||||
me.setState({
|
||||
secondsElapsed: me.state.secondsElapsed + 1
|
||||
});
|
||||
},
|
||||
componentDidMount: () => {
|
||||
this.interval = setInterval(this.tick, 1000);
|
||||
},
|
||||
componentWillUnmount: () => {
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
render: () => {
|
||||
var me = <Timer>this;
|
||||
return React.DOM.div(
|
||||
null,
|
||||
"Seconds Elapsed: ",
|
||||
me.state.secondsElapsed
|
||||
);
|
||||
}
|
||||
});
|
||||
var mountNode: Element;
|
||||
React.render(React.createElement(Timer, null), mountNode);
|
||||
|
||||
+340
-167
@@ -1,56 +1,27 @@
|
||||
// Type definitions for React v0.13.0 RC2 (external module)
|
||||
// Type definitions for React 0.12.1
|
||||
// Project: http://facebook.github.io/react/
|
||||
// Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>
|
||||
// Definitions by: Asana <https://asana.com>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
|
||||
declare module "react" {
|
||||
declare module React {
|
||||
//
|
||||
// React Elements
|
||||
// React Elements
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type ReactType = ComponentClass<any> | string;
|
||||
|
||||
interface ReactElement<P> {
|
||||
type: string | ComponentClass<P>;
|
||||
type: ComponentClass<P> | string;
|
||||
props: P;
|
||||
key: string | number;
|
||||
ref: string | ((component: Component<P, any>) => any);
|
||||
key: number | string;
|
||||
ref: string;
|
||||
}
|
||||
|
||||
interface ClassicElement<P> extends ReactElement<P> {
|
||||
type: string | ClassicComponentClass<P>;
|
||||
ref: string | ((component: ClassicComponent<P, any>) => any);
|
||||
}
|
||||
|
||||
interface DOMElement<P> extends ClassicElement<P> {
|
||||
type: string;
|
||||
ref: string | ((component: DOMComponent<P>) => any);
|
||||
}
|
||||
|
||||
type HTMLElement = DOMElement<HTMLAttributes>;
|
||||
type SVGElement = DOMElement<SVGAttributes>;
|
||||
interface ReactHTMLElement extends ReactElement<HTMLAttributes> {}
|
||||
interface ReactSVGElement extends ReactElement<SVGAttributes> {}
|
||||
|
||||
//
|
||||
// Factories
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface Factory<P> {
|
||||
(props?: P, ...children: ReactNode[]): ReactElement<P>;
|
||||
}
|
||||
|
||||
interface ClassicFactory<P> extends Factory<P> {
|
||||
(props?: P, ...children: ReactNode[]): ClassicElement<P>;
|
||||
}
|
||||
|
||||
interface DOMFactory<P> extends ClassicFactory<P> {
|
||||
(props?: P, ...children: ReactNode[]): DOMElement<P>;
|
||||
}
|
||||
|
||||
type HTMLFactory = DOMFactory<HTMLAttributes>;
|
||||
type SVGFactory = DOMFactory<SVGAttributes>;
|
||||
|
||||
//
|
||||
// React Nodes
|
||||
// React Nodes
|
||||
// http://facebook.github.io/react/docs/glossary.html
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
@@ -58,157 +29,106 @@ declare module "react" {
|
||||
type ReactChild = ReactElement<any> | ReactText;
|
||||
|
||||
// Should be Array<ReactNode> but type aliases cannot be recursive
|
||||
type ReactFragment = {} | Array<ReactChild | any[] | boolean>;
|
||||
type ReactFragment = Array<ReactChild | any[] | boolean>;
|
||||
type ReactNode = ReactChild | ReactFragment | boolean;
|
||||
|
||||
//
|
||||
// Top Level API
|
||||
// React Components
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
function createClass<P>(spec: ComponentSpec<P, any>): ClassicComponentClass<P>;
|
||||
interface ComponentStatics<P> {
|
||||
displayName?: string;
|
||||
getDefaultProps?(): P;
|
||||
propTypes?: ValidationMap<P>;
|
||||
}
|
||||
|
||||
function createFactory<P>(type: string): DOMFactory<P>;
|
||||
function createFactory<P>(type: ClassicComponentClass<P> | string): ClassicFactory<P>;
|
||||
function createFactory<P>(type: ComponentClass<P>): Factory<P>;
|
||||
interface ComponentClass<P> extends ComponentStatics<P> {
|
||||
// Deprecated in 0.12. See http://fb.me/react-legacyfactory
|
||||
// new(props: P): ReactElement<P>;
|
||||
// (props: P): ReactElement<P>;
|
||||
}
|
||||
|
||||
function createElement<P>(
|
||||
type: string,
|
||||
props?: P,
|
||||
...children: ReactNode[]): DOMElement<P>;
|
||||
function createElement<P>(
|
||||
type: ClassicComponentClass<P> | string,
|
||||
props?: P,
|
||||
...children: ReactNode[]): ClassicElement<P>;
|
||||
function createElement<P>(
|
||||
type: ComponentClass<P>,
|
||||
props?: P,
|
||||
...children: ReactNode[]): ReactElement<P>;
|
||||
//
|
||||
// ReactElement Factories
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
function cloneElement<P>(
|
||||
element: DOMElement<P>,
|
||||
props?: P,
|
||||
...children: ReactNode[]): DOMElement<P>;
|
||||
function cloneElement<P>(
|
||||
element: ClassicElement<P>,
|
||||
props?: P,
|
||||
...children: ReactNode[]): ClassicElement<P>;
|
||||
function cloneElement<P>(
|
||||
element: ReactElement<P>,
|
||||
props?: P,
|
||||
...children: ReactNode[]): ReactElement<P>;
|
||||
interface ComponentFactory<P> {
|
||||
(props?: P, ...children: ReactNode[]): ReactElement<P>;
|
||||
}
|
||||
|
||||
interface HTMLFactory extends ComponentFactory<HTMLAttributes> {}
|
||||
interface SVGFactory extends ComponentFactory<SVGAttributes> {}
|
||||
|
||||
function render<P>(
|
||||
element: DOMElement<P>,
|
||||
container: Element,
|
||||
callback?: () => any): DOMComponent<P>;
|
||||
function render<P, S>(
|
||||
element: ClassicElement<P>,
|
||||
container: Element,
|
||||
callback?: () => any): ClassicComponent<P, S>;
|
||||
function render<P, S>(
|
||||
element: ReactElement<P>,
|
||||
container: Element,
|
||||
callback?: () => any): Component<P, S>;
|
||||
//
|
||||
// Top-Level API
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
function unmountComponentAtNode(container: Element): boolean;
|
||||
function renderToString(element: ReactElement<any>): string;
|
||||
function renderToStaticMarkup(element: ReactElement<any>): string;
|
||||
function isValidElement(object: {}): boolean;
|
||||
function initializeTouchEvents(shouldUseTouch: boolean): void;
|
||||
|
||||
function findDOMNode<TElement extends Element>(
|
||||
componentOrElement: Component<any, any> | Element): TElement;
|
||||
function findDOMNode(
|
||||
componentOrElement: Component<any, any> | Element): Element;
|
||||
|
||||
var DOM: ReactDOM;
|
||||
var PropTypes: ReactPropTypes;
|
||||
var Children: ReactChildren;
|
||||
interface TopLevelAPI {
|
||||
createClass<P>(spec: ComponentSpec<P, any>): ComponentClass<P>;
|
||||
createElement<P>(type: ComponentClass<P> | string, props: P, ...children: ReactNode[]): ReactElement<P>;
|
||||
createFactory<P>(componentClass: ComponentClass<P>): ComponentFactory<P>;
|
||||
render<P>(element: ReactElement<P>, container: Element, callback?: () => any): Component<P>;
|
||||
unmountComponentAtNode(container: Element): boolean;
|
||||
renderToString(element: ReactElement<any>): string;
|
||||
renderToStaticMarkup(element: ReactElement<any>): string;
|
||||
isValidElement(object: {}): boolean;
|
||||
initializeTouchEvents(shouldUseTouch: boolean): void;
|
||||
}
|
||||
|
||||
//
|
||||
// Component API
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
// Base component for plain JS classes
|
||||
class Component<P, S> implements ComponentLifecycle<P, S> {
|
||||
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<any, any>
|
||||
};
|
||||
}
|
||||
|
||||
interface ClassicComponent<P, S> extends Component<P, S> {
|
||||
replaceState(nextState: S, callback?: () => any): void;
|
||||
interface Component<P> {
|
||||
// Use this overload to cast the returned element to a more specific type.
|
||||
// Eg: var name = this.refs['name'].getDOMNode<HTMLInputElement>().value;
|
||||
getDOMNode<TElement extends Element>(): TElement;
|
||||
getDOMNode(): Element;
|
||||
isMounted(): boolean;
|
||||
getInitialState?(): S;
|
||||
|
||||
props: P;
|
||||
setProps(nextProps: P, callback?: () => any): void;
|
||||
replaceProps(nextProps: P, callback?: () => any): void;
|
||||
}
|
||||
|
||||
interface DOMComponent<P> extends ClassicComponent<P, any> {
|
||||
interface DOMComponent<P> extends Component<P> {
|
||||
tagName: string;
|
||||
}
|
||||
|
||||
type HTMLComponent = DOMComponent<HTMLAttributes>;
|
||||
type SVGComponent = DOMComponent<SVGAttributes>;
|
||||
|
||||
interface ChildContextProvider<CC> {
|
||||
getChildContext(): CC;
|
||||
}
|
||||
|
||||
//
|
||||
// Class Interfaces
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ComponentClass<P> {
|
||||
new(props?: P, context?: any): Component<P, any>;
|
||||
propTypes?: ValidationMap<P>;
|
||||
contextTypes?: ValidationMap<any>;
|
||||
childContextTypes?: ValidationMap<any>;
|
||||
defaultProps?: P;
|
||||
}
|
||||
|
||||
interface ClassicComponentClass<P> extends ComponentClass<P> {
|
||||
new(props?: P, context?: any): ClassicComponent<P, any>;
|
||||
getDefaultProps?(): P;
|
||||
displayName?: string;
|
||||
interface HTMLComponent extends DOMComponent<HTMLAttributes> {}
|
||||
interface SVGComponent extends DOMComponent<SVGAttributes> {}
|
||||
|
||||
interface CompositeComponent<P, S> extends Component<P>, ComponentSpec<P, S> {
|
||||
state: S;
|
||||
setState(nextState: S, callback?: () => any): void;
|
||||
replaceState(nextState: S, callback?: () => any): void;
|
||||
forceUpdate(callback?: () => any): void;
|
||||
refs: {
|
||||
[key: string]: Component<any>
|
||||
};
|
||||
}
|
||||
|
||||
//
|
||||
// Component Specs and Lifecycle
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ComponentLifecycle<P, S> {
|
||||
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<P, S> extends ComponentLifecycle<P, S> {
|
||||
interface Mixin<P, S> extends ComponentStatics<P> {
|
||||
mixins?: Mixin<P, S>;
|
||||
statics?: {
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
displayName?: string;
|
||||
propTypes?: ValidationMap<any>;
|
||||
contextTypes?: ValidationMap<any>;
|
||||
childContextTypes?: ValidationMap<any>
|
||||
|
||||
getDefaultProps?(): P;
|
||||
// Definition methods
|
||||
getInitialState?(): S;
|
||||
|
||||
// Delegate methods
|
||||
componentWillMount?(): void;
|
||||
componentDidMount?(): void;
|
||||
componentWillReceiveProps?(nextProps: P): void;
|
||||
shouldComponentUpdate?(nextProps: P, nextState: S): boolean;
|
||||
componentWillUpdate?(nextProps: P, nextState: S): void;
|
||||
componentDidUpdate?(prevProps: P, prevState: S): void;
|
||||
componentWillUnmount?(): void;
|
||||
}
|
||||
|
||||
interface ComponentSpec<P, S> extends Mixin<P, S> {
|
||||
@@ -318,16 +238,15 @@ declare module "react" {
|
||||
interface WheelEventHandler extends EventHandler<WheelEvent> {}
|
||||
|
||||
//
|
||||
// Props / DOM Attributes
|
||||
// Attributes
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface Props<T> {
|
||||
export interface ReactAttributes {
|
||||
children?: ReactNode;
|
||||
key?: string | number;
|
||||
ref?: string | ((component: T) => any);
|
||||
}
|
||||
key?: number | string;
|
||||
ref?: string;
|
||||
|
||||
interface DOMAttributes extends Props<DOMComponent<any>> {
|
||||
// Event Attributes
|
||||
onCopy?: ClipboardEventHandler;
|
||||
onCut?: ClipboardEventHandler;
|
||||
onPaste?: ClipboardEventHandler;
|
||||
@@ -388,9 +307,7 @@ declare module "react" {
|
||||
strokeOpacity?: number;
|
||||
}
|
||||
|
||||
interface HTMLAttributes extends DOMAttributes {
|
||||
ref?: string | ((component: HTMLComponent) => void);
|
||||
|
||||
interface HTMLAttributes extends ReactAttributes {
|
||||
accept?: string;
|
||||
acceptCharset?: string;
|
||||
accessKey?: string;
|
||||
@@ -498,11 +415,9 @@ declare module "react" {
|
||||
itemType?: string;
|
||||
}
|
||||
|
||||
interface SVGAttributes extends DOMAttributes {
|
||||
ref?: string | ((component: SVGComponent) => void);
|
||||
|
||||
interface SVGAttributes extends ReactAttributes {
|
||||
cx?: SVGLength | SVGAnimatedLength;
|
||||
cy?: any;
|
||||
cy?: any;
|
||||
d?: string;
|
||||
dx?: SVGLength | SVGAnimatedLength;
|
||||
dy?: SVGLength | SVGAnimatedLength;
|
||||
@@ -547,7 +462,7 @@ declare module "react" {
|
||||
}
|
||||
|
||||
//
|
||||
// React.DOM
|
||||
// React.DOM
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ReactDOM {
|
||||
@@ -730,6 +645,254 @@ declare module "react" {
|
||||
only(children: ReactNode): ReactChild;
|
||||
}
|
||||
|
||||
//
|
||||
// React.addons
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ClassSet {
|
||||
[key: string]: boolean;
|
||||
}
|
||||
|
||||
//
|
||||
// React.addons (Transitions)
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface TransitionGroupProps {
|
||||
component?: ReactType;
|
||||
childFactory?: (child: ReactElement<any>) => ReactElement<any>;
|
||||
}
|
||||
|
||||
interface CSSTransitionGroupProps extends TransitionGroupProps {
|
||||
transitionName: string;
|
||||
transitionAppear?: boolean;
|
||||
transitionEnter?: boolean;
|
||||
transitionLeave?: boolean;
|
||||
}
|
||||
|
||||
interface CSSTransitionGroup extends ComponentClass<CSSTransitionGroupProps> {}
|
||||
interface TransitionGroup extends ComponentClass<TransitionGroupProps> {}
|
||||
|
||||
//
|
||||
// React.addons (Mixins)
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ReactLink<T> {
|
||||
value: T;
|
||||
requestChange(newValue: T): void;
|
||||
}
|
||||
|
||||
interface LinkedStateMixin extends Mixin<any, any> {
|
||||
linkState<T>(key: string): ReactLink<T>;
|
||||
}
|
||||
|
||||
interface PureRenderMixin extends Mixin<any, any> {
|
||||
}
|
||||
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
|
||||
interface ReactPerf {
|
||||
start(): void;
|
||||
stop(): void;
|
||||
printInclusive(measurements: Measurements[]): void;
|
||||
printExclusive(measurements: Measurements[]): void;
|
||||
printWasted(measurements: Measurements[]): void;
|
||||
printDOM(measurements: Measurements[]): void;
|
||||
getLastMeasurements(): Measurements[];
|
||||
}
|
||||
|
||||
//
|
||||
// React.addons.TestUtils
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface MockedComponentClass {
|
||||
new(): any;
|
||||
}
|
||||
|
||||
interface ReactTestUtils {
|
||||
Simulate: Simulate;
|
||||
|
||||
renderIntoDocument<P>(element: ReactElement<P>): Component<P>;
|
||||
renderIntoDocument<C extends Component<any>>(element: ReactElement<any>): C;
|
||||
|
||||
mockComponent(mocked: MockedComponentClass, mockTagName?: string): ReactTestUtils;
|
||||
|
||||
isElementOfType(element: ReactElement<any>, type: ReactType): boolean;
|
||||
isDOMComponent(instance: Component<any>): boolean;
|
||||
isCompositeComponent(instance: Component<any>): boolean;
|
||||
isCompositeComponentWithType(instance: Component<any>, type: ComponentClass<any>): boolean;
|
||||
isTextComponent(instance: Component<any>): boolean;
|
||||
|
||||
findAllInRenderedTree(tree: Component<any>, fn: (i: Component<any>) => boolean): Component<any>;
|
||||
|
||||
scryRenderedDOMComponentsWithClass(tree: Component<any>, className: string): DOMComponent<any>[];
|
||||
findRenderedDOMComponentWithClass(tree: Component<any>, className: string): DOMComponent<any>;
|
||||
|
||||
scryRenderedDOMComponentsWithTag(tree: Component<any>, tagName: string): DOMComponent<any>[];
|
||||
findRenderedDOMComponentWithTag(tree: Component<any>, tagName: string): DOMComponent<any>;
|
||||
|
||||
scryRenderedComponentsWithType<P, S>(
|
||||
tree: Component<any>, type: ComponentClass<P>): CompositeComponent<P, S>[];
|
||||
scryRenderedComponentsWithType<C extends CompositeComponent<any, any>>(
|
||||
tree: Component<any>, type: ComponentClass<any>): C[];
|
||||
|
||||
findRenderedComponentWithType<P, S>(
|
||||
tree: Component<any>, type: ComponentClass<P>): CompositeComponent<P, S>;
|
||||
findRenderedComponentWithType<C extends CompositeComponent<any, any>>(
|
||||
tree: Component<any>, type: ComponentClass<any>): C;
|
||||
}
|
||||
|
||||
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;
|
||||
(descriptor: Component<any>, eventData?: SyntheticEventData): void;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
//
|
||||
// react Exports
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface Exports extends TopLevelAPI {
|
||||
DOM: ReactDOM;
|
||||
PropTypes: ReactPropTypes;
|
||||
Children: ReactChildren;
|
||||
}
|
||||
|
||||
//
|
||||
// react/addons Exports
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface AddonsExports extends Exports {
|
||||
addons: {
|
||||
CSSTransitionGroup: CSSTransitionGroup;
|
||||
LinkedStateMixin: LinkedStateMixin;
|
||||
PureRenderMixin: PureRenderMixin;
|
||||
TransitionGroup: TransitionGroup;
|
||||
|
||||
batchedUpdates<A, B>(callback: (a: A, b: B) => any, a: A, b: B): void;
|
||||
batchedUpdates<A>(callback: (a: A) => any, a: A): void;
|
||||
batchedUpdates(callback: () => any): void;
|
||||
|
||||
classSet(cx: ClassSet): string;
|
||||
cloneWithProps<P>(element: ReactElement<P>, props: P): ReactElement<P>;
|
||||
|
||||
update(value: any[], spec: UpdateArraySpec): any[];
|
||||
update(value: {}, spec: UpdateSpec): any;
|
||||
|
||||
// Development tools
|
||||
Perf: ReactPerf;
|
||||
TestUtils: ReactTestUtils;
|
||||
};
|
||||
}
|
||||
|
||||
//
|
||||
// Browser Interfaces
|
||||
// https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts
|
||||
@@ -759,3 +922,13 @@ declare module "react" {
|
||||
}
|
||||
}
|
||||
|
||||
declare module "react" {
|
||||
var exports: React.Exports;
|
||||
export = exports;
|
||||
}
|
||||
|
||||
declare module "react/addons" {
|
||||
var exports: React.AddonsExports;
|
||||
export = exports;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
/// <reference path="react-0.12.d.ts" />
|
||||
import React = require("react/addons");
|
||||
|
||||
var isImportant: boolean;
|
||||
var isRead: boolean;
|
||||
var classSet: React.ClassSet = {
|
||||
"message": true,
|
||||
"message-important": isImportant,
|
||||
"message-read": isRead
|
||||
};
|
||||
var cx = React.addons.classSet;
|
||||
var classes: string = cx(classSet);
|
||||
|
||||
//
|
||||
// React.addons (Transitions)
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
React.createFactory(React.addons.TransitionGroup)({ component: "div" });
|
||||
React.createFactory(React.addons.CSSTransitionGroup)({
|
||||
component: React.createClass({
|
||||
render: (): React.ReactElement<any> => null
|
||||
}),
|
||||
childFactory: (c) => c,
|
||||
transitionName: "transition",
|
||||
transitionAppear: false,
|
||||
transitionEnter: true,
|
||||
transitionLeave: true
|
||||
});
|
||||
|
||||
//
|
||||
// React.addons.TestUtils
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var that: React.CompositeComponent<any, any>;
|
||||
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"});
|
||||
|
||||
interface GreetingProps {
|
||||
name: string;
|
||||
}
|
||||
interface GreetingState {
|
||||
morning: boolean;
|
||||
}
|
||||
interface Greeting extends React.CompositeComponent<GreetingProps, GreetingState> {
|
||||
}
|
||||
var Greeting = React.createClass({
|
||||
displayName: "Greeting",
|
||||
getInitialState: function() {
|
||||
return {morning: true};
|
||||
},
|
||||
render: function() {
|
||||
var me = <Greeting>this;
|
||||
return React.DOM.div(
|
||||
null,
|
||||
me.state.morning ? "Hello " : "Goodbye ",
|
||||
me.props.name);
|
||||
}
|
||||
});
|
||||
|
||||
var root = React.addons.TestUtils.renderIntoDocument(
|
||||
React.createElement(Greeting, {name: "John"}));
|
||||
var greeting = <Greeting>React.addons.TestUtils
|
||||
.findRenderedComponentWithType(root, Greeting);
|
||||
greeting.setState({
|
||||
morning: false
|
||||
});
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
// Project: http://facebook.github.io/react/
|
||||
// Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
/// <reference path="react-global-0.13.0.d.ts" />
|
||||
/// <reference path="react-global.d.ts" />
|
||||
|
||||
declare module React {
|
||||
//
|
||||
+361
-40
@@ -1,15 +1,366 @@
|
||||
/// <reference path="react.d.ts" />
|
||||
/// <reference path="react-addons.d.ts" />
|
||||
import React = require("react/addons");
|
||||
|
||||
var isImportant: boolean;
|
||||
var isRead: boolean;
|
||||
var classSet: React.ClassSet = {
|
||||
"message": true,
|
||||
"message-important": isImportant,
|
||||
"message-read": isRead
|
||||
interface Props extends React.Props<MyComponent> {
|
||||
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<Props, State> {
|
||||
reset(): void;
|
||||
}
|
||||
|
||||
var props: Props = {
|
||||
key: 42,
|
||||
ref: "myComponent42",
|
||||
hello: "world",
|
||||
foo: 42,
|
||||
bar: true
|
||||
};
|
||||
|
||||
var container: Element;
|
||||
|
||||
//
|
||||
// Top-Level API
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var ClassicComponent: React.ClassicComponentClass<Props> =
|
||||
React.createClass<Props, State>({
|
||||
getDefaultProps: () => {
|
||||
return <Props>{
|
||||
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 => this._input = input,
|
||||
value: this.state.inputValue
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
class ModernComponent extends React.Component<Props, State>
|
||||
implements React.ChildContextProvider<ChildContext> {
|
||||
|
||||
static propTypes: React.ValidationMap<Props> = {
|
||||
foo: React.PropTypes.number
|
||||
}
|
||||
|
||||
static contextTypes: React.ValidationMap<Context> = {
|
||||
someValue: React.PropTypes.string
|
||||
}
|
||||
|
||||
static childContextTypes: React.ValidationMap<ChildContext> = {
|
||||
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
|
||||
});
|
||||
}
|
||||
|
||||
private _input: React.HTMLComponent;
|
||||
|
||||
render() {
|
||||
return React.DOM.div(null,
|
||||
React.DOM.input({
|
||||
ref: input => this._input = input,
|
||||
value: this.state.inputValue
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
// React.createFactory
|
||||
var factory: React.Factory<Props> =
|
||||
React.createFactory(ModernComponent);
|
||||
var factoryElement: React.ReactElement<Props> =
|
||||
factory(props);
|
||||
|
||||
var classicFactory: React.ClassicFactory<Props> =
|
||||
React.createFactory(ClassicComponent);
|
||||
var classicFactoryElement: React.ClassicElement<Props> =
|
||||
classicFactory(props);
|
||||
|
||||
var domFactory: React.DOMFactory<any> =
|
||||
React.createFactory("foo");
|
||||
var domFactoryElement: React.DOMElement<any> =
|
||||
domFactory();
|
||||
|
||||
// React.createElement
|
||||
var element: React.ReactElement<Props> =
|
||||
React.createElement(ModernComponent, props);
|
||||
var classicElement: React.ClassicElement<Props> =
|
||||
React.createElement(ClassicComponent, props);
|
||||
var domElement: React.HTMLElement =
|
||||
React.createElement("div");
|
||||
|
||||
// React.cloneElement
|
||||
var clonedElement: React.ReactElement<Props> =
|
||||
React.cloneElement(element, props);
|
||||
var clonedClassicElement: React.ClassicElement<Props> =
|
||||
React.cloneElement(classicElement, props);
|
||||
var clonedDOMElement: React.HTMLElement =
|
||||
React.cloneElement(domElement);
|
||||
|
||||
// React.render
|
||||
var component: React.Component<Props, any> =
|
||||
React.render(element, container);
|
||||
var classicComponent: React.ClassicComponent<Props, any> =
|
||||
React.render(classicElement, container);
|
||||
var domComponent: React.DOMComponent<any> =
|
||||
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;
|
||||
|
||||
//
|
||||
// React Components
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var displayName: string = ClassicComponent.displayName;
|
||||
var defaultProps: Props = ClassicComponent.getDefaultProps();
|
||||
var propTypes: React.ValidationMap<Props> = 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<HTMLDivElement>();
|
||||
var isMounted: boolean = classicComponent.isMounted();
|
||||
classicComponent.setProps(elementProps);
|
||||
classicComponent.replaceProps(props);
|
||||
classicComponent.replaceState({ inputValue: "???", seconds: 60 });
|
||||
|
||||
var myComponent = <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>STRONG</strong>"
|
||||
}
|
||||
};
|
||||
React.DOM.div(htmlAttr);
|
||||
React.DOM.span(htmlAttr);
|
||||
React.DOM.input(htmlAttr);
|
||||
|
||||
//
|
||||
// React.PropTypes
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var PropTypesSpecification: React.ComponentSpec<any, any> = {
|
||||
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.ReactElement<any> => {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
//
|
||||
// ContextTypes
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var ContextTypesSpecification: React.ComponentSpec<any, any> = {
|
||||
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.ReactElement<any> => {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
//
|
||||
// React.Children
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var childMap: { [key: string]: number } =
|
||||
React.Children.map<number>(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<React.Props<Timer>, TimerState> {
|
||||
static state = {
|
||||
secondsElapsed: 0
|
||||
}
|
||||
private _interval: number;
|
||||
tick() {
|
||||
this.setState((prevState, props) => ({
|
||||
secondsElapsed: prevState.secondsElapsed + 1
|
||||
}));
|
||||
}
|
||||
componentDidMount() {
|
||||
this._interval = setInterval(() => this.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 classes: string = cx(classSet);
|
||||
var className: string = cx({ a: true, b: false, c: true });
|
||||
className = cx("a", null, "b");
|
||||
|
||||
React.addons.createFragment({
|
||||
a: React.DOM.div(),
|
||||
b: ["a", false, React.createElement("span")]
|
||||
});
|
||||
|
||||
//
|
||||
// React.addons (Transitions)
|
||||
@@ -31,38 +382,8 @@ React.createFactory(React.addons.CSSTransitionGroup)({
|
||||
// React.addons.TestUtils
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var that: React.CompositeComponent<any, any>;
|
||||
var node = that.refs["input"].getDOMNode();
|
||||
var node: Element;
|
||||
React.addons.TestUtils.Simulate.click(node);
|
||||
React.addons.TestUtils.Simulate.change(node);
|
||||
React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"});
|
||||
React.addons.TestUtils.Simulate.keyDown(node, { key: "Enter" });
|
||||
|
||||
interface GreetingProps {
|
||||
name: string;
|
||||
}
|
||||
interface GreetingState {
|
||||
morning: boolean;
|
||||
}
|
||||
interface Greeting extends React.CompositeComponent<GreetingProps, GreetingState> {
|
||||
}
|
||||
var Greeting = React.createClass({
|
||||
displayName: "Greeting",
|
||||
getInitialState: function() {
|
||||
return {morning: true};
|
||||
},
|
||||
render: function() {
|
||||
var me = <Greeting>this;
|
||||
return React.DOM.div(
|
||||
null,
|
||||
me.state.morning ? "Hello " : "Goodbye ",
|
||||
me.props.name);
|
||||
}
|
||||
});
|
||||
|
||||
var root = React.addons.TestUtils.renderIntoDocument(
|
||||
React.createElement(Greeting, {name: "John"}));
|
||||
var greeting = <Greeting>React.addons.TestUtils
|
||||
.findRenderedComponentWithType(root, Greeting);
|
||||
greeting.setState({
|
||||
morning: false
|
||||
});
|
||||
|
||||
+199
-82
@@ -1,7 +1,7 @@
|
||||
/// <reference path="react.d.ts" />
|
||||
import React = require("react");
|
||||
|
||||
interface Props {
|
||||
interface Props extends React.Props<MyComponent> {
|
||||
hello: string;
|
||||
world?: string;
|
||||
foo: number;
|
||||
@@ -13,7 +13,15 @@ interface State {
|
||||
seconds?: number;
|
||||
}
|
||||
|
||||
interface MyComponent extends React.CompositeComponent<Props, State> {
|
||||
interface Context {
|
||||
someValue?: string;
|
||||
}
|
||||
|
||||
interface ChildContext {
|
||||
someOtherValue: string;
|
||||
}
|
||||
|
||||
interface MyComponent extends React.Component<Props, State> {
|
||||
reset(): void;
|
||||
}
|
||||
|
||||
@@ -26,95 +34,167 @@ var props: Props = {
|
||||
};
|
||||
|
||||
var container: Element;
|
||||
var INPUT_REF: string = "input";
|
||||
|
||||
//
|
||||
// Top-Level API
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var reactClass: React.ComponentClass<Props> = React.createClass<Props>({
|
||||
getDefaultProps: () => {
|
||||
return <Props>{
|
||||
hello: undefined,
|
||||
world: "peace",
|
||||
foo: undefined,
|
||||
bar: undefined
|
||||
};
|
||||
},
|
||||
getInitialState: () => {
|
||||
var ClassicComponent: React.ClassicComponentClass<Props> =
|
||||
React.createClass<Props, State>({
|
||||
getDefaultProps: () => {
|
||||
return <Props>{
|
||||
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 => this._input = input,
|
||||
value: this.state.inputValue
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
class ModernComponent extends React.Component<Props, State>
|
||||
implements React.ChildContextProvider<ChildContext> {
|
||||
|
||||
static propTypes: React.ValidationMap<Props> = {
|
||||
foo: React.PropTypes.number
|
||||
}
|
||||
|
||||
static contextTypes: React.ValidationMap<Context> = {
|
||||
someValue: React.PropTypes.string
|
||||
}
|
||||
|
||||
static childContextTypes: React.ValidationMap<ChildContext> = {
|
||||
someOtherValue: React.PropTypes.string
|
||||
}
|
||||
|
||||
getChildContext() {
|
||||
return {
|
||||
inputValue: "React.js",
|
||||
seconds: 0
|
||||
};
|
||||
},
|
||||
reset: () => {
|
||||
this.replaceState(this.getInitialState());
|
||||
},
|
||||
render: () => {
|
||||
someOtherValue: 'foo'
|
||||
}
|
||||
}
|
||||
|
||||
state = {
|
||||
inputValue: this.context.someValue,
|
||||
seconds: this.props.foo
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.setState({
|
||||
inputValue: this.context.someValue,
|
||||
seconds: this.props.foo
|
||||
});
|
||||
}
|
||||
|
||||
private _input: React.HTMLComponent;
|
||||
|
||||
render() {
|
||||
return React.DOM.div(null,
|
||||
React.DOM.input({
|
||||
ref: INPUT_REF,
|
||||
ref: input => this._input = input,
|
||||
value: this.state.inputValue
|
||||
}));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var reactElement: React.ReactElement<Props> =
|
||||
React.createElement<Props>(reactClass, props);
|
||||
// React.createFactory
|
||||
var factory: React.Factory<Props> =
|
||||
React.createFactory(ModernComponent);
|
||||
var factoryElement: React.ReactElement<Props> =
|
||||
factory(props);
|
||||
|
||||
var reactFactory: React.ComponentFactory<Props> =
|
||||
React.createFactory<Props>(reactClass);
|
||||
var classicFactory: React.ClassicFactory<Props> =
|
||||
React.createFactory(ClassicComponent);
|
||||
var classicFactoryElement: React.ClassicElement<Props> =
|
||||
classicFactory(props);
|
||||
|
||||
var component: React.Component<Props> =
|
||||
React.render<Props>(reactElement, container);
|
||||
var domFactory: React.DOMFactory<any> =
|
||||
React.createFactory("foo");
|
||||
var domFactoryElement: React.DOMElement<any> =
|
||||
domFactory();
|
||||
|
||||
// React.createElement
|
||||
var element: React.ReactElement<Props> =
|
||||
React.createElement(ModernComponent, props);
|
||||
var classicElement: React.ClassicElement<Props> =
|
||||
React.createElement(ClassicComponent, props);
|
||||
var domElement: React.HTMLElement =
|
||||
React.createElement("div");
|
||||
|
||||
// React.cloneElement
|
||||
var clonedElement: React.ReactElement<Props> =
|
||||
React.cloneElement(element, props);
|
||||
var clonedClassicElement: React.ClassicElement<Props> =
|
||||
React.cloneElement(classicElement, props);
|
||||
var clonedDOMElement: React.HTMLElement =
|
||||
React.cloneElement(domElement);
|
||||
|
||||
// React.render
|
||||
var component: React.Component<Props, any> =
|
||||
React.render(element, container);
|
||||
var classicComponent: React.ClassicComponent<Props, any> =
|
||||
React.render(classicElement, container);
|
||||
var domComponent: React.DOMComponent<any> =
|
||||
React.render(domElement, container);
|
||||
|
||||
// Other Top-Level API
|
||||
var unmounted: boolean = React.unmountComponentAtNode(container);
|
||||
var str: string = React.renderToString(reactElement);
|
||||
var markup: string = React.renderToStaticMarkup(reactElement);
|
||||
var str: string = React.renderToString(element);
|
||||
var markup: string = React.renderToStaticMarkup(element);
|
||||
var notValid: boolean = React.isValidElement(props); // false
|
||||
var isValid = React.isValidElement(reactElement); // true
|
||||
var isValid = React.isValidElement(element); // true
|
||||
React.initializeTouchEvents(true);
|
||||
var domNode: Element = React.findDOMNode(component);
|
||||
domNode = React.findDOMNode(domNode);
|
||||
|
||||
//
|
||||
// React Elements
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var type = reactElement.type;
|
||||
var elementProps: Props = reactElement.props;
|
||||
var key = reactElement.key;
|
||||
var ref: string = reactElement.ref;
|
||||
var factoryElement: React.ReactElement<Props> = reactFactory(elementProps);
|
||||
var type = element.type;
|
||||
var elementProps: Props = element.props;
|
||||
var key = element.key;
|
||||
|
||||
//
|
||||
// React Components
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var displayName: string = reactClass.displayName;
|
||||
var defaultProps: Props = reactClass.getDefaultProps();
|
||||
var propTypes: React.ValidationMap<Props> = reactClass.propTypes;
|
||||
var displayName: string = ClassicComponent.displayName;
|
||||
var defaultProps: Props = ClassicComponent.getDefaultProps();
|
||||
var propTypes: React.ValidationMap<Props> = ClassicComponent.propTypes;
|
||||
|
||||
//
|
||||
// Component API
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var htmlElement: Element = component.getDOMNode();
|
||||
var divElement: HTMLDivElement = component.getDOMNode<HTMLDivElement>();
|
||||
var isMounted: boolean = component.isMounted();
|
||||
component.setProps(elementProps);
|
||||
component.replaceProps(props);
|
||||
// modern
|
||||
var componentState: State = component.state;
|
||||
component.setState({ inputValue: "!!!" });
|
||||
component.forceUpdate();
|
||||
|
||||
var compComponent: React.CompositeComponent<Props, State> =
|
||||
<React.CompositeComponent<Props, State>>component;
|
||||
var initialState: State = compComponent.state;
|
||||
compComponent.setState({ inputValue: "!!!" });
|
||||
compComponent.replaceState({ inputValue: "???", seconds: 60 });
|
||||
compComponent.forceUpdate();
|
||||
// classic
|
||||
var htmlElement: Element = classicComponent.getDOMNode();
|
||||
var divElement: HTMLDivElement = classicComponent.getDOMNode<HTMLDivElement>();
|
||||
var isMounted: boolean = classicComponent.isMounted();
|
||||
classicComponent.setProps(elementProps);
|
||||
classicComponent.replaceProps(props);
|
||||
classicComponent.replaceState({ inputValue: "???", seconds: 60 });
|
||||
|
||||
var inputRef: React.HTMLComponent =
|
||||
<React.HTMLComponent>compComponent.refs[INPUT_REF];
|
||||
var value: string = inputRef.getDOMNode<HTMLInputElement>().value;
|
||||
|
||||
var myComponent = <MyComponent>compComponent;
|
||||
var myComponent = <MyComponent>component;
|
||||
myComponent.reset();
|
||||
|
||||
//
|
||||
@@ -180,7 +260,48 @@ var PropTypesSpecification: React.ComponentSpec<any, any> = {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
render: (): React.ReactHTMLElement => {
|
||||
render: (): React.ReactElement<any> => {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
//
|
||||
// ContextTypes
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var ContextTypesSpecification: React.ComponentSpec<any, any> = {
|
||||
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.ReactElement<any> => {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
@@ -202,34 +323,30 @@ var onlyChild = React.Children.only([null, [[["Hallo"], true]], false]);
|
||||
interface TimerState {
|
||||
secondsElapsed: number;
|
||||
}
|
||||
interface Timer extends React.CompositeComponent<{}, TimerState> {
|
||||
}
|
||||
var Timer = React.createClass({
|
||||
displayName: "Timer",
|
||||
getInitialState: () => {
|
||||
return { secondsElapsed: 0 };
|
||||
},
|
||||
tick: () => {
|
||||
var me = <Timer>this;
|
||||
me.setState({
|
||||
secondsElapsed: me.state.secondsElapsed + 1
|
||||
});
|
||||
},
|
||||
componentDidMount: () => {
|
||||
this.interval = setInterval(this.tick, 1000);
|
||||
},
|
||||
componentWillUnmount: () => {
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
render: () => {
|
||||
var me = <Timer>this;
|
||||
class Timer extends React.Component<{}, TimerState> {
|
||||
static state = {
|
||||
secondsElapsed: 0
|
||||
}
|
||||
private _interval: number;
|
||||
tick() {
|
||||
this.setState((prevState, props) => ({
|
||||
secondsElapsed: prevState.secondsElapsed + 1
|
||||
}));
|
||||
}
|
||||
componentDidMount() {
|
||||
var me = this;
|
||||
this._interval = setInterval(() => me.tick(), 1000);
|
||||
}
|
||||
componentWillUnmount() {
|
||||
clearInterval(this._interval);
|
||||
}
|
||||
render() {
|
||||
return React.DOM.div(
|
||||
null,
|
||||
"Seconds Elapsed: ",
|
||||
me.state.secondsElapsed
|
||||
this.state.secondsElapsed
|
||||
);
|
||||
}
|
||||
});
|
||||
var mountNode: Element;
|
||||
React.render(React.createElement(Timer, null), mountNode);
|
||||
}
|
||||
React.render(React.createElement(Timer), container);
|
||||
|
||||
|
||||
Vendored
+167
-340
@@ -1,27 +1,56 @@
|
||||
// Type definitions for React 0.12.1
|
||||
// Type definitions for React v0.13.0 RC2 (external module)
|
||||
// Project: http://facebook.github.io/react/
|
||||
// Definitions by: Asana <https://asana.com>
|
||||
// Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
|
||||
declare module React {
|
||||
declare module "react" {
|
||||
//
|
||||
// React Elements
|
||||
// React Elements
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type ReactType = ComponentClass<any> | string;
|
||||
|
||||
interface ReactElement<P> {
|
||||
type: ComponentClass<P> | string;
|
||||
type: string | ComponentClass<P>;
|
||||
props: P;
|
||||
key: number | string;
|
||||
ref: string;
|
||||
key: string | number;
|
||||
ref: string | ((component: Component<P, any>) => any);
|
||||
}
|
||||
|
||||
interface ReactHTMLElement extends ReactElement<HTMLAttributes> {}
|
||||
interface ReactSVGElement extends ReactElement<SVGAttributes> {}
|
||||
interface ClassicElement<P> extends ReactElement<P> {
|
||||
type: string | ClassicComponentClass<P>;
|
||||
ref: string | ((component: ClassicComponent<P, any>) => any);
|
||||
}
|
||||
|
||||
interface DOMElement<P> extends ClassicElement<P> {
|
||||
type: string;
|
||||
ref: string | ((component: DOMComponent<P>) => any);
|
||||
}
|
||||
|
||||
type HTMLElement = DOMElement<HTMLAttributes>;
|
||||
type SVGElement = DOMElement<SVGAttributes>;
|
||||
|
||||
//
|
||||
// React Nodes
|
||||
// Factories
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface Factory<P> {
|
||||
(props?: P, ...children: ReactNode[]): ReactElement<P>;
|
||||
}
|
||||
|
||||
interface ClassicFactory<P> extends Factory<P> {
|
||||
(props?: P, ...children: ReactNode[]): ClassicElement<P>;
|
||||
}
|
||||
|
||||
interface DOMFactory<P> extends ClassicFactory<P> {
|
||||
(props?: P, ...children: ReactNode[]): DOMElement<P>;
|
||||
}
|
||||
|
||||
type HTMLFactory = DOMFactory<HTMLAttributes>;
|
||||
type SVGFactory = DOMFactory<SVGAttributes>;
|
||||
|
||||
//
|
||||
// React Nodes
|
||||
// http://facebook.github.io/react/docs/glossary.html
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
@@ -29,106 +58,157 @@ declare module React {
|
||||
type ReactChild = ReactElement<any> | ReactText;
|
||||
|
||||
// Should be Array<ReactNode> but type aliases cannot be recursive
|
||||
type ReactFragment = Array<ReactChild | any[] | boolean>;
|
||||
type ReactFragment = {} | Array<ReactChild | any[] | boolean>;
|
||||
type ReactNode = ReactChild | ReactFragment | boolean;
|
||||
|
||||
//
|
||||
// React Components
|
||||
// Top Level API
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ComponentStatics<P> {
|
||||
displayName?: string;
|
||||
getDefaultProps?(): P;
|
||||
propTypes?: ValidationMap<P>;
|
||||
}
|
||||
function createClass<P, S>(spec: ComponentSpec<P, S>): ClassicComponentClass<P>;
|
||||
|
||||
interface ComponentClass<P> extends ComponentStatics<P> {
|
||||
// Deprecated in 0.12. See http://fb.me/react-legacyfactory
|
||||
// new(props: P): ReactElement<P>;
|
||||
// (props: P): ReactElement<P>;
|
||||
}
|
||||
function createFactory<P>(type: string): DOMFactory<P>;
|
||||
function createFactory<P>(type: ClassicComponentClass<P> | string): ClassicFactory<P>;
|
||||
function createFactory<P>(type: ComponentClass<P>): Factory<P>;
|
||||
|
||||
//
|
||||
// ReactElement Factories
|
||||
// ----------------------------------------------------------------------
|
||||
function createElement<P>(
|
||||
type: string,
|
||||
props?: P,
|
||||
...children: ReactNode[]): DOMElement<P>;
|
||||
function createElement<P>(
|
||||
type: ClassicComponentClass<P> | string,
|
||||
props?: P,
|
||||
...children: ReactNode[]): ClassicElement<P>;
|
||||
function createElement<P>(
|
||||
type: ComponentClass<P>,
|
||||
props?: P,
|
||||
...children: ReactNode[]): ReactElement<P>;
|
||||
|
||||
interface ComponentFactory<P> {
|
||||
(props?: P, ...children: ReactNode[]): ReactElement<P>;
|
||||
}
|
||||
|
||||
interface HTMLFactory extends ComponentFactory<HTMLAttributes> {}
|
||||
interface SVGFactory extends ComponentFactory<SVGAttributes> {}
|
||||
function cloneElement<P>(
|
||||
element: DOMElement<P>,
|
||||
props?: P,
|
||||
...children: ReactNode[]): DOMElement<P>;
|
||||
function cloneElement<P>(
|
||||
element: ClassicElement<P>,
|
||||
props?: P,
|
||||
...children: ReactNode[]): ClassicElement<P>;
|
||||
function cloneElement<P>(
|
||||
element: ReactElement<P>,
|
||||
props?: P,
|
||||
...children: ReactNode[]): ReactElement<P>;
|
||||
|
||||
//
|
||||
// Top-Level API
|
||||
// ----------------------------------------------------------------------
|
||||
function render<P>(
|
||||
element: DOMElement<P>,
|
||||
container: Element,
|
||||
callback?: () => any): DOMComponent<P>;
|
||||
function render<P, S>(
|
||||
element: ClassicElement<P>,
|
||||
container: Element,
|
||||
callback?: () => any): ClassicComponent<P, S>;
|
||||
function render<P, S>(
|
||||
element: ReactElement<P>,
|
||||
container: Element,
|
||||
callback?: () => any): Component<P, S>;
|
||||
|
||||
interface TopLevelAPI {
|
||||
createClass<P>(spec: ComponentSpec<P, any>): ComponentClass<P>;
|
||||
createElement<P>(type: ComponentClass<P> | string, props: P, ...children: ReactNode[]): ReactElement<P>;
|
||||
createFactory<P>(componentClass: ComponentClass<P>): ComponentFactory<P>;
|
||||
render<P>(element: ReactElement<P>, container: Element, callback?: () => any): Component<P>;
|
||||
unmountComponentAtNode(container: Element): boolean;
|
||||
renderToString(element: ReactElement<any>): string;
|
||||
renderToStaticMarkup(element: ReactElement<any>): string;
|
||||
isValidElement(object: {}): boolean;
|
||||
initializeTouchEvents(shouldUseTouch: boolean): void;
|
||||
}
|
||||
function unmountComponentAtNode(container: Element): boolean;
|
||||
function renderToString(element: ReactElement<any>): string;
|
||||
function renderToStaticMarkup(element: ReactElement<any>): string;
|
||||
function isValidElement(object: {}): boolean;
|
||||
function initializeTouchEvents(shouldUseTouch: boolean): void;
|
||||
|
||||
function findDOMNode<TElement extends Element>(
|
||||
componentOrElement: Component<any, any> | Element): TElement;
|
||||
function findDOMNode(
|
||||
componentOrElement: Component<any, any> | Element): Element;
|
||||
|
||||
var DOM: ReactDOM;
|
||||
var PropTypes: ReactPropTypes;
|
||||
var Children: ReactChildren;
|
||||
|
||||
//
|
||||
// Component API
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface Component<P> {
|
||||
// Use this overload to cast the returned element to a more specific type.
|
||||
// Eg: var name = this.refs['name'].getDOMNode<HTMLInputElement>().value;
|
||||
// Base component for plain JS classes
|
||||
class Component<P, S> implements ComponentLifecycle<P, S> {
|
||||
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<any, any>
|
||||
};
|
||||
}
|
||||
|
||||
interface ClassicComponent<P, S> extends Component<P, S> {
|
||||
replaceState(nextState: S, callback?: () => any): void;
|
||||
getDOMNode<TElement extends Element>(): TElement;
|
||||
getDOMNode(): Element;
|
||||
isMounted(): boolean;
|
||||
|
||||
props: P;
|
||||
getInitialState?(): S;
|
||||
setProps(nextProps: P, callback?: () => any): void;
|
||||
replaceProps(nextProps: P, callback?: () => any): void;
|
||||
}
|
||||
|
||||
interface DOMComponent<P> extends Component<P> {
|
||||
interface DOMComponent<P> extends ClassicComponent<P, any> {
|
||||
tagName: string;
|
||||
}
|
||||
|
||||
interface HTMLComponent extends DOMComponent<HTMLAttributes> {}
|
||||
interface SVGComponent extends DOMComponent<SVGAttributes> {}
|
||||
|
||||
interface CompositeComponent<P, S> extends Component<P>, ComponentSpec<P, S> {
|
||||
state: S;
|
||||
setState(nextState: S, callback?: () => any): void;
|
||||
replaceState(nextState: S, callback?: () => any): void;
|
||||
forceUpdate(callback?: () => any): void;
|
||||
refs: {
|
||||
[key: string]: Component<any>
|
||||
};
|
||||
type HTMLComponent = DOMComponent<HTMLAttributes>;
|
||||
type SVGComponent = DOMComponent<SVGAttributes>;
|
||||
|
||||
interface ChildContextProvider<CC> {
|
||||
getChildContext(): CC;
|
||||
}
|
||||
|
||||
//
|
||||
// Class Interfaces
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ComponentClass<P> {
|
||||
new(props?: P, context?: any): Component<P, any>;
|
||||
propTypes?: ValidationMap<P>;
|
||||
contextTypes?: ValidationMap<any>;
|
||||
childContextTypes?: ValidationMap<any>;
|
||||
defaultProps?: P;
|
||||
}
|
||||
|
||||
interface ClassicComponentClass<P> extends ComponentClass<P> {
|
||||
new(props?: P, context?: any): ClassicComponent<P, any>;
|
||||
getDefaultProps?(): P;
|
||||
displayName?: string;
|
||||
}
|
||||
|
||||
//
|
||||
// Component Specs and Lifecycle
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface Mixin<P, S> extends ComponentStatics<P> {
|
||||
interface ComponentLifecycle<P, S> {
|
||||
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<P, S> extends ComponentLifecycle<P, S> {
|
||||
mixins?: Mixin<P, S>;
|
||||
statics?: {
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
// Definition methods
|
||||
getInitialState?(): S;
|
||||
displayName?: string;
|
||||
propTypes?: ValidationMap<any>;
|
||||
contextTypes?: ValidationMap<any>;
|
||||
childContextTypes?: ValidationMap<any>
|
||||
|
||||
// Delegate methods
|
||||
componentWillMount?(): void;
|
||||
componentDidMount?(): void;
|
||||
componentWillReceiveProps?(nextProps: P): void;
|
||||
shouldComponentUpdate?(nextProps: P, nextState: S): boolean;
|
||||
componentWillUpdate?(nextProps: P, nextState: S): void;
|
||||
componentDidUpdate?(prevProps: P, prevState: S): void;
|
||||
componentWillUnmount?(): void;
|
||||
getDefaultProps?(): P;
|
||||
getInitialState?(): S;
|
||||
}
|
||||
|
||||
interface ComponentSpec<P, S> extends Mixin<P, S> {
|
||||
@@ -238,15 +318,16 @@ declare module React {
|
||||
interface WheelEventHandler extends EventHandler<WheelEvent> {}
|
||||
|
||||
//
|
||||
// Attributes
|
||||
// Props / DOM Attributes
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export interface ReactAttributes {
|
||||
interface Props<T> {
|
||||
children?: ReactNode;
|
||||
key?: number | string;
|
||||
ref?: string;
|
||||
key?: string | number;
|
||||
ref?: string | ((component: T) => any);
|
||||
}
|
||||
|
||||
// Event Attributes
|
||||
interface DOMAttributes extends Props<DOMComponent<any>> {
|
||||
onCopy?: ClipboardEventHandler;
|
||||
onCut?: ClipboardEventHandler;
|
||||
onPaste?: ClipboardEventHandler;
|
||||
@@ -307,7 +388,9 @@ declare module React {
|
||||
strokeOpacity?: number;
|
||||
}
|
||||
|
||||
interface HTMLAttributes extends ReactAttributes {
|
||||
interface HTMLAttributes extends DOMAttributes {
|
||||
ref?: string | ((component: HTMLComponent) => void);
|
||||
|
||||
accept?: string;
|
||||
acceptCharset?: string;
|
||||
accessKey?: string;
|
||||
@@ -415,9 +498,11 @@ declare module React {
|
||||
itemType?: string;
|
||||
}
|
||||
|
||||
interface SVGAttributes extends ReactAttributes {
|
||||
interface SVGAttributes extends DOMAttributes {
|
||||
ref?: string | ((component: SVGComponent) => void);
|
||||
|
||||
cx?: SVGLength | SVGAnimatedLength;
|
||||
cy?: any;
|
||||
cy?: any;
|
||||
d?: string;
|
||||
dx?: SVGLength | SVGAnimatedLength;
|
||||
dy?: SVGLength | SVGAnimatedLength;
|
||||
@@ -462,7 +547,7 @@ declare module React {
|
||||
}
|
||||
|
||||
//
|
||||
// React.DOM
|
||||
// React.DOM
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ReactDOM {
|
||||
@@ -645,254 +730,6 @@ declare module React {
|
||||
only(children: ReactNode): ReactChild;
|
||||
}
|
||||
|
||||
//
|
||||
// React.addons
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ClassSet {
|
||||
[key: string]: boolean;
|
||||
}
|
||||
|
||||
//
|
||||
// React.addons (Transitions)
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface TransitionGroupProps {
|
||||
component?: ReactType;
|
||||
childFactory?: (child: ReactElement<any>) => ReactElement<any>;
|
||||
}
|
||||
|
||||
interface CSSTransitionGroupProps extends TransitionGroupProps {
|
||||
transitionName: string;
|
||||
transitionAppear?: boolean;
|
||||
transitionEnter?: boolean;
|
||||
transitionLeave?: boolean;
|
||||
}
|
||||
|
||||
interface CSSTransitionGroup extends ComponentClass<CSSTransitionGroupProps> {}
|
||||
interface TransitionGroup extends ComponentClass<TransitionGroupProps> {}
|
||||
|
||||
//
|
||||
// React.addons (Mixins)
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ReactLink<T> {
|
||||
value: T;
|
||||
requestChange(newValue: T): void;
|
||||
}
|
||||
|
||||
interface LinkedStateMixin extends Mixin<any, any> {
|
||||
linkState<T>(key: string): ReactLink<T>;
|
||||
}
|
||||
|
||||
interface PureRenderMixin extends Mixin<any, any> {
|
||||
}
|
||||
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
|
||||
interface ReactPerf {
|
||||
start(): void;
|
||||
stop(): void;
|
||||
printInclusive(measurements: Measurements[]): void;
|
||||
printExclusive(measurements: Measurements[]): void;
|
||||
printWasted(measurements: Measurements[]): void;
|
||||
printDOM(measurements: Measurements[]): void;
|
||||
getLastMeasurements(): Measurements[];
|
||||
}
|
||||
|
||||
//
|
||||
// React.addons.TestUtils
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface MockedComponentClass {
|
||||
new(): any;
|
||||
}
|
||||
|
||||
interface ReactTestUtils {
|
||||
Simulate: Simulate;
|
||||
|
||||
renderIntoDocument<P>(element: ReactElement<P>): Component<P>;
|
||||
renderIntoDocument<C extends Component<any>>(element: ReactElement<any>): C;
|
||||
|
||||
mockComponent(mocked: MockedComponentClass, mockTagName?: string): ReactTestUtils;
|
||||
|
||||
isElementOfType(element: ReactElement<any>, type: ReactType): boolean;
|
||||
isDOMComponent(instance: Component<any>): boolean;
|
||||
isCompositeComponent(instance: Component<any>): boolean;
|
||||
isCompositeComponentWithType(instance: Component<any>, type: ComponentClass<any>): boolean;
|
||||
isTextComponent(instance: Component<any>): boolean;
|
||||
|
||||
findAllInRenderedTree(tree: Component<any>, fn: (i: Component<any>) => boolean): Component<any>;
|
||||
|
||||
scryRenderedDOMComponentsWithClass(tree: Component<any>, className: string): DOMComponent<any>[];
|
||||
findRenderedDOMComponentWithClass(tree: Component<any>, className: string): DOMComponent<any>;
|
||||
|
||||
scryRenderedDOMComponentsWithTag(tree: Component<any>, tagName: string): DOMComponent<any>[];
|
||||
findRenderedDOMComponentWithTag(tree: Component<any>, tagName: string): DOMComponent<any>;
|
||||
|
||||
scryRenderedComponentsWithType<P, S>(
|
||||
tree: Component<any>, type: ComponentClass<P>): CompositeComponent<P, S>[];
|
||||
scryRenderedComponentsWithType<C extends CompositeComponent<any, any>>(
|
||||
tree: Component<any>, type: ComponentClass<any>): C[];
|
||||
|
||||
findRenderedComponentWithType<P, S>(
|
||||
tree: Component<any>, type: ComponentClass<P>): CompositeComponent<P, S>;
|
||||
findRenderedComponentWithType<C extends CompositeComponent<any, any>>(
|
||||
tree: Component<any>, type: ComponentClass<any>): C;
|
||||
}
|
||||
|
||||
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;
|
||||
(descriptor: Component<any>, eventData?: SyntheticEventData): void;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
//
|
||||
// react Exports
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface Exports extends TopLevelAPI {
|
||||
DOM: ReactDOM;
|
||||
PropTypes: ReactPropTypes;
|
||||
Children: ReactChildren;
|
||||
}
|
||||
|
||||
//
|
||||
// react/addons Exports
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface AddonsExports extends Exports {
|
||||
addons: {
|
||||
CSSTransitionGroup: CSSTransitionGroup;
|
||||
LinkedStateMixin: LinkedStateMixin;
|
||||
PureRenderMixin: PureRenderMixin;
|
||||
TransitionGroup: TransitionGroup;
|
||||
|
||||
batchedUpdates<A, B>(callback: (a: A, b: B) => any, a: A, b: B): void;
|
||||
batchedUpdates<A>(callback: (a: A) => any, a: A): void;
|
||||
batchedUpdates(callback: () => any): void;
|
||||
|
||||
classSet(cx: ClassSet): string;
|
||||
cloneWithProps<P>(element: ReactElement<P>, props: P): ReactElement<P>;
|
||||
|
||||
update(value: any[], spec: UpdateArraySpec): any[];
|
||||
update(value: {}, spec: UpdateSpec): any;
|
||||
|
||||
// Development tools
|
||||
Perf: ReactPerf;
|
||||
TestUtils: ReactTestUtils;
|
||||
};
|
||||
}
|
||||
|
||||
//
|
||||
// Browser Interfaces
|
||||
// https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts
|
||||
@@ -922,13 +759,3 @@ declare module React {
|
||||
}
|
||||
}
|
||||
|
||||
declare module "react" {
|
||||
var exports: React.Exports;
|
||||
export = exports;
|
||||
}
|
||||
|
||||
declare module "react/addons" {
|
||||
var exports: React.AddonsExports;
|
||||
export = exports;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user