Merge pull request #17749 from DeividasBakanas/feature/react-tooltip

react-tooltip types added.

types/react-tooltip/index.d.ts

@@ -0,0 +1,55 @@
+// Type definitions for react-tooltip 3.3
+// Project: https://github.com/wwayne/react-tooltip
+// Definitions by: Deividas Bakanas <https://github.com/DeividasBakanas>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
+
+import * as React from "react";
+
+declare class ReactTooltip extends React.Component<ReactTooltip.Props> { }
+
+declare namespace ReactTooltip {
+    interface Offset {
+        top?: number;
+        right?: number;
+        left?: number;
+        bottom?: number;
+    }
+
+    type ElementEvents = keyof HTMLElementEventMap;
+    type WindowEvents = keyof WindowEventMap;
+
+    type GetContentCallback = () => React.ReactNode;
+    type GetContent = GetContentCallback | [GetContentCallback, number];
+
+    interface Props {
+        id?: string;
+        place?: "top" | "right" | "bottom" | "left";
+        type?: "success" | "warning" | "error" | "info" | "light";
+        effect?: "float" | "solid";
+        event?: ElementEvents;
+        eventOff?: ElementEvents;
+        globalEventOff?: WindowEvents;
+        isCapture?: boolean;
+        offset?: Offset;
+        multiline?: boolean;
+        className?: string;
+        html?: boolean;
+        delayHide?: number;
+        delayShow?: number;
+        insecure?: boolean;
+        border?: boolean;
+        getContent?: GetContent;
+        afterShow?(): void;
+        afterHide?(): void;
+        disable?: boolean;
+        scrollHide?: boolean;
+        resizeHide?: boolean;
+        wrapper?: "div" | "span";
+        role?: string;
+        class?: string;
+        watchWindow?: boolean;
+    }
+}
+
+export = ReactTooltip;

types/react-tooltip/react-tooltip-tests.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+import * as ReactTooltip from "react-tooltip";
+
+export class ReactTooltipTest extends React.PureComponent {
+    render() {
+        const getContent: ReactTooltip.GetContent = [() => Math.floor(Math.random() * 100), 30];
+
+        return <div>
+            <a data-tip data-for="happyFace"> d(`･∀･)b </a>
+            <ReactTooltip id="happyFace" type="error">
+                <span>Show happy face</span>
+            </ReactTooltip>
+
+            <a data-tip data-for="sadFace"> இдஇ </a>
+            <ReactTooltip id="sadFace" type="warning" effect="solid" afterHide={() => { console.log("afterHide"); }}>
+                <span>Show sad face</span>
+            </ReactTooltip>
+
+            <a data-tip data-for="global"> σ`∀´)σ </a>
+            <a data-tip data-for="global"> (〃∀〃) </a>
+            <ReactTooltip id="global" aria-haspopup="true" role="example" afterShow={() => { console.log("afterShow"); }}>
+                <p>This is a global react component tooltip</p>
+                <p>You can put every thing here</p>
+                <ul>
+                    <li>Word</li>
+                    <li>Chart</li>
+                    <li>Else</li>
+                </ul>
+            </ReactTooltip>
+
+            <a data-tip="custom show" data-event="click focus">( •̀д•́)</a>
+            <ReactTooltip globalEventOff="click" place="top" />
+
+            <a data-tip="custom show and hide" data-event="click" data-event-off="dblclick">( •̀д•́)</a>
+            <ReactTooltip />
+
+            <a data-tip="hover on me will keep the tootlip">(･ω´･ )́)</a>
+            <ReactTooltip class="extraClass" delayHide={1000} effect="solid" />
+
+            <a data-for="getContent" data-tip>=( •̀д•́)</a>
+            <ReactTooltip id="getContent" getContent={getContent} />
+
+            <a data-for="overTime" data-tip>=( •̀д•́)</a>
+            <ReactTooltip id="overTime" wrapper="span" getContent={[() => new Date().toISOString(), 1000]} />
+
+            <a data-tip data-for="happyFace"> d(`･∀･)b </a>
+            <ReactTooltip
+                id="happyFace"
+                type="error"
+                event="click"
+                eventOff="dblclick"
+                globalEventOff="dblclick"
+                isCapture={true}
+                offset={{
+                    left: 100,
+                    bottom: 30
+                }}
+                multiline={true}
+                className="custom-class-name"
+                html={true}
+                delayShow={100}
+                delayHide={100}
+                insecure={true}
+                disable={false}
+                scrollHide={true}
+                resizeHide={true}
+                watchWindow={true}
+            >
+                <span>
+                    Show happy face
+                </span>
+                <br />
+                <span>
+                    Show happy face
+                </span>
+            </ReactTooltip>
+        </div>;
+    }
+}

types/react-tooltip/tsconfig.json

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

types/react-tooltip/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }