mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-05-16 11:02:11 +08:00
remove react/legacy
This commit is contained in:
vvakame
@@ -1,108 +0,0 @@
|
||||
/// <reference path="react-0.11.d.ts" />
|
||||
import React = require("react-0.11");
|
||||
|
||||
var PropTypesSpecification: React.Specification<any, any> = {
|
||||
propTypes: {
|
||||
// You can declare that a prop is a specific JS primitive. By default, these
|
||||
// are all optional.
|
||||
optionalArray: React.PropTypes.array,
|
||||
optionalBool: React.PropTypes.bool,
|
||||
optionalFunc: React.PropTypes.func,
|
||||
optionalNumber: React.PropTypes.number,
|
||||
optionalObject: React.PropTypes.object,
|
||||
optionalString: React.PropTypes.string,
|
||||
|
||||
// Anything that can be rendered: numbers, strings, components or an array
|
||||
// containing these types.
|
||||
optionalRenderable: React.PropTypes.renderable,
|
||||
|
||||
// A React component.
|
||||
optionalComponent: React.PropTypes.component,
|
||||
|
||||
// You can also declare that a prop is an instance of a class. This uses
|
||||
// JS's instanceof operator.
|
||||
optionalMessage: React.PropTypes.instanceOf(Date),
|
||||
|
||||
// You can ensure that your prop is limited to specific values by treating
|
||||
// it as an enum.
|
||||
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
|
||||
|
||||
// An object that could be one of many types
|
||||
optionalUnion: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.number,
|
||||
React.PropTypes.instanceOf(Date)
|
||||
]),
|
||||
|
||||
// An array of a certain type
|
||||
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
|
||||
|
||||
// An object with property values of a certain type
|
||||
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
|
||||
|
||||
// An object taking on a particular shape
|
||||
optionalObjectWithShape: React.PropTypes.shape({
|
||||
color: React.PropTypes.string,
|
||||
fontSize: React.PropTypes.number
|
||||
}),
|
||||
|
||||
// You can chain any of the above with `isRequired` to make sure a warning
|
||||
// is shown if the prop isn't provided.
|
||||
requiredFunc: React.PropTypes.func.isRequired,
|
||||
|
||||
// A value of any data type
|
||||
requiredAny: React.PropTypes.any.isRequired,
|
||||
|
||||
// You can also specify a custom validator. It should return an Error
|
||||
// object if the validation fails. Don't `console.warn` or throw, as this
|
||||
// won't work inside `oneOfType`.
|
||||
customProp: function(props, propName, componentName) {
|
||||
if (!/matchme/.test(props[propName])) {
|
||||
return new Error('Validation failed!');
|
||||
}
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
render: (): React.Descriptor<any> => {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
React.createClass(PropTypesSpecification);
|
||||
|
||||
var mountNode: Element;
|
||||
|
||||
var HelloMessage = React.createClass({displayName: 'HelloMessage',
|
||||
render: function() {
|
||||
return React.DOM.div(null, "Hello ", (<React.Component<{name: string}, any>>this).props.name);
|
||||
}
|
||||
});
|
||||
|
||||
React.renderComponent(HelloMessage({name: "John"}), mountNode);
|
||||
|
||||
var Timer = React.createClass({displayName: 'Timer',
|
||||
getInitialState: function() {
|
||||
return {secondsElapsed: 0};
|
||||
},
|
||||
tick: function() {
|
||||
(<React.Component<any, {secondsElapsed: number}>>this).setState({
|
||||
secondsElapsed: (<React.Component<any, {secondsElapsed: number}>>this).state.secondsElapsed + 1
|
||||
});
|
||||
},
|
||||
componentDidMount: function() {
|
||||
this.interval = setInterval(this.tick, 1000);
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
render: function() {
|
||||
return React.DOM.div(
|
||||
null,
|
||||
"Seconds Elapsed: ",
|
||||
(<React.Component<any, {secondsElapsed: number}>>this).state.secondsElapsed
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
React.renderComponent(Timer(null), mountNode);
|
||||
553
react/legacy/react-0.11.d.ts
vendored
553
react/legacy/react-0.11.d.ts
vendored
@@ -1,553 +0,0 @@
|
||||
// Type definitions for React 0.11.2
|
||||
// Project: http://facebook.github.io/react/
|
||||
// Definitions by: Asana <https://asana.com>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
|
||||
declare module "react-0.11" {
|
||||
export = React;
|
||||
}
|
||||
|
||||
declare module React {
|
||||
export function createClass<P, S>(specification: Specification<P, S>): Factory<P>;
|
||||
|
||||
export function renderComponent<P>(component: Descriptor<P>, container: Element, callback?: () => void): Descriptor<P>;
|
||||
|
||||
export function unmountComponentAtNode(container: Element): boolean;
|
||||
|
||||
export function renderComponentToString(component: Descriptor<any>): string;
|
||||
|
||||
export function renderComponentToStaticMarkup(component: Descriptor<any>): string;
|
||||
|
||||
export function isValidClass(factory: Factory<any>): boolean;
|
||||
|
||||
export function isValidComponent(component: Descriptor<any>): boolean;
|
||||
|
||||
export function initializeTouchEvents(shouldUseTouch: boolean): void;
|
||||
|
||||
export interface Descriptor<P> {
|
||||
props: P;
|
||||
}
|
||||
|
||||
export interface Factory<P> {
|
||||
(properties?: P, ...children: any[]): Descriptor<P>;
|
||||
}
|
||||
|
||||
export interface Mixin<P, S> {
|
||||
componentWillMount?(): void;
|
||||
componentDidMount?(): void;
|
||||
componentWillReceiveProps?(nextProps: P): void;
|
||||
shouldComponentUpdate?(nextProps: P, nextState: S): boolean;
|
||||
componentWillUpdate?(nextProps: P, nextState: S): void;
|
||||
componentDidUpdate?(prevProps: P, prevState: S): void;
|
||||
componentWillUnmount?(): void;
|
||||
}
|
||||
|
||||
export interface Specification<P, S> extends Mixin<P, S> {
|
||||
displayName?: string;
|
||||
mixins?: Mixin<P, S>[];
|
||||
statics?: {
|
||||
[key: string]: Function;
|
||||
};
|
||||
propTypes?: ValidationMap<P>;
|
||||
getDefaultProps?(): P;
|
||||
getInitialState?(): S;
|
||||
render(): Descriptor<any>;
|
||||
}
|
||||
|
||||
export interface DomReferencer {
|
||||
getDOMNode(): Element;
|
||||
}
|
||||
|
||||
export interface Component<P, S> extends DomReferencer {
|
||||
refs: {
|
||||
[key: string]: DomReferencer
|
||||
};
|
||||
props: P;
|
||||
state: S;
|
||||
setState(nextState: S, callback?: () => void): void;
|
||||
replaceState(nextState: S, callback?: () => void): void;
|
||||
forceUpdate(callback?: () => void): void;
|
||||
isMounted(): boolean;
|
||||
transferPropsTo(target: Factory<P>): Descriptor<P>;
|
||||
setProps(nextProps: P, callback?: () => void): void;
|
||||
replaceProps(nextProps: P, callback?: () => void): void;
|
||||
}
|
||||
|
||||
export interface Constructable {
|
||||
new(): any;
|
||||
}
|
||||
|
||||
export interface Validator<P> {
|
||||
(props: P, propName: string, componentName: string): Error;
|
||||
}
|
||||
|
||||
export interface Requireable<P> extends Validator<P> {
|
||||
isRequired: Validator<P>;
|
||||
}
|
||||
|
||||
export interface ValidationMap<P> {
|
||||
[key: string]: Validator<P>;
|
||||
}
|
||||
|
||||
export var PropTypes: {
|
||||
any: Requireable<any>;
|
||||
array: Requireable<any>;
|
||||
bool: Requireable<any>;
|
||||
func: Requireable<any>;
|
||||
number: Requireable<any>;
|
||||
object: Requireable<any>;
|
||||
string: Requireable<any>;
|
||||
renderable: Requireable<any>;
|
||||
component: Requireable<any>;
|
||||
instanceOf: (clazz: Constructable) => Requireable<any>;
|
||||
oneOf: (types: any[]) => Requireable<any>
|
||||
oneOfType: (types: Validator<any>[]) => Requireable<any>;
|
||||
arrayOf: (type: Validator<any>) => Requireable<any>;
|
||||
objectOf: (type: Validator<any>) => Requireable<any>;
|
||||
shape: (type: ValidationMap<any>) => Requireable<any>;
|
||||
};
|
||||
|
||||
export var Children: {
|
||||
map(children: any[], fn: (child: any) => any): any[];
|
||||
forEach(children: any[], fn: (child: any) => any): void;
|
||||
count(children: any[]): number;
|
||||
only(children: any[]): any;
|
||||
};
|
||||
|
||||
// Browser Interfaces
|
||||
// Taken from https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts
|
||||
export interface AbstractView {
|
||||
styleMedia: StyleMedia;
|
||||
document: Document;
|
||||
}
|
||||
|
||||
export interface Touch {
|
||||
identifier: number;
|
||||
target: EventTarget;
|
||||
screenX: number;
|
||||
screenY: number;
|
||||
clientX: number;
|
||||
clientY: number;
|
||||
pageX: number;
|
||||
pageY: number;
|
||||
}
|
||||
|
||||
export interface TouchList {
|
||||
[index: number]: Touch;
|
||||
length: number;
|
||||
item(index: number): Touch;
|
||||
identifiedTouch(identifier: number): Touch;
|
||||
}
|
||||
|
||||
// Events
|
||||
export interface SyntheticEvent {
|
||||
bubbles: boolean;
|
||||
cancelable: boolean;
|
||||
currentTarget: EventTarget;
|
||||
defaultPrevented: boolean;
|
||||
eventPhase: number;
|
||||
nativeEvent: Event;
|
||||
preventDefault(): void;
|
||||
stopPropagation(): void;
|
||||
target: EventTarget;
|
||||
timeStamp: Date;
|
||||
type: string;
|
||||
}
|
||||
|
||||
export interface ClipboardEvent extends SyntheticEvent {
|
||||
clipboardData: DataTransfer;
|
||||
}
|
||||
|
||||
export interface KeyboardEvent extends SyntheticEvent {
|
||||
altKey: boolean;
|
||||
charCode: number;
|
||||
ctrlKey: boolean;
|
||||
getModifierState(key: string): boolean;
|
||||
key: string;
|
||||
keyCode: number;
|
||||
locale: string;
|
||||
location: number;
|
||||
metaKey: boolean;
|
||||
repeat: boolean;
|
||||
shiftKey: boolean;
|
||||
which: number;
|
||||
}
|
||||
|
||||
export interface FocusEvent extends SyntheticEvent {
|
||||
relatedTarget: EventTarget;
|
||||
}
|
||||
|
||||
export interface MouseEvent extends SyntheticEvent {
|
||||
altKey: boolean;
|
||||
button: number;
|
||||
buttons: number;
|
||||
clientX: number;
|
||||
clientY: number;
|
||||
ctrlKey: boolean;
|
||||
getModifierState(key: string): boolean;
|
||||
metaKey: boolean;
|
||||
pageX: number;
|
||||
pageY: number;
|
||||
relatedTarget: EventTarget;
|
||||
screenX: number;
|
||||
screenY: number;
|
||||
shiftKey: boolean;
|
||||
}
|
||||
|
||||
export interface TouchEvent extends SyntheticEvent {
|
||||
altKey: boolean;
|
||||
changedTouches: TouchList;
|
||||
ctrlKey: boolean;
|
||||
getModifierState(key: string): boolean;
|
||||
metaKey: boolean;
|
||||
shiftKey: boolean;
|
||||
targetTouches: TouchList;
|
||||
touches: TouchList;
|
||||
}
|
||||
|
||||
export interface UiEvent extends SyntheticEvent {
|
||||
detail: number;
|
||||
view: AbstractView;
|
||||
}
|
||||
|
||||
export interface WheelEvent extends SyntheticEvent {
|
||||
deltaMode: number;
|
||||
deltaX: number;
|
||||
deltaY: number;
|
||||
deltaZ: number;
|
||||
}
|
||||
|
||||
// Attributes
|
||||
export interface EventAttributes {
|
||||
onCopy?: (event: ClipboardEvent) => void;
|
||||
onCut?: (event: ClipboardEvent) => void;
|
||||
onPaste?: (event: ClipboardEvent) => void;
|
||||
onKeyDown?: (event: KeyboardEvent) => void;
|
||||
onKeyPress?: (event: KeyboardEvent) => void;
|
||||
onKeyUp?: (event: KeyboardEvent) => void;
|
||||
onFocus?: (event: FocusEvent) => void;
|
||||
onBlur?: (event: FocusEvent) => void;
|
||||
onChange?: (event: SyntheticEvent) => void;
|
||||
onInput?: (event: SyntheticEvent) => void;
|
||||
onSubmit?: (event: SyntheticEvent) => void;
|
||||
onClick?: (event: MouseEvent) => void;
|
||||
onDoubleClick?: (event: MouseEvent) => void;
|
||||
onDrag?: (event: MouseEvent) => void;
|
||||
onDragEnd?: (event: MouseEvent) => void;
|
||||
onDragEnter?: (event: MouseEvent) => void;
|
||||
onDragExit?: (event: MouseEvent) => void;
|
||||
onDragLeave?: (event: MouseEvent) => void;
|
||||
onDragOver?: (event: MouseEvent) => void;
|
||||
onDragStart?: (event: MouseEvent) => void;
|
||||
onDrop?: (event: MouseEvent) => void;
|
||||
onMouseDown?: (event: MouseEvent) => void;
|
||||
onMouseEnter?: (event: MouseEvent) => void;
|
||||
onMouseLeave?: (event: MouseEvent) => void;
|
||||
onMouseMove?: (event: MouseEvent) => void;
|
||||
onMouseOut?: (event: MouseEvent) => void;
|
||||
onMouseOver?: (event: MouseEvent) => void;
|
||||
onMouseUp?: (event: MouseEvent) => void;
|
||||
onTouchCancel?: (event: TouchEvent) => void;
|
||||
onTouchEnd?: (event: TouchEvent) => void;
|
||||
onTouchMove?: (event: TouchEvent) => void;
|
||||
onTouchStart?: (event: TouchEvent) => void;
|
||||
onScroll?: (event: UiEvent) => void;
|
||||
onWheel?: (event: WheelEvent) => void;
|
||||
}
|
||||
|
||||
export interface ReactAttributes {
|
||||
dangerouslySetInnerHTML?: {
|
||||
__html: string;
|
||||
};
|
||||
children?: any[];
|
||||
key?: string;
|
||||
ref?: string;
|
||||
}
|
||||
|
||||
export interface DomAttributes extends EventAttributes, ReactAttributes {
|
||||
// HTML Attributes
|
||||
accept?: any;
|
||||
accessKey?: any;
|
||||
action?: any;
|
||||
allowFullScreen?: any;
|
||||
allowTransparency?: any;
|
||||
alt?: any;
|
||||
async?: any;
|
||||
autoCapitalize?: any;
|
||||
autoComplete?: any;
|
||||
autoCorrect?: any;
|
||||
autoFocus?: any;
|
||||
autoPlay?: any;
|
||||
cellPadding?: any;
|
||||
cellSpacing?: any;
|
||||
charSet?: any;
|
||||
checked?: any;
|
||||
className?: any;
|
||||
cols?: any;
|
||||
colSpan?: any;
|
||||
content?: any;
|
||||
contentEditable?: any;
|
||||
contextMenu?: any;
|
||||
controls?: any;
|
||||
coords?: any;
|
||||
crossOrigin?: any;
|
||||
data?: any;
|
||||
dateTime?: any;
|
||||
defer?: any;
|
||||
dir?: any;
|
||||
disabled?: any;
|
||||
download?: any;
|
||||
draggable?: any;
|
||||
encType?: any;
|
||||
form?: any;
|
||||
formNoValidate?: any;
|
||||
frameBorder?: any;
|
||||
height?: any;
|
||||
hidden?: any;
|
||||
href?: any;
|
||||
hrefLang?: any;
|
||||
htmlFor?: any;
|
||||
httpEquiv?: any;
|
||||
icon?: any;
|
||||
id?: any;
|
||||
itemProp?: any;
|
||||
itemScope?: any;
|
||||
itemType?: any;
|
||||
label?: any;
|
||||
lang?: any;
|
||||
list?: any;
|
||||
loop?: any;
|
||||
max?: any;
|
||||
maxLength?: any;
|
||||
mediaGroup?: any;
|
||||
method?: any;
|
||||
min?: any;
|
||||
multiple?: any;
|
||||
muted?: any;
|
||||
name?: any;
|
||||
noValidate?: any;
|
||||
open?: any;
|
||||
pattern?: any;
|
||||
placeholder?: any;
|
||||
poster?: any;
|
||||
preload?: any;
|
||||
property?: any;
|
||||
radioGroup?: any;
|
||||
readOnly?: any;
|
||||
rel?: any;
|
||||
required?: any;
|
||||
role?: any;
|
||||
rows?: any;
|
||||
rowSpan?: any;
|
||||
sandbox?: any;
|
||||
scope?: any;
|
||||
scrollLeft?: any;
|
||||
scrolling?: any;
|
||||
scrollTop?: any;
|
||||
seamless?: any;
|
||||
selected?: any;
|
||||
shape?: any;
|
||||
size?: any;
|
||||
span?: any;
|
||||
spellCheck?: any;
|
||||
src?: any;
|
||||
srcDoc?: any;
|
||||
srcSet?: any;
|
||||
start?: any;
|
||||
step?: any;
|
||||
style?: any;
|
||||
tabIndex?: any;
|
||||
target?: any;
|
||||
title?: any;
|
||||
type?: any;
|
||||
useMap?: any;
|
||||
value?: any;
|
||||
width?: any;
|
||||
wmode?: any;
|
||||
}
|
||||
|
||||
export interface SvgAttributes extends EventAttributes, ReactAttributes {
|
||||
cx?: any;
|
||||
cy?: any;
|
||||
d?: any;
|
||||
dx?: any;
|
||||
dy?: any;
|
||||
fill?: any;
|
||||
fillOpacity?: any;
|
||||
fontFamily?: any;
|
||||
fontSize?: any;
|
||||
fx?: any;
|
||||
fy?: any;
|
||||
gradientTransform?: any;
|
||||
gradientUnits?: any;
|
||||
markerEnd?: any;
|
||||
markerMid?: any;
|
||||
markerStart?: any;
|
||||
offset?: any;
|
||||
opacity?: any;
|
||||
patternContentUnits?: any;
|
||||
patternUnits?: any;
|
||||
points?: any;
|
||||
preserveAspectRatio?: any;
|
||||
r?: any;
|
||||
rx?: any;
|
||||
ry?: any;
|
||||
spreadMethod?: any;
|
||||
stopColor?: any;
|
||||
stopOpacity?: any;
|
||||
stroke?: any;
|
||||
strokeDasharray?: any;
|
||||
strokeLinecap?: any;
|
||||
strokeOpacity?: any;
|
||||
strokeWidth?: any;
|
||||
textAnchor?: any;
|
||||
transform?: any;
|
||||
version?: any;
|
||||
viewBox?: any;
|
||||
x1?: any;
|
||||
x2?: any;
|
||||
x?: any;
|
||||
y1?: any;
|
||||
y2?: any;
|
||||
y?: any;
|
||||
}
|
||||
|
||||
export interface DomElement extends Factory<DomAttributes> {
|
||||
}
|
||||
|
||||
export interface SvgElement extends Factory<SvgAttributes> {
|
||||
}
|
||||
|
||||
export var DOM: {
|
||||
// HTML
|
||||
a: DomElement;
|
||||
abbr: DomElement;
|
||||
address: DomElement;
|
||||
area: DomElement;
|
||||
article: DomElement;
|
||||
aside: DomElement;
|
||||
audio: DomElement;
|
||||
b: DomElement;
|
||||
base: DomElement;
|
||||
bdi: DomElement;
|
||||
bdo: DomElement;
|
||||
big: DomElement;
|
||||
blockquote: DomElement;
|
||||
body: DomElement;
|
||||
br: DomElement;
|
||||
button: DomElement;
|
||||
canvas: DomElement;
|
||||
caption: DomElement;
|
||||
cite: DomElement;
|
||||
code: DomElement;
|
||||
col: DomElement;
|
||||
colgroup: DomElement;
|
||||
data: DomElement;
|
||||
datalist: DomElement;
|
||||
dd: DomElement;
|
||||
del: DomElement;
|
||||
details: DomElement;
|
||||
dfn: DomElement;
|
||||
dialog: DomElement;
|
||||
div: DomElement;
|
||||
dl: DomElement;
|
||||
dt: DomElement;
|
||||
em: DomElement;
|
||||
embed: DomElement;
|
||||
fieldset: DomElement;
|
||||
figcaption: DomElement;
|
||||
figure: DomElement;
|
||||
footer: DomElement;
|
||||
form: DomElement;
|
||||
h1: DomElement;
|
||||
h2: DomElement;
|
||||
h3: DomElement;
|
||||
h4: DomElement;
|
||||
h5: DomElement;
|
||||
h6: DomElement;
|
||||
head: DomElement;
|
||||
header: DomElement;
|
||||
hr: DomElement;
|
||||
html: DomElement;
|
||||
i: DomElement;
|
||||
iframe: DomElement;
|
||||
img: DomElement;
|
||||
input: DomElement;
|
||||
ins: DomElement;
|
||||
kbd: DomElement;
|
||||
keygen: DomElement;
|
||||
label: DomElement;
|
||||
legend: DomElement;
|
||||
li: DomElement;
|
||||
link: DomElement;
|
||||
main: DomElement;
|
||||
map: DomElement;
|
||||
mark: DomElement;
|
||||
menu: DomElement;
|
||||
menuitem: DomElement;
|
||||
meta: DomElement;
|
||||
meter: DomElement;
|
||||
nav: DomElement;
|
||||
noscript: DomElement;
|
||||
object: DomElement;
|
||||
ol: DomElement;
|
||||
optgroup: DomElement;
|
||||
option: DomElement;
|
||||
output: DomElement;
|
||||
p: DomElement;
|
||||
param: DomElement;
|
||||
pre: DomElement;
|
||||
progress: DomElement;
|
||||
q: DomElement;
|
||||
rp: DomElement;
|
||||
rt: DomElement;
|
||||
ruby: DomElement;
|
||||
s: DomElement;
|
||||
samp: DomElement;
|
||||
script: DomElement;
|
||||
section: DomElement;
|
||||
select: DomElement;
|
||||
small: DomElement;
|
||||
source: DomElement;
|
||||
span: DomElement;
|
||||
strong: DomElement;
|
||||
style: DomElement;
|
||||
sub: DomElement;
|
||||
summary: DomElement;
|
||||
sup: DomElement;
|
||||
table: DomElement;
|
||||
tbody: DomElement;
|
||||
td: DomElement;
|
||||
textarea: DomElement;
|
||||
tfoot: DomElement;
|
||||
th: DomElement;
|
||||
thead: DomElement;
|
||||
time: DomElement;
|
||||
title: DomElement;
|
||||
tr: DomElement;
|
||||
track: DomElement;
|
||||
u: DomElement;
|
||||
ul: DomElement;
|
||||
"var": DomElement;
|
||||
video: DomElement;
|
||||
wbr: DomElement;
|
||||
// SVG
|
||||
circle: SvgElement;
|
||||
defs: SvgElement;
|
||||
ellipse: SvgElement;
|
||||
g: SvgElement;
|
||||
line: SvgElement;
|
||||
linearGradient: SvgElement;
|
||||
mask: SvgElement;
|
||||
path: SvgElement;
|
||||
pattern: SvgElement;
|
||||
polygon: SvgElement;
|
||||
polyline: SvgElement;
|
||||
radialGradient: SvgElement;
|
||||
rect: SvgElement;
|
||||
stop: SvgElement;
|
||||
svg: SvgElement;
|
||||
text: SvgElement;
|
||||
tspan: SvgElement;
|
||||
};
|
||||
}
|
||||
@@ -1,235 +0,0 @@
|
||||
/// <reference path="react-0.12.d.ts" />
|
||||
import React = require("react");
|
||||
|
||||
interface Props {
|
||||
hello: string;
|
||||
world?: string;
|
||||
foo: number;
|
||||
bar: boolean;
|
||||
}
|
||||
|
||||
interface State {
|
||||
inputValue?: string;
|
||||
seconds?: number;
|
||||
}
|
||||
|
||||
interface MyComponent extends React.CompositeComponent<Props, State> {
|
||||
reset(): void;
|
||||
}
|
||||
|
||||
var props: Props = {
|
||||
key: 42,
|
||||
ref: "myComponent42",
|
||||
hello: "world",
|
||||
foo: 42,
|
||||
bar: true
|
||||
};
|
||||
|
||||
var container: Element;
|
||||
var INPUT_REF: string = "input";
|
||||
|
||||
//
|
||||
// Top-Level API
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var reactClass: React.ComponentClass<Props> = React.createClass<Props>({
|
||||
getDefaultProps: () => {
|
||||
return <Props>{
|
||||
hello: undefined,
|
||||
world: "peace",
|
||||
foo: undefined,
|
||||
bar: undefined
|
||||
};
|
||||
},
|
||||
getInitialState: () => {
|
||||
return {
|
||||
inputValue: "React.js",
|
||||
seconds: 0
|
||||
};
|
||||
},
|
||||
reset: () => {
|
||||
this.replaceState(this.getInitialState());
|
||||
},
|
||||
render: () => {
|
||||
return React.DOM.div(null,
|
||||
React.DOM.input({
|
||||
ref: INPUT_REF,
|
||||
value: this.state.inputValue
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
var reactElement: React.ReactElement<Props> =
|
||||
React.createElement<Props>(reactClass, props);
|
||||
|
||||
var reactFactory: React.ComponentFactory<Props> =
|
||||
React.createFactory<Props>(reactClass);
|
||||
|
||||
var component: React.Component<Props> =
|
||||
React.render<Props>(reactElement, container);
|
||||
|
||||
var unmounted: boolean = React.unmountComponentAtNode(container);
|
||||
var str: string = React.renderToString(reactElement);
|
||||
var markup: string = React.renderToStaticMarkup(reactElement);
|
||||
var notValid: boolean = React.isValidElement(props); // false
|
||||
var isValid = React.isValidElement(reactElement); // true
|
||||
React.initializeTouchEvents(true);
|
||||
|
||||
//
|
||||
// React Elements
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var type = reactElement.type;
|
||||
var elementProps: Props = reactElement.props;
|
||||
var key = reactElement.key;
|
||||
var ref: string = reactElement.ref;
|
||||
var factoryElement: React.ReactElement<Props> = reactFactory(elementProps);
|
||||
|
||||
//
|
||||
// React Components
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var displayName: string = reactClass.displayName;
|
||||
var defaultProps: Props = reactClass.getDefaultProps();
|
||||
var propTypes: React.ValidationMap<Props> = reactClass.propTypes;
|
||||
|
||||
//
|
||||
// Component API
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var htmlElement: Element = component.getDOMNode();
|
||||
var divElement: HTMLDivElement = component.getDOMNode<HTMLDivElement>();
|
||||
var isMounted: boolean = component.isMounted();
|
||||
component.setProps(elementProps);
|
||||
component.replaceProps(props);
|
||||
|
||||
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.HTMLComponent =
|
||||
<React.HTMLComponent>compComponent.refs[INPUT_REF];
|
||||
var value: string = inputRef.getDOMNode<HTMLInputElement>().value;
|
||||
|
||||
var myComponent = <MyComponent>compComponent;
|
||||
myComponent.reset();
|
||||
|
||||
//
|
||||
// Attributes
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
var children: any[] = ["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> = {
|
||||
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.ReactHTMLElement => {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
//
|
||||
// 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]);
|
||||
|
||||
//
|
||||
// Example from http://facebook.github.io/react/
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
interface TimerState {
|
||||
secondsElapsed: number;
|
||||
}
|
||||
interface Timer extends React.CompositeComponent<{}, TimerState> {
|
||||
}
|
||||
var Timer = React.createClass({
|
||||
displayName: "Timer",
|
||||
getInitialState: () => {
|
||||
return { secondsElapsed: 0 };
|
||||
},
|
||||
tick: () => {
|
||||
var me = <Timer>this;
|
||||
me.setState({
|
||||
secondsElapsed: me.state.secondsElapsed + 1
|
||||
});
|
||||
},
|
||||
componentDidMount: () => {
|
||||
this.interval = setInterval(this.tick, 1000);
|
||||
},
|
||||
componentWillUnmount: () => {
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
render: () => {
|
||||
var me = <Timer>this;
|
||||
return React.DOM.div(
|
||||
null,
|
||||
"Seconds Elapsed: ",
|
||||
me.state.secondsElapsed
|
||||
);
|
||||
}
|
||||
});
|
||||
var mountNode: Element;
|
||||
React.render(React.createElement(Timer, null), mountNode);
|
||||
|
||||
934
react/legacy/react-0.12.d.ts
vendored
934
react/legacy/react-0.12.d.ts
vendored
@@ -1,934 +0,0 @@
|
||||
// Type definitions for React 0.12.1
|
||||
// Project: http://facebook.github.io/react/
|
||||
// Definitions by: Asana <https://asana.com>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
|
||||
declare module React {
|
||||
//
|
||||
// React Elements
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type ReactType = ComponentClass<any> | string;
|
||||
|
||||
interface ReactElement<P> {
|
||||
type: ComponentClass<P> | string;
|
||||
props: P;
|
||||
key: number | string;
|
||||
ref: string;
|
||||
}
|
||||
|
||||
interface ReactHTMLElement extends ReactElement<HTMLAttributes> {}
|
||||
interface ReactSVGElement extends ReactElement<SVGAttributes> {}
|
||||
|
||||
//
|
||||
// React Nodes
|
||||
// http://facebook.github.io/react/docs/glossary.html
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type ReactText = string | number;
|
||||
type ReactChild = ReactElement<any> | ReactText;
|
||||
|
||||
// Should be Array<ReactNode> but type aliases cannot be recursive
|
||||
type ReactFragment = Array<ReactChild | any[] | boolean>;
|
||||
type ReactNode = ReactChild | ReactFragment | boolean;
|
||||
|
||||
//
|
||||
// React Components
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ComponentStatics<P> {
|
||||
displayName?: string;
|
||||
getDefaultProps?(): P;
|
||||
propTypes?: ValidationMap<P>;
|
||||
}
|
||||
|
||||
interface ComponentClass<P> extends ComponentStatics<P> {
|
||||
// Deprecated in 0.12. See http://fb.me/react-legacyfactory
|
||||
// new(props: P): ReactElement<P>;
|
||||
// (props: P): ReactElement<P>;
|
||||
}
|
||||
|
||||
//
|
||||
// ReactElement Factories
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ComponentFactory<P> {
|
||||
(props?: P, ...children: ReactNode[]): ReactElement<P>;
|
||||
}
|
||||
|
||||
interface HTMLFactory extends ComponentFactory<HTMLAttributes> {}
|
||||
interface SVGFactory extends ComponentFactory<SVGAttributes> {}
|
||||
|
||||
//
|
||||
// Top-Level API
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface TopLevelAPI {
|
||||
createClass<P>(spec: ComponentSpec<P, any>): ComponentClass<P>;
|
||||
createElement<P>(type: ComponentClass<P> | string, props: P, ...children: ReactNode[]): ReactElement<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;
|
||||
isValidElement(object: {}): boolean;
|
||||
initializeTouchEvents(shouldUseTouch: boolean): void;
|
||||
}
|
||||
|
||||
//
|
||||
// Component API
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
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;
|
||||
getDOMNode(): Element;
|
||||
isMounted(): boolean;
|
||||
|
||||
props: P;
|
||||
setProps(nextProps: P, callback?: () => any): void;
|
||||
replaceProps(nextProps: P, callback?: () => any): void;
|
||||
}
|
||||
|
||||
interface DOMComponent<P> extends Component<P> {
|
||||
tagName: string;
|
||||
}
|
||||
|
||||
interface HTMLComponent extends DOMComponent<HTMLAttributes> {}
|
||||
interface SVGComponent extends DOMComponent<SVGAttributes> {}
|
||||
|
||||
interface CompositeComponent<P, S> extends Component<P>, ComponentSpec<P, S> {
|
||||
state: S;
|
||||
setState(nextState: S, callback?: () => any): void;
|
||||
replaceState(nextState: S, callback?: () => any): void;
|
||||
forceUpdate(callback?: () => any): void;
|
||||
refs: {
|
||||
[key: string]: Component<any>
|
||||
};
|
||||
}
|
||||
|
||||
//
|
||||
// Component Specs and Lifecycle
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface Mixin<P, S> extends ComponentStatics<P> {
|
||||
mixins?: Mixin<P, S>;
|
||||
statics?: {
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
// Definition methods
|
||||
getInitialState?(): S;
|
||||
|
||||
// Delegate methods
|
||||
componentWillMount?(): void;
|
||||
componentDidMount?(): void;
|
||||
componentWillReceiveProps?(nextProps: P): void;
|
||||
shouldComponentUpdate?(nextProps: P, nextState: S): boolean;
|
||||
componentWillUpdate?(nextProps: P, nextState: S): void;
|
||||
componentDidUpdate?(prevProps: P, prevState: S): void;
|
||||
componentWillUnmount?(): void;
|
||||
}
|
||||
|
||||
interface ComponentSpec<P, S> extends Mixin<P, S> {
|
||||
render(): ReactElement<any>;
|
||||
}
|
||||
|
||||
//
|
||||
// Event System
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface SyntheticEvent {
|
||||
bubbles: boolean;
|
||||
cancelable: boolean;
|
||||
currentTarget: EventTarget;
|
||||
defaultPrevented: boolean;
|
||||
eventPhase: number;
|
||||
isTrusted: boolean;
|
||||
nativeEvent: Event;
|
||||
preventDefault(): void;
|
||||
stopPropagation(): void;
|
||||
target: EventTarget;
|
||||
timeStamp: Date;
|
||||
type: string;
|
||||
}
|
||||
|
||||
interface ClipboardEvent extends SyntheticEvent {
|
||||
clipboardData: DataTransfer;
|
||||
}
|
||||
|
||||
interface KeyboardEvent extends SyntheticEvent {
|
||||
altKey: boolean;
|
||||
charCode: number;
|
||||
ctrlKey: boolean;
|
||||
getModifierState(key: string): boolean;
|
||||
key: string;
|
||||
keyCode: number;
|
||||
locale: string;
|
||||
location: number;
|
||||
metaKey: boolean;
|
||||
repeat: boolean;
|
||||
shiftKey: boolean;
|
||||
which: number;
|
||||
}
|
||||
|
||||
interface FocusEvent extends SyntheticEvent {
|
||||
relatedTarget: EventTarget;
|
||||
}
|
||||
|
||||
interface FormEvent extends SyntheticEvent {
|
||||
}
|
||||
|
||||
interface MouseEvent extends SyntheticEvent {
|
||||
altKey: boolean;
|
||||
button: number;
|
||||
buttons: number;
|
||||
clientX: number;
|
||||
clientY: number;
|
||||
ctrlKey: boolean;
|
||||
getModifierState(key: string): boolean;
|
||||
metaKey: boolean;
|
||||
pageX: number;
|
||||
pageY: number;
|
||||
relatedTarget: EventTarget;
|
||||
screenX: number;
|
||||
screenY: number;
|
||||
shiftKey: boolean;
|
||||
}
|
||||
|
||||
interface TouchEvent extends SyntheticEvent {
|
||||
altKey: boolean;
|
||||
changedTouches: TouchList;
|
||||
ctrlKey: boolean;
|
||||
getModifierState(key: string): boolean;
|
||||
metaKey: boolean;
|
||||
shiftKey: boolean;
|
||||
targetTouches: TouchList;
|
||||
touches: TouchList;
|
||||
}
|
||||
|
||||
interface UIEvent extends SyntheticEvent {
|
||||
detail: number;
|
||||
view: AbstractView;
|
||||
}
|
||||
|
||||
interface WheelEvent extends SyntheticEvent {
|
||||
deltaMode: number;
|
||||
deltaX: number;
|
||||
deltaY: number;
|
||||
deltaZ: number;
|
||||
}
|
||||
|
||||
//
|
||||
// Event Handler Types
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface EventHandler<E extends SyntheticEvent> {
|
||||
(event: E): void;
|
||||
}
|
||||
|
||||
interface ClipboardEventHandler extends EventHandler<ClipboardEvent> {}
|
||||
interface KeyboardEventHandler extends EventHandler<KeyboardEvent> {}
|
||||
interface FocusEventHandler extends EventHandler<FocusEvent> {}
|
||||
interface FormEventHandler extends EventHandler<FormEvent> {}
|
||||
interface MouseEventHandler extends EventHandler<MouseEvent> {}
|
||||
interface TouchEventHandler extends EventHandler<TouchEvent> {}
|
||||
interface UIEventHandler extends EventHandler<UIEvent> {}
|
||||
interface WheelEventHandler extends EventHandler<WheelEvent> {}
|
||||
|
||||
//
|
||||
// Attributes
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export interface ReactAttributes {
|
||||
children?: ReactNode;
|
||||
key?: number | string;
|
||||
ref?: string;
|
||||
|
||||
// Event Attributes
|
||||
onCopy?: ClipboardEventHandler;
|
||||
onCut?: ClipboardEventHandler;
|
||||
onPaste?: ClipboardEventHandler;
|
||||
onKeyDown?: KeyboardEventHandler;
|
||||
onKeyPress?: KeyboardEventHandler;
|
||||
onKeyUp?: KeyboardEventHandler;
|
||||
onFocus?: FocusEventHandler;
|
||||
onBlur?: FocusEventHandler;
|
||||
onChange?: FormEventHandler;
|
||||
onInput?: FormEventHandler;
|
||||
onSubmit?: FormEventHandler;
|
||||
onClick?: MouseEventHandler;
|
||||
onDoubleClick?: MouseEventHandler;
|
||||
onDrag?: MouseEventHandler;
|
||||
onDragEnd?: MouseEventHandler;
|
||||
onDragEnter?: MouseEventHandler;
|
||||
onDragExit?: MouseEventHandler;
|
||||
onDragLeave?: MouseEventHandler;
|
||||
onDragOver?: MouseEventHandler;
|
||||
onDragStart?: MouseEventHandler;
|
||||
onDrop?: MouseEventHandler;
|
||||
onMouseDown?: MouseEventHandler;
|
||||
onMouseEnter?: MouseEventHandler;
|
||||
onMouseLeave?: MouseEventHandler;
|
||||
onMouseMove?: MouseEventHandler;
|
||||
onMouseOut?: MouseEventHandler;
|
||||
onMouseOver?: MouseEventHandler;
|
||||
onMouseUp?: MouseEventHandler;
|
||||
onTouchCancel?: TouchEventHandler;
|
||||
onTouchEnd?: TouchEventHandler;
|
||||
onTouchMove?: TouchEventHandler;
|
||||
onTouchStart?: TouchEventHandler;
|
||||
onScroll?: UIEventHandler;
|
||||
onWheel?: WheelEventHandler;
|
||||
|
||||
dangerouslySetInnerHTML?: {
|
||||
__html: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface CSSProperties {
|
||||
columnCount?: number;
|
||||
flex?: number | string;
|
||||
flexGrow?: number;
|
||||
flexShrink?: number;
|
||||
fontWeight?: number;
|
||||
lineClamp?: number;
|
||||
lineHeight?: number;
|
||||
opacity?: number;
|
||||
order?: number;
|
||||
orphans?: number;
|
||||
widows?: number;
|
||||
zIndex?: number;
|
||||
zoom?: number;
|
||||
|
||||
// SVG-related properties
|
||||
fillOpacity?: number;
|
||||
strokeOpacity?: number;
|
||||
}
|
||||
|
||||
interface HTMLAttributes extends ReactAttributes {
|
||||
accept?: string;
|
||||
acceptCharset?: string;
|
||||
accessKey?: string;
|
||||
action?: string;
|
||||
allowFullScreen?: boolean;
|
||||
allowTransparency?: boolean;
|
||||
alt?: string;
|
||||
async?: boolean;
|
||||
autoComplete?: boolean;
|
||||
autoFocus?: boolean;
|
||||
autoPlay?: boolean;
|
||||
cellPadding?: number | string;
|
||||
cellSpacing?: number | string;
|
||||
charSet?: string;
|
||||
checked?: boolean;
|
||||
classID?: string;
|
||||
className?: string;
|
||||
cols?: number;
|
||||
colSpan?: number;
|
||||
content?: string;
|
||||
contentEditable?: boolean;
|
||||
contextMenu?: string;
|
||||
controls?: any;
|
||||
coords?: string;
|
||||
crossOrigin?: string;
|
||||
data?: string;
|
||||
dateTime?: string;
|
||||
defer?: boolean;
|
||||
dir?: string;
|
||||
disabled?: boolean;
|
||||
download?: any;
|
||||
draggable?: boolean;
|
||||
encType?: string;
|
||||
form?: string;
|
||||
formNoValidate?: boolean;
|
||||
frameBorder?: number | string;
|
||||
height?: number | string;
|
||||
hidden?: boolean;
|
||||
href?: string;
|
||||
hrefLang?: string;
|
||||
htmlFor?: string;
|
||||
httpEquiv?: string;
|
||||
icon?: string;
|
||||
id?: string;
|
||||
label?: string;
|
||||
lang?: string;
|
||||
list?: string;
|
||||
loop?: boolean;
|
||||
manifest?: string;
|
||||
max?: number | string;
|
||||
maxLength?: number;
|
||||
media?: string;
|
||||
mediaGroup?: string;
|
||||
method?: string;
|
||||
min?: number | string;
|
||||
multiple?: boolean;
|
||||
muted?: boolean;
|
||||
name?: string;
|
||||
noValidate?: boolean;
|
||||
open?: boolean;
|
||||
pattern?: string;
|
||||
placeholder?: string;
|
||||
poster?: string;
|
||||
preload?: string;
|
||||
radioGroup?: string;
|
||||
readOnly?: boolean;
|
||||
rel?: string;
|
||||
required?: boolean;
|
||||
role?: string;
|
||||
rows?: number;
|
||||
rowSpan?: number;
|
||||
sandbox?: string;
|
||||
scope?: string;
|
||||
scrollLeft?: number;
|
||||
scrolling?: string;
|
||||
scrollTop?: number;
|
||||
seamless?: boolean;
|
||||
selected?: boolean;
|
||||
shape?: string;
|
||||
size?: number;
|
||||
sizes?: string;
|
||||
span?: number;
|
||||
spellCheck?: boolean;
|
||||
src?: string;
|
||||
srcDoc?: string;
|
||||
srcSet?: string;
|
||||
start?: number;
|
||||
step?: number | string;
|
||||
style?: CSSProperties;
|
||||
tabIndex?: number;
|
||||
target?: string;
|
||||
title?: string;
|
||||
type?: string;
|
||||
useMap?: string;
|
||||
value?: string;
|
||||
width?: number | string;
|
||||
wmode?: string;
|
||||
|
||||
// Non-standard Attributes
|
||||
autoCapitalize?: boolean;
|
||||
autoCorrect?: boolean;
|
||||
property?: string;
|
||||
itemProp?: string;
|
||||
itemScope?: boolean;
|
||||
itemType?: string;
|
||||
}
|
||||
|
||||
interface SVGAttributes extends ReactAttributes {
|
||||
cx?: SVGLength | SVGAnimatedLength;
|
||||
cy?: any;
|
||||
d?: string;
|
||||
dx?: SVGLength | SVGAnimatedLength;
|
||||
dy?: SVGLength | SVGAnimatedLength;
|
||||
fill?: any; // SVGPaint | string
|
||||
fillOpacity?: number | string;
|
||||
fontFamily?: string;
|
||||
fontSize?: number | string;
|
||||
fx?: SVGLength | SVGAnimatedLength;
|
||||
fy?: SVGLength | SVGAnimatedLength;
|
||||
gradientTransform?: SVGTransformList | SVGAnimatedTransformList;
|
||||
gradientUnits?: string;
|
||||
markerEnd?: string;
|
||||
markerMid?: string;
|
||||
markerStart?: string;
|
||||
offset?: number | string;
|
||||
opacity?: number | string;
|
||||
patternContentUnits?: string;
|
||||
patternUnits?: string;
|
||||
points?: string;
|
||||
preserveAspectRatio?: string;
|
||||
r?: SVGLength | SVGAnimatedLength;
|
||||
rx?: SVGLength | SVGAnimatedLength;
|
||||
ry?: SVGLength | SVGAnimatedLength;
|
||||
spreadMethod?: string;
|
||||
stopColor?: any; // SVGColor | string
|
||||
stopOpacity?: number | string;
|
||||
stroke?: any; // SVGPaint
|
||||
strokeDasharray?: string;
|
||||
strokeLinecap?: string;
|
||||
strokeOpacity?: number | string;
|
||||
strokeWidth?: SVGLength | SVGAnimatedLength;
|
||||
textAnchor?: string;
|
||||
transform?: SVGTransformList | SVGAnimatedTransformList;
|
||||
version?: string;
|
||||
viewBox?: string;
|
||||
x1?: SVGLength | SVGAnimatedLength;
|
||||
x2?: SVGLength | SVGAnimatedLength;
|
||||
x?: SVGLength | SVGAnimatedLength;
|
||||
y1?: SVGLength | SVGAnimatedLength;
|
||||
y2?: SVGLength | SVGAnimatedLength
|
||||
y?: SVGLength | SVGAnimatedLength;
|
||||
}
|
||||
|
||||
//
|
||||
// React.DOM
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ReactDOM {
|
||||
// HTML
|
||||
a: HTMLFactory;
|
||||
abbr: HTMLFactory;
|
||||
address: HTMLFactory;
|
||||
area: HTMLFactory;
|
||||
article: HTMLFactory;
|
||||
aside: HTMLFactory;
|
||||
audio: HTMLFactory;
|
||||
b: HTMLFactory;
|
||||
base: HTMLFactory;
|
||||
bdi: HTMLFactory;
|
||||
bdo: HTMLFactory;
|
||||
big: HTMLFactory;
|
||||
blockquote: HTMLFactory;
|
||||
body: HTMLFactory;
|
||||
br: HTMLFactory;
|
||||
button: HTMLFactory;
|
||||
canvas: HTMLFactory;
|
||||
caption: HTMLFactory;
|
||||
cite: HTMLFactory;
|
||||
code: HTMLFactory;
|
||||
col: HTMLFactory;
|
||||
colgroup: HTMLFactory;
|
||||
data: HTMLFactory;
|
||||
datalist: HTMLFactory;
|
||||
dd: HTMLFactory;
|
||||
del: HTMLFactory;
|
||||
details: HTMLFactory;
|
||||
dfn: HTMLFactory;
|
||||
dialog: HTMLFactory;
|
||||
div: HTMLFactory;
|
||||
dl: HTMLFactory;
|
||||
dt: HTMLFactory;
|
||||
em: HTMLFactory;
|
||||
embed: HTMLFactory;
|
||||
fieldset: HTMLFactory;
|
||||
figcaption: HTMLFactory;
|
||||
figure: HTMLFactory;
|
||||
footer: HTMLFactory;
|
||||
form: HTMLFactory;
|
||||
h1: HTMLFactory;
|
||||
h2: HTMLFactory;
|
||||
h3: HTMLFactory;
|
||||
h4: HTMLFactory;
|
||||
h5: HTMLFactory;
|
||||
h6: HTMLFactory;
|
||||
head: HTMLFactory;
|
||||
header: HTMLFactory;
|
||||
hr: HTMLFactory;
|
||||
html: HTMLFactory;
|
||||
i: HTMLFactory;
|
||||
iframe: HTMLFactory;
|
||||
img: HTMLFactory;
|
||||
input: HTMLFactory;
|
||||
ins: HTMLFactory;
|
||||
kbd: HTMLFactory;
|
||||
keygen: HTMLFactory;
|
||||
label: HTMLFactory;
|
||||
legend: HTMLFactory;
|
||||
li: HTMLFactory;
|
||||
link: HTMLFactory;
|
||||
main: HTMLFactory;
|
||||
map: HTMLFactory;
|
||||
mark: HTMLFactory;
|
||||
menu: HTMLFactory;
|
||||
menuitem: HTMLFactory;
|
||||
meta: HTMLFactory;
|
||||
meter: HTMLFactory;
|
||||
nav: HTMLFactory;
|
||||
noscript: HTMLFactory;
|
||||
object: HTMLFactory;
|
||||
ol: HTMLFactory;
|
||||
optgroup: HTMLFactory;
|
||||
option: HTMLFactory;
|
||||
output: HTMLFactory;
|
||||
p: HTMLFactory;
|
||||
param: HTMLFactory;
|
||||
picture: HTMLFactory;
|
||||
pre: HTMLFactory;
|
||||
progress: HTMLFactory;
|
||||
q: HTMLFactory;
|
||||
rp: HTMLFactory;
|
||||
rt: HTMLFactory;
|
||||
ruby: HTMLFactory;
|
||||
s: HTMLFactory;
|
||||
samp: HTMLFactory;
|
||||
script: HTMLFactory;
|
||||
section: HTMLFactory;
|
||||
select: HTMLFactory;
|
||||
small: HTMLFactory;
|
||||
source: HTMLFactory;
|
||||
span: HTMLFactory;
|
||||
strong: HTMLFactory;
|
||||
style: HTMLFactory;
|
||||
sub: HTMLFactory;
|
||||
summary: HTMLFactory;
|
||||
sup: HTMLFactory;
|
||||
table: HTMLFactory;
|
||||
tbody: HTMLFactory;
|
||||
td: HTMLFactory;
|
||||
textarea: HTMLFactory;
|
||||
tfoot: HTMLFactory;
|
||||
th: HTMLFactory;
|
||||
thead: HTMLFactory;
|
||||
time: HTMLFactory;
|
||||
title: HTMLFactory;
|
||||
tr: HTMLFactory;
|
||||
track: HTMLFactory;
|
||||
u: HTMLFactory;
|
||||
ul: HTMLFactory;
|
||||
"var": HTMLFactory;
|
||||
video: HTMLFactory;
|
||||
wbr: HTMLFactory;
|
||||
|
||||
// SVG
|
||||
circle: SVGFactory;
|
||||
defs: SVGFactory;
|
||||
ellipse: SVGFactory;
|
||||
g: SVGFactory;
|
||||
line: SVGFactory;
|
||||
linearGradient: SVGFactory;
|
||||
mask: SVGFactory;
|
||||
path: SVGFactory;
|
||||
pattern: SVGFactory;
|
||||
polygon: SVGFactory;
|
||||
polyline: SVGFactory;
|
||||
radialGradient: SVGFactory;
|
||||
rect: SVGFactory;
|
||||
stop: SVGFactory;
|
||||
svg: SVGFactory;
|
||||
text: SVGFactory;
|
||||
tspan: SVGFactory;
|
||||
}
|
||||
|
||||
//
|
||||
// React.PropTypes
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface Validator<T> {
|
||||
(object: T, key: string, componentName: string): Error;
|
||||
}
|
||||
|
||||
interface Requireable<T> extends Validator<T> {
|
||||
isRequired: Validator<T>;
|
||||
}
|
||||
|
||||
interface ValidationMap<T> {
|
||||
[key: string]: Validator<T>;
|
||||
}
|
||||
|
||||
interface ReactPropTypes {
|
||||
any: Requireable<any>;
|
||||
array: Requireable<any>;
|
||||
bool: Requireable<any>;
|
||||
func: Requireable<any>;
|
||||
number: Requireable<any>;
|
||||
object: Requireable<any>;
|
||||
string: Requireable<any>;
|
||||
node: Requireable<any>;
|
||||
element: Requireable<any>;
|
||||
instanceOf(expectedClass: {}): Requireable<any>;
|
||||
oneOf(types: any[]): Requireable<any>;
|
||||
oneOfType(types: Validator<any>[]): Requireable<any>;
|
||||
arrayOf(type: Validator<any>): Requireable<any>;
|
||||
objectOf(type: Validator<any>): Requireable<any>;
|
||||
shape(type: ValidationMap<any>): Requireable<any>;
|
||||
}
|
||||
|
||||
//
|
||||
// React.Children
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ReactChildren {
|
||||
map<T>(children: ReactNode, fn: (child: ReactChild) => T): { [key:string]: T };
|
||||
forEach(children: ReactNode, fn: (child: ReactChild) => any): void;
|
||||
count(children: ReactNode): number;
|
||||
only(children: ReactNode): ReactChild;
|
||||
}
|
||||
|
||||
//
|
||||
// React.addons
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ClassSet {
|
||||
[key: string]: boolean;
|
||||
}
|
||||
|
||||
//
|
||||
// React.addons (Transitions)
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface TransitionGroupProps {
|
||||
component?: ReactType;
|
||||
childFactory?: (child: ReactElement<any>) => ReactElement<any>;
|
||||
}
|
||||
|
||||
interface CSSTransitionGroupProps extends TransitionGroupProps {
|
||||
transitionName: string;
|
||||
transitionAppear?: boolean;
|
||||
transitionEnter?: boolean;
|
||||
transitionLeave?: boolean;
|
||||
}
|
||||
|
||||
interface CSSTransitionGroup extends ComponentClass<CSSTransitionGroupProps> {}
|
||||
interface TransitionGroup extends ComponentClass<TransitionGroupProps> {}
|
||||
|
||||
//
|
||||
// React.addons (Mixins)
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface ReactLink<T> {
|
||||
value: T;
|
||||
requestChange(newValue: T): void;
|
||||
}
|
||||
|
||||
interface LinkedStateMixin extends Mixin<any, any> {
|
||||
linkState<T>(key: string): ReactLink<T>;
|
||||
}
|
||||
|
||||
interface PureRenderMixin extends Mixin<any, any> {
|
||||
}
|
||||
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
|
||||
interface ReactPerf {
|
||||
start(): void;
|
||||
stop(): void;
|
||||
printInclusive(measurements: Measurements[]): void;
|
||||
printExclusive(measurements: Measurements[]): void;
|
||||
printWasted(measurements: Measurements[]): void;
|
||||
printDOM(measurements: Measurements[]): void;
|
||||
getLastMeasurements(): Measurements[];
|
||||
}
|
||||
|
||||
//
|
||||
// React.addons.TestUtils
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface MockedComponentClass {
|
||||
new(): any;
|
||||
}
|
||||
|
||||
interface ReactTestUtils {
|
||||
Simulate: Simulate;
|
||||
|
||||
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: ReactType): 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: Component<any>, fn: (i: Component<any>) => boolean): Component<any>;
|
||||
|
||||
scryRenderedDOMComponentsWithClass(tree: Component<any>, className: string): DOMComponent<any>[];
|
||||
findRenderedDOMComponentWithClass(tree: Component<any>, className: string): DOMComponent<any>;
|
||||
|
||||
scryRenderedDOMComponentsWithTag(tree: Component<any>, tagName: string): DOMComponent<any>[];
|
||||
findRenderedDOMComponentWithTag(tree: Component<any>, tagName: string): DOMComponent<any>;
|
||||
|
||||
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 {
|
||||
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;
|
||||
(descriptor: Component<any>, eventData?: SyntheticEventData): void;
|
||||
}
|
||||
|
||||
interface Simulate {
|
||||
blur: EventSimulator;
|
||||
change: EventSimulator;
|
||||
click: EventSimulator;
|
||||
cut: EventSimulator;
|
||||
doubleClick: EventSimulator;
|
||||
drag: EventSimulator;
|
||||
dragEnd: EventSimulator;
|
||||
dragEnter: EventSimulator;
|
||||
dragExit: EventSimulator;
|
||||
dragLeave: EventSimulator;
|
||||
dragOver: EventSimulator;
|
||||
dragStart: EventSimulator;
|
||||
drop: EventSimulator;
|
||||
focus: EventSimulator;
|
||||
input: EventSimulator;
|
||||
keyDown: EventSimulator;
|
||||
keyPress: EventSimulator;
|
||||
keyUp: EventSimulator;
|
||||
mouseDown: EventSimulator;
|
||||
mouseEnter: EventSimulator;
|
||||
mouseLeave: EventSimulator;
|
||||
mouseMove: EventSimulator;
|
||||
mouseOut: EventSimulator;
|
||||
mouseOver: EventSimulator;
|
||||
mouseUp: EventSimulator;
|
||||
paste: EventSimulator;
|
||||
scroll: EventSimulator;
|
||||
submit: EventSimulator;
|
||||
touchCancel: EventSimulator;
|
||||
touchEnd: EventSimulator;
|
||||
touchMove: EventSimulator;
|
||||
touchStart: EventSimulator;
|
||||
wheel: EventSimulator;
|
||||
}
|
||||
|
||||
//
|
||||
// react Exports
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface Exports extends TopLevelAPI {
|
||||
DOM: ReactDOM;
|
||||
PropTypes: ReactPropTypes;
|
||||
Children: ReactChildren;
|
||||
}
|
||||
|
||||
//
|
||||
// react/addons Exports
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface AddonsExports extends Exports {
|
||||
addons: {
|
||||
CSSTransitionGroup: CSSTransitionGroup;
|
||||
LinkedStateMixin: LinkedStateMixin;
|
||||
PureRenderMixin: PureRenderMixin;
|
||||
TransitionGroup: TransitionGroup;
|
||||
|
||||
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: ClassSet): string;
|
||||
cloneWithProps<P>(element: ReactElement<P>, props: P): ReactElement<P>;
|
||||
|
||||
update(value: any[], spec: UpdateArraySpec): any[];
|
||||
update(value: {}, spec: UpdateSpec): any;
|
||||
|
||||
// Development tools
|
||||
Perf: ReactPerf;
|
||||
TestUtils: ReactTestUtils;
|
||||
};
|
||||
}
|
||||
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
declare module "react" {
|
||||
var exports: React.Exports;
|
||||
export = exports;
|
||||
}
|
||||
|
||||
declare module "react/addons" {
|
||||
var exports: React.AddonsExports;
|
||||
export = exports;
|
||||
}
|
||||
|
||||
@@ -1,133 +0,0 @@
|
||||
/// <reference path="react-addons-0.11.d.ts" />
|
||||
import React = require("react/addons-0.11");
|
||||
|
||||
var PropTypesSpecification: React.Specification<any, any> = {
|
||||
propTypes: {
|
||||
// You can declare that a prop is a specific JS primitive. By default, these
|
||||
// are all optional.
|
||||
optionalArray: React.PropTypes.array,
|
||||
optionalBool: React.PropTypes.bool,
|
||||
optionalFunc: React.PropTypes.func,
|
||||
optionalNumber: React.PropTypes.number,
|
||||
optionalObject: React.PropTypes.object,
|
||||
optionalString: React.PropTypes.string,
|
||||
|
||||
// Anything that can be rendered: numbers, strings, components or an array
|
||||
// containing these types.
|
||||
optionalRenderable: React.PropTypes.renderable,
|
||||
|
||||
// A React component.
|
||||
optionalComponent: React.PropTypes.component,
|
||||
|
||||
// You can also declare that a prop is an instance of a class. This uses
|
||||
// JS's instanceof operator.
|
||||
optionalMessage: React.PropTypes.instanceOf(Date),
|
||||
|
||||
// You can ensure that your prop is limited to specific values by treating
|
||||
// it as an enum.
|
||||
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
|
||||
|
||||
// An object that could be one of many types
|
||||
optionalUnion: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.number,
|
||||
React.PropTypes.instanceOf(Date)
|
||||
]),
|
||||
|
||||
// An array of a certain type
|
||||
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
|
||||
|
||||
// An object with property values of a certain type
|
||||
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
|
||||
|
||||
// An object taking on a particular shape
|
||||
optionalObjectWithShape: React.PropTypes.shape({
|
||||
color: React.PropTypes.string,
|
||||
fontSize: React.PropTypes.number
|
||||
}),
|
||||
|
||||
// You can chain any of the above with `isRequired` to make sure a warning
|
||||
// is shown if the prop isn't provided.
|
||||
requiredFunc: React.PropTypes.func.isRequired,
|
||||
|
||||
// A value of any data type
|
||||
requiredAny: React.PropTypes.any.isRequired,
|
||||
|
||||
// You can also specify a custom validator. It should return an Error
|
||||
// object if the validation fails. Don't `console.warn` or throw, as this
|
||||
// won't work inside `oneOfType`.
|
||||
customProp: function(props, propName, componentName) {
|
||||
if (!/matchme/.test(props[propName])) {
|
||||
return new Error('Validation failed!');
|
||||
}
|
||||
return null;
|
||||
}
|
||||
},
|
||||
render: (): React.Descriptor<any> => {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
React.createClass(PropTypesSpecification);
|
||||
|
||||
var mountNode: Element;
|
||||
|
||||
var HelloMessage = React.createClass({displayName: 'HelloMessage',
|
||||
render: function() {
|
||||
return React.DOM.div(null, "Hello ", (<React.Component<{name: string}, any>>this).props.name);
|
||||
}
|
||||
});
|
||||
|
||||
React.renderComponent(HelloMessage({name: "John"}), mountNode);
|
||||
|
||||
var Timer = React.createClass({displayName: 'Timer',
|
||||
getInitialState: function() {
|
||||
return {secondsElapsed: 0};
|
||||
},
|
||||
tick: function() {
|
||||
(<React.Component<any, {secondsElapsed: number}>>this).setState({
|
||||
secondsElapsed: (<React.Component<any, {secondsElapsed: number}>>this).state.secondsElapsed + 1
|
||||
});
|
||||
},
|
||||
componentDidMount: function() {
|
||||
this.interval = setInterval(this.tick, 1000);
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
render: function() {
|
||||
return React.DOM.div(
|
||||
null,
|
||||
"Seconds Elapsed: ",
|
||||
(<React.Component<any, {secondsElapsed: number}>>this).state.secondsElapsed
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
React.renderComponent(Timer(null), mountNode);
|
||||
|
||||
// TestUtils
|
||||
var that: React.Component<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"});
|
||||
|
||||
var GoodbyeMessage = React.createClass({displayName: 'GoodbyeMessage',
|
||||
render: function() {
|
||||
return React.DOM.div(null, "Goodbye ", (<React.Component<{name: string}, any>>this).props.name);
|
||||
}
|
||||
});
|
||||
React.addons.TestUtils.renderIntoDocument(GoodbyeMessage({name: "John"}));
|
||||
|
||||
var isImportant: boolean;
|
||||
var isRead: boolean;
|
||||
var cx = React.addons.classSet;
|
||||
var classes = cx({
|
||||
'message': true,
|
||||
'message-important': isImportant,
|
||||
'message-read': isRead
|
||||
});
|
||||
|
||||
|
||||
|
||||
172
react/legacy/react-addons-0.11.d.ts
vendored
172
react/legacy/react-addons-0.11.d.ts
vendored
@@ -1,172 +0,0 @@
|
||||
// Type definitions for React with Addons 0.11.2
|
||||
// Project: http://facebook.github.io/react/
|
||||
// Definitions by: Asana <https://asana.com>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
|
||||
/// <reference path="react-0.11.d.ts" />
|
||||
|
||||
declare module "react/addons-0.11" {
|
||||
export = React;
|
||||
}
|
||||
|
||||
declare module React {
|
||||
export var addons: {
|
||||
classSet: (classes: {[key: string]: boolean}) => string;
|
||||
cloneWithProps: CloneWithProps<any>;
|
||||
CSSTransitionGroup: Factory<CSSTransitionGroupProps>;
|
||||
LinkedStateMixin: LinkedStateMixin<any, any>;
|
||||
Perf: Perf;
|
||||
PureRenderMixin: Mixin<any, any>;
|
||||
TestUtils: TestUtils;
|
||||
TransitionGroup: Factory<any>;
|
||||
update(object: Object, changes: Object): Object;
|
||||
};
|
||||
|
||||
export interface CloneWithProps<P> {
|
||||
(instance: Descriptor<P>, extraProps?: P): Descriptor<P>;
|
||||
}
|
||||
|
||||
export interface ReactLink<T> {
|
||||
value: T;
|
||||
requestChange(newValue: T): void;
|
||||
}
|
||||
|
||||
export interface LinkedStateMixin<P, S> extends Mixin<P, S> {
|
||||
linkState<T>(key: string): ReactLink<T>;
|
||||
}
|
||||
|
||||
export interface ComponentPerfContext {
|
||||
current: string;
|
||||
owner: string;
|
||||
}
|
||||
|
||||
export interface CSSTransitionGroupProps {
|
||||
transitionName: string;
|
||||
}
|
||||
|
||||
export interface TransitionsSpecification<P, S> extends Specification<P, S> {
|
||||
componentWillEnter?(callback: () => void): void;
|
||||
componentDidEnter?(): void;
|
||||
componentWillLeave?(callback: () => void): void;
|
||||
componentDidLeave?(): void;
|
||||
}
|
||||
|
||||
export interface NumericPerfContext {
|
||||
[key: string]: number;
|
||||
}
|
||||
|
||||
export interface Measurements {
|
||||
exclusive: NumericPerfContext;
|
||||
inclusive: NumericPerfContext;
|
||||
render: NumericPerfContext;
|
||||
counts: NumericPerfContext;
|
||||
writes: NumericPerfContext;
|
||||
displayNames: {
|
||||
[key: string]: ComponentPerfContext;
|
||||
};
|
||||
totalTime: number;
|
||||
}
|
||||
|
||||
export interface Perf {
|
||||
start(): void;
|
||||
stop(): void;
|
||||
printInclusive(measurements: Measurements[]): void;
|
||||
printExclusive(measurements: Measurements[]): void;
|
||||
printWasted(measurements: Measurements[]): void;
|
||||
printDOM(measurements: Measurements[]): void;
|
||||
getLastMeasurements(): Measurements[];
|
||||
}
|
||||
|
||||
export interface TestUtils {
|
||||
Simulate: Simulate;
|
||||
renderIntoDocument(instance: Descriptor<any>): Descriptor<any>;
|
||||
mockComponent(componentClass: Factory<any>, mockTagName?: string): TestUtils;
|
||||
isDescriptorOfType(descriptor: Descriptor<any>, componentClass: Factory<any>): boolean;
|
||||
isDOMComponent(instance: Descriptor<any>): boolean;
|
||||
isCompositeComponent(instance: Descriptor<any>): boolean;
|
||||
isCompositeComponentWithType(instance: Descriptor<any>, componentClass: Function): boolean;
|
||||
isTextComponent(instance: Descriptor<any>): boolean;
|
||||
findAllInRenderedTree(tree: Descriptor<any>, test: Function): Descriptor<any>[];
|
||||
scryRenderedDOMComponentsWithClass(tree: Descriptor<any>, className: string): Descriptor<any>[];
|
||||
findRenderedDOMComponentWithClass(tree: Descriptor<any>, className: string): Descriptor<any>;
|
||||
scryRenderedDOMComponentsWithTag(tree: Descriptor<any>, className: string): Descriptor<any>[];
|
||||
findRenderedDOMComponentWithTag(tree: Descriptor<any>, tagName: string): Descriptor<any>;
|
||||
scryFindRenderedComponentsWithTag(tree: Descriptor<any>, componentClass: Function): Descriptor<any>[];
|
||||
findRenderedComponentWithType(tree: Descriptor<any>, componentClass: Function): Descriptor<any>;
|
||||
}
|
||||
|
||||
export 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;
|
||||
}
|
||||
|
||||
export interface EventSimulator {
|
||||
(element: Element, eventData?: SyntheticEventData): void;
|
||||
(descriptor: Descriptor<any>, eventData?: SyntheticEventData): void;
|
||||
}
|
||||
|
||||
export interface Simulate {
|
||||
blur: EventSimulator;
|
||||
change: EventSimulator;
|
||||
click: EventSimulator;
|
||||
cut: EventSimulator;
|
||||
doubleClick: EventSimulator;
|
||||
drag: EventSimulator;
|
||||
dragEnd: EventSimulator;
|
||||
dragEnter: EventSimulator;
|
||||
dragExit: EventSimulator;
|
||||
dragLeave: EventSimulator;
|
||||
dragOver: EventSimulator;
|
||||
dragStart: EventSimulator;
|
||||
drop: EventSimulator;
|
||||
focus: EventSimulator;
|
||||
input: EventSimulator;
|
||||
keyDown: EventSimulator;
|
||||
keyPress: EventSimulator;
|
||||
keyUp: EventSimulator;
|
||||
mouseDown: EventSimulator;
|
||||
mouseEnter: EventSimulator;
|
||||
mouseLeave: EventSimulator;
|
||||
mouseMove: EventSimulator;
|
||||
mouseOut: EventSimulator;
|
||||
mouseOver: EventSimulator;
|
||||
mouseUp: EventSimulator;
|
||||
paste: EventSimulator;
|
||||
scroll: EventSimulator;
|
||||
submit: EventSimulator;
|
||||
touchCancel: EventSimulator;
|
||||
touchEnd: EventSimulator;
|
||||
touchMove: EventSimulator;
|
||||
touchStart: EventSimulator;
|
||||
wheel: EventSimulator;
|
||||
}
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
/// <reference path="react-0.12.d.ts" />
|
||||
import React = require("react/addons");
|
||||
|
||||
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);
|
||||
React.addons.TestUtils.Simulate.change(node);
|
||||
React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"});
|
||||
|
||||
interface GreetingProps {
|
||||
name: string;
|
||||
}
|
||||
interface GreetingState {
|
||||
morning: boolean;
|
||||
}
|
||||
interface Greeting extends React.CompositeComponent<GreetingProps, GreetingState> {
|
||||
}
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
var root = React.addons.TestUtils.renderIntoDocument(
|
||||
React.createElement(Greeting, {name: "John"}));
|
||||
var greeting = <Greeting>React.addons.TestUtils
|
||||
.findRenderedComponentWithType(root, Greeting);
|
||||
greeting.setState({
|
||||
morning: false
|
||||
});
|
||||
Reference in New Issue
Block a user