Skip to content

Commit

Permalink
feat: adding typescript type defs (ReactTooltip#571)
Browse files Browse the repository at this point in the history
  • Loading branch information
Jarch09 authored Apr 8, 2020
1 parent d937e59 commit cb2b921
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 1 deletion.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ Check example: [React-tooltip Test](https://react-tooltip.netlify.com/)
Global|Specific |Type |Values | Description
|:---|:---|:---|:---|:----
place | data-place | String | top, right, bottom, left | placement
type | data-type | String | success, warning, error, info, light | theme
type | data-type | String | dark, success, warning, error, info, light | theme
effect| data-effect | String | float, solid | behaviour of tooltip
event | data-event | String | e.g. click | custom event to trigger tooltip
eventOff | data-event-off | String | e.g. click | custom event to hide tooltip (only makes effect after setting event attribute)
Expand Down
5 changes: 5 additions & 0 deletions contributing.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,8 @@ We are using semantic-release instead of this:
* `git tag -a 3.X.Y -m 3.X.Y` `git push --tags`
* `npm publish`
* add a version on the github release page, based on the tag


## Typescript Type Definitions

Ensure that any changes modifying the **props** or **staticmethods** are also reflected in the typescript type definitions file.
115 changes: 115 additions & 0 deletions react-tooltip.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
import * as React from 'react';

interface Offset {
top?: number;
right?: number;
left?: number;
bottom?: number;
}

type Place = 'top' | 'right' | 'bottom' | 'left';
type Type = 'dark' | 'success' | 'warning' | 'error' | 'info' | 'light';
type Effect = 'float' | 'solid';

type VoidFunc = (...args: any[]) => void;
type GetContentFunc = (toolTipStr: string) => React.ReactNode;
type GetContent = GetContentFunc | [GetContentFunc, number];

interface TooltipProps {
children?: React.ReactNode;
uuid?: string;
// Placement of tooltip
place?: Place;
// Tooltip styling theme
type?: Type;
// Behavior of tooltip
effect?: Effect;
// Global tooltip offset, e.g., offset={{ top: 10, left: 5 }}
offset?: Offset;
// Support <br /> to make explicitly multiline tooltip comments
multiline?: boolean;
// Add 1px white border
border?: boolean;
// Popup text color
textColor?: string;
// Popup background color
backgroundColor?: string;
// Popup border color
borderColor?: string;
// Popup arrow color
arrowColor?: string;
// Whether to inject the style header into the page
// dynamically (violates CSP style-src, but is a convenient default);
// default = true
insecure?: boolean;
// Extra style class
class?: string;
// Extra style class
className?: string;
// HTML id attribute
id?: string;
// Inject raw HTML? (This is a security risk)
html?: boolean;
// Time delay for hiding popup
delayHide?: number;
// Time delay for updating popup
delayUpdate?: number;
// Time delay for showing popup
delayShow?: number;
// Custom event to trigger tooltip
event?: string;
// Custom event to hide tooltip
// (this requires the event prop as well)
eventOff?: string;
// When set to true, custom event's propagation
// mode will be captue
isCapture?: boolean;
// Global event to hide tooltip
globalEventOff?: string;
// Function to dynamically generate the tooltip content
getContent?: GetContent;
// Callback after tooltip is shown
afterShow?: VoidFunc;
// Callback after tooltip is hidden
afterHide?: VoidFunc;
// Callback to override the tooltip position
overridePosition?: (
position: { left: number; top: number; },
currentEvent: Event,
currentTarget: EventTarget,
// node is the ref argument, and the wrapper
// is restricted to: div | span
refNode: null | HTMLDivElement | HTMLSpanElement,
place: Place,
desiredPlace: Place,
effect: Effect,
offset: Offset,
) => ({ left: number; top: number; });
// Manually disable the tooltip behavior
disable?: boolean;
// Hide the tooltip when scrolling;
// default = true
scrollHide?: boolean;
// Hide the tooltip when risizing the window;
// default = true
resizeHide?: boolean;
// The tooltip parent component;
// default = 'div'
wrapper?: 'div' | 'span';
// Listen to body events vs. individual events
bodyMode?: boolean;
// List of potential custom events to trigger the popup (in body mode)
possibleCustomEvents?: string;
// List of potential custom events to hide the popup (in body mode)
possibleCustomEventsOff?: string;
// Should the tooltip by clickable?
clickable?: boolean;
}

// ReactTooltip component is the default export
export default class ReactTooltip extends React.Component<TooltipProps> {
// static methods
static show: (target: string) => {};
static hide: (target?: string) => {};
static rebuild: () => {};
}

0 comments on commit cb2b921

Please sign in to comment.