React interactive (#39068)

* Added type definitions for react-interactive

* fix lint errors

* change to address suggestions

* fix name conflict

* add new line to end of files

types/react-interactive/index.d.ts

@@ -0,0 +1,82 @@
+// Type definitions for react-interactive 0.9
+// Project: https://github.com/rafrex/react-interactive
+// Definitions by: Daniel Santoro <https://github.com/DanudeSandstorm>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+import { ReactNode, ReactElement, Component, SyntheticEvent, CSSProperties } from 'react';
+
+export {};
+
+export type IState = 'normal' | 'hover' | 'hoverActive' | 'touchActive' | 'keyActive';
+export type Focus = false | 'tab' | 'mouse' | 'touch';
+export type ClickType = "mouseClick" | "tapClick" | "keyClick";
+
+export type State = {focus: Focus, iState: IState};
+
+type ActiveProps = {
+    active?: CSSProperties;
+} | {
+    hoverActive?: CSSProperties;
+    touchActive?: CSSProperties;
+    keyActive?: CSSProperties;
+};
+
+type FocusProps = {
+    focus?: CSSProperties;
+} | {
+    focusFromTab?: CSSProperties;
+    focusFromMouse?: CSSProperties;
+    focusFromTouch?: CSSProperties;
+};
+
+export type InteractiveProps = FocusProps & ActiveProps & {
+    // as: string | Component | ReactElement;
+    as: any;
+
+    hover?: CSSProperties;
+
+    style?: CSSProperties;
+
+    className?: string;
+
+    onStateChange?: (arg0: {prevState: State, nextState: State, event: SyntheticEvent}) => void;
+
+    setStateCallback?: (arg0: {prevState: State, nextState: State}) => void;
+
+    onClick?: (event: SyntheticEvent, clickType: ClickType) => void;
+
+    onTapTwo?: (event: Event) => void;
+    onTapThree?: (event: Event) => void;
+    onTapFour?: (event: Event) => void;
+
+    tapTimeCutoff?: number;
+
+    onLongPress?: (event: Event) => void;
+
+    touchActiveTapOnly?: boolean;
+
+    extraTouchNoTap?: boolean;
+
+    nonContainedChild?: boolean;
+
+    initialState?: State;
+
+    forceState?: State;
+
+    styleProperty?: object;
+
+    refDOMNode?: (node: any) => any; // Not sure about this type
+
+    focusToggleOff?: boolean;
+
+    mutableProps?: boolean;
+
+    interactiveChild?: boolean;
+
+    wrapperStyle?: CSSProperties;
+
+    wrapperClassName?: string;
+};
+
+export default class Interactive extends Component<InteractiveProps> {}

types/react-interactive/react-interactive-tests.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import Interactive, { State } from 'react-interactive';
+
+class InteractiveDiv extends React.Component {
+    private handleInteractiveStateChange(arg0: {prevState: State, nextState: State, event: React.SyntheticEvent}): void {}
+    private handleClick(e: React.SyntheticEvent): void {}
+
+    render() {
+        return (<Interactive
+            as="div"
+            hover={{ color: 'green' }}
+            active={{ color: 'blue' }}
+            focus={{ outline: '2px solid green' }}
+            onStateChange={this.handleInteractiveStateChange}
+            onClick={this.handleClick}
+            style={{ fontSize: '16px', padding: '3px', color: 'black' }}
+        >This is an interactive and focusable div</Interactive>);
+    }
+}
+
+export default InteractiveDiv;

types/react-interactive/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": false,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "preserve"
+    },
+    "files": [
+        "index.d.ts",
+        "react-interactive-tests.tsx"
+    ]
+}

types/react-interactive/tslint.json

@@ -0,0 +1,6 @@
+{
+    "extends": "dtslint/dt.json",
+    "rules": {
+        "interface-over-type-literal": false
+    }
+}