|
| 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