From 28cf35055ac2555f4532c525332ba42e86673c74 Mon Sep 17 00:00:00 2001 From: James Brantly Date: Mon, 26 Jan 2015 16:51:36 -0500 Subject: [PATCH] Adding early support for React v0.13.0 --- react/react-0.13.0-tests.ts | 351 +++++++++++ react/react-0.13.0.d.ts | 958 +++++++++++++++++++++++++++++ react/react-addons-0.13.0-tests.ts | 68 ++ 3 files changed, 1377 insertions(+) create mode 100644 react/react-0.13.0-tests.ts create mode 100644 react/react-0.13.0.d.ts create mode 100644 react/react-addons-0.13.0-tests.ts diff --git a/react/react-0.13.0-tests.ts b/react/react-0.13.0-tests.ts new file mode 100644 index 000000000..26b2d4fb1 --- /dev/null +++ b/react/react-0.13.0-tests.ts @@ -0,0 +1,351 @@ +/// + +// requiring react/addons instead of react so react.d.ts doesn't get picked up +import React = require('react/addons'); + +interface Props { + hello: string; + world?: string; + foo: number; + bar: boolean; +} + +interface State { + inputValue?: string; + seconds?: number; +} + +interface Context { + someValue?: string; +} + +interface ChildContext { + someOtherValue: string; +} + +interface MyComponent extends React.Component { + 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 = React.createClass({ + getDefaultProps: () => { + return { + hello: undefined, + world: "peace", + foo: undefined, + bar: undefined + }; + }, + getInitialState: () => { + return { + inputValue: this.context.someValue, + seconds: this.props.foo + }; + }, + reset: () => { + this.replaceState(this.getInitialState()); + }, + render: () => { + return React.DOM.div(null, + React.DOM.input({ + ref: INPUT_REF, + value: this.state.inputValue + })); + } +}); + +class ModernComponent extends React.Component implements React.ChildContextProvider { + constructor(props: Props, context: Context) { + super(props, context); + this.state = { + inputValue: context.someValue, + seconds: props.foo + }; + } + + // this should work but doesn't. Due to TypeScript bug? + //static propTypes = { + // foo: React.PropTypes.number + //} + + //static contextTypes = { + // someValue: React.PropTypes.string + //} + + //static childContextTypes = { + // someOtherValue: React.PropTypes.string + //} + + getChildContext() { + return { + someOtherValue: 'foo' + } + } + + state = { + inputValue: this.context.someValue, + seconds: this.props.foo + } + + reset() { + this.setState({ + inputValue: this.context.someValue, + seconds: this.props.foo + }); + } + + render() { + return React.DOM.div(null, + React.DOM.input({ + ref: INPUT_REF, + value: this.state.inputValue + })); + } +} + +ModernComponent.propTypes = { + foo: React.PropTypes.string, +} + +ModernComponent.contextTypes = { + someValue: React.PropTypes.string +} + +ModernComponent.childContextTypes = { + someOtherValue: React.PropTypes.string +} + +var reactElement: React.ReactElement; +reactElement = React.createElement(reactClass, props); +reactElement = React.createElement(ModernComponent, props); + +var reactFactory: React.ComponentFactory; +reactFactory = React.createFactory(reactClass); +reactFactory = React.createFactory(ModernComponent); + +var component: React.Component = + React.render(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); +var domNode: Element = React.findDOMNode(component); + +// +// React Elements +// -------------------------------------------------------------------------- + +var type = reactElement.type; +var elementProps: Props = reactElement.props; +var key = reactElement.key; +var ref: string = reactElement.ref; +var factoryElement: React.ReactElement = reactFactory(elementProps); + +// +// React Components +// -------------------------------------------------------------------------- + +var displayName: string = reactClass.displayName; +var defaultProps: Props = reactClass.getDefaultProps(); +var propTypes: React.ValidationMap = reactClass.propTypes; + +// +// Component API +// -------------------------------------------------------------------------- + +// modern +var initialState: State = component.state; +component.setState({ inputValue: "!!!" }); +component.forceUpdate(); + +// classic +var classicComponent = >component; + +var htmlElement: Element = classicComponent.getDOMNode(); +var divElement: HTMLDivElement = classicComponent.getDOMNode(); +var isMounted: boolean = classicComponent.isMounted(); +classicComponent.setProps(elementProps); +classicComponent.replaceProps(props); +classicComponent.replaceState({ inputValue: "???", seconds: 60 }); + +var inputRef: React.HTMLComponent = + component.refs[INPUT_REF]; +var value: string = inputRef.getDOMNode().value; + +var myComponent = component; +myComponent.reset(); + +// +// 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" + } +}; +React.DOM.div(htmlAttr); +React.DOM.span(htmlAttr); +React.DOM.input(htmlAttr); + +// +// React.PropTypes +// -------------------------------------------------------------------------- + +var PropTypesSpecification: React.ComponentSpec = { + 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; + } +}; + +// +// ContextTypes +// -------------------------------------------------------------------------- + +var ContextTypesSpecification: React.ComponentSpec = { + contextTypes: { + 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(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.Component<{}, TimerState, any> { +} +var Timer = React.createClass({ + displayName: "Timer", + getInitialState: () => { + return { secondsElapsed: 0 }; + }, + tick: () => { + var me = this; + me.setState({ + secondsElapsed: me.state.secondsElapsed + 1 + }); + }, + componentDidMount: () => { + this.interval = setInterval(this.tick, 1000); + }, + componentWillUnmount: () => { + clearInterval(this.interval); + }, + render: () => { + var me = this; + return React.DOM.div( + null, + "Seconds Elapsed: ", + me.state.secondsElapsed + ); + } +}); +var mountNode: Element; +React.render(React.createElement(Timer, null), mountNode); diff --git a/react/react-0.13.0.d.ts b/react/react-0.13.0.d.ts new file mode 100644 index 000000000..b5a1d1495 --- /dev/null +++ b/react/react-0.13.0.d.ts @@ -0,0 +1,958 @@ +// Type definitions for React 0.13.0 +// Project: http://facebook.github.io/react/ +// Definitions by: Asana , AssureSign +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +declare module React { + // + // React Elements + // ---------------------------------------------------------------------- + + type ReactType = ComponentClass | string; + + interface ReactElement

{ + type: ComponentClass | string; + props: P; + key: number | string; + ref: string; + } + + interface ReactHTMLElement extends ReactElement {} + interface ReactSVGElement extends ReactElement {} + + // + // React Nodes + // http://facebook.github.io/react/docs/glossary.html + // ---------------------------------------------------------------------- + + type ReactText = string | number; + type ReactChild = ReactElement | ReactText; + + // Should be Array but type aliases cannot be recursive + type ReactFragment = Array; + type ReactNode = ReactChild | ReactFragment | boolean; + + // + // React Components + // ---------------------------------------------------------------------- + + interface ComponentLifecycle { + componentWillMount?(): void; + componentDidMount?(): void; + componentWillReceiveProps?(nextProps: P, nextContext: C): void; + shouldComponentUpdate?(nextProps: P, nextState: S, nextContext: C): boolean; + componentWillUpdate?(nextProps: P, nextState: S, nextContext: C): void; + componentDidUpdate?(prevProps: P, prevState: S, prevContext: C): void; + componentWillUnmount?(): void; + } + + // "modern" ES6 classes + class Component implements ComponentLifecycle { + constructor(props: P, context: C); + // static members can't be type checked with generics. However, see ComponentClass + static defaultProps: any; + static propTypes: ValidationMap; + static contextTypes: ValidationMap; + static childContextTypes: ValidationMap; + static displayName: string; + setState(state: S, callback?: () => any): void; + forceUpdate(): void; + props: P; + state: S; + context: C; + refs: { + [key: string]: Component + }; + } + + interface ComponentClass { + new (props: P, context: C): Component; + // can cast to get type checking for generics if desired + defaultProps: P; + getDefaultProps?(): P; + propTypes: ValidationMap

; + contextTypes: ValidationMap; + childContextTypes: ValidationMap; + displayName: string; + } + + // "classic" createClass + class ClassicComponent extends Component { + replaceState(nextState: S, callback?: () => any): void; + getDOMNode(): TElement; + getDOMNode(): Element; + isMounted(): boolean; + getInitialState(): S; + setProps(nextProps: P, callback?: () => any): void; + replaceProps(nextProps: P, callback?: () => any): void; + } + + interface ClassicComponentClass extends ComponentClass { + new (props: P, context: C): ClassicComponent; + } + + interface ChildContextProvider { + getChildContext: () => C; + } + + // + // ReactElement Factories + // ---------------------------------------------------------------------- + + interface ComponentFactory

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

; + } + + interface HTMLFactory extends ComponentFactory {} + interface SVGFactory extends ComponentFactory {} + + // + // Top-Level API + // ---------------------------------------------------------------------- + + interface TopLevelAPI { + createClass(spec: ComponentSpec): ClassicComponentClass; + createElement

(type: ComponentClass | string, props: P, ...children: ReactNode[]): ReactElement

; + createFactory

(type: ComponentClass | string): ComponentFactory

; + render(element: ReactElement

, container: Element, callback?: () => any): Component; + unmountComponentAtNode(container: Element): boolean; + renderToString(element: ReactElement): string; + renderToStaticMarkup(element: ReactElement): string; + isValidElement(object: {}): boolean; + initializeTouchEvents(shouldUseTouch: boolean): void; + findDOMNode(component: Component): Element; + findDOMNode(component: Component): TElement; + } + + // + // Component API + // ---------------------------------------------------------------------- + + class DOMComponent

extends ClassicComponent { + tagName: string; + } + + interface HTMLComponent extends DOMComponent {} + interface SVGComponent extends DOMComponent {} + + // + // Component Specs and Lifecycle + // ---------------------------------------------------------------------- + + interface Mixin extends ComponentLifecycle { + mixins?: Mixin; + statics?: { + [key: string]: any; + }; + + displayName?: string; + propTypes?: ValidationMap; + contextTypes?: ValidationMap; + childContextTypes?: ValidationMap + + getInitialState?(): S; + getDefaultProps?(): P; + } + + interface ComponentSpec extends Mixin { + render(): ReactElement; + } + + // + // 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 { + (event: E): void; + } + + interface ClipboardEventHandler extends EventHandler {} + interface KeyboardEventHandler extends EventHandler {} + interface FocusEventHandler extends EventHandler {} + interface FormEventHandler extends EventHandler {} + interface MouseEventHandler extends EventHandler {} + interface TouchEventHandler extends EventHandler {} + interface UIEventHandler extends EventHandler {} + interface WheelEventHandler extends EventHandler {} + + // + // Attributes + // ---------------------------------------------------------------------- + + 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 { + (object: T, key: string, componentName: string): Error; + } + + interface Requireable extends Validator { + isRequired: Validator; + } + + interface ValidationMap { + [key: string]: Validator; + } + + interface ReactPropTypes { + any: Requireable; + array: Requireable; + bool: Requireable; + func: Requireable; + number: Requireable; + object: Requireable; + string: Requireable; + node: Requireable; + element: Requireable; + instanceOf(expectedClass: {}): Requireable; + oneOf(types: any[]): Requireable; + oneOfType(types: Validator[]): Requireable; + arrayOf(type: Validator): Requireable; + objectOf(type: Validator): Requireable; + shape(type: ValidationMap): Requireable; + } + + // + // React.Children + // ---------------------------------------------------------------------- + + interface ReactChildren { + map(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) => ReactElement; + } + + interface CSSTransitionGroupProps extends TransitionGroupProps { + transitionName: string; + transitionAppear?: boolean; + transitionEnter?: boolean; + transitionLeave?: boolean; + } + + interface CSSTransitionGroup extends ComponentClass {} + interface TransitionGroup extends ComponentClass {} + + // + // React.addons (Mixins) + // ---------------------------------------------------------------------- + + interface ReactLink { + value: T; + requestChange(newValue: T): void; + } + + interface LinkedStateMixin extends Mixin { + linkState(key: string): ReactLink; + } + + interface PureRenderMixin extends Mixin { + } + + // + // 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

(element: ReactElement

): Component; + renderIntoDocument>(element: ReactElement): C; + + mockComponent(mocked: MockedComponentClass, mockTagName?: string): ReactTestUtils; + + isElementOfType(element: ReactElement, type: ReactType): boolean; + isDOMComponent(instance: Component): boolean; + isCompositeComponent(instance: Component): boolean; + isCompositeComponentWithType(instance: Component, type: ComponentClass): boolean; + isTextComponent(instance: Component): boolean; + + findAllInRenderedTree(tree: Component, fn: (i: Component) => boolean): Component; + + scryRenderedDOMComponentsWithClass(tree: Component, className: string): DOMComponent[]; + findRenderedDOMComponentWithClass(tree: Component, className: string): DOMComponent; + + scryRenderedDOMComponentsWithTag(tree: Component, tagName: string): DOMComponent[]; + findRenderedDOMComponentWithTag(tree: Component, tagName: string): DOMComponent; + + scryRenderedComponentsWithType( + tree: Component, type: ComponentClass): Component[]; + scryRenderedComponentsWithType>( + tree: Component, type: ComponentClass): C[]; + + findRenderedComponentWithType( + tree: Component, type: ComponentClass): Component; + findRenderedComponentWithType>( + tree: Component, type: ComponentClass): 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, 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; + Component: ComponentClass; + } + + // + // react/addons Exports + // ---------------------------------------------------------------------- + + interface AddonsExports extends Exports { + addons: { + CSSTransitionGroup: CSSTransitionGroup; + LinkedStateMixin: LinkedStateMixin; + PureRenderMixin: PureRenderMixin; + TransitionGroup: TransitionGroup; + + batchedUpdates(callback: (a: A, b: B) => any, a: A, b: B): void; + batchedUpdates(callback: (a: A) => any, a: A): void; + batchedUpdates(callback: () => any): void; + + classSet(cx: ClassSet): string; + cloneWithProps

(element: ReactElement

, props: P): ReactElement

; + + 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; +} + diff --git a/react/react-addons-0.13.0-tests.ts b/react/react-addons-0.13.0-tests.ts new file mode 100644 index 000000000..6081a9824 --- /dev/null +++ b/react/react-addons-0.13.0-tests.ts @@ -0,0 +1,68 @@ +/// +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 => null + }), + childFactory: (c) => c, + transitionName: "transition", + transitionAppear: false, + transitionEnter: true, + transitionLeave: true +}); + +// +// React.addons.TestUtils +// -------------------------------------------------------------------------- + +var that: React.Component; +var node = React.findDOMNode(that.refs["input"]); +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.Component { +} +var Greeting = React.createClass({ + displayName: "Greeting", + getInitialState: function() { + return {morning: true}; + }, + render: function() { + var me = 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 = React.addons.TestUtils + .findRenderedComponentWithType(root, Greeting); +greeting.setState({ + morning: false +});