diff --git a/README.md b/README.md index 81ef13c73..e847f559b 100755 --- a/README.md +++ b/README.md @@ -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) diff --git a/contributing.md b/contributing.md index e2db610ee..f1ff238c7 100755 --- a/contributing.md +++ b/contributing.md @@ -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. diff --git a/react-tooltip.d.ts b/react-tooltip.d.ts new file mode 100644 index 000000000..02d82356e --- /dev/null +++ b/react-tooltip.d.ts @@ -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
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 { + // static methods + static show: (target: string) => {}; + static hide: (target?: string) => {}; + static rebuild: () => {}; +}