kylefang/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/zhigang1992/DefinitelyTyped.git synced 2026-04-23 12:56:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

React.Instance<P> -> React.Component<P>; add React.DOM.picture and extra HTML attributes

Browse Source
This commit is contained in:
Vincent Siao
2014-12-03 14:56:30 -08:00
parent 9a9ff2ed08
commit b8a0461280
3 changed files with 75 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
react/react-addons-tests.ts
View File

@@ -2,8 +2,8 @@
import React = require("react/addons");
// TestUtils
var that: React.ComponentInstance<any, any>;
var node = that.refs['input'].getDOMNode();
var that: React.CompositeComponent<any, any>;
var node = that.refs["input"].getDOMNode();
React.addons.TestUtils.Simulate.click(node);
React.addons.TestUtils.Simulate.change(node);
React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"});
@@ -14,20 +14,20 @@ interface GreetingProps {
interface GreetingState {
morning: boolean;
}
interface GreetingInstance extends React.ComponentInstance<GreetingProps, 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 = <GreetingInstance>this;
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 = <GreetingInstance>React.addons.TestUtils.findRenderedComponentWithType(root, Greeting);
var greeting = <Greeting>React.addons.TestUtils.findRenderedComponentWithType(root, Greeting);
greeting.setState({
morning: false
});
@@ -36,7 +36,7 @@ var isImportant: boolean;
var isRead: boolean;
var cx = React.addons.classSet;
var classes: string = cx({
'message': true,
'message-important': isImportant,
'message-read': isRead
"message": true,
"message-important": isImportant,
"message-read": isRead
});

40
react/react-tests.ts
View File

@@ -13,7 +13,7 @@ interface State {
seconds?: number;
}
interface MyComponentInstance extends React.ComponentInstance<Props, State> {
interface MyComponent extends React.CompositeComponent<Props, State> {
reset(): void;
}
@@ -63,7 +63,7 @@ var reactElement: React.ReactElement<Props> =
var reactFactory: React.Factory<Props> =
React.createFactory<Props>(reactClass);
var reactInstance: React.ElementInstance<Props> =
var component: React.Component<Props> =
React.render<Props>(reactElement, container);
var unmounted: boolean = React.unmountComponentAtNode(container);
@@ -95,25 +95,25 @@ var propTypes: React.ValidationMap<Props> = reactClass.propTypes;
// Component API
// --------------------------------------------------------------------------
var htmlElement: Element = reactInstance.getDOMNode();
var divElement: HTMLDivElement = reactInstance.getDOMNode<HTMLDivElement>();
var isMounted: boolean = reactInstance.isMounted();
reactInstance.setProps(elementProps);
reactInstance.replaceProps(props);
var htmlElement: Element = component.getDOMNode();
var divElement: HTMLDivElement = component.getDOMNode<HTMLDivElement>();
var isMounted: boolean = component.isMounted();
component.setProps(elementProps);
component.replaceProps(props);
var componentInstance: React.ComponentInstance<Props, State> =
<React.ComponentInstance<Props, State>>reactInstance;
var initialState: State = componentInstance.state;
componentInstance.setState({ inputValue: "!!!" });
componentInstance.replaceState({ inputValue: "???", seconds: 60 });
componentInstance.forceUpdate();
var compComponent: React.CompositeComponent<Props, State> =
<React.CompositeComponent<Props, State>>component;
var initialState: State = compComponent.state;
compComponent.setState({ inputValue: "!!!" });
compComponent.replaceState({ inputValue: "???", seconds: 60 });
compComponent.forceUpdate();
var inputRef: React.ElementInstance<React.HTMLAttributes> =
componentInstance.refs[INPUT_REF];
var inputRef: React.HTMLComponent =
<React.HTMLComponent>compComponent.refs[INPUT_REF];
var value: string = inputRef.getDOMNode<HTMLInputElement>().value;
var myComponentInstance = <MyComponentInstance>componentInstance;
myComponentInstance.reset();
var myComponent = <MyComponent>compComponent;
myComponent.reset();
//
// PropTypes
@@ -163,7 +163,7 @@ var PropTypesSpecification: React.ComponentSpec<any, any> = {
interface TimerState {
secondsElapsed: number;
}
interface TimerInstance extends React.ComponentInstance<{}, TimerState> {
interface Timer extends React.CompositeComponent<{}, TimerState> {
}
var Timer = React.createClass({
displayName: "Timer",
@@ -171,7 +171,7 @@ var Timer = React.createClass({
return { secondsElapsed: 0 };
},
tick: () => {
var me = <TimerInstance>this;
var me = <Timer>this;
me.setState({
secondsElapsed: me.state.secondsElapsed + 1
});
@@ -183,7 +183,7 @@ var Timer = React.createClass({
clearInterval(this.interval);
},
render: () => {
var me = <TimerInstance>this;
var me = <Timer>this;
return React.DOM.div(
null,
"Seconds Elapsed: ",

73
react/react.d.ts vendored
View File

@@ -65,7 +65,7 @@ declare module React {
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): ElementInstance<P>;
render<P>(element: ReactElement<P>, container: Element, callback?: () => void): Component<P>;
unmountComponentAtNode(container: Element): boolean;
renderToString(element: ReactElement<any>): string;
renderToStaticMarkup(element: ReactElement<any>): string;
@@ -77,7 +77,7 @@ declare module React {
// Component API
// ----------------------------------------------------------------------
interface ElementInstance<P> {
interface Component<P> {
// Use this overload to cast the returned element to a more specific type.
// Eg: var name = this.refs['name'].getDOMNode<HTMLInputElement>().value;
getDOMNode<TElement extends Element>(): TElement;
@@ -88,14 +88,21 @@ declare module React {
setProps(nextProps: P, callback?: () => void): void;
replaceProps(nextProps: P, callback?: () => void): void;
}
interface DOMComponent<P> extends Component<P> {
tagName: string;
}
interface HTMLComponent extends DOMComponent<HTMLAttributes> {}
interface SVGComponent extends DOMComponent<SVGAttributes> {}
interface ComponentInstance<P, S> extends ElementInstance<P> {
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;
refs: {
[key: string]: ElementInstance<any>
[key: string]: Component<any>
};
}
@@ -272,6 +279,10 @@ declare module React {
onTouchStart?: TouchEventHandler;
onScroll?: UIEventHandler;
onWheel?: WheelEventHandler;
dangerouslySetInnerHTML?: {
__html: string
};
}
interface CSSProperties {
@@ -298,6 +309,7 @@ declare module React {
interface HTMLAttributes extends ReactAttributes {
accept?: string;
acceptCharset?: string;
accessKey?: string;
action?: string;
allowFullScreen?: boolean;
@@ -311,6 +323,7 @@ declare module React {
cellSpacing?: any; // number | string
charSet?: string;
checked?: boolean;
classID?: string;
className?: string;
cols?: number;
colSpan?: number;
@@ -343,8 +356,10 @@ declare module React {
lang?: string;
list?: string;
loop?: boolean;
manifest?: string;
max?: any; // number | string
maxLength?: number;
media?: string;
mediaGroup?: string;
method?: string;
min?: any; // number | string
@@ -373,6 +388,7 @@ declare module React {
selected?: boolean;
shape?: string;
size?: number;
sizes?: string;
span?: number;
spellCheck?: boolean;
src?: string;
@@ -397,11 +413,6 @@ declare module React {
itemProp?: string;
itemScope?: boolean;
itemType?: string;
// React-specific Attributes
dangerouslySetInnerHTML?: {
__html: string
};
}
interface SVGAttributes extends ReactAttributes {
@@ -532,6 +543,7 @@ declare module React {
output: HTMLFactory;
p: HTMLFactory;
param: HTMLFactory;
picture: HTMLFactory;
pre: HTMLFactory;
progress: HTMLFactory;
q: HTMLFactory;
@@ -724,34 +736,41 @@ declare module React {
// React.addons.TestUtils
// ----------------------------------------------------------------------
interface MockedComponent {
render: {
mockImplementation(impl: () => any): void;
};
interface MockedComponentClass {
new(): any;
}
interface ReactTestUtils {
Simulate: Simulate;
renderIntoDocument<P>(element: ReactElement<P>): ElementInstance<P>;
mockComponent(mocked: MockedComponent, mockTagName?: string): ReactTestUtils;
renderIntoDocument<P>(element: ReactElement<P>): Component<P>;
renderIntoDocument<C extends Component<any>>(element: ReactElement<any>): C;
mockComponent(mocked: MockedComponentClass, mockTagName?: string): ReactTestUtils;
isElementOfType(element: ReactElement<any>, type: any/*ReactType*/): boolean;
isDOMComponent(instance: ElementInstance<any>): boolean;
isCompositeComponent(instance: ElementInstance<any>): boolean;
isCompositeComponentWithType(instance: ElementInstance<any>, type: ComponentClass<any>): boolean;
isTextComponent(instance: ElementInstance<any>): boolean;
isDOMComponent(instance: Component<any>): boolean;
isCompositeComponent(instance: Component<any>): boolean;
isCompositeComponentWithType(instance: Component<any>, type: ComponentClass<any>): boolean;
isTextComponent(instance: Component<any>): boolean;
findAllInRenderedTree(tree: ElementInstance<any>, fn: (i: ElementInstance<any>) => boolean): ElementInstance<any>;
findAllInRenderedTree(tree: Component<any>, fn: (i: Component<any>) => boolean): Component<any>;
scryRenderedDOMComponentsWithClass(tree: ElementInstance<any>, className: string): ElementInstance<any>[];
findRenderedDOMComponentWithClass(tree: ElementInstance<any>, className: string): ElementInstance<any>;
scryRenderedDOMComponentsWithClass(tree: Component<any>, className: string): DOMComponent<any>[];
findRenderedDOMComponentWithClass(tree: Component<any>, className: string): DOMComponent<any>;
scryRenderedDOMComponentsWithTag(tree: ElementInstance<any>, tagName: string): ElementInstance<any>[];
findRenderedDOMComponentWithTag(tree: ElementInstance<any>, tagName: string): ElementInstance<any>;
scryRenderedDOMComponentsWithTag(tree: Component<any>, tagName: string): DOMComponent<any>[];
findRenderedDOMComponentWithTag(tree: Component<any>, tagName: string): DOMComponent<any>;
scryRenderedComponentsWithType<P>(tree: ElementInstance<any>, type: ComponentClass<P>): ElementInstance<P>[];
findRenderedComponentWithType<P>(tree: ElementInstance<any>, type: ComponentClass<P>): ElementInstance<P>;
scryRenderedComponentsWithType<P, S>(
tree: Component<any>, type: ComponentClass<P>): CompositeComponent<P, S>[];
scryRenderedComponentsWithType<C extends CompositeComponent<any, any>>(
tree: Component<any>, type: ComponentClass<any>): C[];
findRenderedComponentWithType<P, S>(
tree: Component<any>, type: ComponentClass<P>): CompositeComponent<P, S>;
findRenderedComponentWithType<C extends CompositeComponent<any, any>>(
tree: Component<any>, type: ComponentClass<any>): C;
}
interface SyntheticEventData {
@@ -790,7 +809,7 @@ declare module React {
interface EventSimulator {
(element: Element, eventData?: SyntheticEventData): void;
(descriptor: ElementInstance<any>, eventData?: SyntheticEventData): void;
(descriptor: Component<any>, eventData?: SyntheticEventData): void;
}
interface Simulate {