mirror of
https://github.com/wassname/DefinitelyTyped.git
synced 2026-09-09 11:13:57 +08:00
Merge pull request #3615 from Asana/react-0.13-fix
Split modules react and react/addons; exporting Component<P, S, C> class
This commit is contained in:
John Reilly
@@ -0,0 +1,10 @@
|
||||
# React v0.13.0-beta Type Definitions
|
||||
|
||||
This folder contains the following `.d.ts` files:
|
||||
* `react-0.13.0.d.ts` declares the external module `"react"`
|
||||
* `react-addons-0.13.0.d.ts` declares the external module `"react/addons"`
|
||||
* `react-global-0.13.0.d.ts` declares the internal module `React` in the global namespace
|
||||
* `react-addons-global-0.13.0.d.ts` extends the global `React` module with `addons`
|
||||
|
||||
Interfaces are duplicated between these files; please take care to keep them in sync when making changes. See [#3615](https://github.com/borisyankov/DefinitelyTyped/pull/3615) for relevant discussion.
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
/// <reference path="react-0.13.0.d.ts" />
|
||||
|
||||
/// <reference path="react-addons-0.13.0.d.ts" />
|
||||
// requiring react/addons instead of react so react.d.ts doesn't get picked up
|
||||
import React = require('react/addons');
|
||||
// TODO: import "react" once 0.13.0 is released
|
||||
import React = require("react/addons");
|
||||
|
||||
interface Props {
|
||||
interface Props extends React.Props {
|
||||
hello: string;
|
||||
world?: string;
|
||||
foo: number;
|
||||
@@ -42,36 +42,37 @@ var INPUT_REF: string = "input";
|
||||
// Top-Level API
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var reactClassicClass: React.ClassicComponentClass<Props, State, Context> = React.createClass<Props, State, Context>({
|
||||
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_REF,
|
||||
value: this.state.inputValue
|
||||
}));
|
||||
}
|
||||
});
|
||||
var ClassicComponent: React.ClassicComponentClass<Props, State, Context> =
|
||||
React.createClass<Props, State, Context>({
|
||||
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_REF,
|
||||
value: this.state.inputValue
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
var reactClass: React.ComponentClass<Props, State, Context> = reactClassicClass;
|
||||
class ModernComponent extends React.Component<Props, State, Context>
|
||||
implements React.ChildContextProvider<ChildContext> {
|
||||
|
||||
class ModernComponent extends React.Component<Props, State, Context> implements React.ChildContextProvider<ChildContext> {
|
||||
constructor(props: Props, context: Context) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
@@ -80,18 +81,17 @@ class ModernComponent extends React.Component<Props, State, Context> implements
|
||||
};
|
||||
}
|
||||
|
||||
// this should work but doesn't. Due to TypeScript bug?
|
||||
//static propTypes = {
|
||||
// foo: React.PropTypes.number
|
||||
//}
|
||||
static propTypes: React.ValidationMap<Props> = {
|
||||
foo: React.PropTypes.number
|
||||
}
|
||||
|
||||
//static contextTypes = {
|
||||
// someValue: React.PropTypes.string
|
||||
//}
|
||||
static contextTypes: React.ValidationMap<Context> = {
|
||||
someValue: React.PropTypes.string
|
||||
}
|
||||
|
||||
//static childContextTypes = {
|
||||
// someOtherValue: React.PropTypes.string
|
||||
//}
|
||||
static childContextTypes: React.ValidationMap<ChildContext> = {
|
||||
someOtherValue: React.PropTypes.string
|
||||
}
|
||||
|
||||
getChildContext() {
|
||||
return {
|
||||
@@ -120,66 +120,71 @@ class ModernComponent extends React.Component<Props, State, Context> implements
|
||||
}
|
||||
}
|
||||
|
||||
ModernComponent.propTypes = {
|
||||
foo: React.PropTypes.string,
|
||||
}
|
||||
// React.createFactory
|
||||
var factory: React.Factory<Props> =
|
||||
React.createFactory(ModernComponent);
|
||||
var factoryElement: React.ReactElement<Props> =
|
||||
factory(props);
|
||||
|
||||
ModernComponent.contextTypes = {
|
||||
someValue: React.PropTypes.string
|
||||
}
|
||||
var classicFactory: React.ClassicFactory<Props> =
|
||||
React.createFactory(ClassicComponent);
|
||||
var classicFactoryElement: React.ReactClassicElement<Props> =
|
||||
classicFactory(props);
|
||||
|
||||
ModernComponent.childContextTypes = {
|
||||
someOtherValue: React.PropTypes.string
|
||||
}
|
||||
var domFactory: React.DOMFactory<any> =
|
||||
React.createFactory("foo");
|
||||
var domFactoryElement: React.ReactDOMElement<any> =
|
||||
domFactory();
|
||||
|
||||
var reactElement: React.ReactElement<Props>;
|
||||
reactElement = React.createElement<Props>(reactClass, props);
|
||||
reactElement = React.createElement(ModernComponent, props);
|
||||
// React.createElement
|
||||
var element: React.ReactElement<Props> =
|
||||
React.createElement(ModernComponent, props);
|
||||
var classicElement: React.ReactClassicElement<Props> =
|
||||
React.createElement(ClassicComponent, props);
|
||||
var domElement: React.ReactHTMLElement =
|
||||
React.createElement("div");
|
||||
|
||||
var reactFactory: React.ComponentFactory<Props>;
|
||||
reactFactory = React.createFactory<Props>(reactClass);
|
||||
reactFactory = React.createFactory<Props>(ModernComponent);
|
||||
|
||||
var component: React.Component<Props, State, Context> =
|
||||
React.render<Props, State>(reactElement, container);
|
||||
// React.render
|
||||
var component: React.Component<Props, any, any> =
|
||||
React.render(element, container);
|
||||
var classicComponent: React.ClassicComponent<Props, any, 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);
|
||||
|
||||
var reactClassicElement: React.ReactClassicElement<Props>;
|
||||
reactClassicElement = React.createElement<Props>(reactClassicClass, props);
|
||||
var classicComponent: React.ClassicComponent<Props, State, Context>;
|
||||
classicComponent = React.render<Props, State>(reactClassicElement, container);
|
||||
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;
|
||||
var ref: string = element.ref;
|
||||
|
||||
//
|
||||
// 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
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
// modern
|
||||
var initialState: State = component.state;
|
||||
var componentState: State = component.state;
|
||||
component.setState({ inputValue: "!!!" });
|
||||
component.forceUpdate();
|
||||
|
||||
@@ -324,33 +329,28 @@ var onlyChild = React.Children.only([null, [[["Hallo"], true]], false]);
|
||||
interface TimerState {
|
||||
secondsElapsed: number;
|
||||
}
|
||||
interface Timer extends React.Component<{}, TimerState, any> {
|
||||
}
|
||||
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({ secondsElapsed: this.state.secondsElapsed + 1 });
|
||||
}
|
||||
componentDidMount() {
|
||||
var me = this;
|
||||
this._interval = setInterval(() => me.tick(), 1000);
|
||||
}
|
||||
componentWillUnmount() {
|
||||
clearInterval(this._interval);
|
||||
}
|
||||
render() {
|
||||
return React.DOM.div(
|
||||
null,
|
||||
"Seconds Elapsed: ",
|
||||
me.state.secondsElapsed
|
||||
this.state.secondsElapsed
|
||||
);
|
||||
}
|
||||
});
|
||||
var mountNode: Element;
|
||||
React.render(React.createElement(Timer, null), mountNode);
|
||||
}
|
||||
React.render(React.createElement(Timer), container);
|
||||
|
||||
Vendored
+747
@@ -0,0 +1,747 @@
|
||||
// Type definitions for React v0.13.0 (external module)
|
||||
// Project: http://facebook.github.io/react/
|
||||
// Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
|
||||
declare module "react" {
|
||||
//
|
||||
// React Elements
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ReactElementBase<T, P> {
|
||||
type: T;
|
||||
props: P;
|
||||
key: number | string;
|
||||
ref: string;
|
||||
}
|
||||
|
||||
interface ReactElement<P>
|
||||
extends ReactElementBase<ComponentClass<P, any, any>, P> {}
|
||||
|
||||
interface ReactClassicElement<P>
|
||||
extends ReactElementBase<ClassicComponentClass<P, any, any> | string, P> {}
|
||||
|
||||
interface ReactDOMElement<P> // subtype of ReactClassicElement
|
||||
extends ReactElementBase<string, P> {}
|
||||
|
||||
type ReactHTMLElement = ReactDOMElement<HTMLAttributes>;
|
||||
type ReactSVGElement = ReactDOMElement<SVGAttributes>;
|
||||
|
||||
//
|
||||
// Factories
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface Factory<P> {
|
||||
(props?: P, ...children: ReactNode[]): ReactElement<P>;
|
||||
}
|
||||
|
||||
interface ClassicFactory<P> {
|
||||
(props?: P, ...children: ReactNode[]): ReactClassicElement<P>;
|
||||
}
|
||||
|
||||
interface DOMFactory<P> {
|
||||
(props?: P, ...children: ReactNode[]): ReactDOMElement<P>;
|
||||
}
|
||||
|
||||
type HTMLFactory = DOMFactory<HTMLAttributes>;
|
||||
type SVGFactory = DOMFactory<SVGAttributes>;
|
||||
|
||||
//
|
||||
// React Nodes
|
||||
// http://facebook.github.io/react/docs/glossary.html
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type ReactText = string | number;
|
||||
type ReactChild = ReactElementBase<any, any> | ReactText;
|
||||
|
||||
// Should be Array<ReactNode> but type aliases cannot be recursive
|
||||
type ReactFragment = Array<ReactChild | any[] | boolean>;
|
||||
type ReactNode = ReactChild | ReactFragment | boolean;
|
||||
|
||||
//
|
||||
// Top Level API
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
function createClass<P, S, C>(
|
||||
spec: ComponentSpec<P, S, C>): ClassicComponentClass<P, S, C>;
|
||||
|
||||
function createFactory<P>(
|
||||
type: string): DOMFactory<P>;
|
||||
function createFactory<P>(
|
||||
type: ClassicComponentClass<P, any, any> | string): ClassicFactory<P>;
|
||||
function createFactory<P>(
|
||||
type: ComponentClass<P, any, any>): Factory<P>;
|
||||
|
||||
function createElement<P>(
|
||||
type: string,
|
||||
props?: P,
|
||||
...children: ReactNode[]): ReactDOMElement<P>;
|
||||
function createElement<P>(
|
||||
type: ClassicComponentClass<P, any, any> | string,
|
||||
props?: P,
|
||||
...children: ReactNode[]): ReactClassicElement<P>;
|
||||
function createElement<P>(
|
||||
type: ComponentClass<P, any, any>,
|
||||
props?: P,
|
||||
...children: ReactNode[]): ReactElement<P>;
|
||||
|
||||
function render<P>(
|
||||
element: ReactDOMElement<P>,
|
||||
container: Element,
|
||||
callback?: () => any): DOMComponent<P>;
|
||||
function render<P, S>(
|
||||
element: ReactClassicElement<P>,
|
||||
container: Element,
|
||||
callback?: () => any): ClassicComponent<P, S, {}>;
|
||||
function render<P, S>(
|
||||
element: ReactElement<P>,
|
||||
container: Element,
|
||||
callback?: () => any): Component<P, S, {}>;
|
||||
|
||||
function unmountComponentAtNode(container: Element): boolean;
|
||||
function renderToString(element: ReactElementBase<any, any>): string;
|
||||
function renderToStaticMarkup(element: ReactElementBase<any, any>): string;
|
||||
function isValidElement(object: {}): boolean;
|
||||
function initializeTouchEvents(shouldUseTouch: boolean): void;
|
||||
|
||||
function findDOMNode<TElement extends Element>(
|
||||
componentOrElement: Component<any, any, any> | Element): TElement;
|
||||
function findDOMNode(
|
||||
componentOrElement: Component<any, any, any> | Element): Element;
|
||||
|
||||
var DOM: ReactDOM;
|
||||
var PropTypes: ReactPropTypes;
|
||||
var Children: ReactChildren;
|
||||
|
||||
//
|
||||
// Component API
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
// Base component for plain JS classes
|
||||
class Component<P, S, C> implements ComponentLifecycle<P, S, C> {
|
||||
constructor(props: P, context: C);
|
||||
setState(state: S, callback?: () => any): void;
|
||||
forceUpdate(): void;
|
||||
props: P;
|
||||
state: S;
|
||||
context: C;
|
||||
refs: {
|
||||
[key: string]: Component<any, any, any>
|
||||
};
|
||||
}
|
||||
|
||||
interface ClassicComponent<P, S, C> extends Component<P, S, C> {
|
||||
replaceState(nextState: S, callback?: () => any): void;
|
||||
getDOMNode<TElement extends Element>(): TElement;
|
||||
getDOMNode(): Element;
|
||||
isMounted(): boolean;
|
||||
getInitialState?(): S;
|
||||
setProps(nextProps: P, callback?: () => any): void;
|
||||
replaceProps(nextProps: P, callback?: () => any): void;
|
||||
}
|
||||
|
||||
interface DOMComponent<P> extends ClassicComponent<P, any, any> {
|
||||
tagName: string;
|
||||
}
|
||||
|
||||
type HTMLComponent = DOMComponent<HTMLAttributes>;
|
||||
type SVGComponent = DOMComponent<SVGAttributes>;
|
||||
|
||||
interface ChildContextProvider<CC> {
|
||||
getChildContext(): CC;
|
||||
}
|
||||
|
||||
//
|
||||
// Class Interfaces
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ComponentClassBase<P, C> {
|
||||
propTypes?: ValidationMap<P>;
|
||||
contextTypes?: ValidationMap<C>;
|
||||
childContextTypes?: ValidationMap<{}>;
|
||||
}
|
||||
|
||||
interface ComponentClass<P, S, C> extends ComponentClassBase<P, C> {
|
||||
new(props?: P, context?: C): Component<P, S, C>;
|
||||
defaultProps?: P;
|
||||
}
|
||||
|
||||
interface ClassicComponentClass<P, S, C> extends ComponentClassBase<P, C> {
|
||||
new(props?: P, context?: C): ClassicComponent<P, S, C>;
|
||||
getDefaultProps?(): P;
|
||||
displayName?: string;
|
||||
}
|
||||
|
||||
//
|
||||
// Component Specs and Lifecycle
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ComponentLifecycle<P, S, C> {
|
||||
componentWillMount?(): void;
|
||||
componentDidMount?(): void;
|
||||
componentWillReceiveProps?(nextProps: P, nextContext: C): void;
|
||||
shouldComponentUpdate?(nextProps: P, nextState: S, nextContext: C): boolean;
|
||||
componentWillUpdate?(nextProps: P, nextState: S, nextContext: C): void;
|
||||
componentDidUpdate?(prevProps: P, prevState: S, prevContext: C): void;
|
||||
componentWillUnmount?(): void;
|
||||
}
|
||||
|
||||
interface Mixin<P, S, C> extends ComponentLifecycle<P, S, C> {
|
||||
mixins?: Mixin<P, S, C>;
|
||||
statics?: {
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
displayName?: string;
|
||||
propTypes?: ValidationMap<any>;
|
||||
contextTypes?: ValidationMap<any>;
|
||||
childContextTypes?: ValidationMap<any>
|
||||
|
||||
getInitialState?(): S;
|
||||
getDefaultProps?(): P;
|
||||
}
|
||||
|
||||
interface ComponentSpec<P, S, C> extends Mixin<P, S, C> {
|
||||
render(): ReactElementBase<any, any>;
|
||||
}
|
||||
|
||||
//
|
||||
// Event System
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface SyntheticEvent {
|
||||
bubbles: boolean;
|
||||
cancelable: boolean;
|
||||
currentTarget: EventTarget;
|
||||
defaultPrevented: boolean;
|
||||
eventPhase: number;
|
||||
isTrusted: boolean;
|
||||
nativeEvent: Event;
|
||||
preventDefault(): void;
|
||||
stopPropagation(): void;
|
||||
target: EventTarget;
|
||||
timeStamp: Date;
|
||||
type: string;
|
||||
}
|
||||
|
||||
interface ClipboardEvent extends SyntheticEvent {
|
||||
clipboardData: DataTransfer;
|
||||
}
|
||||
|
||||
interface KeyboardEvent extends SyntheticEvent {
|
||||
altKey: boolean;
|
||||
charCode: number;
|
||||
ctrlKey: boolean;
|
||||
getModifierState(key: string): boolean;
|
||||
key: string;
|
||||
keyCode: number;
|
||||
locale: string;
|
||||
location: number;
|
||||
metaKey: boolean;
|
||||
repeat: boolean;
|
||||
shiftKey: boolean;
|
||||
which: number;
|
||||
}
|
||||
|
||||
interface FocusEvent extends SyntheticEvent {
|
||||
relatedTarget: EventTarget;
|
||||
}
|
||||
|
||||
interface FormEvent extends SyntheticEvent {
|
||||
}
|
||||
|
||||
interface MouseEvent extends SyntheticEvent {
|
||||
altKey: boolean;
|
||||
button: number;
|
||||
buttons: number;
|
||||
clientX: number;
|
||||
clientY: number;
|
||||
ctrlKey: boolean;
|
||||
getModifierState(key: string): boolean;
|
||||
metaKey: boolean;
|
||||
pageX: number;
|
||||
pageY: number;
|
||||
relatedTarget: EventTarget;
|
||||
screenX: number;
|
||||
screenY: number;
|
||||
shiftKey: boolean;
|
||||
}
|
||||
|
||||
interface TouchEvent extends SyntheticEvent {
|
||||
altKey: boolean;
|
||||
changedTouches: TouchList;
|
||||
ctrlKey: boolean;
|
||||
getModifierState(key: string): boolean;
|
||||
metaKey: boolean;
|
||||
shiftKey: boolean;
|
||||
targetTouches: TouchList;
|
||||
touches: TouchList;
|
||||
}
|
||||
|
||||
interface UIEvent extends SyntheticEvent {
|
||||
detail: number;
|
||||
view: AbstractView;
|
||||
}
|
||||
|
||||
interface WheelEvent extends SyntheticEvent {
|
||||
deltaMode: number;
|
||||
deltaX: number;
|
||||
deltaY: number;
|
||||
deltaZ: number;
|
||||
}
|
||||
|
||||
//
|
||||
// Event Handler Types
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface EventHandler<E extends SyntheticEvent> {
|
||||
(event: E): void;
|
||||
}
|
||||
|
||||
interface ClipboardEventHandler extends EventHandler<ClipboardEvent> {}
|
||||
interface KeyboardEventHandler extends EventHandler<KeyboardEvent> {}
|
||||
interface FocusEventHandler extends EventHandler<FocusEvent> {}
|
||||
interface FormEventHandler extends EventHandler<FormEvent> {}
|
||||
interface MouseEventHandler extends EventHandler<MouseEvent> {}
|
||||
interface TouchEventHandler extends EventHandler<TouchEvent> {}
|
||||
interface UIEventHandler extends EventHandler<UIEvent> {}
|
||||
interface WheelEventHandler extends EventHandler<WheelEvent> {}
|
||||
|
||||
//
|
||||
// Props / DOM Attributes
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface Props {
|
||||
children?: ReactNode;
|
||||
key?: number | string;
|
||||
ref?: string;
|
||||
}
|
||||
|
||||
interface DOMAttributes extends Props {
|
||||
onCopy?: ClipboardEventHandler;
|
||||
onCut?: ClipboardEventHandler;
|
||||
onPaste?: ClipboardEventHandler;
|
||||
onKeyDown?: KeyboardEventHandler;
|
||||
onKeyPress?: KeyboardEventHandler;
|
||||
onKeyUp?: KeyboardEventHandler;
|
||||
onFocus?: FocusEventHandler;
|
||||
onBlur?: FocusEventHandler;
|
||||
onChange?: FormEventHandler;
|
||||
onInput?: FormEventHandler;
|
||||
onSubmit?: FormEventHandler;
|
||||
onClick?: MouseEventHandler;
|
||||
onDoubleClick?: MouseEventHandler;
|
||||
onDrag?: MouseEventHandler;
|
||||
onDragEnd?: MouseEventHandler;
|
||||
onDragEnter?: MouseEventHandler;
|
||||
onDragExit?: MouseEventHandler;
|
||||
onDragLeave?: MouseEventHandler;
|
||||
onDragOver?: MouseEventHandler;
|
||||
onDragStart?: MouseEventHandler;
|
||||
onDrop?: MouseEventHandler;
|
||||
onMouseDown?: MouseEventHandler;
|
||||
onMouseEnter?: MouseEventHandler;
|
||||
onMouseLeave?: MouseEventHandler;
|
||||
onMouseMove?: MouseEventHandler;
|
||||
onMouseOut?: MouseEventHandler;
|
||||
onMouseOver?: MouseEventHandler;
|
||||
onMouseUp?: MouseEventHandler;
|
||||
onTouchCancel?: TouchEventHandler;
|
||||
onTouchEnd?: TouchEventHandler;
|
||||
onTouchMove?: TouchEventHandler;
|
||||
onTouchStart?: TouchEventHandler;
|
||||
onScroll?: UIEventHandler;
|
||||
onWheel?: WheelEventHandler;
|
||||
|
||||
dangerouslySetInnerHTML?: {
|
||||
__html: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface CSSProperties {
|
||||
columnCount?: number;
|
||||
flex?: number | string;
|
||||
flexGrow?: number;
|
||||
flexShrink?: number;
|
||||
fontWeight?: number;
|
||||
lineClamp?: number;
|
||||
lineHeight?: number;
|
||||
opacity?: number;
|
||||
order?: number;
|
||||
orphans?: number;
|
||||
widows?: number;
|
||||
zIndex?: number;
|
||||
zoom?: number;
|
||||
|
||||
// SVG-related properties
|
||||
fillOpacity?: number;
|
||||
strokeOpacity?: number;
|
||||
}
|
||||
|
||||
interface HTMLAttributes extends DOMAttributes {
|
||||
accept?: string;
|
||||
acceptCharset?: string;
|
||||
accessKey?: string;
|
||||
action?: string;
|
||||
allowFullScreen?: boolean;
|
||||
allowTransparency?: boolean;
|
||||
alt?: string;
|
||||
async?: boolean;
|
||||
autoComplete?: boolean;
|
||||
autoFocus?: boolean;
|
||||
autoPlay?: boolean;
|
||||
cellPadding?: number | string;
|
||||
cellSpacing?: number | string;
|
||||
charSet?: string;
|
||||
checked?: boolean;
|
||||
classID?: string;
|
||||
className?: string;
|
||||
cols?: number;
|
||||
colSpan?: number;
|
||||
content?: string;
|
||||
contentEditable?: boolean;
|
||||
contextMenu?: string;
|
||||
controls?: any;
|
||||
coords?: string;
|
||||
crossOrigin?: string;
|
||||
data?: string;
|
||||
dateTime?: string;
|
||||
defer?: boolean;
|
||||
dir?: string;
|
||||
disabled?: boolean;
|
||||
download?: any;
|
||||
draggable?: boolean;
|
||||
encType?: string;
|
||||
form?: string;
|
||||
formNoValidate?: boolean;
|
||||
frameBorder?: number | string;
|
||||
height?: number | string;
|
||||
hidden?: boolean;
|
||||
href?: string;
|
||||
hrefLang?: string;
|
||||
htmlFor?: string;
|
||||
httpEquiv?: string;
|
||||
icon?: string;
|
||||
id?: string;
|
||||
label?: string;
|
||||
lang?: string;
|
||||
list?: string;
|
||||
loop?: boolean;
|
||||
manifest?: string;
|
||||
max?: number | string;
|
||||
maxLength?: number;
|
||||
media?: string;
|
||||
mediaGroup?: string;
|
||||
method?: string;
|
||||
min?: number | string;
|
||||
multiple?: boolean;
|
||||
muted?: boolean;
|
||||
name?: string;
|
||||
noValidate?: boolean;
|
||||
open?: boolean;
|
||||
pattern?: string;
|
||||
placeholder?: string;
|
||||
poster?: string;
|
||||
preload?: string;
|
||||
radioGroup?: string;
|
||||
readOnly?: boolean;
|
||||
rel?: string;
|
||||
required?: boolean;
|
||||
role?: string;
|
||||
rows?: number;
|
||||
rowSpan?: number;
|
||||
sandbox?: string;
|
||||
scope?: string;
|
||||
scrollLeft?: number;
|
||||
scrolling?: string;
|
||||
scrollTop?: number;
|
||||
seamless?: boolean;
|
||||
selected?: boolean;
|
||||
shape?: string;
|
||||
size?: number;
|
||||
sizes?: string;
|
||||
span?: number;
|
||||
spellCheck?: boolean;
|
||||
src?: string;
|
||||
srcDoc?: string;
|
||||
srcSet?: string;
|
||||
start?: number;
|
||||
step?: number | string;
|
||||
style?: CSSProperties;
|
||||
tabIndex?: number;
|
||||
target?: string;
|
||||
title?: string;
|
||||
type?: string;
|
||||
useMap?: string;
|
||||
value?: string;
|
||||
width?: number | string;
|
||||
wmode?: string;
|
||||
|
||||
// Non-standard Attributes
|
||||
autoCapitalize?: boolean;
|
||||
autoCorrect?: boolean;
|
||||
property?: string;
|
||||
itemProp?: string;
|
||||
itemScope?: boolean;
|
||||
itemType?: string;
|
||||
}
|
||||
|
||||
interface SVGAttributes extends DOMAttributes {
|
||||
cx?: SVGLength | SVGAnimatedLength;
|
||||
cy?: any;
|
||||
d?: string;
|
||||
dx?: SVGLength | SVGAnimatedLength;
|
||||
dy?: SVGLength | SVGAnimatedLength;
|
||||
fill?: any; // SVGPaint | string
|
||||
fillOpacity?: number | string;
|
||||
fontFamily?: string;
|
||||
fontSize?: number | string;
|
||||
fx?: SVGLength | SVGAnimatedLength;
|
||||
fy?: SVGLength | SVGAnimatedLength;
|
||||
gradientTransform?: SVGTransformList | SVGAnimatedTransformList;
|
||||
gradientUnits?: string;
|
||||
markerEnd?: string;
|
||||
markerMid?: string;
|
||||
markerStart?: string;
|
||||
offset?: number | string;
|
||||
opacity?: number | string;
|
||||
patternContentUnits?: string;
|
||||
patternUnits?: string;
|
||||
points?: string;
|
||||
preserveAspectRatio?: string;
|
||||
r?: SVGLength | SVGAnimatedLength;
|
||||
rx?: SVGLength | SVGAnimatedLength;
|
||||
ry?: SVGLength | SVGAnimatedLength;
|
||||
spreadMethod?: string;
|
||||
stopColor?: any; // SVGColor | string
|
||||
stopOpacity?: number | string;
|
||||
stroke?: any; // SVGPaint
|
||||
strokeDasharray?: string;
|
||||
strokeLinecap?: string;
|
||||
strokeOpacity?: number | string;
|
||||
strokeWidth?: SVGLength | SVGAnimatedLength;
|
||||
textAnchor?: string;
|
||||
transform?: SVGTransformList | SVGAnimatedTransformList;
|
||||
version?: string;
|
||||
viewBox?: string;
|
||||
x1?: SVGLength | SVGAnimatedLength;
|
||||
x2?: SVGLength | SVGAnimatedLength;
|
||||
x?: SVGLength | SVGAnimatedLength;
|
||||
y1?: SVGLength | SVGAnimatedLength;
|
||||
y2?: SVGLength | SVGAnimatedLength
|
||||
y?: SVGLength | SVGAnimatedLength;
|
||||
}
|
||||
|
||||
//
|
||||
// React.DOM
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ReactDOM {
|
||||
// HTML
|
||||
a: HTMLFactory;
|
||||
abbr: HTMLFactory;
|
||||
address: HTMLFactory;
|
||||
area: HTMLFactory;
|
||||
article: HTMLFactory;
|
||||
aside: HTMLFactory;
|
||||
audio: HTMLFactory;
|
||||
b: HTMLFactory;
|
||||
base: HTMLFactory;
|
||||
bdi: HTMLFactory;
|
||||
bdo: HTMLFactory;
|
||||
big: HTMLFactory;
|
||||
blockquote: HTMLFactory;
|
||||
body: HTMLFactory;
|
||||
br: HTMLFactory;
|
||||
button: HTMLFactory;
|
||||
canvas: HTMLFactory;
|
||||
caption: HTMLFactory;
|
||||
cite: HTMLFactory;
|
||||
code: HTMLFactory;
|
||||
col: HTMLFactory;
|
||||
colgroup: HTMLFactory;
|
||||
data: HTMLFactory;
|
||||
datalist: HTMLFactory;
|
||||
dd: HTMLFactory;
|
||||
del: HTMLFactory;
|
||||
details: HTMLFactory;
|
||||
dfn: HTMLFactory;
|
||||
dialog: HTMLFactory;
|
||||
div: HTMLFactory;
|
||||
dl: HTMLFactory;
|
||||
dt: HTMLFactory;
|
||||
em: HTMLFactory;
|
||||
embed: HTMLFactory;
|
||||
fieldset: HTMLFactory;
|
||||
figcaption: HTMLFactory;
|
||||
figure: HTMLFactory;
|
||||
footer: HTMLFactory;
|
||||
form: HTMLFactory;
|
||||
h1: HTMLFactory;
|
||||
h2: HTMLFactory;
|
||||
h3: HTMLFactory;
|
||||
h4: HTMLFactory;
|
||||
h5: HTMLFactory;
|
||||
h6: HTMLFactory;
|
||||
head: HTMLFactory;
|
||||
header: HTMLFactory;
|
||||
hr: HTMLFactory;
|
||||
html: HTMLFactory;
|
||||
i: HTMLFactory;
|
||||
iframe: HTMLFactory;
|
||||
img: HTMLFactory;
|
||||
input: HTMLFactory;
|
||||
ins: HTMLFactory;
|
||||
kbd: HTMLFactory;
|
||||
keygen: HTMLFactory;
|
||||
label: HTMLFactory;
|
||||
legend: HTMLFactory;
|
||||
li: HTMLFactory;
|
||||
link: HTMLFactory;
|
||||
main: HTMLFactory;
|
||||
map: HTMLFactory;
|
||||
mark: HTMLFactory;
|
||||
menu: HTMLFactory;
|
||||
menuitem: HTMLFactory;
|
||||
meta: HTMLFactory;
|
||||
meter: HTMLFactory;
|
||||
nav: HTMLFactory;
|
||||
noscript: HTMLFactory;
|
||||
object: HTMLFactory;
|
||||
ol: HTMLFactory;
|
||||
optgroup: HTMLFactory;
|
||||
option: HTMLFactory;
|
||||
output: HTMLFactory;
|
||||
p: HTMLFactory;
|
||||
param: HTMLFactory;
|
||||
picture: HTMLFactory;
|
||||
pre: HTMLFactory;
|
||||
progress: HTMLFactory;
|
||||
q: HTMLFactory;
|
||||
rp: HTMLFactory;
|
||||
rt: HTMLFactory;
|
||||
ruby: HTMLFactory;
|
||||
s: HTMLFactory;
|
||||
samp: HTMLFactory;
|
||||
script: HTMLFactory;
|
||||
section: HTMLFactory;
|
||||
select: HTMLFactory;
|
||||
small: HTMLFactory;
|
||||
source: HTMLFactory;
|
||||
span: HTMLFactory;
|
||||
strong: HTMLFactory;
|
||||
style: HTMLFactory;
|
||||
sub: HTMLFactory;
|
||||
summary: HTMLFactory;
|
||||
sup: HTMLFactory;
|
||||
table: HTMLFactory;
|
||||
tbody: HTMLFactory;
|
||||
td: HTMLFactory;
|
||||
textarea: HTMLFactory;
|
||||
tfoot: HTMLFactory;
|
||||
th: HTMLFactory;
|
||||
thead: HTMLFactory;
|
||||
time: HTMLFactory;
|
||||
title: HTMLFactory;
|
||||
tr: HTMLFactory;
|
||||
track: HTMLFactory;
|
||||
u: HTMLFactory;
|
||||
ul: HTMLFactory;
|
||||
"var": HTMLFactory;
|
||||
video: HTMLFactory;
|
||||
wbr: HTMLFactory;
|
||||
|
||||
// SVG
|
||||
circle: SVGFactory;
|
||||
defs: SVGFactory;
|
||||
ellipse: SVGFactory;
|
||||
g: SVGFactory;
|
||||
line: SVGFactory;
|
||||
linearGradient: SVGFactory;
|
||||
mask: SVGFactory;
|
||||
path: SVGFactory;
|
||||
pattern: SVGFactory;
|
||||
polygon: SVGFactory;
|
||||
polyline: SVGFactory;
|
||||
radialGradient: SVGFactory;
|
||||
rect: SVGFactory;
|
||||
stop: SVGFactory;
|
||||
svg: SVGFactory;
|
||||
text: SVGFactory;
|
||||
tspan: SVGFactory;
|
||||
}
|
||||
|
||||
//
|
||||
// React.PropTypes
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface Validator<T> {
|
||||
(object: T, key: string, componentName: string): Error;
|
||||
}
|
||||
|
||||
interface Requireable<T> extends Validator<T> {
|
||||
isRequired: Validator<T>;
|
||||
}
|
||||
|
||||
interface ValidationMap<T> {
|
||||
[key: string]: Validator<T>;
|
||||
}
|
||||
|
||||
interface ReactPropTypes {
|
||||
any: Requireable<any>;
|
||||
array: Requireable<any>;
|
||||
bool: Requireable<any>;
|
||||
func: Requireable<any>;
|
||||
number: Requireable<any>;
|
||||
object: Requireable<any>;
|
||||
string: Requireable<any>;
|
||||
node: Requireable<any>;
|
||||
element: Requireable<any>;
|
||||
instanceOf(expectedClass: {}): Requireable<any>;
|
||||
oneOf(types: any[]): Requireable<any>;
|
||||
oneOfType(types: Validator<any>[]): Requireable<any>;
|
||||
arrayOf(type: Validator<any>): Requireable<any>;
|
||||
objectOf(type: Validator<any>): Requireable<any>;
|
||||
shape(type: ValidationMap<any>): Requireable<any>;
|
||||
}
|
||||
|
||||
//
|
||||
// React.Children
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ReactChildren {
|
||||
map<T>(children: ReactNode, fn: (child: ReactChild) => T): { [key:string]: T };
|
||||
forEach(children: ReactNode, fn: (child: ReactChild) => any): void;
|
||||
count(children: ReactNode): number;
|
||||
only(children: ReactNode): ReactChild;
|
||||
}
|
||||
|
||||
//
|
||||
// Browser Interfaces
|
||||
// https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface AbstractView {
|
||||
styleMedia: StyleMedia;
|
||||
document: Document;
|
||||
}
|
||||
|
||||
interface Touch {
|
||||
identifier: number;
|
||||
target: EventTarget;
|
||||
screenX: number;
|
||||
screenY: number;
|
||||
clientX: number;
|
||||
clientY: number;
|
||||
pageX: number;
|
||||
pageY: number;
|
||||
}
|
||||
|
||||
interface TouchList {
|
||||
[index: number]: Touch;
|
||||
length: number;
|
||||
item(index: number): Touch;
|
||||
identifiedTouch(identifier: number): Touch;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,387 @@
|
||||
/// <reference path="react-addons-0.13.0.d.ts" />
|
||||
import React = require("react/addons");
|
||||
|
||||
interface Props extends React.Props {
|
||||
hello: string;
|
||||
world?: string;
|
||||
foo: number;
|
||||
bar: boolean;
|
||||
}
|
||||
|
||||
interface State {
|
||||
inputValue?: string;
|
||||
seconds?: number;
|
||||
}
|
||||
|
||||
interface Context {
|
||||
someValue?: string;
|
||||
}
|
||||
|
||||
interface ChildContext {
|
||||
someOtherValue: string;
|
||||
}
|
||||
|
||||
interface MyComponent extends React.Component<Props, State, Context> {
|
||||
reset(): void;
|
||||
}
|
||||
|
||||
var props: Props = {
|
||||
key: 42,
|
||||
ref: "myComponent42",
|
||||
hello: "world",
|
||||
foo: 42,
|
||||
bar: true
|
||||
};
|
||||
|
||||
var container: Element;
|
||||
var INPUT_REF: string = "input";
|
||||
|
||||
//
|
||||
// Top-Level API
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var ClassicComponent: React.ClassicComponentClass<Props, State, Context> =
|
||||
React.createClass<Props, State, Context>({
|
||||
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_REF,
|
||||
value: this.state.inputValue
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
class ModernComponent extends React.Component<Props, State, Context>
|
||||
implements React.ChildContextProvider<ChildContext> {
|
||||
|
||||
constructor(props: Props, context: Context) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
inputValue: context.someValue,
|
||||
seconds: props.foo
|
||||
};
|
||||
}
|
||||
|
||||
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
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return React.DOM.div(null,
|
||||
React.DOM.input({
|
||||
ref: INPUT_REF,
|
||||
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.ReactClassicElement<Props> =
|
||||
classicFactory(props);
|
||||
|
||||
var domFactory: React.DOMFactory<any> =
|
||||
React.createFactory("foo");
|
||||
var domFactoryElement: React.ReactDOMElement<any> =
|
||||
domFactory();
|
||||
|
||||
// React.createElement
|
||||
var element: React.ReactElement<Props> =
|
||||
React.createElement(ModernComponent, props);
|
||||
var classicElement: React.ReactClassicElement<Props> =
|
||||
React.createElement(ClassicComponent, props);
|
||||
var domElement: React.ReactHTMLElement =
|
||||
React.createElement("div");
|
||||
|
||||
// React.render
|
||||
var component: React.Component<Props, any, any> =
|
||||
React.render(element, container);
|
||||
var classicComponent: React.ClassicComponent<Props, any, 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;
|
||||
var ref: string = element.ref;
|
||||
|
||||
//
|
||||
// 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 inputRef: React.HTMLComponent =
|
||||
<React.HTMLComponent>component.refs[INPUT_REF];
|
||||
var value: string = inputRef.getDOMNode<HTMLInputElement>().value;
|
||||
|
||||
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, 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;
|
||||
}
|
||||
};
|
||||
|
||||
//
|
||||
// ContextTypes
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var ContextTypesSpecification: React.ComponentSpec<any, 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.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;
|
||||
}
|
||||
class Timer extends React.Component<{}, TimerState, {}> {
|
||||
static state = {
|
||||
secondsElapsed: 0
|
||||
}
|
||||
private _interval: number;
|
||||
tick() {
|
||||
this.setState({ secondsElapsed: this.state.secondsElapsed + 1 });
|
||||
}
|
||||
componentDidMount() {
|
||||
var me = this;
|
||||
this._interval = setInterval(() => me.tick(), 1000);
|
||||
}
|
||||
componentWillUnmount() {
|
||||
clearInterval(this._interval);
|
||||
}
|
||||
render() {
|
||||
return React.DOM.div(
|
||||
null,
|
||||
"Seconds Elapsed: ",
|
||||
this.state.secondsElapsed
|
||||
);
|
||||
}
|
||||
}
|
||||
React.render(React.createElement(Timer), container);
|
||||
|
||||
//
|
||||
// React.addons
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var cx = React.addons.classSet;
|
||||
var className: string = cx({ a: true, b: false, c: true });
|
||||
className = cx("a", null, "b");
|
||||
|
||||
//
|
||||
// React.addons (Transitions)
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
React.createFactory(React.addons.TransitionGroup)({ component: "div" });
|
||||
React.createFactory(React.addons.CSSTransitionGroup)({
|
||||
component: React.createClass({
|
||||
render: (): React.ReactElement<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" });
|
||||
|
||||
+217
-182
@@ -1,42 +1,179 @@
|
||||
// Type definitions for React 0.13.0
|
||||
// Type definitions for ReactWithAddons v0.13.0 (external module)
|
||||
// Project: http://facebook.github.io/react/
|
||||
// Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
|
||||
declare module React {
|
||||
declare module "react/addons" {
|
||||
//
|
||||
// React Elements
|
||||
// React Elements
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type ReactType = ComponentClass<any, any, any> | string;
|
||||
|
||||
interface ReactElement<P> {
|
||||
type: ComponentClass<P, any, any> | string;
|
||||
interface ReactElementBase<T, P> {
|
||||
type: T;
|
||||
props: P;
|
||||
key: number | string;
|
||||
ref: string;
|
||||
}
|
||||
|
||||
interface ReactClassicElement<P> extends ReactElement<P> {
|
||||
}
|
||||
interface ReactElement<P>
|
||||
extends ReactElementBase<ComponentClass<P, any, any>, P> {}
|
||||
|
||||
interface ReactHTMLElement extends ReactElement<HTMLAttributes> {}
|
||||
interface ReactSVGElement extends ReactElement<SVGAttributes> {}
|
||||
interface ReactClassicElement<P>
|
||||
extends ReactElementBase<ClassicComponentClass<P, any, any> | string, P> {}
|
||||
|
||||
interface ReactDOMElement<P> // subtype of ReactClassicElement
|
||||
extends ReactElementBase<string, P> {}
|
||||
|
||||
type ReactHTMLElement = ReactDOMElement<HTMLAttributes>;
|
||||
type ReactSVGElement = ReactDOMElement<SVGAttributes>;
|
||||
|
||||
//
|
||||
// React Nodes
|
||||
// Factories
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface Factory<P> {
|
||||
(props?: P, ...children: ReactNode[]): ReactElement<P>;
|
||||
}
|
||||
|
||||
interface ClassicFactory<P> {
|
||||
(props?: P, ...children: ReactNode[]): ReactClassicElement<P>;
|
||||
}
|
||||
|
||||
interface DOMFactory<P> {
|
||||
(props?: P, ...children: ReactNode[]): ReactDOMElement<P>;
|
||||
}
|
||||
|
||||
type HTMLFactory = DOMFactory<HTMLAttributes>;
|
||||
type SVGFactory = DOMFactory<SVGAttributes>;
|
||||
|
||||
//
|
||||
// React Nodes
|
||||
// http://facebook.github.io/react/docs/glossary.html
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type ReactText = string | number;
|
||||
type ReactChild = ReactElement<any> | ReactText;
|
||||
type ReactChild = ReactElementBase<any, any> | ReactText;
|
||||
|
||||
// Should be Array<ReactNode> but type aliases cannot be recursive
|
||||
type ReactFragment = Array<ReactChild | any[] | boolean>;
|
||||
type ReactNode = ReactChild | ReactFragment | boolean;
|
||||
|
||||
//
|
||||
// React Components
|
||||
// Top Level API
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
function createClass<P, S, C>(
|
||||
spec: ComponentSpec<P, S, C>): ClassicComponentClass<P, S, C>;
|
||||
|
||||
function createFactory<P>(
|
||||
type: string): DOMFactory<P>;
|
||||
function createFactory<P>(
|
||||
type: ClassicComponentClass<P, any, any> | string): ClassicFactory<P>;
|
||||
function createFactory<P>(
|
||||
type: ComponentClass<P, any, any>): Factory<P>;
|
||||
|
||||
function createElement<P>(
|
||||
type: string,
|
||||
props?: P,
|
||||
...children: ReactNode[]): ReactDOMElement<P>;
|
||||
function createElement<P>(
|
||||
type: ClassicComponentClass<P, any, any> | string,
|
||||
props?: P,
|
||||
...children: ReactNode[]): ReactClassicElement<P>;
|
||||
function createElement<P>(
|
||||
type: ComponentClass<P, any, any>,
|
||||
props?: P,
|
||||
...children: ReactNode[]): ReactElement<P>;
|
||||
|
||||
function render<P>(
|
||||
element: ReactDOMElement<P>,
|
||||
container: Element,
|
||||
callback?: () => any): DOMComponent<P>;
|
||||
function render<P, S>(
|
||||
element: ReactClassicElement<P>,
|
||||
container: Element,
|
||||
callback?: () => any): ClassicComponent<P, S, {}>;
|
||||
function render<P, S>(
|
||||
element: ReactElement<P>,
|
||||
container: Element,
|
||||
callback?: () => any): Component<P, S, {}>;
|
||||
|
||||
function unmountComponentAtNode(container: Element): boolean;
|
||||
function renderToString(element: ReactElementBase<any, any>): string;
|
||||
function renderToStaticMarkup(element: ReactElementBase<any, any>): string;
|
||||
function isValidElement(object: {}): boolean;
|
||||
function initializeTouchEvents(shouldUseTouch: boolean): void;
|
||||
|
||||
function findDOMNode<TElement extends Element>(
|
||||
componentOrElement: Component<any, any, any> | Element): TElement;
|
||||
function findDOMNode(
|
||||
componentOrElement: Component<any, any, any> | Element): Element;
|
||||
|
||||
var DOM: ReactDOM;
|
||||
var PropTypes: ReactPropTypes;
|
||||
var Children: ReactChildren;
|
||||
|
||||
//
|
||||
// Component API
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
// Base component for plain JS classes
|
||||
class Component<P, S, C> implements ComponentLifecycle<P, S, C> {
|
||||
constructor(props: P, context: C);
|
||||
setState(state: S, callback?: () => any): void;
|
||||
forceUpdate(): void;
|
||||
props: P;
|
||||
state: S;
|
||||
context: C;
|
||||
refs: {
|
||||
[key: string]: Component<any, any, any>
|
||||
};
|
||||
}
|
||||
|
||||
interface ClassicComponent<P, S, C> extends Component<P, S, C> {
|
||||
replaceState(nextState: S, callback?: () => any): void;
|
||||
getDOMNode<TElement extends Element>(): TElement;
|
||||
getDOMNode(): Element;
|
||||
isMounted(): boolean;
|
||||
getInitialState?(): S;
|
||||
setProps(nextProps: P, callback?: () => any): void;
|
||||
replaceProps(nextProps: P, callback?: () => any): void;
|
||||
}
|
||||
|
||||
interface DOMComponent<P> extends ClassicComponent<P, any, any> {
|
||||
tagName: string;
|
||||
}
|
||||
|
||||
type HTMLComponent = DOMComponent<HTMLAttributes>;
|
||||
type SVGComponent = DOMComponent<SVGAttributes>;
|
||||
|
||||
interface ChildContextProvider<CC> {
|
||||
getChildContext(): CC;
|
||||
}
|
||||
|
||||
//
|
||||
// Class Interfaces
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ComponentClassBase<P, C> {
|
||||
propTypes?: ValidationMap<P>;
|
||||
contextTypes?: ValidationMap<C>;
|
||||
childContextTypes?: ValidationMap<{}>;
|
||||
}
|
||||
|
||||
interface ComponentClass<P, S, C> extends ComponentClassBase<P, C> {
|
||||
new(props?: P, context?: C): Component<P, S, C>;
|
||||
defaultProps?: P;
|
||||
}
|
||||
|
||||
interface ClassicComponentClass<P, S, C> extends ComponentClassBase<P, C> {
|
||||
new(props?: P, context?: C): ClassicComponent<P, S, C>;
|
||||
getDefaultProps?(): P;
|
||||
displayName?: string;
|
||||
}
|
||||
|
||||
//
|
||||
// Component Specs and Lifecycle
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ComponentLifecycle<P, S, C> {
|
||||
@@ -48,102 +185,7 @@ declare module React {
|
||||
componentDidUpdate?(prevProps: P, prevState: S, prevContext: C): void;
|
||||
componentWillUnmount?(): void;
|
||||
}
|
||||
|
||||
// "modern" ES6 classes
|
||||
class Component<P, S, C> implements ComponentLifecycle<P, S, C> {
|
||||
constructor(props: P, context: C);
|
||||
// static members can't be type checked with generics. However, see ComponentClass<P, S, C>
|
||||
static defaultProps: any;
|
||||
static propTypes: ValidationMap<any>;
|
||||
static contextTypes: ValidationMap<any>;
|
||||
static childContextTypes: ValidationMap<any>;
|
||||
static displayName: string;
|
||||
setState(state: S, callback?: () => any): void;
|
||||
forceUpdate(): void;
|
||||
props: P;
|
||||
state: S;
|
||||
context: C;
|
||||
refs: {
|
||||
[key: string]: Component<any, any, any>
|
||||
};
|
||||
}
|
||||
|
||||
interface ComponentClass<P, S, C> {
|
||||
new (props: P, context: C): Component<P, S, C>;
|
||||
// can cast to get type checking for generics if desired
|
||||
defaultProps: P;
|
||||
getDefaultProps?(): P;
|
||||
propTypes: ValidationMap<P>;
|
||||
contextTypes: ValidationMap<C>;
|
||||
childContextTypes: ValidationMap<any>;
|
||||
displayName: string;
|
||||
}
|
||||
|
||||
// "classic" createClass
|
||||
class ClassicComponent<P, S, C> extends Component<P, S, C> {
|
||||
replaceState(nextState: S, callback?: () => any): void;
|
||||
getDOMNode<TElement extends Element>(): TElement;
|
||||
getDOMNode(): Element;
|
||||
isMounted(): boolean;
|
||||
getInitialState(): S;
|
||||
setProps(nextProps: P, callback?: () => any): void;
|
||||
replaceProps(nextProps: P, callback?: () => any): void;
|
||||
}
|
||||
|
||||
interface ClassicComponentClass<P, S, C> extends ComponentClass<P, S, C> {
|
||||
new (props: P, context: C): ClassicComponent<P, S, C>;
|
||||
}
|
||||
|
||||
interface ChildContextProvider<C> {
|
||||
getChildContext: () => C;
|
||||
}
|
||||
|
||||
//
|
||||
// ReactElement Factories
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ComponentFactory<P> {
|
||||
(props?: P, ...children: ReactNode[]): ReactElement<P>;
|
||||
}
|
||||
|
||||
interface HTMLFactory extends ComponentFactory<HTMLAttributes> {}
|
||||
interface SVGFactory extends ComponentFactory<SVGAttributes> {}
|
||||
|
||||
//
|
||||
// Top-Level API
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface TopLevelAPI {
|
||||
createClass<P, S, C>(spec: ComponentSpec<P, S, C>): ClassicComponentClass<P, S, C>;
|
||||
createElement<P>(type: ClassicComponentClass<P, any, any>, props: P, ...children: ReactNode[]): ReactClassicElement<P>;
|
||||
createElement<P>(type: ComponentClass<P, any, any> | string, props: P, ...children: ReactNode[]): ReactElement<P>;
|
||||
createFactory<P>(type: ComponentClass<P, any, any> | string): ComponentFactory<P>;
|
||||
render<P, S>(element: ReactClassicElement<P>, container: Element, callback?: () => any): ClassicComponent<P, S, any>;
|
||||
render<P, S>(element: ReactElement<P>, container: Element, callback?: () => any): Component<P, S, any>;
|
||||
unmountComponentAtNode(container: Element): boolean;
|
||||
renderToString(element: ReactElement<any>): string;
|
||||
renderToStaticMarkup(element: ReactElement<any>): string;
|
||||
isValidElement(object: {}): boolean;
|
||||
initializeTouchEvents(shouldUseTouch: boolean): void;
|
||||
findDOMNode(component: Component<any, any, any>): Element;
|
||||
findDOMNode<TElement extends Element>(component: Component<any, any, any>): TElement;
|
||||
}
|
||||
|
||||
//
|
||||
// Component API
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
class DOMComponent<P> extends ClassicComponent<P, any, any> {
|
||||
tagName: string;
|
||||
}
|
||||
|
||||
interface HTMLComponent extends DOMComponent<HTMLAttributes> {}
|
||||
interface SVGComponent extends DOMComponent<SVGAttributes> {}
|
||||
|
||||
//
|
||||
// Component Specs and Lifecycle
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface Mixin<P, S, C> extends ComponentLifecycle<P, S, C> {
|
||||
mixins?: Mixin<P, S, C>;
|
||||
statics?: {
|
||||
@@ -154,13 +196,13 @@ declare module React {
|
||||
propTypes?: ValidationMap<any>;
|
||||
contextTypes?: ValidationMap<any>;
|
||||
childContextTypes?: ValidationMap<any>
|
||||
|
||||
|
||||
getInitialState?(): S;
|
||||
getDefaultProps?(): P;
|
||||
}
|
||||
|
||||
interface ComponentSpec<P, S, C> extends Mixin<P, S, C> {
|
||||
render(): ReactElement<any>;
|
||||
render(): ReactElementBase<any, any>;
|
||||
}
|
||||
|
||||
//
|
||||
@@ -266,15 +308,16 @@ declare module React {
|
||||
interface WheelEventHandler extends EventHandler<WheelEvent> {}
|
||||
|
||||
//
|
||||
// Attributes
|
||||
// Props / DOM Attributes
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ReactAttributes {
|
||||
interface Props {
|
||||
children?: ReactNode;
|
||||
key?: number | string;
|
||||
ref?: string;
|
||||
}
|
||||
|
||||
// Event Attributes
|
||||
interface DOMAttributes extends Props {
|
||||
onCopy?: ClipboardEventHandler;
|
||||
onCut?: ClipboardEventHandler;
|
||||
onPaste?: ClipboardEventHandler;
|
||||
@@ -335,7 +378,7 @@ declare module React {
|
||||
strokeOpacity?: number;
|
||||
}
|
||||
|
||||
interface HTMLAttributes extends ReactAttributes {
|
||||
interface HTMLAttributes extends DOMAttributes {
|
||||
accept?: string;
|
||||
acceptCharset?: string;
|
||||
accessKey?: string;
|
||||
@@ -443,9 +486,9 @@ declare module React {
|
||||
itemType?: string;
|
||||
}
|
||||
|
||||
interface SVGAttributes extends ReactAttributes {
|
||||
interface SVGAttributes extends DOMAttributes {
|
||||
cx?: SVGLength | SVGAnimatedLength;
|
||||
cy?: any;
|
||||
cy?: any;
|
||||
d?: string;
|
||||
dx?: SVGLength | SVGAnimatedLength;
|
||||
dy?: SVGLength | SVGAnimatedLength;
|
||||
@@ -490,7 +533,7 @@ declare module React {
|
||||
}
|
||||
|
||||
//
|
||||
// React.DOM
|
||||
// React.DOM
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ReactDOM {
|
||||
@@ -677,14 +720,36 @@ declare module React {
|
||||
// React.addons
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ClassSet {
|
||||
[key: string]: boolean;
|
||||
}
|
||||
export var addons: {
|
||||
CSSTransitionGroup: CSSTransitionGroup;
|
||||
LinkedStateMixin: LinkedStateMixin;
|
||||
PureRenderMixin: PureRenderMixin;
|
||||
TransitionGroup: TransitionGroup;
|
||||
|
||||
batchedUpdates<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;
|
||||
|
||||
// deprecated: use petehunt/react-classset or JedWatson/classnames
|
||||
classSet(cx: { [key: string]: boolean }): string;
|
||||
classSet(...classList: string[]): 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;
|
||||
};
|
||||
|
||||
//
|
||||
// React.addons (Transitions)
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type ReactType = ComponentClass<any, any, any> | string;
|
||||
|
||||
interface TransitionGroupProps {
|
||||
component?: ReactType;
|
||||
childFactory?: (child: ReactElement<any>) => ReactElement<any>;
|
||||
@@ -697,8 +762,10 @@ declare module React {
|
||||
transitionLeave?: boolean;
|
||||
}
|
||||
|
||||
interface CSSTransitionGroup extends ComponentClass<CSSTransitionGroupProps, any, any> {}
|
||||
interface TransitionGroup extends ComponentClass<TransitionGroupProps, any, any> {}
|
||||
type CSSTransitionGroup =
|
||||
ComponentClass<CSSTransitionGroupProps, any, any>;
|
||||
type TransitionGroup =
|
||||
ComponentClass<TransitionGroupProps, any, any>;
|
||||
|
||||
//
|
||||
// React.addons (Mixins)
|
||||
@@ -785,28 +852,44 @@ declare module React {
|
||||
mockComponent(mocked: MockedComponentClass, mockTagName?: string): ReactTestUtils;
|
||||
|
||||
isElementOfType(element: ReactElement<any>, type: ReactType): boolean;
|
||||
isTextComponent(instance: Component<any, any, any>): boolean;
|
||||
isDOMComponent(instance: Component<any, any, any>): boolean;
|
||||
isCompositeComponent(instance: Component<any, any, any>): boolean;
|
||||
isCompositeComponentWithType(instance: Component<any, any, any>, type: ComponentClass<any, any, any>): boolean;
|
||||
isTextComponent(instance: Component<any, any, any>): boolean;
|
||||
isCompositeComponentWithType(
|
||||
instance: Component<any, any, any>,
|
||||
type: ComponentClass<any, any, any>): boolean;
|
||||
|
||||
findAllInRenderedTree(tree: Component<any, any, any>, fn: (i: Component<any, any, any>) => boolean): Component<any, any, any>;
|
||||
findAllInRenderedTree(
|
||||
tree: Component<any, any, any>,
|
||||
fn: (i: Component<any, any, any>) => boolean): Component<any, any, any>;
|
||||
|
||||
scryRenderedDOMComponentsWithClass(tree: Component<any, any, any>, className: string): DOMComponent<any>[];
|
||||
findRenderedDOMComponentWithClass(tree: Component<any, any, any>, className: string): DOMComponent<any>;
|
||||
scryRenderedDOMComponentsWithClass(
|
||||
tree: Component<any, any, any>,
|
||||
className: string): DOMComponent<any>[];
|
||||
findRenderedDOMComponentWithClass(
|
||||
tree: Component<any, any, any>,
|
||||
className: string): DOMComponent<any>;
|
||||
|
||||
scryRenderedDOMComponentsWithTag(tree: Component<any, any, any>, tagName: string): DOMComponent<any>[];
|
||||
findRenderedDOMComponentWithTag(tree: Component<any, any, any>, tagName: string): DOMComponent<any>;
|
||||
scryRenderedDOMComponentsWithTag(
|
||||
tree: Component<any, any, any>,
|
||||
tagName: string): DOMComponent<any>[];
|
||||
findRenderedDOMComponentWithTag(
|
||||
tree: Component<any, any, any>,
|
||||
tagName: string): DOMComponent<any>;
|
||||
|
||||
scryRenderedComponentsWithType<P, S, C>(
|
||||
tree: Component<any, any, any>, type: ComponentClass<P, S, C>): Component<P, S, C>[];
|
||||
tree: Component<any, any, any>,
|
||||
type: ComponentClass<P, S, C>): Component<P, S, C>[];
|
||||
scryRenderedComponentsWithType<C extends Component<any, any, any>>(
|
||||
tree: Component<any, any, any>, type: ComponentClass<any, any, any>): C[];
|
||||
tree: Component<any, any, any>,
|
||||
type: ComponentClass<any, any, any>): C[];
|
||||
|
||||
findRenderedComponentWithType<P, S, C>(
|
||||
tree: Component<any, any, any>, type: ComponentClass<P, S, C>): Component<P, S, C>;
|
||||
tree: Component<any, any, any>,
|
||||
type: ComponentClass<P, S, C>): Component<P, S, C>;
|
||||
findRenderedComponentWithType<C extends Component<any, any, any>>(
|
||||
tree: Component<any, any, any>, type: ComponentClass<any, any, any>): C;
|
||||
tree: Component<any, any, any>,
|
||||
type: ComponentClass<any, any, any>): C;
|
||||
}
|
||||
|
||||
interface SyntheticEventData {
|
||||
@@ -884,44 +967,6 @@ declare module React {
|
||||
wheel: EventSimulator;
|
||||
}
|
||||
|
||||
//
|
||||
// react Exports
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface Exports extends TopLevelAPI {
|
||||
DOM: ReactDOM;
|
||||
PropTypes: ReactPropTypes;
|
||||
Children: ReactChildren;
|
||||
Component: ComponentClass<any, any, any>;
|
||||
}
|
||||
|
||||
//
|
||||
// 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
|
||||
@@ -951,13 +996,3 @@ declare module React {
|
||||
}
|
||||
}
|
||||
|
||||
declare module "react" {
|
||||
var exports: React.Exports;
|
||||
export = exports;
|
||||
}
|
||||
|
||||
declare module "react/addons" {
|
||||
var exports: React.AddonsExports;
|
||||
export = exports;
|
||||
}
|
||||
|
||||
+259
@@ -0,0 +1,259 @@
|
||||
// Type definitions for ReactWithAddons v0.13.0 (internal module)
|
||||
// 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" />
|
||||
|
||||
declare module React {
|
||||
//
|
||||
// React.addons
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export var 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;
|
||||
|
||||
// deprecated: use petehunt/react-classset or JedWatson/classnames
|
||||
classSet(cx: { [key: string]: boolean }): string;
|
||||
classSet(...classList: string[]): 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;
|
||||
};
|
||||
|
||||
//
|
||||
// React.addons (Transitions)
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type ReactType = ComponentClass<any, any, any> | string;
|
||||
|
||||
interface TransitionGroupProps {
|
||||
component?: ReactType;
|
||||
childFactory?: (child: ReactElement<any>) => ReactElement<any>;
|
||||
}
|
||||
|
||||
interface CSSTransitionGroupProps extends TransitionGroupProps {
|
||||
transitionName: string;
|
||||
transitionAppear?: boolean;
|
||||
transitionEnter?: boolean;
|
||||
transitionLeave?: boolean;
|
||||
}
|
||||
|
||||
type CSSTransitionGroup =
|
||||
ComponentClass<CSSTransitionGroupProps, any, any>;
|
||||
type TransitionGroup =
|
||||
ComponentClass<TransitionGroupProps, any, any>;
|
||||
|
||||
//
|
||||
// React.addons (Mixins)
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ReactLink<T> {
|
||||
value: T;
|
||||
requestChange(newValue: T): void;
|
||||
}
|
||||
|
||||
interface LinkedStateMixin extends Mixin<any, any, any> {
|
||||
linkState<T>(key: string): ReactLink<T>;
|
||||
}
|
||||
|
||||
interface PureRenderMixin extends Mixin<any, 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, any, any>;
|
||||
renderIntoDocument<C extends Component<any, any, any>>(element: ReactElement<any>): C;
|
||||
|
||||
mockComponent(mocked: MockedComponentClass, mockTagName?: string): ReactTestUtils;
|
||||
|
||||
isElementOfType(element: ReactElement<any>, type: ReactType): boolean;
|
||||
isTextComponent(instance: Component<any, any, any>): boolean;
|
||||
isDOMComponent(instance: Component<any, any, any>): boolean;
|
||||
isCompositeComponent(instance: Component<any, any, any>): boolean;
|
||||
isCompositeComponentWithType(
|
||||
instance: Component<any, any, any>,
|
||||
type: ComponentClass<any, any, any>): boolean;
|
||||
|
||||
findAllInRenderedTree(
|
||||
tree: Component<any, any, any>,
|
||||
fn: (i: Component<any, any, any>) => boolean): Component<any, any, any>;
|
||||
|
||||
scryRenderedDOMComponentsWithClass(
|
||||
tree: Component<any, any, any>,
|
||||
className: string): DOMComponent<any>[];
|
||||
findRenderedDOMComponentWithClass(
|
||||
tree: Component<any, any, any>,
|
||||
className: string): DOMComponent<any>;
|
||||
|
||||
scryRenderedDOMComponentsWithTag(
|
||||
tree: Component<any, any, any>,
|
||||
tagName: string): DOMComponent<any>[];
|
||||
findRenderedDOMComponentWithTag(
|
||||
tree: Component<any, any, any>,
|
||||
tagName: string): DOMComponent<any>;
|
||||
|
||||
scryRenderedComponentsWithType<P, S, C>(
|
||||
tree: Component<any, any, any>,
|
||||
type: ComponentClass<P, S, C>): Component<P, S, C>[];
|
||||
scryRenderedComponentsWithType<C extends Component<any, any, any>>(
|
||||
tree: Component<any, any, any>,
|
||||
type: ComponentClass<any, any, any>): C[];
|
||||
|
||||
findRenderedComponentWithType<P, S, C>(
|
||||
tree: Component<any, any, any>,
|
||||
type: ComponentClass<P, S, C>): Component<P, S, C>;
|
||||
findRenderedComponentWithType<C extends Component<any, any, any>>(
|
||||
tree: Component<any, any, any>,
|
||||
type: ComponentClass<any, any, 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, any, 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;
|
||||
}
|
||||
}
|
||||
|
||||
+747
@@ -0,0 +1,747 @@
|
||||
// Type definitions for React v0.13.0 (internal module)
|
||||
// Project: http://facebook.github.io/react/
|
||||
// Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
|
||||
declare module React {
|
||||
//
|
||||
// React Elements
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ReactElementBase<T, P> {
|
||||
type: T;
|
||||
props: P;
|
||||
key: number | string;
|
||||
ref: string;
|
||||
}
|
||||
|
||||
interface ReactElement<P>
|
||||
extends ReactElementBase<ComponentClass<P, any, any>, P> {}
|
||||
|
||||
interface ReactClassicElement<P>
|
||||
extends ReactElementBase<ClassicComponentClass<P, any, any> | string, P> {}
|
||||
|
||||
interface ReactDOMElement<P> // subtype of ReactClassicElement
|
||||
extends ReactElementBase<string, P> {}
|
||||
|
||||
type ReactHTMLElement = ReactDOMElement<HTMLAttributes>;
|
||||
type ReactSVGElement = ReactDOMElement<SVGAttributes>;
|
||||
|
||||
//
|
||||
// Factories
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface Factory<P> {
|
||||
(props?: P, ...children: ReactNode[]): ReactElement<P>;
|
||||
}
|
||||
|
||||
interface ClassicFactory<P> {
|
||||
(props?: P, ...children: ReactNode[]): ReactClassicElement<P>;
|
||||
}
|
||||
|
||||
interface DOMFactory<P> {
|
||||
(props?: P, ...children: ReactNode[]): ReactDOMElement<P>;
|
||||
}
|
||||
|
||||
type HTMLFactory = DOMFactory<HTMLAttributes>;
|
||||
type SVGFactory = DOMFactory<SVGAttributes>;
|
||||
|
||||
//
|
||||
// React Nodes
|
||||
// http://facebook.github.io/react/docs/glossary.html
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type ReactText = string | number;
|
||||
type ReactChild = ReactElementBase<any, any> | ReactText;
|
||||
|
||||
// Should be Array<ReactNode> but type aliases cannot be recursive
|
||||
type ReactFragment = Array<ReactChild | any[] | boolean>;
|
||||
type ReactNode = ReactChild | ReactFragment | boolean;
|
||||
|
||||
//
|
||||
// Top Level API
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
function createClass<P, S, C>(
|
||||
spec: ComponentSpec<P, S, C>): ClassicComponentClass<P, S, C>;
|
||||
|
||||
function createFactory<P>(
|
||||
type: string): DOMFactory<P>;
|
||||
function createFactory<P>(
|
||||
type: ClassicComponentClass<P, any, any> | string): ClassicFactory<P>;
|
||||
function createFactory<P>(
|
||||
type: ComponentClass<P, any, any>): Factory<P>;
|
||||
|
||||
function createElement<P>(
|
||||
type: string,
|
||||
props?: P,
|
||||
...children: ReactNode[]): ReactDOMElement<P>;
|
||||
function createElement<P>(
|
||||
type: ClassicComponentClass<P, any, any> | string,
|
||||
props?: P,
|
||||
...children: ReactNode[]): ReactClassicElement<P>;
|
||||
function createElement<P>(
|
||||
type: ComponentClass<P, any, any>,
|
||||
props?: P,
|
||||
...children: ReactNode[]): ReactElement<P>;
|
||||
|
||||
function render<P>(
|
||||
element: ReactDOMElement<P>,
|
||||
container: Element,
|
||||
callback?: () => any): DOMComponent<P>;
|
||||
function render<P, S>(
|
||||
element: ReactClassicElement<P>,
|
||||
container: Element,
|
||||
callback?: () => any): ClassicComponent<P, S, {}>;
|
||||
function render<P, S>(
|
||||
element: ReactElement<P>,
|
||||
container: Element,
|
||||
callback?: () => any): Component<P, S, {}>;
|
||||
|
||||
function unmountComponentAtNode(container: Element): boolean;
|
||||
function renderToString(element: ReactElementBase<any, any>): string;
|
||||
function renderToStaticMarkup(element: ReactElementBase<any, any>): string;
|
||||
function isValidElement(object: {}): boolean;
|
||||
function initializeTouchEvents(shouldUseTouch: boolean): void;
|
||||
|
||||
function findDOMNode<TElement extends Element>(
|
||||
componentOrElement: Component<any, any, any> | Element): TElement;
|
||||
function findDOMNode(
|
||||
componentOrElement: Component<any, any, any> | Element): Element;
|
||||
|
||||
var DOM: ReactDOM;
|
||||
var PropTypes: ReactPropTypes;
|
||||
var Children: ReactChildren;
|
||||
|
||||
//
|
||||
// Component API
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
// Base component for plain JS classes
|
||||
class Component<P, S, C> implements ComponentLifecycle<P, S, C> {
|
||||
constructor(props: P, context: C);
|
||||
setState(state: S, callback?: () => any): void;
|
||||
forceUpdate(): void;
|
||||
props: P;
|
||||
state: S;
|
||||
context: C;
|
||||
refs: {
|
||||
[key: string]: Component<any, any, any>
|
||||
};
|
||||
}
|
||||
|
||||
interface ClassicComponent<P, S, C> extends Component<P, S, C> {
|
||||
replaceState(nextState: S, callback?: () => any): void;
|
||||
getDOMNode<TElement extends Element>(): TElement;
|
||||
getDOMNode(): Element;
|
||||
isMounted(): boolean;
|
||||
getInitialState?(): S;
|
||||
setProps(nextProps: P, callback?: () => any): void;
|
||||
replaceProps(nextProps: P, callback?: () => any): void;
|
||||
}
|
||||
|
||||
interface DOMComponent<P> extends ClassicComponent<P, any, any> {
|
||||
tagName: string;
|
||||
}
|
||||
|
||||
type HTMLComponent = DOMComponent<HTMLAttributes>;
|
||||
type SVGComponent = DOMComponent<SVGAttributes>;
|
||||
|
||||
interface ChildContextProvider<CC> {
|
||||
getChildContext(): CC;
|
||||
}
|
||||
|
||||
//
|
||||
// Class Interfaces
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ComponentClassBase<P, C> {
|
||||
propTypes?: ValidationMap<P>;
|
||||
contextTypes?: ValidationMap<C>;
|
||||
childContextTypes?: ValidationMap<{}>;
|
||||
}
|
||||
|
||||
interface ComponentClass<P, S, C> extends ComponentClassBase<P, C> {
|
||||
new(props?: P, context?: C): Component<P, S, C>;
|
||||
defaultProps?: P;
|
||||
}
|
||||
|
||||
interface ClassicComponentClass<P, S, C> extends ComponentClassBase<P, C> {
|
||||
new(props?: P, context?: C): ClassicComponent<P, S, C>;
|
||||
getDefaultProps?(): P;
|
||||
displayName?: string;
|
||||
}
|
||||
|
||||
//
|
||||
// Component Specs and Lifecycle
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ComponentLifecycle<P, S, C> {
|
||||
componentWillMount?(): void;
|
||||
componentDidMount?(): void;
|
||||
componentWillReceiveProps?(nextProps: P, nextContext: C): void;
|
||||
shouldComponentUpdate?(nextProps: P, nextState: S, nextContext: C): boolean;
|
||||
componentWillUpdate?(nextProps: P, nextState: S, nextContext: C): void;
|
||||
componentDidUpdate?(prevProps: P, prevState: S, prevContext: C): void;
|
||||
componentWillUnmount?(): void;
|
||||
}
|
||||
|
||||
interface Mixin<P, S, C> extends ComponentLifecycle<P, S, C> {
|
||||
mixins?: Mixin<P, S, C>;
|
||||
statics?: {
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
displayName?: string;
|
||||
propTypes?: ValidationMap<any>;
|
||||
contextTypes?: ValidationMap<any>;
|
||||
childContextTypes?: ValidationMap<any>
|
||||
|
||||
getInitialState?(): S;
|
||||
getDefaultProps?(): P;
|
||||
}
|
||||
|
||||
interface ComponentSpec<P, S, C> extends Mixin<P, S, C> {
|
||||
render(): ReactElementBase<any, any>;
|
||||
}
|
||||
|
||||
//
|
||||
// Event System
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface SyntheticEvent {
|
||||
bubbles: boolean;
|
||||
cancelable: boolean;
|
||||
currentTarget: EventTarget;
|
||||
defaultPrevented: boolean;
|
||||
eventPhase: number;
|
||||
isTrusted: boolean;
|
||||
nativeEvent: Event;
|
||||
preventDefault(): void;
|
||||
stopPropagation(): void;
|
||||
target: EventTarget;
|
||||
timeStamp: Date;
|
||||
type: string;
|
||||
}
|
||||
|
||||
interface ClipboardEvent extends SyntheticEvent {
|
||||
clipboardData: DataTransfer;
|
||||
}
|
||||
|
||||
interface KeyboardEvent extends SyntheticEvent {
|
||||
altKey: boolean;
|
||||
charCode: number;
|
||||
ctrlKey: boolean;
|
||||
getModifierState(key: string): boolean;
|
||||
key: string;
|
||||
keyCode: number;
|
||||
locale: string;
|
||||
location: number;
|
||||
metaKey: boolean;
|
||||
repeat: boolean;
|
||||
shiftKey: boolean;
|
||||
which: number;
|
||||
}
|
||||
|
||||
interface FocusEvent extends SyntheticEvent {
|
||||
relatedTarget: EventTarget;
|
||||
}
|
||||
|
||||
interface FormEvent extends SyntheticEvent {
|
||||
}
|
||||
|
||||
interface MouseEvent extends SyntheticEvent {
|
||||
altKey: boolean;
|
||||
button: number;
|
||||
buttons: number;
|
||||
clientX: number;
|
||||
clientY: number;
|
||||
ctrlKey: boolean;
|
||||
getModifierState(key: string): boolean;
|
||||
metaKey: boolean;
|
||||
pageX: number;
|
||||
pageY: number;
|
||||
relatedTarget: EventTarget;
|
||||
screenX: number;
|
||||
screenY: number;
|
||||
shiftKey: boolean;
|
||||
}
|
||||
|
||||
interface TouchEvent extends SyntheticEvent {
|
||||
altKey: boolean;
|
||||
changedTouches: TouchList;
|
||||
ctrlKey: boolean;
|
||||
getModifierState(key: string): boolean;
|
||||
metaKey: boolean;
|
||||
shiftKey: boolean;
|
||||
targetTouches: TouchList;
|
||||
touches: TouchList;
|
||||
}
|
||||
|
||||
interface UIEvent extends SyntheticEvent {
|
||||
detail: number;
|
||||
view: AbstractView;
|
||||
}
|
||||
|
||||
interface WheelEvent extends SyntheticEvent {
|
||||
deltaMode: number;
|
||||
deltaX: number;
|
||||
deltaY: number;
|
||||
deltaZ: number;
|
||||
}
|
||||
|
||||
//
|
||||
// Event Handler Types
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface EventHandler<E extends SyntheticEvent> {
|
||||
(event: E): void;
|
||||
}
|
||||
|
||||
interface ClipboardEventHandler extends EventHandler<ClipboardEvent> {}
|
||||
interface KeyboardEventHandler extends EventHandler<KeyboardEvent> {}
|
||||
interface FocusEventHandler extends EventHandler<FocusEvent> {}
|
||||
interface FormEventHandler extends EventHandler<FormEvent> {}
|
||||
interface MouseEventHandler extends EventHandler<MouseEvent> {}
|
||||
interface TouchEventHandler extends EventHandler<TouchEvent> {}
|
||||
interface UIEventHandler extends EventHandler<UIEvent> {}
|
||||
interface WheelEventHandler extends EventHandler<WheelEvent> {}
|
||||
|
||||
//
|
||||
// Props / DOM Attributes
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface Props {
|
||||
children?: ReactNode;
|
||||
key?: number | string;
|
||||
ref?: string;
|
||||
}
|
||||
|
||||
interface DOMAttributes extends Props {
|
||||
onCopy?: ClipboardEventHandler;
|
||||
onCut?: ClipboardEventHandler;
|
||||
onPaste?: ClipboardEventHandler;
|
||||
onKeyDown?: KeyboardEventHandler;
|
||||
onKeyPress?: KeyboardEventHandler;
|
||||
onKeyUp?: KeyboardEventHandler;
|
||||
onFocus?: FocusEventHandler;
|
||||
onBlur?: FocusEventHandler;
|
||||
onChange?: FormEventHandler;
|
||||
onInput?: FormEventHandler;
|
||||
onSubmit?: FormEventHandler;
|
||||
onClick?: MouseEventHandler;
|
||||
onDoubleClick?: MouseEventHandler;
|
||||
onDrag?: MouseEventHandler;
|
||||
onDragEnd?: MouseEventHandler;
|
||||
onDragEnter?: MouseEventHandler;
|
||||
onDragExit?: MouseEventHandler;
|
||||
onDragLeave?: MouseEventHandler;
|
||||
onDragOver?: MouseEventHandler;
|
||||
onDragStart?: MouseEventHandler;
|
||||
onDrop?: MouseEventHandler;
|
||||
onMouseDown?: MouseEventHandler;
|
||||
onMouseEnter?: MouseEventHandler;
|
||||
onMouseLeave?: MouseEventHandler;
|
||||
onMouseMove?: MouseEventHandler;
|
||||
onMouseOut?: MouseEventHandler;
|
||||
onMouseOver?: MouseEventHandler;
|
||||
onMouseUp?: MouseEventHandler;
|
||||
onTouchCancel?: TouchEventHandler;
|
||||
onTouchEnd?: TouchEventHandler;
|
||||
onTouchMove?: TouchEventHandler;
|
||||
onTouchStart?: TouchEventHandler;
|
||||
onScroll?: UIEventHandler;
|
||||
onWheel?: WheelEventHandler;
|
||||
|
||||
dangerouslySetInnerHTML?: {
|
||||
__html: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface CSSProperties {
|
||||
columnCount?: number;
|
||||
flex?: number | string;
|
||||
flexGrow?: number;
|
||||
flexShrink?: number;
|
||||
fontWeight?: number;
|
||||
lineClamp?: number;
|
||||
lineHeight?: number;
|
||||
opacity?: number;
|
||||
order?: number;
|
||||
orphans?: number;
|
||||
widows?: number;
|
||||
zIndex?: number;
|
||||
zoom?: number;
|
||||
|
||||
// SVG-related properties
|
||||
fillOpacity?: number;
|
||||
strokeOpacity?: number;
|
||||
}
|
||||
|
||||
interface HTMLAttributes extends DOMAttributes {
|
||||
accept?: string;
|
||||
acceptCharset?: string;
|
||||
accessKey?: string;
|
||||
action?: string;
|
||||
allowFullScreen?: boolean;
|
||||
allowTransparency?: boolean;
|
||||
alt?: string;
|
||||
async?: boolean;
|
||||
autoComplete?: boolean;
|
||||
autoFocus?: boolean;
|
||||
autoPlay?: boolean;
|
||||
cellPadding?: number | string;
|
||||
cellSpacing?: number | string;
|
||||
charSet?: string;
|
||||
checked?: boolean;
|
||||
classID?: string;
|
||||
className?: string;
|
||||
cols?: number;
|
||||
colSpan?: number;
|
||||
content?: string;
|
||||
contentEditable?: boolean;
|
||||
contextMenu?: string;
|
||||
controls?: any;
|
||||
coords?: string;
|
||||
crossOrigin?: string;
|
||||
data?: string;
|
||||
dateTime?: string;
|
||||
defer?: boolean;
|
||||
dir?: string;
|
||||
disabled?: boolean;
|
||||
download?: any;
|
||||
draggable?: boolean;
|
||||
encType?: string;
|
||||
form?: string;
|
||||
formNoValidate?: boolean;
|
||||
frameBorder?: number | string;
|
||||
height?: number | string;
|
||||
hidden?: boolean;
|
||||
href?: string;
|
||||
hrefLang?: string;
|
||||
htmlFor?: string;
|
||||
httpEquiv?: string;
|
||||
icon?: string;
|
||||
id?: string;
|
||||
label?: string;
|
||||
lang?: string;
|
||||
list?: string;
|
||||
loop?: boolean;
|
||||
manifest?: string;
|
||||
max?: number | string;
|
||||
maxLength?: number;
|
||||
media?: string;
|
||||
mediaGroup?: string;
|
||||
method?: string;
|
||||
min?: number | string;
|
||||
multiple?: boolean;
|
||||
muted?: boolean;
|
||||
name?: string;
|
||||
noValidate?: boolean;
|
||||
open?: boolean;
|
||||
pattern?: string;
|
||||
placeholder?: string;
|
||||
poster?: string;
|
||||
preload?: string;
|
||||
radioGroup?: string;
|
||||
readOnly?: boolean;
|
||||
rel?: string;
|
||||
required?: boolean;
|
||||
role?: string;
|
||||
rows?: number;
|
||||
rowSpan?: number;
|
||||
sandbox?: string;
|
||||
scope?: string;
|
||||
scrollLeft?: number;
|
||||
scrolling?: string;
|
||||
scrollTop?: number;
|
||||
seamless?: boolean;
|
||||
selected?: boolean;
|
||||
shape?: string;
|
||||
size?: number;
|
||||
sizes?: string;
|
||||
span?: number;
|
||||
spellCheck?: boolean;
|
||||
src?: string;
|
||||
srcDoc?: string;
|
||||
srcSet?: string;
|
||||
start?: number;
|
||||
step?: number | string;
|
||||
style?: CSSProperties;
|
||||
tabIndex?: number;
|
||||
target?: string;
|
||||
title?: string;
|
||||
type?: string;
|
||||
useMap?: string;
|
||||
value?: string;
|
||||
width?: number | string;
|
||||
wmode?: string;
|
||||
|
||||
// Non-standard Attributes
|
||||
autoCapitalize?: boolean;
|
||||
autoCorrect?: boolean;
|
||||
property?: string;
|
||||
itemProp?: string;
|
||||
itemScope?: boolean;
|
||||
itemType?: string;
|
||||
}
|
||||
|
||||
interface SVGAttributes extends DOMAttributes {
|
||||
cx?: SVGLength | SVGAnimatedLength;
|
||||
cy?: any;
|
||||
d?: string;
|
||||
dx?: SVGLength | SVGAnimatedLength;
|
||||
dy?: SVGLength | SVGAnimatedLength;
|
||||
fill?: any; // SVGPaint | string
|
||||
fillOpacity?: number | string;
|
||||
fontFamily?: string;
|
||||
fontSize?: number | string;
|
||||
fx?: SVGLength | SVGAnimatedLength;
|
||||
fy?: SVGLength | SVGAnimatedLength;
|
||||
gradientTransform?: SVGTransformList | SVGAnimatedTransformList;
|
||||
gradientUnits?: string;
|
||||
markerEnd?: string;
|
||||
markerMid?: string;
|
||||
markerStart?: string;
|
||||
offset?: number | string;
|
||||
opacity?: number | string;
|
||||
patternContentUnits?: string;
|
||||
patternUnits?: string;
|
||||
points?: string;
|
||||
preserveAspectRatio?: string;
|
||||
r?: SVGLength | SVGAnimatedLength;
|
||||
rx?: SVGLength | SVGAnimatedLength;
|
||||
ry?: SVGLength | SVGAnimatedLength;
|
||||
spreadMethod?: string;
|
||||
stopColor?: any; // SVGColor | string
|
||||
stopOpacity?: number | string;
|
||||
stroke?: any; // SVGPaint
|
||||
strokeDasharray?: string;
|
||||
strokeLinecap?: string;
|
||||
strokeOpacity?: number | string;
|
||||
strokeWidth?: SVGLength | SVGAnimatedLength;
|
||||
textAnchor?: string;
|
||||
transform?: SVGTransformList | SVGAnimatedTransformList;
|
||||
version?: string;
|
||||
viewBox?: string;
|
||||
x1?: SVGLength | SVGAnimatedLength;
|
||||
x2?: SVGLength | SVGAnimatedLength;
|
||||
x?: SVGLength | SVGAnimatedLength;
|
||||
y1?: SVGLength | SVGAnimatedLength;
|
||||
y2?: SVGLength | SVGAnimatedLength
|
||||
y?: SVGLength | SVGAnimatedLength;
|
||||
}
|
||||
|
||||
//
|
||||
// React.DOM
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ReactDOM {
|
||||
// HTML
|
||||
a: HTMLFactory;
|
||||
abbr: HTMLFactory;
|
||||
address: HTMLFactory;
|
||||
area: HTMLFactory;
|
||||
article: HTMLFactory;
|
||||
aside: HTMLFactory;
|
||||
audio: HTMLFactory;
|
||||
b: HTMLFactory;
|
||||
base: HTMLFactory;
|
||||
bdi: HTMLFactory;
|
||||
bdo: HTMLFactory;
|
||||
big: HTMLFactory;
|
||||
blockquote: HTMLFactory;
|
||||
body: HTMLFactory;
|
||||
br: HTMLFactory;
|
||||
button: HTMLFactory;
|
||||
canvas: HTMLFactory;
|
||||
caption: HTMLFactory;
|
||||
cite: HTMLFactory;
|
||||
code: HTMLFactory;
|
||||
col: HTMLFactory;
|
||||
colgroup: HTMLFactory;
|
||||
data: HTMLFactory;
|
||||
datalist: HTMLFactory;
|
||||
dd: HTMLFactory;
|
||||
del: HTMLFactory;
|
||||
details: HTMLFactory;
|
||||
dfn: HTMLFactory;
|
||||
dialog: HTMLFactory;
|
||||
div: HTMLFactory;
|
||||
dl: HTMLFactory;
|
||||
dt: HTMLFactory;
|
||||
em: HTMLFactory;
|
||||
embed: HTMLFactory;
|
||||
fieldset: HTMLFactory;
|
||||
figcaption: HTMLFactory;
|
||||
figure: HTMLFactory;
|
||||
footer: HTMLFactory;
|
||||
form: HTMLFactory;
|
||||
h1: HTMLFactory;
|
||||
h2: HTMLFactory;
|
||||
h3: HTMLFactory;
|
||||
h4: HTMLFactory;
|
||||
h5: HTMLFactory;
|
||||
h6: HTMLFactory;
|
||||
head: HTMLFactory;
|
||||
header: HTMLFactory;
|
||||
hr: HTMLFactory;
|
||||
html: HTMLFactory;
|
||||
i: HTMLFactory;
|
||||
iframe: HTMLFactory;
|
||||
img: HTMLFactory;
|
||||
input: HTMLFactory;
|
||||
ins: HTMLFactory;
|
||||
kbd: HTMLFactory;
|
||||
keygen: HTMLFactory;
|
||||
label: HTMLFactory;
|
||||
legend: HTMLFactory;
|
||||
li: HTMLFactory;
|
||||
link: HTMLFactory;
|
||||
main: HTMLFactory;
|
||||
map: HTMLFactory;
|
||||
mark: HTMLFactory;
|
||||
menu: HTMLFactory;
|
||||
menuitem: HTMLFactory;
|
||||
meta: HTMLFactory;
|
||||
meter: HTMLFactory;
|
||||
nav: HTMLFactory;
|
||||
noscript: HTMLFactory;
|
||||
object: HTMLFactory;
|
||||
ol: HTMLFactory;
|
||||
optgroup: HTMLFactory;
|
||||
option: HTMLFactory;
|
||||
output: HTMLFactory;
|
||||
p: HTMLFactory;
|
||||
param: HTMLFactory;
|
||||
picture: HTMLFactory;
|
||||
pre: HTMLFactory;
|
||||
progress: HTMLFactory;
|
||||
q: HTMLFactory;
|
||||
rp: HTMLFactory;
|
||||
rt: HTMLFactory;
|
||||
ruby: HTMLFactory;
|
||||
s: HTMLFactory;
|
||||
samp: HTMLFactory;
|
||||
script: HTMLFactory;
|
||||
section: HTMLFactory;
|
||||
select: HTMLFactory;
|
||||
small: HTMLFactory;
|
||||
source: HTMLFactory;
|
||||
span: HTMLFactory;
|
||||
strong: HTMLFactory;
|
||||
style: HTMLFactory;
|
||||
sub: HTMLFactory;
|
||||
summary: HTMLFactory;
|
||||
sup: HTMLFactory;
|
||||
table: HTMLFactory;
|
||||
tbody: HTMLFactory;
|
||||
td: HTMLFactory;
|
||||
textarea: HTMLFactory;
|
||||
tfoot: HTMLFactory;
|
||||
th: HTMLFactory;
|
||||
thead: HTMLFactory;
|
||||
time: HTMLFactory;
|
||||
title: HTMLFactory;
|
||||
tr: HTMLFactory;
|
||||
track: HTMLFactory;
|
||||
u: HTMLFactory;
|
||||
ul: HTMLFactory;
|
||||
"var": HTMLFactory;
|
||||
video: HTMLFactory;
|
||||
wbr: HTMLFactory;
|
||||
|
||||
// SVG
|
||||
circle: SVGFactory;
|
||||
defs: SVGFactory;
|
||||
ellipse: SVGFactory;
|
||||
g: SVGFactory;
|
||||
line: SVGFactory;
|
||||
linearGradient: SVGFactory;
|
||||
mask: SVGFactory;
|
||||
path: SVGFactory;
|
||||
pattern: SVGFactory;
|
||||
polygon: SVGFactory;
|
||||
polyline: SVGFactory;
|
||||
radialGradient: SVGFactory;
|
||||
rect: SVGFactory;
|
||||
stop: SVGFactory;
|
||||
svg: SVGFactory;
|
||||
text: SVGFactory;
|
||||
tspan: SVGFactory;
|
||||
}
|
||||
|
||||
//
|
||||
// React.PropTypes
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface Validator<T> {
|
||||
(object: T, key: string, componentName: string): Error;
|
||||
}
|
||||
|
||||
interface Requireable<T> extends Validator<T> {
|
||||
isRequired: Validator<T>;
|
||||
}
|
||||
|
||||
interface ValidationMap<T> {
|
||||
[key: string]: Validator<T>;
|
||||
}
|
||||
|
||||
interface ReactPropTypes {
|
||||
any: Requireable<any>;
|
||||
array: Requireable<any>;
|
||||
bool: Requireable<any>;
|
||||
func: Requireable<any>;
|
||||
number: Requireable<any>;
|
||||
object: Requireable<any>;
|
||||
string: Requireable<any>;
|
||||
node: Requireable<any>;
|
||||
element: Requireable<any>;
|
||||
instanceOf(expectedClass: {}): Requireable<any>;
|
||||
oneOf(types: any[]): Requireable<any>;
|
||||
oneOfType(types: Validator<any>[]): Requireable<any>;
|
||||
arrayOf(type: Validator<any>): Requireable<any>;
|
||||
objectOf(type: Validator<any>): Requireable<any>;
|
||||
shape(type: ValidationMap<any>): Requireable<any>;
|
||||
}
|
||||
|
||||
//
|
||||
// React.Children
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ReactChildren {
|
||||
map<T>(children: ReactNode, fn: (child: ReactChild) => T): { [key:string]: T };
|
||||
forEach(children: ReactNode, fn: (child: ReactChild) => any): void;
|
||||
count(children: ReactNode): number;
|
||||
only(children: ReactNode): ReactChild;
|
||||
}
|
||||
|
||||
//
|
||||
// Browser Interfaces
|
||||
// https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface AbstractView {
|
||||
styleMedia: StyleMedia;
|
||||
document: Document;
|
||||
}
|
||||
|
||||
interface Touch {
|
||||
identifier: number;
|
||||
target: EventTarget;
|
||||
screenX: number;
|
||||
screenY: number;
|
||||
clientX: number;
|
||||
clientY: number;
|
||||
pageX: number;
|
||||
pageY: number;
|
||||
}
|
||||
|
||||
interface TouchList {
|
||||
[index: number]: Touch;
|
||||
length: number;
|
||||
item(index: number): Touch;
|
||||
identifiedTouch(identifier: number): Touch;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,68 +0,0 @@
|
||||
/// <reference path="react-0.13.0.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.Component<any, any, any>;
|
||||
var node = React.findDOMNode(that.refs["input"]);
|
||||
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.Component<GreetingProps, GreetingState, any> {
|
||||
}
|
||||
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
|
||||
});
|
||||
Reference in New Issue
Block a user