mirror of
https://github.com/wassname/DefinitelyTyped.git
synced 2026-09-09 11:13:57 +08:00
Merge pull request #3314 from Asana/react-simplification
Update react.d.ts
This commit is contained in:
+40
-14
@@ -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
@@ -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/
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
Vendored
+39
-30
@@ -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[];
|
||||
|
||||
Reference in New Issue
Block a user