created typings for react-portal-tooltip (DefinitelyTyped#45221)

* bootstrap

* react-tooltip-portal

* linter fixes

* Update types/react-portal-tooltip/index.d.ts

Co-authored-by: Orta <[email protected]>

Author: naortor

types/react-portal-tooltip/index.d.ts

@@ -0,0 +1,12 @@
+// Type definitions for react-portal-tooltip 2.4
+// Project: https://github.com/romainberger/react-portal-tooltip
+// Definitions by: naortor <https://github.com/naortor>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+import * as React from 'react';
+
+import ToolTip from './lib/ToolTip';
+import StatefulToolTip from './lib/StatefulToolTip';
+
+export default ToolTip;
+export { StatefulToolTip };

types/react-portal-tooltip/lib/Card.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+declare class Card extends React.Component<Card.CardProps> {}
+
+export default Card;
+
+declare namespace Card {
+    type Position = 'top' | 'right' | 'bottom' | 'left';
+    type Arrow = null | 'center' | 'top' | 'right' | 'bottom' | 'left';
+    type Align = null | 'center' | 'right' | 'left';
+
+    interface CardProps {
+        position?: Position;
+        arrow?: Arrow;
+        align?: Align;
+        useHover?: boolean;
+        style?: {
+            style?: React.CSSProperties;
+            arrowStyle?: React.CSSProperties;
+        };
+    }
+}

types/react-portal-tooltip/lib/StatefulToolTip.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import ToolTip, { TooltipProps } from './ToolTip';
+
+declare class StatefulToolTip extends React.Component<StatefulToolTipProps> {}
+
+export default StatefulToolTip;
+
+interface StatefulToolTipProps extends TooltipProps {
+    className?: string;
+}

types/react-portal-tooltip/lib/ToolTip.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Card from './Card';
+
+declare class Tooltip extends React.Component<TooltipProps> {}
+
+export default Tooltip;
+
+export interface TooltipProps extends Card.CardProps {
+    parent: string | JSX.Element | React.RefObject<unknown>;
+    active?: boolean;
+    group?: string;
+    tooltipTimeout?: number;
+}

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

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import ToolTip, { StatefulToolTip } from 'react-portal-tooltip';
+
+// Tooltip test
+
+class ToolTipTest extends React.Component {
+    state = {
+        isTooltipActive: false,
+    };
+    showTooltip() {
+        this.setState({ isTooltipActive: true });
+    }
+    hideTooltip() {
+        this.setState({ isTooltipActive: false });
+    }
+    render() {
+        return (
+            <div>
+                <p id="text" onMouseEnter={this.showTooltip.bind(this)} onMouseLeave={this.hideTooltip.bind(this)}>
+                    This is a cool component
+                </p>
+                <ToolTip active={this.state.isTooltipActive} position="top" arrow="center" parent="#text">
+                    <div>
+                        <p>This is the content of the tooltip</p>
+                        <img src="image.png" />
+                    </div>
+                </ToolTip>
+            </div>
+        );
+    }
+}
+
+// Parent props
+
+class ToolTipTestParentProp1 extends React.Component {
+    state = {
+        isTooltipActive: false,
+    };
+    showTooltip() {
+        this.setState({ isTooltipActive: true });
+    }
+    hideTooltip() {
+        this.setState({ isTooltipActive: false });
+    }
+    render() {
+        return (
+            <div>
+                <div id="hoverMe" onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip}>
+                    Hover me!!!
+                </div>
+                <ToolTip active={this.state.isTooltipActive} position="top" arrow="center" parent="#hoverMe">
+                    <div>
+                        <p>This is the content of the tooltip</p>
+                    </div>
+                </ToolTip>
+            </div>
+        );
+    }
+}
+
+class ToolTipTestParentProp2 extends React.Component {
+    readonly element = React.createRef<HTMLDivElement>();
+
+    constructor(props: {}) {
+        super(props);
+    }
+    state = {
+        isTooltipActive: false,
+    };
+    showTooltip() {
+        this.setState({ isTooltipActive: true });
+    }
+    hideTooltip() {
+        this.setState({ isTooltipActive: false });
+    }
+    render() {
+        return (
+            <div>
+                <div ref={this.element} onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip}>
+                    Hover me!!!
+                </div>
+                <ToolTip active={this.state.isTooltipActive} position="top" arrow="center" parent={this.element}>
+                    <div>
+                        <p>This is the content of the tooltip</p>
+                    </div>
+                </ToolTip>
+            </div>
+        );
+    }
+}
+
+// StatefulToolTip test
+
+const StatefulToolTipTest = () => {
+    const button = <span>Hover me to display the tooltip</span>;
+
+    return <StatefulToolTip parent={button}>Stateful Tooltip content here!</StatefulToolTip>;
+};

types/react-portal-tooltip/tsconfig.json

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

types/react-portal-tooltip/tslint.json

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