Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

feat: adding typescript type defs #571

Merged
merged 4 commits into from
Apr 8, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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: () => {};
}