Skip to content

Commit cb2b921

Browse files
authored
feat: adding typescript type defs (ReactTooltip#571)
1 parent d937e59 commit cb2b921

File tree

3 files changed

+121
-1
lines changed

3 files changed

+121
-1
lines changed

Diff for: README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ Check example: [React-tooltip Test](https://react-tooltip.netlify.com/)
7272
Global|Specific |Type |Values | Description
7373
|:---|:---|:---|:---|:----
7474
place | data-place | String | top, right, bottom, left | placement
75-
type | data-type | String | success, warning, error, info, light | theme
75+
type | data-type | String | dark, success, warning, error, info, light | theme
7676
effect| data-effect | String | float, solid | behaviour of tooltip
7777
event | data-event | String | e.g. click | custom event to trigger tooltip
7878
eventOff | data-event-off | String | e.g. click | custom event to hide tooltip (only makes effect after setting event attribute)

Diff for: contributing.md

+5
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,8 @@ We are using semantic-release instead of this:
3333
* `git tag -a 3.X.Y -m 3.X.Y` `git push --tags`
3434
* `npm publish`
3535
* add a version on the github release page, based on the tag
36+
37+
38+
## Typescript Type Definitions
39+
40+
Ensure that any changes modifying the **props** or **staticmethods** are also reflected in the typescript type definitions file.

Diff for: react-tooltip.d.ts

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import * as React from 'react';
2+
3+
interface Offset {
4+
top?: number;
5+
right?: number;
6+
left?: number;
7+
bottom?: number;
8+
}
9+
10+
type Place = 'top' | 'right' | 'bottom' | 'left';
11+
type Type = 'dark' | 'success' | 'warning' | 'error' | 'info' | 'light';
12+
type Effect = 'float' | 'solid';
13+
14+
type VoidFunc = (...args: any[]) => void;
15+
type GetContentFunc = (toolTipStr: string) => React.ReactNode;
16+
type GetContent = GetContentFunc | [GetContentFunc, number];
17+
18+
interface TooltipProps {
19+
children?: React.ReactNode;
20+
uuid?: string;
21+
// Placement of tooltip
22+
place?: Place;
23+
// Tooltip styling theme
24+
type?: Type;
25+
// Behavior of tooltip
26+
effect?: Effect;
27+
// Global tooltip offset, e.g., offset={{ top: 10, left: 5 }}
28+
offset?: Offset;
29+
// Support <br /> to make explicitly multiline tooltip comments
30+
multiline?: boolean;
31+
// Add 1px white border
32+
border?: boolean;
33+
// Popup text color
34+
textColor?: string;
35+
// Popup background color
36+
backgroundColor?: string;
37+
// Popup border color
38+
borderColor?: string;
39+
// Popup arrow color
40+
arrowColor?: string;
41+
// Whether to inject the style header into the page
42+
// dynamically (violates CSP style-src, but is a convenient default);
43+
// default = true
44+
insecure?: boolean;
45+
// Extra style class
46+
class?: string;
47+
// Extra style class
48+
className?: string;
49+
// HTML id attribute
50+
id?: string;
51+
// Inject raw HTML? (This is a security risk)
52+
html?: boolean;
53+
// Time delay for hiding popup
54+
delayHide?: number;
55+
// Time delay for updating popup
56+
delayUpdate?: number;
57+
// Time delay for showing popup
58+
delayShow?: number;
59+
// Custom event to trigger tooltip
60+
event?: string;
61+
// Custom event to hide tooltip
62+
// (this requires the event prop as well)
63+
eventOff?: string;
64+
// When set to true, custom event's propagation
65+
// mode will be captue
66+
isCapture?: boolean;
67+
// Global event to hide tooltip
68+
globalEventOff?: string;
69+
// Function to dynamically generate the tooltip content
70+
getContent?: GetContent;
71+
// Callback after tooltip is shown
72+
afterShow?: VoidFunc;
73+
// Callback after tooltip is hidden
74+
afterHide?: VoidFunc;
75+
// Callback to override the tooltip position
76+
overridePosition?: (
77+
position: { left: number; top: number; },
78+
currentEvent: Event,
79+
currentTarget: EventTarget,
80+
// node is the ref argument, and the wrapper
81+
// is restricted to: div | span
82+
refNode: null | HTMLDivElement | HTMLSpanElement,
83+
place: Place,
84+
desiredPlace: Place,
85+
effect: Effect,
86+
offset: Offset,
87+
) => ({ left: number; top: number; });
88+
// Manually disable the tooltip behavior
89+
disable?: boolean;
90+
// Hide the tooltip when scrolling;
91+
// default = true
92+
scrollHide?: boolean;
93+
// Hide the tooltip when risizing the window;
94+
// default = true
95+
resizeHide?: boolean;
96+
// The tooltip parent component;
97+
// default = 'div'
98+
wrapper?: 'div' | 'span';
99+
// Listen to body events vs. individual events
100+
bodyMode?: boolean;
101+
// List of potential custom events to trigger the popup (in body mode)
102+
possibleCustomEvents?: string;
103+
// List of potential custom events to hide the popup (in body mode)
104+
possibleCustomEventsOff?: string;
105+
// Should the tooltip by clickable?
106+
clickable?: boolean;
107+
}
108+
109+
// ReactTooltip component is the default export
110+
export default class ReactTooltip extends React.Component<TooltipProps> {
111+
// static methods
112+
static show: (target: string) => {};
113+
static hide: (target?: string) => {};
114+
static rebuild: () => {};
115+
}

0 commit comments

Comments
 (0)