Merge pull request #3314 from Asana/react-simplification

Update react.d.ts
This commit is contained in:
Masahiro Wakame
2014-12-18 13:36:50 +09:00
3 changed files with 122 additions and 46 deletions
+40 -14
View File
@@ -1,7 +1,36 @@
/// <reference path="react.d.ts" />
import React = require("react/addons");
// TestUtils
var isImportant: boolean;
var isRead: boolean;
var classSet: React.ClassSet = {
"message": true,
"message-important": isImportant,
"message-read": isRead
};
var cx = React.addons.classSet;
var classes: string = cx(classSet);
//
// React.addons (Transitions)
// --------------------------------------------------------------------------
React.createFactory(React.addons.TransitionGroup)({ component: "div" });
React.createFactory(React.addons.CSSTransitionGroup)({
component: React.createClass({
render: (): React.ReactElement<any> => null
}),
childFactory: (c) => c,
transitionName: "transition",
transitionAppear: false,
transitionEnter: true,
transitionLeave: true
});
//
// React.addons.TestUtils
// --------------------------------------------------------------------------
var that: React.CompositeComponent<any, any>;
var node = that.refs["input"].getDOMNode();
React.addons.TestUtils.Simulate.click(node);
@@ -16,27 +45,24 @@ interface GreetingState {
}
interface Greeting extends React.CompositeComponent<GreetingProps, GreetingState> {
}
var Greeting = React.createClass({displayName: "Greeting",
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);
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);
var root = React.addons.TestUtils.renderIntoDocument(
React.createElement(Greeting, {name: "John"}));
var greeting = <Greeting>React.addons.TestUtils
.findRenderedComponentWithType(root, Greeting);
greeting.setState({
morning: false
});
var isImportant: boolean;
var isRead: boolean;
var cx = React.addons.classSet;
var classes: string = cx({
"message": true,
"message-important": isImportant,
"message-read": isRead
});
+43 -2
View File
@@ -18,6 +18,8 @@ interface MyComponent extends React.CompositeComponent<Props, State> {
}
var props: Props = {
key: 42,
ref: "myComponent42",
hello: "world",
foo: 42,
bar: true
@@ -60,7 +62,7 @@ var reactClass: React.ComponentClass<Props> = React.createClass<Props>({
var reactElement: React.ReactElement<Props> =
React.createElement<Props>(reactClass, props);
var reactFactory: React.Factory<Props> =
var reactFactory: React.ComponentFactory<Props> =
React.createFactory<Props>(reactClass);
var component: React.Component<Props> =
@@ -116,7 +118,34 @@ var myComponent = <MyComponent>compComponent;
myComponent.reset();
//
// PropTypes
// 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> = {
@@ -156,6 +185,18 @@ var PropTypesSpecification: React.ComponentSpec<any, any> = {
}
};
//
// 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, {
test: null
}]);
//
// Example from http://facebook.github.io/react/
// --------------------------------------------------------------------------
+39 -30
View File
@@ -19,7 +19,6 @@ declare module React {
interface ReactHTMLElement extends ReactElement<HTMLAttributes> {}
interface ReactSVGElement extends ReactElement<SVGAttributes> {}
interface ComponentElement<P> extends ReactElement<P> {}
//
// React Nodes
@@ -27,7 +26,10 @@ declare module React {
// type ReactText = string | number;
// type Fragment = ReactNode[];
// type ReactNode = ReactElement<any, any> | Fragment | ReactText;
// type ReactNode = ReactElement<any> | Fragment | ReactText | KeyMap;
// interface KeyMap {
// [key: string]: ReactNode;
// }
//
// React Components
@@ -49,13 +51,12 @@ declare module React {
// ReactElement Factories
// ----------------------------------------------------------------------
interface Factory<P> {
interface ComponentFactory<P> {
(props?: P, ...children: any/*ReactNode*/[]): ReactElement<P>;
}
interface HTMLFactory extends Factory<HTMLAttributes> {}
interface SVGFactory extends Factory<SVGAttributes> {}
interface ComponentFactory<P> extends Factory<P> {}
interface HTMLFactory extends ComponentFactory<HTMLAttributes> {}
interface SVGFactory extends ComponentFactory<SVGAttributes> {}
//
// Top-Level API
@@ -64,8 +65,8 @@ declare module React {
interface TopLevelAPI {
createClass<P>(spec: ComponentSpec<P, any>): ComponentClass<P>;
createElement<P>(type: any/*ReactType*/, props: P, ...children: any/*ReactNode*/[]): ReactElement<P>;
createFactory<P>(componentClass: ComponentClass<P>): Factory<P>;
render<P>(element: ReactElement<P>, container: Element, callback?: () => void): Component<P>;
createFactory<P>(componentClass: ComponentClass<P>): ComponentFactory<P>;
render<P>(element: ReactElement<P>, container: Element, callback?: () => any): Component<P>;
unmountComponentAtNode(container: Element): boolean;
renderToString(element: ReactElement<any>): string;
renderToStaticMarkup(element: ReactElement<any>): string;
@@ -85,8 +86,8 @@ declare module React {
isMounted(): boolean;
props: P;
setProps(nextProps: P, callback?: () => void): void;
replaceProps(nextProps: P, callback?: () => void): void;
setProps(nextProps: P, callback?: () => any): void;
replaceProps(nextProps: P, callback?: () => any): void;
}
interface DOMComponent<P> extends Component<P> {
@@ -98,9 +99,9 @@ declare module React {
interface CompositeComponent<P, S> extends Component<P>, ComponentSpec<P, S> {
state: S;
setState(nextState: S, callback?: () => void): void;
replaceState(nextState: S, callback?: () => void): void;
forceUpdate(callback?: () => void): void;
setState(nextState: S, callback?: () => any): void;
replaceState(nextState: S, callback?: () => any): void;
forceUpdate(callback?: () => any): void;
refs: {
[key: string]: Component<any>
};
@@ -241,7 +242,7 @@ declare module React {
export interface ReactAttributes {
children?: any; // ReactNode
key?: string;
key?: any; // number | string
ref?: string;
// Event Attributes
@@ -287,7 +288,7 @@ declare module React {
interface CSSProperties {
columnCount?: number;
flex?: number;
flex?: any; // number | string
flexGrow?: number;
flexShrink?: number;
fontWeight?: number;
@@ -303,8 +304,6 @@ declare module React {
// SVG-related properties
fillOpacity?: number;
strokeOpacity?: number;
[key: string]: any; // number | string
}
interface HTMLAttributes extends ReactAttributes {
@@ -638,29 +637,39 @@ declare module React {
// React.Children
// ----------------------------------------------------------------------
// type Child = ReactElement<any> | ReactText;
interface ReactChildren {
map<T>(children: any/*ReactNode*/, fn: (child: any/*ReactNode*/) => T): { [key:string]: T };
forEach(children: any/*ReactNode*/, fn: (child: any/*ReactNode*/) => any): void;
map<T>(children: any/*ReactNode*/, fn: (child: any/*Child*/) => T): { [key:string]: T };
forEach(children: any/*ReactNode*/, fn: (child: any/*Child*/) => any): void;
count(children: any/*ReactNode*/): number;
only(children: any/*ReactNode*/): any;
only(children: any/*ReactNode*/): any/*Child*/;
}
//
// React.addons
// ----------------------------------------------------------------------
interface ClassSet {
[key: string]: boolean;
}
//
// React.addons (Transitions)
// ----------------------------------------------------------------------
interface CSSTransitionGroupProps {
interface TransitionGroupProps {
component?: any; // ReactType
childFactory?: (child: ReactElement<any>) => ReactElement<any>;
}
interface CSSTransitionGroupProps extends TransitionGroupProps {
transitionName: string;
transitionAppear?: boolean;
transitionEnter?: boolean;
transitionLeave?: boolean;
}
interface TransitionGroupProps {
component?: any; // ReactType
childFactory?: (child: ReactElement<any>) => ReactElement<any>;
}
interface CSSTransitionGroup extends ComponentClass<CSSTransitionGroupProps> {}
interface TransitionGroup extends ComponentClass<TransitionGroupProps> {}
@@ -869,11 +878,11 @@ declare module React {
PureRenderMixin: PureRenderMixin;
TransitionGroup: TransitionGroup;
batchedUpdates<A, B>(callback: (a: A, b: B) => void, a: A, b: B): void;
batchedUpdates<A>(callback: (a: A) => void, a: A): void;
batchedUpdates(callback: () => void): void;
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: { [key: string]: boolean }): string;
classSet(cx: ClassSet): string;
cloneWithProps<P>(element: ReactElement<P>, props: P): ReactElement<P>;
update(value: any[], spec: UpdateArraySpec): any[];