From b278701fe3333e17b5f6d66a0dccbfee3be16963 Mon Sep 17 00:00:00 2001 From: Eric Traut Date: Thu, 21 Sep 2017 17:14:15 -0700 Subject: [PATCH] Removed custom react.d.ts and react-dom.d.ts and switched to public versions. --- package.json | 2 + src/common/Types.ts | 84 +- src/native-common/Button.tsx | 8 +- src/native-common/FrontLayerViewManager.tsx | 2 +- src/native-common/GestureView.tsx | 14 +- src/native-common/Image.tsx | 4 +- src/native-common/ModalContainer.tsx | 2 +- src/native-common/ScrollView.tsx | 4 +- src/native-common/TextInput.tsx | 14 +- src/native-common/ViewBase.tsx | 2 +- .../listAnimations/AnimateListEdits.tsx | 6 +- src/typings/react-dom.d.ts | 71 -- src/typings/react-native.d.ts | 34 +- src/typings/react.d.ts | 993 ------------------ src/web/Button.tsx | 2 +- src/web/CustomScrollbar.ts | 12 +- src/web/GestureView.tsx | 6 +- src/web/Image.tsx | 2 +- src/web/Link.tsx | 4 +- src/web/ModalContainer.tsx | 2 +- src/web/Picker.tsx | 8 +- src/web/RootView.tsx | 6 +- src/web/ScrollView.tsx | 8 +- src/web/Text.tsx | 4 +- src/web/TextInput.tsx | 10 +- src/web/View.tsx | 12 +- src/web/ViewBase.tsx | 2 +- src/web/WebView.tsx | 4 +- src/web/listAnimations/AnimateListEdits.tsx | 2 +- src/web/listAnimations/MonitorListEdits.tsx | 26 +- src/web/utils/MouseResponder.ts | 4 +- 31 files changed, 170 insertions(+), 1184 deletions(-) delete mode 100644 src/typings/react-dom.d.ts delete mode 100644 src/typings/react.d.ts diff --git a/package.json b/package.json index 96857bed..b4ab9543 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ }, "dependencies": { "@types/lodash": "^4.14.66", + "@types/react": "^15.4.1", + "@types/react-dom": "^15.4.1", "assert": "^1.3.0", "ifvisible.js": "^1.0.6", "lodash": "^4.17.1", diff --git a/src/common/Types.ts b/src/common/Types.ts index 0cc27d05..8633f582 100644 --- a/src/common/Types.ts +++ b/src/common/Types.ts @@ -364,7 +364,7 @@ export enum ImportantForAccessibility { NoHideDescendants } -export interface AccessibilityHtmlAttributes extends React.HTMLAttributes { +export interface AccessibilityHtmlAttributes extends React.HTMLAttributes { 'aria-label'?: string; 'aria-live'?: string; 'aria-hidden'?: boolean; @@ -610,19 +610,19 @@ export interface ViewPropsShared extends CommonProps, CommonAccessibilityProps { export interface ViewProps extends ViewPropsShared { style?: StyleRuleSetRecursive; - onContextMenu?: (e: React.SyntheticEvent) => void; - onStartShouldSetResponder?: (e: React.SyntheticEvent) => boolean; - onMoveShouldSetResponder?: (e: React.SyntheticEvent) => boolean; - onStartShouldSetResponderCapture?: (e: React.SyntheticEvent) => boolean; - onMoveShouldSetResponderCapture?: (e: React.SyntheticEvent) => boolean; - onResponderGrant?: (e: React.SyntheticEvent) => void; - onResponderReject?: (e: React.SyntheticEvent) => void; - onResponderRelease?: (e: React.SyntheticEvent) => void; - onResponderStart?: (e: React.TouchEvent) => void; - onResponderMove?: (e: React.TouchEvent) => void; - onResponderEnd?: (e: React.TouchEvent) => void; - onResponderTerminate?: (e: React.SyntheticEvent) => void; - onResponderTerminationRequest?: (e: React.SyntheticEvent) => boolean; + onContextMenu?: (e: React.SyntheticEvent) => void; + onStartShouldSetResponder?: (e: React.SyntheticEvent) => boolean; + onMoveShouldSetResponder?: (e: React.SyntheticEvent) => boolean; + onStartShouldSetResponderCapture?: (e: React.SyntheticEvent) => boolean; + onMoveShouldSetResponderCapture?: (e: React.SyntheticEvent) => boolean; + onResponderGrant?: (e: React.SyntheticEvent) => void; + onResponderReject?: (e: React.SyntheticEvent) => void; + onResponderRelease?: (e: React.SyntheticEvent) => void; + onResponderStart?: (e: React.TouchEvent) => void; + onResponderMove?: (e: React.TouchEvent) => void; + onResponderEnd?: (e: React.TouchEvent) => void; + onResponderTerminate?: (e: React.SyntheticEvent) => void; + onResponderTerminationRequest?: (e: React.SyntheticEvent) => boolean; } export interface AnimatedViewProps extends ViewPropsShared { @@ -631,7 +631,7 @@ export interface AnimatedViewProps extends ViewPropsShared { // GestureView export interface GestureState { - timeStamp: Date; + timeStamp: number; } export interface MultiTouchGestureState extends GestureState { @@ -1080,16 +1080,52 @@ export module Animated { // // Events // ---------------------------------------------------------------------- -export type SyntheticEvent = React.SyntheticEvent; +export type SyntheticEvent = React.SyntheticEvent; -export type DragEvent = React.DragEvent; -export type ClipboardEvent = React.ClipboardEvent; -export type FocusEvent = React.FocusEvent; -export type FormEvent = React.FormEvent; -export type MouseEvent = React.MouseEvent; -export type TouchEvent = React.TouchEvent; -export type UIEvent = React.UIEvent; -export type WheelEvent = React.WheelEvent; +export type DragEvent = React.DragEvent; +export type ClipboardEvent = React.ClipboardEvent; +export type FocusEvent = React.FocusEvent; +export type FormEvent = React.FormEvent; +export type MouseEvent = React.MouseEvent; + +export interface Touch { + identifier: number; + target: EventTarget; + locationX: number; + locationY: number; + 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; +} + +export interface TouchEvent extends React.SyntheticEvent { + // We override this definition because the public + // type excludes location and page fields. + altKey: boolean; + changedTouches: TouchList; + ctrlKey: boolean; + getModifierState(key: string): boolean; + metaKey: boolean; + shiftKey: boolean; + targetTouches: TouchList; + locationX?: number; + locationY?: number; + pageX?: number; + pageY?: number; + touches: TouchList; +} +export type UIEvent = React.UIEvent; +export type WheelEvent = React.WheelEvent; export interface WebViewShouldStartLoadEvent extends SyntheticEvent { url: string; diff --git a/src/native-common/Button.tsx b/src/native-common/Button.tsx index d278a04e..eb631881 100644 --- a/src/native-common/Button.tsx +++ b/src/native-common/Button.tsx @@ -59,10 +59,10 @@ export class Button extends React.Component { touchableGetInitialState: () => RN.Touchable.State; touchableHandleStartShouldSetResponder: () => boolean; touchableHandleResponderTerminationRequest: () => boolean; - touchableHandleResponderGrant: (e: React.SyntheticEvent) => void; - touchableHandleResponderMove: (e: React.SyntheticEvent) => void; - touchableHandleResponderRelease: (e: React.SyntheticEvent) => void; - touchableHandleResponderTerminate: (e: React.SyntheticEvent) => void; + touchableHandleResponderGrant: (e: React.SyntheticEvent) => void; + touchableHandleResponderMove: (e: React.SyntheticEvent) => void; + touchableHandleResponderRelease: (e: React.SyntheticEvent) => void; + touchableHandleResponderTerminate: (e: React.SyntheticEvent) => void; private _isMounted = false; private _hideTimeout: number|undefined; diff --git a/src/native-common/FrontLayerViewManager.tsx b/src/native-common/FrontLayerViewManager.tsx index ad7259cd..89856639 100644 --- a/src/native-common/FrontLayerViewManager.tsx +++ b/src/native-common/FrontLayerViewManager.tsx @@ -164,7 +164,7 @@ export class FrontLayerViewManager { RN.NativeModules.UIManager.measureInWindow( activePopupContext.anchorHandle, (x: number, y: number, width: number, height: number, pageX: number, pageY: number) => { - const touchEvent = (e.nativeEvent as any) as Types.TouchEvent; + const touchEvent = e.nativeEvent as any; let anchorRect: ClientRect = { left: x, top: y, right: x + width, bottom: y + height, width: width, height: height }; diff --git a/src/native-common/GestureView.tsx b/src/native-common/GestureView.tsx index d791a22f..d34ef2a9 100644 --- a/src/native-common/GestureView.tsx +++ b/src/native-common/GestureView.tsx @@ -72,8 +72,8 @@ export abstract class GestureView extends ViewBase { private _setUpPanResponder(): void { this._panResponder = RN.PanResponder.create({ onStartShouldSetPanResponder: (e, gestureState) => { - const event = (e.nativeEvent as any) as Types.TouchEvent; - UserInterface.evaluateTouchLatency(e); + const event = (e as any).nativeEvent as Types.TouchEvent; + UserInterface.evaluateTouchLatency(e as any); this._lastGestureStartEvent = event; // If we're trying to detect a tap, set this as the responder immediately. @@ -84,8 +84,8 @@ export abstract class GestureView extends ViewBase { }, onMoveShouldSetPanResponder: (e, gestureState) => { - const event = (e.nativeEvent as any) as Types.TouchEvent; - UserInterface.evaluateTouchLatency(e); + const event = (e as any).nativeEvent as Types.TouchEvent; + UserInterface.evaluateTouchLatency(e as any); this._lastGestureStartEvent = event; this._pendingGestureType = this._detectMoveGesture(event, gestureState); @@ -115,8 +115,8 @@ export abstract class GestureView extends ViewBase { }, onPanResponderMove: (e, gestureState) => { - const event = (e.nativeEvent as any) as Types.TouchEvent; - UserInterface.evaluateTouchLatency(e); + const event = (e as any).nativeEvent as Types.TouchEvent; + UserInterface.evaluateTouchLatency(e as any); let initializeFromEvent = false; @@ -145,7 +145,7 @@ export abstract class GestureView extends ViewBase { } private _onPanResponderEnd(e: RN.ResponderSyntheticEvent, gestureState: RN.PanResponderGestureState) { - const event = (e.nativeEvent as any) as Types.TouchEvent; + const event = (e as any).nativeEvent as Types.TouchEvent; // Close out any of the pending move gestures. if (this._pendingGestureType === GestureType.MultiTouch) { diff --git a/src/native-common/Image.tsx b/src/native-common/Image.tsx index 1c0031bf..99c58e2b 100644 --- a/src/native-common/Image.tsx +++ b/src/native-common/Image.tsx @@ -104,7 +104,7 @@ export class Image extends React.Component { return [_styles.defaultImage, this.props.style]; } - private _onLoad = (e: React.SyntheticEvent) => { + private _onLoad = (e: React.SyntheticEvent) => { if (!this._isMounted) { return; } @@ -118,7 +118,7 @@ export class Image extends React.Component { } } - private _onError = (e: React.SyntheticEvent) => { + private _onError = (e: React.SyntheticEvent) => { if (!this._isMounted) { return; } diff --git a/src/native-common/ModalContainer.tsx b/src/native-common/ModalContainer.tsx index fd211f3f..0e283b0d 100644 --- a/src/native-common/ModalContainer.tsx +++ b/src/native-common/ModalContainer.tsx @@ -32,7 +32,7 @@ const _styles = { export interface ModalContainerProps extends Types.CommonProps { } -export class ModalContainer extends React.Component { +export class ModalContainer extends React.Component { constructor(props: ModalContainerProps) { super(props); } diff --git a/src/native-common/ScrollView.tsx b/src/native-common/ScrollView.tsx index 6082c869..b4e1ebcc 100644 --- a/src/native-common/ScrollView.tsx +++ b/src/native-common/ScrollView.tsx @@ -58,7 +58,7 @@ export class ScrollView extends ViewBase implements R // we use are virtualized anyway. return ( implements R ); } - private _onScroll = (event: React.SyntheticEvent) => { + private _onScroll = (event: React.SyntheticEvent) => { const nativeEvent = event.nativeEvent as any; this._scrollTop = nativeEvent.contentOffset.y; this._scrollLeft = nativeEvent.contentOffset.x; diff --git a/src/native-common/TextInput.tsx b/src/native-common/TextInput.tsx index b07f0f42..871ffc69 100644 --- a/src/native-common/TextInput.tsx +++ b/src/native-common/TextInput.tsx @@ -43,7 +43,7 @@ export class TextInput extends React.Component { + private _onSelectionChange = (selEvent: React.SyntheticEvent) => { let selection: { start: number, end: number } = (selEvent.nativeEvent as any).selection; @@ -135,7 +135,7 @@ export class TextInput extends React.Component { + private _onKeyPress = (e: React.KeyboardEvent) => { if (this.props.onKeyPress) { let keyName: string = (e.nativeEvent as any).key; let keyCode: number = 0; @@ -178,7 +178,7 @@ export class TextInput extends React.Component { + private _onScroll = (e: React.UIEvent) => { if (this.props.onScroll) { const { contentOffset } = (e.nativeEvent as any); this.props.onScroll(contentOffset.x, contentOffset.y); diff --git a/src/native-common/ViewBase.tsx b/src/native-common/ViewBase.tsx index 3b317a18..684327dd 100644 --- a/src/native-common/ViewBase.tsx +++ b/src/native-common/ViewBase.tsx @@ -31,7 +31,7 @@ export abstract class ViewBase

extends RX.ViewBase } } - protected _setNativeView = (view: RN.View) => { + protected _setNativeView = (view: any | undefined) => { this._nativeView = view; } diff --git a/src/native-common/listAnimations/AnimateListEdits.tsx b/src/native-common/listAnimations/AnimateListEdits.tsx index 803adfe3..4b35191e 100644 --- a/src/native-common/listAnimations/AnimateListEdits.tsx +++ b/src/native-common/listAnimations/AnimateListEdits.tsx @@ -33,7 +33,9 @@ function extractChildrenKeys(children: React.ReactNode): ChildKey[] { childReactElement.key !== undefined && childReactElement.key !== null, 'Children passed to a `View` with child animations enabled must have a `key`' ); - keys.push(childReactElement.key); + if (childReactElement.key !== null) { + keys.push(childReactElement.key); + } } }); return keys; @@ -43,7 +45,7 @@ function findInvalidRefs(children: React.ReactNode) { let invalidRefs: string[] = []; React.Children.forEach(children, function (child) { if (child) { - let childElement = child as React.ReactElement; + let childElement = child as any; if (typeof childElement.ref !== 'function' && childElement.ref !== undefined && childElement.ref !== null) { invalidRefs.push(childElement.ref as string); } diff --git a/src/typings/react-dom.d.ts b/src/typings/react-dom.d.ts deleted file mode 100644 index e0d88e04..00000000 --- a/src/typings/react-dom.d.ts +++ /dev/null @@ -1,71 +0,0 @@ -// Type definitions for React v0.14 (react-dom) -// Project: http://facebook.github.io/react/ -// Definitions by: Asana , AssureSign , Microsoft -// Definitions: https://github.com/borisyankov/DefinitelyTyped - -/// - -declare namespace __React { - - module __DOM { - function findDOMNode( - componentOrElement: __React.Component | Element): TElement; - function findDOMNode( - componentOrElement: __React.Component | Element): Element; - - function render

( - element: DOMElement

, - container: Element, - callback?: () => any): DOMComponent

; - function render( - element: ClassicElement

, - container: Element, - callback?: () => any): ClassicComponent; - function render( - element: ReactElement

, - container: Element, - callback?: () => any): Component; - - function unmountComponentAtNode(container: Element): boolean; - - var version: string; - - function unstable_batchedUpdates(callback: (a: A, b: B) => any, a: A, b: B): void; - function unstable_batchedUpdates(callback: (a: A) => any, a: A): void; - function unstable_batchedUpdates(callback: () => any): void; - - function unstable_renderSubtreeIntoContainer

( - parentComponent: Component, - nextElement: DOMElement

, - container: Element, - callback?: (component: DOMComponent

) => any): DOMComponent

; - function unstable_renderSubtreeIntoContainer( - parentComponent: Component, - nextElement: ClassicElement

, - container: Element, - callback?: (component: ClassicComponent) => any): ClassicComponent; - function unstable_renderSubtreeIntoContainer( - parentComponent: Component, - nextElement: ReactElement

, - container: Element, - callback?: (component: Component) => any): Component; - - - } - - namespace __DOMServer { - function renderToString(element: ReactElement): string; - function renderToStaticMarkup(element: ReactElement): string; - var version: string; - } -} - -declare module "react-dom" { - import DOM = __React.__DOM; - export = DOM; -} - -declare module "react-dom/server" { - import DOMServer = __React.__DOMServer; - export = DOMServer; -} diff --git a/src/typings/react-native.d.ts b/src/typings/react-native.d.ts index 67cf7fb0..f6587f17 100644 --- a/src/typings/react-native.d.ts +++ b/src/typings/react-native.d.ts @@ -31,7 +31,7 @@ declare module 'react-native' { props ?: any ): React.ReactElement

; - interface SyntheticEvent extends React.SyntheticEvent {} + interface SyntheticEvent extends React.SyntheticEvent {} function isValidElement(object: {}): boolean; function findNodeHandle(componentOrHandle: any): number; @@ -98,7 +98,7 @@ declare module 'react-native' { defaultSource?: Object; onError?: Function; onLoad?: Function; - onLoadEnd?: (e: SyntheticEvent) => void; + onLoadEnd?: (e: SyntheticEvent) => void; onLoadStart?: Function; onProgress?: Function; @@ -301,7 +301,7 @@ declare module 'react-native' { renderSeparator?: Function; renderRow: Function; initialListSize?: number; - onEndReached?: (e: React.SyntheticEvent) => void; + onEndReached?: (e: React.SyntheticEvent) => void; onEndReachedThreshold?: number; pageSize?: number; renderFooter?: Function; @@ -329,13 +329,13 @@ declare module 'react-native' { editable?: boolean; keyboardType?: string; // enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') multiline?: boolean; - onBlur?: ((e: React.FocusEvent) => void); - onKeyPress?: (e: SyntheticEvent) => void; + onBlur?: ((e: React.FocusEvent) => void); + onKeyPress?: (e: SyntheticEvent) => void; onChange?: Function; onChangeText?: ((changedText: string) => void); - onSelectionChange?: ((selection: SyntheticEvent) => void); + onSelectionChange?: ((selection: SyntheticEvent) => void); onEndEditing?: Function; - onFocus?: ((e: React.FocusEvent) => void); + onFocus?: ((e: React.FocusEvent) => void); onLayout?: ((props: { x: number, y: number, width: number, height: number }) => void); onSubmitEditing?: Function; onScroll?: Function; @@ -387,7 +387,7 @@ declare module 'react-native' { domStorageEnabled?: boolean; onShouldStartLoadWithRequest?: Function; onNavigationStateChange?: Function; - onLoad?: (e: SyntheticEvent) => void; + onLoad?: (e: SyntheticEvent) => void; onLoadStart?: Function; renderError?: Function; onError?: Function; @@ -723,7 +723,7 @@ declare module 'react-native' { numberActiveTouches: number; } - interface ResponderSyntheticEvent extends React.SyntheticEvent { + interface ResponderSyntheticEvent extends React.SyntheticEvent { touchHistory: Function; } @@ -964,14 +964,14 @@ declare module 'react-native' { touchableGetInitialState: () => State touchableHandleStartShouldSetResponder: () => {} touchableHandleResponderTerminationRequest: () => {} - touchableHandleResponderGrant: (e: React.SyntheticEvent, dispatchID: string) => {} - touchableHandleResponderMove: (e: React.SyntheticEvent) => {} - touchableHandleResponderRelease: (e: React.SyntheticEvent) => {} - touchableHandleResponderTerminate: (e: React.SyntheticEvent) => {} - touchableHandleActivePressIn?: (e: React.SyntheticEvent) => {} - touchableHandleActivePressOut?: (e: React.SyntheticEvent) => {} - touchableHandlePress?: (e: React.SyntheticEvent) => {} - touchableHandleLongPress?: (e: React.SyntheticEvent) => {} + touchableHandleResponderGrant: (e: React.SyntheticEvent, dispatchID: string) => {} + touchableHandleResponderMove: (e: React.SyntheticEvent) => {} + touchableHandleResponderRelease: (e: React.SyntheticEvent) => {} + touchableHandleResponderTerminate: (e: React.SyntheticEvent) => {} + touchableHandleActivePressIn?: (e: React.SyntheticEvent) => {} + touchableHandleActivePressOut?: (e: React.SyntheticEvent) => {} + touchableHandlePress?: (e: React.SyntheticEvent) => {} + touchableHandleLongPress?: (e: React.SyntheticEvent) => {} touchableGetHighlightDelayMS?: () => number touchableGetPressRectOffset?: () => RectOffset } diff --git a/src/typings/react.d.ts b/src/typings/react.d.ts deleted file mode 100644 index 767a64e6..00000000 --- a/src/typings/react.d.ts +++ /dev/null @@ -1,993 +0,0 @@ -// Type definitions for React v0.14 -// Project: http://facebook.github.io/react/ -// Definitions by: Asana , AssureSign , Microsoft -// Definitions: https://github.com/borisyankov/DefinitelyTyped - -declare namespace __React { - // - // React Elements - // ---------------------------------------------------------------------- - - type ReactType = ComponentClass | string; - - interface ReactElement

{ - type: string | ComponentClass

; - props: P; - key: string | number; - ref: string | ((component: Component) => any); - } - - interface ClassicElement

extends ReactElement

{ - type: string | ClassicComponentClass

; - ref: string | ((component: ClassicComponent) => any); - } - - interface DOMElement

extends ClassicElement

{ - type: string; - ref: string | ((component: DOMComponent

) => any); - } - - type HTMLElement = DOMElement; - type SVGElement = DOMElement; - - // - // Factories - // ---------------------------------------------------------------------- - - interface Factory

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

; - } - - interface ClassicFactory

extends Factory

{ - (props?: P, ...children: ReactNode[]): ClassicElement

; - } - - interface DOMFactory

extends ClassicFactory

{ - (props?: P, ...children: ReactNode[]): DOMElement

; - } - - type HTMLFactory = DOMFactory; - type SVGFactory = DOMFactory; - type SVGElementFactory = DOMFactory; - - // - // 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; - - // - // Top Level API - // ---------------------------------------------------------------------- - - function createClass(spec: ComponentSpec): ClassicComponentClass

; - - function createFactory

(type: string): DOMFactory

; - function createFactory

(type: ClassicComponentClass

| string): ClassicFactory

; - function createFactory

(type: ComponentClass

): Factory

; - - function createElement

( - type: string, - props?: P, - ...children: ReactNode[]): DOMElement

; - function createElement

( - type: ClassicComponentClass

| string, - props?: P, - ...children: ReactNode[]): ClassicElement

; - function createElement

( - type: ComponentClass

, - props?: P, - ...children: ReactNode[]): ReactElement

; - - function cloneElement

( - element: DOMElement

, - props?: P, - ...children: ReactNode[]): DOMElement

; - function cloneElement

( - element: ClassicElement

, - props?: P, - ...children: ReactNode[]): ClassicElement

; - function cloneElement

( - element: ReactElement

, - props?: P, - ...children: ReactNode[]): ReactElement

; - - function isValidElement(object: {}): boolean; - - var DOM: ReactDOM; - var PropTypes: ReactPropTypes; - var Children: ReactChildren; - - // - // Component API - // ---------------------------------------------------------------------- - - // Base component for plain JS classes - interface Component

extends ComponentLifecycle { } - class Component

implements ComponentLifecycle { - static propTypes: ValidationMap; - static contextTypes: ValidationMap; - static childContextTypes: ValidationMap; - static defaultProps: Props; - - constructor(props?: P, context?: any); - setState(f: (prevState: S, props: P) => Partial|undefined, callback?: () => any): void; - setState(state: Partial, callback?: () => any): void; - forceUpdate(callBack?: () => any): void; - render(): JSX.Element|null; - props: P; - state: S; - context: {}; - refs: { - [key: string]: Component - }; - } - - interface ClassicComponent extends Component { - replaceState(nextState: S, callback?: () => any): void; - isMounted(): boolean; - getInitialState?(): S; - } - - interface DOMComponent

extends ClassicComponent { - tagName: string; - } - - type HTMLComponent = DOMComponent; - type SVGComponent = DOMComponent; - - interface ChildContextProvider { - getChildContext(): CC; - } - - // - // Class Interfaces - // ---------------------------------------------------------------------- - - interface ComponentClass

{ - new(props?: P, context?: any): Component; - propTypes?: ValidationMap

; - contextTypes?: ValidationMap; - childContextTypes?: ValidationMap; - defaultProps?: P; - } - - interface ClassicComponentClass

extends ComponentClass

{ - new(props?: P, context?: any): ClassicComponent; - getDefaultProps?(): P; - displayName?: string; - } - - // - // Component Specs and Lifecycle - // ---------------------------------------------------------------------- - - interface ComponentLifecycle { - componentWillMount?(): void; - componentDidMount?(): void; - componentWillReceiveProps?(nextProps: P, nextContext: any): void; - shouldComponentUpdate?(nextProps: P, nextState: S, nextContext: any): boolean; - componentWillUpdate?(nextProps: P, nextState: S, nextContext: any): void; - componentDidUpdate?(prevProps: P, prevState: S, prevContext: any): void; - componentWillUnmount?(): void; - } - - interface Mixin extends ComponentLifecycle { - mixins?: Mixin; - statics?: { - [key: string]: any; - }; - - displayName?: string; - propTypes?: ValidationMap; - contextTypes?: ValidationMap; - childContextTypes?: ValidationMap - - getDefaultProps?(): P; - getInitialState?(): S; - } - - interface ComponentSpec extends Mixin { - render(): ReactElement; - - [propertyName: string]: any; - } - - // - // Event System - // ---------------------------------------------------------------------- - - interface SyntheticEvent { - bubbles: boolean; - cancelable: boolean; - currentTarget: EventTarget; - defaultPrevented: boolean; - eventPhase: number; - isTrusted: boolean; - nativeEvent: Event; - preventDefault(): void; - stopPropagation(): void; - persist(): void; - target: EventTarget; - timeStamp: Date; - type: string; - } - - interface DragEvent extends SyntheticEvent { - dataTransfer: DataTransfer; - } - - 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; - locationX?: number; - locationY?: number; - pageX?: number; - pageY?: number; - touches: TouchList; - } - - interface UIEvent extends SyntheticEvent { - detail: number; - view: AbstractView; - } - - interface WheelEvent extends MouseEvent { - deltaMode: number; - deltaX: number; - deltaY: number; - deltaZ: number; - } - - // - // Event Handler Types - // ---------------------------------------------------------------------- - - interface EventHandler { - (event: E): void; - } - - interface DragEventHandler extends EventHandler {} - 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 {} - - // - // Props / DOM Attributes - // ---------------------------------------------------------------------- - - interface Props { - children?: ReactNode; - key?: string | number; - ref?: string | ((component: T) => any); - } - - interface DOMAttributesBase extends Props { - onCopy?: ClipboardEventHandler; - onCut?: ClipboardEventHandler; - onPaste?: ClipboardEventHandler; - onKeyDown?: KeyboardEventHandler; - onKeyPress?: KeyboardEventHandler; - onKeyUp?: KeyboardEventHandler; - onFocus?: FocusEventHandler; - onBlur?: FocusEventHandler; - onChange?: FormEventHandler; - onInput?: FormEventHandler; - onSubmit?: FormEventHandler; - onClick?: MouseEventHandler; - onContextMenu?: MouseEventHandler; - onDoubleClick?: MouseEventHandler; - onDrag?: DragEventHandler; - onDragEnd?: DragEventHandler; - onDragEnter?: DragEventHandler; - onDragExit?: DragEventHandler; - onDragLeave?: DragEventHandler; - onDragOver?: DragEventHandler; - onDragStart?: DragEventHandler; - onDrop?: DragEventHandler; - 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; - - className?: string; - id?: string; - - dangerouslySetInnerHTML?: { - __html: string; - }; - } - - interface DOMAttributes extends DOMAttributesBase> { - } - - // This interface is not complete. Only properties accepting - // unitless numbers are listed here (see CSSProperty.js in React) - interface CSSProperties { - boxFlex?: number; - boxFlexGroup?: number; - columnCount?: number; - flex?: number | string; - flexGrow?: number; - flexShrink?: number; - fontWeight?: number | string; - lineClamp?: number; - lineHeight?: number | string; - opacity?: number; - order?: number; - orphans?: number; - widows?: number; - zIndex?: number; - zoom?: number; - - fontSize?: number | string; - - // SVG-related properties - fillOpacity?: number; - strokeOpacity?: number; - strokeWidth?: number; - - [propertyName: string]: any; - } - - interface HTMLAttributesBase extends DOMAttributesBase { - 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; - cols?: number; - colSpan?: number; - content?: string; - contentEditable?: boolean; - contextMenu?: string; - controls?: any; - coords?: string; - crossOrigin?: string; - data?: string; - dateTime?: string; - defaultChecked?: boolean; - defaultValue?: string; - defer?: boolean; - dir?: string; - disabled?: boolean; - download?: any; - draggable?: boolean; - encType?: string; - form?: string; - formAction?: string; - formEncType?: string; - formMethod?: string; - formNoValidate?: boolean; - formTarget?: string; - frameBorder?: number | string; - headers?: string; - height?: number | string; - hidden?: boolean; - high?: number; - href?: string; - hrefLang?: string; - htmlFor?: string; - httpEquiv?: string; - icon?: string; - label?: string; - lang?: string; - list?: string; - loop?: boolean; - low?: number; - manifest?: string; - marginHeight?: number; - marginWidth?: number; - max?: number | string; - maxLength?: number; - media?: string; - mediaGroup?: string; - method?: string; - min?: number | string; - multiple?: boolean; - muted?: boolean; - name?: string; - noValidate?: boolean; - open?: boolean; - optimum?: number; - 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; - scoped?: boolean; - scrolling?: string; - 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?: any; - 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; - unselectable?: boolean; - } - - interface HTMLAttributes extends HTMLAttributesBase { - } - - interface MediaHTMLAttributes extends HTMLAttributes { - onLoad?: EventHandler; - onError?: EventHandler; - } - - interface VideoHTMLAttributes extends HTMLAttributes { - onLoadedData?: EventHandler; - onError?: EventHandler; - - onCanPlay?: () => void; - onCanPlayThrough?: () => void; - onEnded?: () => void; - } - - interface IframeHTMLAttributes extends HTMLAttributes { - onLoad?: EventHandler; - } - - interface InputHTMLAttributes extends HTMLAttributes { - editable?: boolean; - } - - interface SVGElementAttributes extends HTMLAttributes { - viewBox?: string; - preserveAspectRatio?: string; - } - - interface SVGAttributes extends DOMAttributes { - ref?: string | ((component: SVGComponent) => void); - - cx?: number | string; - cy?: number | string; - d?: string; - dx?: number | string; - dy?: number | string; - fill?: string; - fillOpacity?: number | string; - fontFamily?: string; - fontSize?: number | string; - fx?: number | string; - fy?: number | string; - gradientTransform?: string; - gradientUnits?: string; - height?: number | string; - markerEnd?: string; - markerMid?: string; - markerStart?: string; - offset?: number | string; - opacity?: number | string; - patternContentUnits?: string; - patternUnits?: string; - points?: string; - preserveAspectRatio?: string; - r?: number | string; - rx?: number | string; - ry?: number | string; - spreadMethod?: string; - stopColor?: string; - stopOpacity?: number | string; - stroke?: string; - strokeDasharray?: string; - strokeLinecap?: string; - strokeMiterlimit?: string; - strokeOpacity?: number | string; - strokeWidth?: number | string; - textAnchor?: string; - transform?: string; - version?: string; - viewBox?: string; - width?: number | string; - x1?: number | string; - x2?: number | string; - x?: number | string; - y1?: number | string; - y2?: number | string - y?: number | string; - } - - interface SVGAnimateAttributes extends DOMAttributes { - attributeName: string; - dur: string; - repeatCount: string; - from?: number; - to?: number; - values?: string; - } - - interface WebViewHTMLAttributes extends HTMLAttributes { - is?: any - src?: string - autosize?: boolean - disablewebsecurity?: boolean - httpreferrer?: string - nodeintegration?: boolean - plugins?: boolean - preload?: string - useragent?: string - partition?: string - allowpopups?: boolean - webpreferences?: string - blinkfeatures?: string - disableblinkfeatures?: string - guestinstance?: string - } - - // - // 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 - svg: SVGElementFactory; - 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; - text: SVGFactory; - tspan: SVGFactory; - } - - // - // React.PropTypes - // ---------------------------------------------------------------------- - - interface Validator { - (object: T, key: string, componentName: string): Error | null; - } - - 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, index: number) => T): { [key:string]: T }; - forEach(children: ReactNode, fn: (child: ReactChild, index: number) => any): void; - count(children: ReactNode): number; - only(children: ReactNode): ReactElement; - toArray(children: ReactNode): ReactChild[]; - } - - // - // 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; - locationX: number; - locationY: number; - 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" { - export = __React; -} - -declare namespace JSX { - import React = __React; - - interface Element extends React.ReactElement { } - interface ElementClass extends React.Component { - render(): JSX.Element|null; - } - interface ElementAttributesProperty { props: {}; } - - interface IntrinsicElements { - // HTML - a: React.HTMLAttributes; - abbr: React.HTMLAttributes; - address: React.HTMLAttributes; - area: React.HTMLAttributes; - article: React.HTMLAttributes; - aside: React.HTMLAttributes; - audio: React.HTMLAttributes; - b: React.HTMLAttributes; - base: React.HTMLAttributes; - bdi: React.HTMLAttributes; - bdo: React.HTMLAttributes; - big: React.HTMLAttributes; - blockquote: React.HTMLAttributes; - body: React.HTMLAttributes; - br: React.HTMLAttributes; - button: React.HTMLAttributes; - canvas: React.HTMLAttributes; - caption: React.HTMLAttributes; - cite: React.HTMLAttributes; - code: React.HTMLAttributes; - col: React.HTMLAttributes; - colgroup: React.HTMLAttributes; - data: React.HTMLAttributes; - datalist: React.HTMLAttributes; - dd: React.HTMLAttributes; - del: React.HTMLAttributes; - details: React.HTMLAttributes; - dfn: React.HTMLAttributes; - dialog: React.HTMLAttributes; - div: React.HTMLAttributes; - dl: React.HTMLAttributes; - dt: React.HTMLAttributes; - em: React.HTMLAttributes; - embed: React.HTMLAttributes; - fieldset: React.HTMLAttributes; - figcaption: React.HTMLAttributes; - figure: React.HTMLAttributes; - footer: React.HTMLAttributes; - form: React.HTMLAttributes; - h1: React.HTMLAttributes; - h2: React.HTMLAttributes; - h3: React.HTMLAttributes; - h4: React.HTMLAttributes; - h5: React.HTMLAttributes; - h6: React.HTMLAttributes; - head: React.HTMLAttributes; - header: React.HTMLAttributes; - hr: React.HTMLAttributes; - html: React.HTMLAttributes; - i: React.HTMLAttributes; - iframe: React.IframeHTMLAttributes; - img: React.MediaHTMLAttributes; - input: React.InputHTMLAttributes; - ins: React.HTMLAttributes; - kbd: React.HTMLAttributes; - keygen: React.HTMLAttributes; - label: React.HTMLAttributes; - legend: React.HTMLAttributes; - li: React.HTMLAttributes; - link: React.HTMLAttributes; - main: React.HTMLAttributes; - map: React.HTMLAttributes; - mark: React.HTMLAttributes; - menu: React.HTMLAttributes; - menuitem: React.HTMLAttributes; - meta: React.HTMLAttributes; - meter: React.HTMLAttributes; - nav: React.HTMLAttributes; - noscript: React.HTMLAttributes; - object: React.HTMLAttributes; - ol: React.HTMLAttributes; - optgroup: React.HTMLAttributes; - option: React.HTMLAttributes; - output: React.HTMLAttributes; - p: React.HTMLAttributes; - param: React.HTMLAttributes; - picture: React.HTMLAttributes; - pre: React.HTMLAttributes; - progress: React.HTMLAttributes; - q: React.HTMLAttributes; - rp: React.HTMLAttributes; - rt: React.HTMLAttributes; - ruby: React.HTMLAttributes; - s: React.HTMLAttributes; - samp: React.HTMLAttributes; - script: React.HTMLAttributes; - section: React.HTMLAttributes; - select: React.HTMLAttributes; - small: React.HTMLAttributes; - source: React.HTMLAttributes; - span: React.HTMLAttributes; - strong: React.HTMLAttributes; - style: React.HTMLAttributes; - sub: React.HTMLAttributes; - summary: React.HTMLAttributes; - sup: React.HTMLAttributes; - table: React.HTMLAttributes; - tbody: React.HTMLAttributes; - td: React.HTMLAttributes; - textarea: React.InputHTMLAttributes; - tfoot: React.HTMLAttributes; - th: React.HTMLAttributes; - thead: React.HTMLAttributes; - time: React.HTMLAttributes; - title: React.HTMLAttributes; - tr: React.HTMLAttributes; - track: React.HTMLAttributes; - u: React.HTMLAttributes; - ul: React.HTMLAttributes; - "var": React.HTMLAttributes; - video: React.VideoHTMLAttributes; - wbr: React.HTMLAttributes; - webview: React.WebViewHTMLAttributes; - - // SVG - svg: React.SVGElementAttributes; - - animate: React.SVGAnimateAttributes; - circle: React.SVGAttributes; - defs: React.SVGAttributes; - ellipse: React.SVGAttributes; - g: React.SVGAttributes; - line: React.SVGAttributes; - linearGradient: React.SVGAttributes; - mask: React.SVGAttributes; - path: React.SVGAttributes; - pattern: React.SVGAttributes; - polygon: React.SVGAttributes; - polyline: React.SVGAttributes; - radialGradient: React.SVGAttributes; - rect: React.SVGAttributes; - stop: React.SVGAttributes; - text: React.SVGAttributes; - tspan: React.SVGAttributes; - } -} diff --git a/src/web/Button.tsx b/src/web/Button.tsx index 8719077d..67cba753 100644 --- a/src/web/Button.tsx +++ b/src/web/Button.tsx @@ -58,7 +58,7 @@ export class Button extends React.Component { // NOTE: We use tabIndex=0 to support focus. return (