(callback: (a: A) => any, a: A): void;
- export function batchedUpdates(callback: () => any): void;
-
- // deprecated: use petehunt/react-classset or JedWatson/classnames
- export function classSet(cx: { [key: string]: boolean }): string;
- export function classSet(...classList: string[]): string;
-
- export function cloneWithProps(
- element: DOMElement
, props: P): DOMElement
;
- export function cloneWithProps
(
- element: ClassicElement
, props: P): ClassicElement
;
- export function cloneWithProps
(
- element: ReactElement
, props: P): ReactElement
;
-
- export function createFragment(
- object: { [key: string]: ReactNode }): ReactFragment;
-
- export function update(value: any[], spec: UpdateArraySpec): any[];
- export function update(value: {}, spec: UpdateSpec): any;
-
- // Development tools
- export import Perf = ReactPerf;
- export import TestUtils = ReactTestUtils;
- }
-
- //
- // React.addons (Transitions)
- // ----------------------------------------------------------------------
-
- interface TransitionGroupProps {
- component?: ReactType;
- childFactory?: (child: ReactElement) => ReactElement;
- }
-
- interface CSSTransitionGroupProps extends TransitionGroupProps {
- transitionName: string;
- transitionAppear?: boolean;
- transitionEnter?: boolean;
- transitionLeave?: boolean;
- }
-
- type CSSTransitionGroup = ComponentClass;
- type TransitionGroup = ComponentClass;
-
- //
- // React.addons (Mixins)
- // ----------------------------------------------------------------------
-
- interface ReactLink {
- value: T;
- requestChange(newValue: T): void;
- }
-
- interface LinkedStateMixin extends Mixin {
- linkState(key: string): ReactLink;
- }
-
- interface PureRenderMixin extends Mixin {
- }
-
- //
- // Reat.addons.update
- // ----------------------------------------------------------------------
-
- interface UpdateSpec {
- $set?: any;
- $merge?: {};
- $apply?(value: any): any;
- // [key: string]: UpdateSpec;
- }
-
- interface UpdateArraySpec extends UpdateSpec {
- $push?: any[];
- $unshift?: any[];
- $splice?: any[][];
- }
-
- //
- // React.addons.Perf
- // ----------------------------------------------------------------------
-
- interface ComponentPerfContext {
- current: string;
- owner: string;
- }
-
- interface NumericPerfContext {
- [key: string]: number;
- }
-
- interface Measurements {
- exclusive: NumericPerfContext;
- inclusive: NumericPerfContext;
- render: NumericPerfContext;
- counts: NumericPerfContext;
- writes: NumericPerfContext;
- displayNames: {
- [key: string]: ComponentPerfContext;
- };
- totalTime: number;
- }
-
- module ReactPerf {
- export function start(): void;
- export function stop(): void;
- export function printInclusive(measurements: Measurements[]): void;
- export function printExclusive(measurements: Measurements[]): void;
- export function printWasted(measurements: Measurements[]): void;
- export function printDOM(measurements: Measurements[]): void;
- export function getLastMeasurements(): Measurements[];
- }
-
- //
- // React.addons.TestUtils
- // ----------------------------------------------------------------------
-
- interface MockedComponentClass {
- new(): any;
- }
-
- module ReactTestUtils {
- export import Simulate = ReactSimulate;
-
- export function renderIntoDocument(
- element: ReactElement
): Component;
- export function renderIntoDocument>(
- element: ReactElement): C;
-
- export function mockComponent(
- mocked: MockedComponentClass, mockTagName?: string): typeof ReactTestUtils;
-
- export function isElementOfType(
- element: ReactElement, type: ReactType): boolean;
- export function isTextComponent(instance: Component): boolean;
- export function isDOMComponent(instance: Component): boolean;
- export function isCompositeComponent(instance: Component): boolean;
- export function isCompositeComponentWithType(
- instance: Component,
- type: ComponentClass): boolean;
-
- export function findAllInRenderedTree(
- tree: Component,
- fn: (i: Component) => boolean): Component;
-
- export function scryRenderedDOMComponentsWithClass(
- tree: Component,
- className: string): DOMComponent[];
- export function findRenderedDOMComponentWithClass(
- tree: Component,
- className: string): DOMComponent;
-
- export function scryRenderedDOMComponentsWithTag(
- tree: Component,
- tagName: string): DOMComponent[];
- export function findRenderedDOMComponentWithTag(
- tree: Component,
- tagName: string): DOMComponent;
-
- export function scryRenderedComponentsWithType(
- tree: Component,
- type: ComponentClass): Component[];
- export function scryRenderedComponentsWithType>(
- tree: Component,
- type: ComponentClass): C[];
-
- export function findRenderedComponentWithType(
- tree: Component,
- type: ComponentClass): Component;
- export function findRenderedComponentWithType>(
- tree: Component,
- type: ComponentClass): C;
-
- export function createRenderer(): ShallowRenderer;
- }
-
- interface SyntheticEventData {
- altKey?: boolean;
- button?: number;
- buttons?: number;
- clientX?: number;
- clientY?: number;
- changedTouches?: TouchList;
- charCode?: boolean;
- clipboardData?: DataTransfer;
- ctrlKey?: boolean;
- deltaMode?: number;
- deltaX?: number;
- deltaY?: number;
- deltaZ?: number;
- detail?: number;
- getModifierState?(key: string): boolean;
- key?: string;
- keyCode?: number;
- locale?: string;
- location?: number;
- metaKey?: boolean;
- pageX?: number;
- pageY?: number;
- relatedTarget?: EventTarget;
- repeat?: boolean;
- screenX?: number;
- screenY?: number;
- shiftKey?: boolean;
- targetTouches?: TouchList;
- touches?: TouchList;
- view?: AbstractView;
- which?: number;
- }
-
- interface EventSimulator {
- (element: Element, eventData?: SyntheticEventData): void;
- (component: Component, eventData?: SyntheticEventData): void;
- }
-
- module ReactSimulate {
- export var blur: EventSimulator;
- export var change: EventSimulator;
- export var click: EventSimulator;
- export var cut: EventSimulator;
- export var doubleClick: EventSimulator;
- export var drag: EventSimulator;
- export var dragEnd: EventSimulator;
- export var dragEnter: EventSimulator;
- export var dragExit: EventSimulator;
- export var dragLeave: EventSimulator;
- export var dragOver: EventSimulator;
- export var dragStart: EventSimulator;
- export var drop: EventSimulator;
- export var focus: EventSimulator;
- export var input: EventSimulator;
- export var keyDown: EventSimulator;
- export var keyPress: EventSimulator;
- export var keyUp: EventSimulator;
- export var mouseDown: EventSimulator;
- export var mouseEnter: EventSimulator;
- export var mouseLeave: EventSimulator;
- export var mouseMove: EventSimulator;
- export var mouseOut: EventSimulator;
- export var mouseOver: EventSimulator;
- export var mouseUp: EventSimulator;
- export var paste: EventSimulator;
- export var scroll: EventSimulator;
- export var submit: EventSimulator;
- export var touchCancel: EventSimulator;
- export var touchEnd: EventSimulator;
- export var touchMove: EventSimulator;
- export var touchStart: EventSimulator;
- export var wheel: EventSimulator;
- }
-
- class ShallowRenderer {
- getRenderOutput>(): E;
- getRenderOutput(): ReactElement;
- render(element: ReactElement, context?: any): void;
- unmount(): void;
- }
-
- //
- // Browser Interfaces
- // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts
- // ----------------------------------------------------------------------
-
- interface AbstractView {
- styleMedia: StyleMedia;
- document: Document;
- }
-
- interface Touch {
- identifier: number;
- target: EventTarget;
- screenX: number;
- screenY: number;
- clientX: number;
- clientY: number;
- pageX: number;
- pageY: number;
- }
-
- interface TouchList {
- [index: number]: Touch;
- length: number;
- item(index: number): Touch;
- identifiedTouch(identifier: number): Touch;
- }
-}
diff --git a/react/react-global-tests.ts b/react/react-global-tests.ts
new file mode 100644
index 000000000..a3f4a1484
--- /dev/null
+++ b/react/react-global-tests.ts
@@ -0,0 +1,367 @@
+///
+
+interface Props extends React.Props {
+ hello: string;
+ world?: string;
+ foo: number;
+ bar: boolean;
+}
+
+interface State {
+ inputValue?: string;
+ seconds?: number;
+}
+
+interface Context {
+ someValue?: string;
+}
+
+interface ChildContext {
+ someOtherValue: string;
+}
+
+interface MyComponent extends React.Component {
+ reset(): void;
+}
+
+var props: Props = {
+ key: 42,
+ ref: "myComponent42",
+ hello: "world",
+ foo: 42,
+ bar: true
+};
+
+var container: Element;
+
+//
+// Top-Level API
+// --------------------------------------------------------------------------
+
+var ClassicComponent: React.ClassicComponentClass =
+ React.createClass({
+ getDefaultProps() {
+ return {
+ hello: undefined,
+ world: "peace",
+ foo: undefined,
+ bar: undefined,
+ };
+ },
+ getInitialState() {
+ return {
+ inputValue: this.context.someValue,
+ seconds: this.props.foo
+ };
+ },
+ reset() {
+ this.replaceState(this.getInitialState());
+ },
+ render() {
+ return React.DOM.div(null,
+ React.DOM.input({
+ ref: input => this._input = input,
+ value: this.state.inputValue
+ }));
+ }
+ });
+
+class ModernComponent extends React.Component
+ implements React.ChildContextProvider {
+
+ static propTypes: React.ValidationMap = {
+ foo: React.PropTypes.number
+ }
+
+ static contextTypes: React.ValidationMap = {
+ someValue: React.PropTypes.string
+ }
+
+ static childContextTypes: React.ValidationMap = {
+ someOtherValue: React.PropTypes.string
+ }
+
+ context: Context;
+
+ getChildContext() {
+ return {
+ someOtherValue: 'foo'
+ }
+ }
+
+ state = {
+ inputValue: this.context.someValue,
+ seconds: this.props.foo
+ }
+
+ reset() {
+ this.setState({
+ inputValue: this.context.someValue,
+ seconds: this.props.foo
+ });
+ }
+
+ private _input: React.HTMLComponent;
+
+ render() {
+ return React.DOM.div(null,
+ React.DOM.input({
+ ref: input => this._input = input,
+ value: this.state.inputValue
+ }));
+ }
+}
+
+// React.createFactory
+var factory: React.Factory =
+ React.createFactory(ModernComponent);
+var factoryElement: React.ReactElement =
+ factory(props);
+
+var classicFactory: React.ClassicFactory =
+ React.createFactory(ClassicComponent);
+var classicFactoryElement: React.ClassicElement =
+ classicFactory(props);
+
+var domFactory: React.DOMFactory =
+ React.createFactory("foo");
+var domFactoryElement: React.DOMElement =
+ domFactory();
+
+// React.createElement
+var element: React.ReactElement =
+ React.createElement(ModernComponent, props);
+var classicElement: React.ClassicElement =
+ React.createElement(ClassicComponent, props);
+var domElement: React.HTMLElement =
+ React.createElement("div");
+
+// React.cloneElement
+var clonedElement: React.ReactElement =
+ React.cloneElement(element, props);
+var clonedClassicElement: React.ClassicElement =
+ React.cloneElement(classicElement, props);
+var clonedDOMElement: React.HTMLElement =
+ React.cloneElement(domElement);
+
+// React.render
+var component: React.Component =
+ React.render(element, container);
+var classicComponent: React.ClassicComponent =
+ React.render(classicElement, container);
+var domComponent: React.DOMComponent =
+ React.render(domElement, container);
+
+// Other Top-Level API
+var unmounted: boolean = React.unmountComponentAtNode(container);
+var str: string = React.renderToString(element);
+var markup: string = React.renderToStaticMarkup(element);
+var notValid: boolean = React.isValidElement(props); // false
+var isValid = React.isValidElement(element); // true
+React.initializeTouchEvents(true);
+var domNode: Element = React.findDOMNode(component);
+domNode = React.findDOMNode(domNode);
+
+//
+// React Elements
+// --------------------------------------------------------------------------
+
+var type = element.type;
+var elementProps: Props = element.props;
+var key = element.key;
+
+//
+// React Components
+// --------------------------------------------------------------------------
+
+var displayName: string = ClassicComponent.displayName;
+var defaultProps: Props = ClassicComponent.getDefaultProps();
+var propTypes: React.ValidationMap = ClassicComponent.propTypes;
+
+//
+// Component API
+// --------------------------------------------------------------------------
+
+// modern
+var componentState: State = component.state;
+component.setState({ inputValue: "!!!" });
+component.forceUpdate();
+
+// classic
+var htmlElement: Element = classicComponent.getDOMNode();
+var divElement: HTMLDivElement = classicComponent.getDOMNode();
+var isMounted: boolean = classicComponent.isMounted();
+classicComponent.setProps(elementProps);
+classicComponent.replaceProps(props);
+classicComponent.replaceState({ inputValue: "???", seconds: 60 });
+
+var myComponent = component;
+myComponent.reset();
+
+//
+// Attributes
+// --------------------------------------------------------------------------
+
+var children: any[] = ["Hello world", [null], React.DOM.span(null)];
+var divStyle: React.CSSProperties = { // CSSProperties
+ flex: "1 1 main-size",
+ backgroundImage: "url('hello.png')"
+};
+var htmlAttr: React.HTMLAttributes = {
+ key: 36,
+ ref: "htmlComponent",
+ children: children,
+ className: "test-attr",
+ style: divStyle,
+ onClick: (event: React.MouseEvent) => {
+ event.preventDefault();
+ event.stopPropagation();
+ },
+ dangerouslySetInnerHTML: {
+ __html: "STRONG"
+ }
+};
+React.DOM.div(htmlAttr);
+React.DOM.span(htmlAttr);
+React.DOM.input(htmlAttr);
+
+React.DOM.svg({ viewBox: "0 0 48 48" },
+ React.DOM.rect({
+ x: 22,
+ y: 10,
+ width: 4,
+ height: 28
+ }),
+ React.DOM.rect({
+ x: 10,
+ y: 22,
+ width: 28,
+ height: 4
+ }));
+
+
+//
+// React.PropTypes
+// --------------------------------------------------------------------------
+
+var PropTypesSpecification: React.ComponentSpec = {
+ propTypes: {
+ optionalArray: React.PropTypes.array,
+ optionalBool: React.PropTypes.bool,
+ optionalFunc: React.PropTypes.func,
+ optionalNumber: React.PropTypes.number,
+ optionalObject: React.PropTypes.object,
+ optionalString: React.PropTypes.string,
+ optionalNode: React.PropTypes.node,
+ optionalElement: React.PropTypes.element,
+ optionalMessage: React.PropTypes.instanceOf(Date),
+ optionalEnum: React.PropTypes.oneOf(["News", "Photos"]),
+ optionalUnion: React.PropTypes.oneOfType([
+ React.PropTypes.string,
+ React.PropTypes.number,
+ React.PropTypes.instanceOf(Date)
+ ]),
+ optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
+ optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
+ optionalObjectWithShape: React.PropTypes.shape({
+ color: React.PropTypes.string,
+ fontSize: React.PropTypes.number
+ }),
+ requiredFunc: React.PropTypes.func.isRequired,
+ requiredAny: React.PropTypes.any.isRequired,
+ customProp: function(props: any, propName: string, componentName: string) {
+ if (!/matchme/.test(props[propName])) {
+ return new Error("Validation failed!");
+ }
+ return null;
+ }
+ },
+ render: (): React.ReactElement => {
+ return null;
+ }
+};
+
+//
+// ContextTypes
+// --------------------------------------------------------------------------
+
+var ContextTypesSpecification: React.ComponentSpec = {
+ contextTypes: {
+ optionalArray: React.PropTypes.array,
+ optionalBool: React.PropTypes.bool,
+ optionalFunc: React.PropTypes.func,
+ optionalNumber: React.PropTypes.number,
+ optionalObject: React.PropTypes.object,
+ optionalString: React.PropTypes.string,
+ optionalNode: React.PropTypes.node,
+ optionalElement: React.PropTypes.element,
+ optionalMessage: React.PropTypes.instanceOf(Date),
+ optionalEnum: React.PropTypes.oneOf(["News", "Photos"]),
+ optionalUnion: React.PropTypes.oneOfType([
+ React.PropTypes.string,
+ React.PropTypes.number,
+ React.PropTypes.instanceOf(Date)
+ ]),
+ optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
+ optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
+ optionalObjectWithShape: React.PropTypes.shape({
+ color: React.PropTypes.string,
+ fontSize: React.PropTypes.number
+ }),
+ requiredFunc: React.PropTypes.func.isRequired,
+ requiredAny: React.PropTypes.any.isRequired,
+ customProp: function(props: any, propName: string, componentName: string) {
+ if (!/matchme/.test(props[propName])) {
+ return new Error("Validation failed!");
+ }
+ return null;
+ }
+ },
+ render: (): React.ReactElement => {
+ return null;
+ }
+};
+
+//
+// React.Children
+// --------------------------------------------------------------------------
+
+var childMap: { [key: string]: number } =
+ React.Children.map(children, (child) => { return 42; });
+React.Children.forEach(children, (child) => {});
+var nChildren: number = React.Children.count(children);
+var onlyChild = React.Children.only([null, [[["Hallo"], true]], false]);
+
+//
+// Example from http://facebook.github.io/react/
+// --------------------------------------------------------------------------
+
+interface TimerState {
+ secondsElapsed: number;
+}
+class Timer extends React.Component<{}, TimerState> {
+ state = {
+ secondsElapsed: 0
+ }
+ private _interval: number;
+ tick() {
+ this.setState((prevState, props) => ({
+ secondsElapsed: prevState.secondsElapsed + 1
+ }));
+ }
+ componentDidMount() {
+ this._interval = setInterval(() => this.tick(), 1000);
+ }
+ componentWillUnmount() {
+ clearInterval(this._interval);
+ }
+ render() {
+ return React.DOM.div(
+ null,
+ "Seconds Elapsed: ",
+ this.state.secondsElapsed
+ );
+ }
+}
+React.render(React.createElement(Timer), container);
+
diff --git a/react/react-global.d.ts b/react/react-global.d.ts
index df8aaf421..99fba1e3d 100644
--- a/react/react-global.d.ts
+++ b/react/react-global.d.ts
@@ -1,941 +1,280 @@
-// Type definitions for React v0.13.1 (internal module)
+// Type definitions for React v0.13.3 (namespace)
// Project: http://facebook.github.io/react/
// Definitions by: Asana , AssureSign , Microsoft
// Definitions: https://github.com/borisyankov/DefinitelyTyped
-declare module React {
+///
+
+import React = __React;
+
+declare namespace __React {
//
- // React Elements
+ // React.addons
// ----------------------------------------------------------------------
- type ReactType = ComponentClass | string;
+ export module addons {
+ export var CSSTransitionGroup: CSSTransitionGroup;
+ export var TransitionGroup: TransitionGroup;
- interface ReactElement {
- type: string | ComponentClass
;
- props: P;
- key: string | number;
- ref: string | ((component: Component) => any);
+ export var LinkedStateMixin: LinkedStateMixin;
+ export var PureRenderMixin: PureRenderMixin;
+
+ export function batchedUpdates(
+ callback: (a: A, b: B) => any, a: A, b: B): void;
+ export function batchedUpdates(callback: (a: A) => any, a: A): void;
+ export function batchedUpdates(callback: () => any): void;
+
+ // deprecated: use petehunt/react-classset or JedWatson/classnames
+ export function classSet(cx: { [key: string]: boolean }): string;
+ export function classSet(...classList: string[]): string;
+
+ export function cloneWithProps(
+ element: DOMElement
, props: P): DOMElement
;
+ export function cloneWithProps
(
+ element: ClassicElement
, props: P): ClassicElement
;
+ export function cloneWithProps
(
+ element: ReactElement
, props: P): ReactElement
;
+
+ export function createFragment(
+ object: { [key: string]: ReactNode }): ReactFragment;
+
+ export function update(value: any[], spec: UpdateArraySpec): any[];
+ export function update(value: {}, spec: UpdateSpec): any;
+
+ // Development tools
+ export import Perf = ReactPerf;
+ export import TestUtils = ReactTestUtils;
}
- interface ClassicElement
extends ReactElement
{
- type: string | ClassicComponentClass
;
- ref: string | ((component: ClassicComponent) => any);
- }
-
- interface DOMElement extends ClassicElement
{
- type: string;
- ref: string | ((component: DOMComponent
) => any);
- }
-
- type HTMLElement = DOMElement;
- type SVGElement = DOMElement;
-
//
- // Factories
+ // React.addons (Transitions)
// ----------------------------------------------------------------------
- interface Factory {
- (props?: P, ...children: ReactNode[]): ReactElement
;
+ interface TransitionGroupProps {
+ component?: ReactType;
+ childFactory?: (child: ReactElement) => ReactElement;
}
- interface ClassicFactory extends Factory
{
- (props?: P, ...children: ReactNode[]): ClassicElement
;
+ interface CSSTransitionGroupProps extends TransitionGroupProps {
+ transitionName: string;
+ transitionAppear?: boolean;
+ transitionEnter?: boolean;
+ transitionLeave?: boolean;
}
- interface DOMFactory
extends ClassicFactory
{
- (props?: P, ...children: ReactNode[]): DOMElement
;
+ type CSSTransitionGroup = ComponentClass;
+ type TransitionGroup = ComponentClass;
+
+ //
+ // React.addons (Mixins)
+ // ----------------------------------------------------------------------
+
+ interface ReactLink {
+ value: T;
+ requestChange(newValue: T): void;
}
- type HTMLFactory = DOMFactory;
- type SVGFactory = DOMFactory;
- type SVGElementFactory = DOMFactory;
+ interface LinkedStateMixin extends Mixin