From ec9b82e6462ecde1fa43dc849eebca364728d7f3 Mon Sep 17 00:00:00 2001 From: Vincent Siao Date: Fri, 6 Mar 2015 00:08:08 -0800 Subject: [PATCH] Update React v0.13.0 definitions for RC2 + `React.cloneElement` + `React.addons.createFragment` + `setState(f: (prevState: S, props: P) => S, callback?: () => any)` + `ref: (component: T) => any` --- react/future/react-0.13.0-tests.ts | 34 ++++++------- react/future/react-0.13.0.d.ts | 48 +++++++++++++----- react/future/react-addons-0.13.0-tests.ts | 44 +++++++++-------- react/future/react-addons-0.13.0.d.ts | 52 +++++++++++++++----- react/future/react-addons-global-0.13.0.d.ts | 6 ++- react/future/react-global-0.13.0.d.ts | 48 +++++++++++++----- 6 files changed, 156 insertions(+), 76 deletions(-) diff --git a/react/future/react-0.13.0-tests.ts b/react/future/react-0.13.0-tests.ts index b323561196..d54fb45d68 100644 --- a/react/future/react-0.13.0-tests.ts +++ b/react/future/react-0.13.0-tests.ts @@ -3,7 +3,7 @@ // TODO: import "react" once 0.13.0 is released import React = require("react/addons"); -interface Props extends React.Props { +interface Props extends React.Props { hello: string; world?: string; foo: number; @@ -36,7 +36,6 @@ var props: Props = { }; var container: Element; -var INPUT_REF: string = "input"; // // Top-Level API @@ -64,7 +63,7 @@ var ClassicComponent: React.ClassicComponentClass = render: () => { return React.DOM.div(null, React.DOM.input({ - ref: INPUT_REF, + ref: input => this._input = input, value: this.state.inputValue })); } @@ -72,14 +71,6 @@ var ClassicComponent: React.ClassicComponentClass = class ModernComponent extends React.Component implements React.ChildContextProvider { - - constructor(props: Props, context: Context) { - super(props, context); - this.state = { - inputValue: context.someValue, - seconds: props.foo - }; - } static propTypes: React.ValidationMap = { foo: React.PropTypes.number @@ -110,11 +101,13 @@ class ModernComponent extends React.Component seconds: this.props.foo }); } + + private _input: React.HTMLComponent; render() { return React.DOM.div(null, React.DOM.input({ - ref: INPUT_REF, + ref: input => this._input = input, value: this.state.inputValue })); } @@ -144,6 +137,14 @@ var classicElement: React.ReactClassicElement = var domElement: React.ReactHTMLElement = React.createElement("div"); +// React.cloneElement +var clonedElement: React.ReactElement = + React.cloneElement(element, props); +var clonedClassicElement: React.ReactClassicElement = + React.cloneElement(classicElement, props); +var clonedDOMElement: React.ReactHTMLElement = + React.cloneElement(domElement); + // React.render var component: React.Component = React.render(element, container); @@ -169,7 +170,6 @@ domNode = React.findDOMNode(domNode); var type = element.type; var elementProps: Props = element.props; var key = element.key; -var ref: string = element.ref; // // React Components @@ -196,10 +196,6 @@ classicComponent.setProps(elementProps); classicComponent.replaceProps(props); classicComponent.replaceState({ inputValue: "???", seconds: 60 }); -var inputRef: React.HTMLComponent = - component.refs[INPUT_REF]; -var value: string = inputRef.getDOMNode().value; - var myComponent = component; myComponent.reset(); @@ -335,7 +331,9 @@ class Timer extends React.Component<{}, TimerState> { } private _interval: number; tick() { - this.setState({ secondsElapsed: this.state.secondsElapsed + 1 }); + this.setState((prevState, props) => ({ + secondsElapsed: prevState.secondsElapsed + 1 + })); } componentDidMount() { var me = this; diff --git a/react/future/react-0.13.0.d.ts b/react/future/react-0.13.0.d.ts index fd4b27e98d..80ce5ce88b 100644 --- a/react/future/react-0.13.0.d.ts +++ b/react/future/react-0.13.0.d.ts @@ -1,4 +1,4 @@ -// Type definitions for React v0.13.0 (external module) +// Type definitions for React v0.13.0 RC2 (external module) // Project: http://facebook.github.io/react/ // Definitions by: Asana , AssureSign // Definitions: https://github.com/borisyankov/DefinitelyTyped @@ -9,20 +9,26 @@ declare module "react" { // ---------------------------------------------------------------------- interface ReactElementBase { - type: T; + type: string | ComponentClassBase

; props: P; - key: number | string; - ref: string; + key: string | number; + ref: string | ((component: T) => any); } interface ReactElement

- extends ReactElementBase, P> {} + extends ReactElementBase, P> { + type: ComponentClass; + } interface ReactClassicElement

- extends ReactElementBase | string, P> {} + extends ReactElementBase, P> { + type: string | ClassicComponentClass; + } interface ReactDOMElement

// subtype of ReactClassicElement - extends ReactElementBase {} + extends ReactElementBase, P> { + type: string; + } type ReactHTMLElement = ReactDOMElement; type ReactSVGElement = ReactDOMElement; @@ -55,7 +61,7 @@ declare module "react" { type ReactChild = ReactElementBase | ReactText; // Should be Array but type aliases cannot be recursive - type ReactFragment = Array; + type ReactFragment = {} | Array; type ReactNode = ReactChild | ReactFragment | boolean; // @@ -85,6 +91,19 @@ declare module "react" { props?: P, ...children: ReactNode[]): ReactElement

; + function cloneElement

( + element: ReactDOMElement

, + props: P, + ...children: ReactNode[]): ReactDOMElement

; + function cloneElement

( + element: ReactClassicElement

, + props: P, + ...children: ReactNode[]): ReactClassicElement

; + function cloneElement

( + element: ReactElement

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

; + function render

( element: ReactDOMElement

, container: Element, @@ -120,6 +139,7 @@ declare module "react" { // Base component for plain JS classes class Component implements ComponentLifecycle { constructor(props: P, context: any); + setState(f: (prevState: S, props: P) => S, callback?: () => any): void; setState(state: S, callback?: () => any): void; forceUpdate(): void; props: P; @@ -311,13 +331,13 @@ declare module "react" { // Props / DOM Attributes // ---------------------------------------------------------------------- - interface Props { + interface Props { children?: ReactNode; - key?: number | string; - ref?: string; + key?: string | number; + ref?: string | ((component: T) => any); } - interface DOMAttributes extends Props { + interface DOMAttributes extends Props> { onCopy?: ClipboardEventHandler; onCut?: ClipboardEventHandler; onPaste?: ClipboardEventHandler; @@ -379,6 +399,8 @@ declare module "react" { } interface HTMLAttributes extends DOMAttributes { + ref?: string | ((component: HTMLComponent) => void); + accept?: string; acceptCharset?: string; accessKey?: string; @@ -487,6 +509,8 @@ declare module "react" { } interface SVGAttributes extends DOMAttributes { + ref?: string | ((component: SVGComponent) => void); + cx?: SVGLength | SVGAnimatedLength; cy?: any; d?: string; diff --git a/react/future/react-addons-0.13.0-tests.ts b/react/future/react-addons-0.13.0-tests.ts index d76097cd67..13419f12f4 100644 --- a/react/future/react-addons-0.13.0-tests.ts +++ b/react/future/react-addons-0.13.0-tests.ts @@ -1,7 +1,7 @@ /// import React = require("react/addons"); -interface Props extends React.Props { +interface Props extends React.Props { hello: string; world?: string; foo: number; @@ -34,7 +34,6 @@ var props: Props = { }; var container: Element; -var INPUT_REF: string = "input"; // // Top-Level API @@ -62,7 +61,7 @@ var ClassicComponent: React.ClassicComponentClass = render: () => { return React.DOM.div(null, React.DOM.input({ - ref: INPUT_REF, + ref: input => this._input = input, value: this.state.inputValue })); } @@ -70,14 +69,6 @@ var ClassicComponent: React.ClassicComponentClass = class ModernComponent extends React.Component implements React.ChildContextProvider { - - constructor(props: Props, context: Context) { - super(props, context); - this.state = { - inputValue: context.someValue, - seconds: props.foo - }; - } static propTypes: React.ValidationMap = { foo: React.PropTypes.number @@ -108,11 +99,13 @@ class ModernComponent extends React.Component seconds: this.props.foo }); } + + private _input: React.HTMLComponent; render() { return React.DOM.div(null, React.DOM.input({ - ref: INPUT_REF, + ref: input => this._input = input, value: this.state.inputValue })); } @@ -142,6 +135,14 @@ var classicElement: React.ReactClassicElement = var domElement: React.ReactHTMLElement = React.createElement("div"); +// React.cloneElement +var clonedElement: React.ReactElement = + React.cloneElement(element, props); +var clonedClassicElement: React.ReactClassicElement = + React.cloneElement(classicElement, props); +var clonedDOMElement: React.ReactHTMLElement = + React.cloneElement(domElement); + // React.render var component: React.Component = React.render(element, container); @@ -167,7 +168,6 @@ domNode = React.findDOMNode(domNode); var type = element.type; var elementProps: Props = element.props; var key = element.key; -var ref: string = element.ref; // // React Components @@ -194,10 +194,6 @@ classicComponent.setProps(elementProps); classicComponent.replaceProps(props); classicComponent.replaceState({ inputValue: "???", seconds: 60 }); -var inputRef: React.HTMLComponent = - component.refs[INPUT_REF]; -var value: string = inputRef.getDOMNode().value; - var myComponent = component; myComponent.reset(); @@ -327,17 +323,18 @@ var onlyChild = React.Children.only([null, [[["Hallo"], true]], false]); interface TimerState { secondsElapsed: number; } -class Timer extends React.Component<{}, TimerState> { +class Timer extends React.Component, TimerState> { static state = { secondsElapsed: 0 } private _interval: number; tick() { - this.setState({ secondsElapsed: this.state.secondsElapsed + 1 }); + this.setState((prevState, props) => ({ + secondsElapsed: prevState.secondsElapsed + 1 + })); } componentDidMount() { - var me = this; - this._interval = setInterval(() => me.tick(), 1000); + this._interval = setInterval(() => this.tick(), 1000); } componentWillUnmount() { clearInterval(this._interval); @@ -360,6 +357,11 @@ var cx = React.addons.classSet; var className: string = cx({ a: true, b: false, c: true }); className = cx("a", null, "b"); +React.addons.createFragment({ + a: React.DOM.div(), + b: ["a", false, React.createElement("span")] +}); + // // React.addons (Transitions) // -------------------------------------------------------------------------- diff --git a/react/future/react-addons-0.13.0.d.ts b/react/future/react-addons-0.13.0.d.ts index bb4af1d1ef..d755bf9645 100644 --- a/react/future/react-addons-0.13.0.d.ts +++ b/react/future/react-addons-0.13.0.d.ts @@ -1,4 +1,4 @@ -// Type definitions for ReactWithAddons v0.13.0 (external module) +// Type definitions for ReactWithAddons v0.13.0 RC2 (external module) // Project: http://facebook.github.io/react/ // Definitions by: Asana , AssureSign // Definitions: https://github.com/borisyankov/DefinitelyTyped @@ -9,20 +9,26 @@ declare module "react/addons" { // ---------------------------------------------------------------------- interface ReactElementBase { - type: T; + type: string | ComponentClassBase

; props: P; - key: number | string; - ref: string; + key: string | number; + ref: string | ((component: T) => any); } interface ReactElement

- extends ReactElementBase, P> {} + extends ReactElementBase, P> { + type: ComponentClass; + } interface ReactClassicElement

- extends ReactElementBase | string, P> {} + extends ReactElementBase, P> { + type: string | ClassicComponentClass; + } interface ReactDOMElement

// subtype of ReactClassicElement - extends ReactElementBase {} + extends ReactElementBase, P> { + type: string; + } type ReactHTMLElement = ReactDOMElement; type ReactSVGElement = ReactDOMElement; @@ -85,6 +91,19 @@ declare module "react/addons" { props?: P, ...children: ReactNode[]): ReactElement

; + function cloneElement

( + element: ReactDOMElement

, + props?: P, + ...children: ReactNode[]): ReactDOMElement

; + function cloneElement

( + element: ReactClassicElement

, + props?: P, + ...children: ReactNode[]): ReactClassicElement

; + function cloneElement

( + element: ReactElement

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

; + function render

( element: ReactDOMElement

, container: Element, @@ -120,6 +139,7 @@ declare module "react/addons" { // Base component for plain JS classes class Component implements ComponentLifecycle { constructor(props: P, context: any); + setState(f: (prevState: S, props: P) => S, callback?: () => any): void; setState(state: S, callback?: () => any): void; forceUpdate(): void; props: P; @@ -144,7 +164,7 @@ declare module "react/addons" { tagName: string; } - type HTMLComponent = DOMComponent; + export type HTMLComponent = DOMComponent; type SVGComponent = DOMComponent; interface ChildContextProvider { @@ -311,13 +331,13 @@ declare module "react/addons" { // Props / DOM Attributes // ---------------------------------------------------------------------- - interface Props { + interface Props { children?: ReactNode; - key?: number | string; - ref?: string; + key?: string | number; + ref?: string | ((component: T) => any); } - interface DOMAttributes extends Props { + interface DOMAttributes extends Props> { onCopy?: ClipboardEventHandler; onCut?: ClipboardEventHandler; onPaste?: ClipboardEventHandler; @@ -379,6 +399,8 @@ declare module "react/addons" { } interface HTMLAttributes extends DOMAttributes { + ref?: string | ((component: HTMLComponent) => void); + accept?: string; acceptCharset?: string; accessKey?: string; @@ -487,6 +509,8 @@ declare module "react/addons" { } interface SVGAttributes extends DOMAttributes { + ref?: string | ((component: SVGComponent) => void); + cx?: SVGLength | SVGAnimatedLength; cy?: any; d?: string; @@ -734,8 +758,12 @@ declare module "react/addons" { classSet(cx: { [key: string]: boolean }): string; classSet(...classList: string[]): string; + cloneWithProps

(element: ReactDOMElement

, props: P): ReactDOMElement

; + cloneWithProps

(element: ReactClassicElement

, props: P): ReactClassicElement

; cloneWithProps

(element: ReactElement

, props: P): ReactElement

; + createFragment(object: { [key: string]: ReactNode }): ReactFragment; + update(value: any[], spec: UpdateArraySpec): any[]; update(value: {}, spec: UpdateSpec): any; diff --git a/react/future/react-addons-global-0.13.0.d.ts b/react/future/react-addons-global-0.13.0.d.ts index d11a4ae03a..c5db4f6d24 100644 --- a/react/future/react-addons-global-0.13.0.d.ts +++ b/react/future/react-addons-global-0.13.0.d.ts @@ -1,4 +1,4 @@ -// Type definitions for ReactWithAddons v0.13.0 (internal module) +// Type definitions for ReactWithAddons v0.13.0 RC2 (internal module) // Project: http://facebook.github.io/react/ // Definitions by: Asana , AssureSign // Definitions: https://github.com/borisyankov/DefinitelyTyped @@ -23,8 +23,12 @@ declare module React { classSet(cx: { [key: string]: boolean }): string; classSet(...classList: string[]): string; + cloneWithProps

(element: ReactDOMElement

, props: P): ReactDOMElement

; + cloneWithProps

(element: ReactClassicElement

, props: P): ReactClassicElement

; cloneWithProps

(element: ReactElement

, props: P): ReactElement

; + createFragment(object: { [key: string]: ReactNode }): ReactFragment; + update(value: any[], spec: UpdateArraySpec): any[]; update(value: {}, spec: UpdateSpec): any; diff --git a/react/future/react-global-0.13.0.d.ts b/react/future/react-global-0.13.0.d.ts index 60675aec9e..b7be8993fc 100644 --- a/react/future/react-global-0.13.0.d.ts +++ b/react/future/react-global-0.13.0.d.ts @@ -1,4 +1,4 @@ -// Type definitions for React v0.13.0 (internal module) +// Type definitions for React v0.13.0 RC2 (internal module) // Project: http://facebook.github.io/react/ // Definitions by: Asana , AssureSign // Definitions: https://github.com/borisyankov/DefinitelyTyped @@ -9,20 +9,26 @@ declare module React { // ---------------------------------------------------------------------- interface ReactElementBase { - type: T; + type: string | ComponentClassBase

; props: P; - key: number | string; - ref: string; + key: string | number; + ref: string | ((component: T) => any); } interface ReactElement

- extends ReactElementBase, P> {} + extends ReactElementBase, P> { + type: ComponentClass; + } interface ReactClassicElement

- extends ReactElementBase | string, P> {} + extends ReactElementBase, P> { + type: string | ClassicComponentClass; + } interface ReactDOMElement

// subtype of ReactClassicElement - extends ReactElementBase {} + extends ReactElementBase, P> { + type: string; + } type ReactHTMLElement = ReactDOMElement; type ReactSVGElement = ReactDOMElement; @@ -55,7 +61,7 @@ declare module React { type ReactChild = ReactElementBase | ReactText; // Should be Array but type aliases cannot be recursive - type ReactFragment = Array; + type ReactFragment = {} | Array; type ReactNode = ReactChild | ReactFragment | boolean; // @@ -85,6 +91,19 @@ declare module React { props?: P, ...children: ReactNode[]): ReactElement

; + function cloneElement

( + element: ReactDOMElement

, + props: P, + ...children: ReactNode[]): ReactDOMElement

; + function cloneElement

( + element: ReactClassicElement

, + props: P, + ...children: ReactNode[]): ReactClassicElement

; + function cloneElement

( + element: ReactElement

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

; + function render

( element: ReactDOMElement

, container: Element, @@ -120,6 +139,7 @@ declare module React { // Base component for plain JS classes class Component implements ComponentLifecycle { constructor(props: P, context: any); + setState(f: (prevState: S, props: P) => S, callback?: () => any): void; setState(state: S, callback?: () => any): void; forceUpdate(): void; props: P; @@ -311,13 +331,13 @@ declare module React { // Props / DOM Attributes // ---------------------------------------------------------------------- - interface Props { + interface Props { children?: ReactNode; - key?: number | string; - ref?: string; + key?: string | number; + ref?: string | ((component: T) => any); } - interface DOMAttributes extends Props { + interface DOMAttributes extends Props> { onCopy?: ClipboardEventHandler; onCut?: ClipboardEventHandler; onPaste?: ClipboardEventHandler; @@ -379,6 +399,8 @@ declare module React { } interface HTMLAttributes extends DOMAttributes { + ref?: string | ((component: HTMLComponent) => void); + accept?: string; acceptCharset?: string; accessKey?: string; @@ -487,6 +509,8 @@ declare module React { } interface SVGAttributes extends DOMAttributes { + ref?: string | ((component: SVGComponent) => void); + cx?: SVGLength | SVGAnimatedLength; cy?: any; d?: string;