1 | import { __rest } from "tslib";
|
2 |
|
3 | import * as React from 'react';
|
4 | import styles from '@patternfly/react-styles/css/components/Tooltip/tooltip';
|
5 | import { css } from '@patternfly/react-styles';
|
6 | import { TooltipContent } from './TooltipContent';
|
7 | import { TooltipArrow } from './TooltipArrow';
|
8 | import { KEY_CODES } from '../../helpers/constants';
|
9 | import tooltipMaxWidth from '@patternfly/react-tokens/dist/esm/c_tooltip_MaxWidth';
|
10 | import { Popper, getOpacityTransition } from '../../helpers/Popper/Popper';
|
11 | export var TooltipPosition;
|
12 | (function (TooltipPosition) {
|
13 | TooltipPosition["auto"] = "auto";
|
14 | TooltipPosition["top"] = "top";
|
15 | TooltipPosition["bottom"] = "bottom";
|
16 | TooltipPosition["left"] = "left";
|
17 | TooltipPosition["right"] = "right";
|
18 | TooltipPosition["topStart"] = "top-start";
|
19 | TooltipPosition["topEnd"] = "top-end";
|
20 | TooltipPosition["bottomStart"] = "bottom-start";
|
21 | TooltipPosition["bottomEnd"] = "bottom-end";
|
22 | TooltipPosition["leftStart"] = "left-start";
|
23 | TooltipPosition["leftEnd"] = "left-end";
|
24 | TooltipPosition["rightStart"] = "right-start";
|
25 | TooltipPosition["rightEnd"] = "right-end";
|
26 | })(TooltipPosition || (TooltipPosition = {}));
|
27 |
|
28 | let pfTooltipIdCounter = 1;
|
29 | export const Tooltip = (_a) => {
|
30 | var { content: bodyContent, position = 'top', trigger = 'mouseenter focus', isVisible = false, isContentLeftAligned = false, enableFlip = true, className = '', entryDelay = 300, exitDelay = 0, appendTo = () => document.body, zIndex = 9999, maxWidth = tooltipMaxWidth.value, distance = 15, aria = 'describedby',
|
31 |
|
32 | flipBehavior = ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom'], id = `pf-tooltip-${pfTooltipIdCounter++}`, children, animationDuration = 300, reference, 'aria-live': ariaLive = reference ? 'polite' : 'off', boundary, isAppLauncher, tippyProps } = _a, rest = __rest(_a, ["content", "position", "trigger", "isVisible", "isContentLeftAligned", "enableFlip", "className", "entryDelay", "exitDelay", "appendTo", "zIndex", "maxWidth", "distance", "aria", "flipBehavior", "id", "children", "animationDuration", "reference", 'aria-live', "boundary", "isAppLauncher", "tippyProps"]);
|
33 | if (process.env.NODE_ENV !== 'production') {
|
34 | boundary !== undefined &&
|
35 | console.warn('The Tooltip boundary prop has been deprecated. If you want to constrain the popper to a specific element use the appendTo prop instead.');
|
36 | isAppLauncher !== undefined &&
|
37 | console.warn('The Tooltip isAppLauncher prop has been deprecated and is no longer used.');
|
38 | tippyProps !== undefined && console.warn('The Tooltip tippyProps prop has been deprecated and is no longer used.');
|
39 | }
|
40 |
|
41 | const hideOnClick = true;
|
42 | const triggerOnMouseenter = trigger.includes('mouseenter');
|
43 | const triggerOnFocus = trigger.includes('focus');
|
44 | const triggerOnClick = trigger.includes('click');
|
45 | const triggerManually = trigger === 'manual';
|
46 | const [visible, setVisible] = React.useState(false);
|
47 | const [opacity, setOpacity] = React.useState(0);
|
48 | const transitionTimerRef = React.useRef(null);
|
49 | const showTimerRef = React.useRef(null);
|
50 | const hideTimerRef = React.useRef(null);
|
51 | const clearTimeouts = (timeoutRefs) => {
|
52 | timeoutRefs.forEach(ref => {
|
53 | if (ref.current) {
|
54 | clearTimeout(ref.current);
|
55 | }
|
56 | });
|
57 | };
|
58 |
|
59 | React.useEffect(() => () => {
|
60 | clearTimeouts([transitionTimerRef, hideTimerRef, showTimerRef]);
|
61 | }, []);
|
62 | const onDocumentKeyDown = (event) => {
|
63 | if (!triggerManually) {
|
64 | if (event.keyCode === KEY_CODES.ESCAPE_KEY && visible) {
|
65 | hide();
|
66 | }
|
67 | }
|
68 | };
|
69 | const onTriggerEnter = (event) => {
|
70 | if (event.keyCode === KEY_CODES.ENTER) {
|
71 | if (!visible) {
|
72 | show();
|
73 | }
|
74 | else {
|
75 | hide();
|
76 | }
|
77 | }
|
78 | };
|
79 | React.useEffect(() => {
|
80 | if (isVisible) {
|
81 | show();
|
82 | }
|
83 | else {
|
84 | hide();
|
85 | }
|
86 | }, [isVisible]);
|
87 | const show = () => {
|
88 | clearTimeouts([transitionTimerRef, hideTimerRef]);
|
89 | showTimerRef.current = setTimeout(() => {
|
90 | setVisible(true);
|
91 | setOpacity(1);
|
92 | }, entryDelay);
|
93 | };
|
94 | const hide = () => {
|
95 | clearTimeouts([showTimerRef]);
|
96 | hideTimerRef.current = setTimeout(() => {
|
97 | setOpacity(0);
|
98 | transitionTimerRef.current = setTimeout(() => setVisible(false), animationDuration);
|
99 | }, exitDelay);
|
100 | };
|
101 | const positionModifiers = {
|
102 | top: styles.modifiers.top,
|
103 | bottom: styles.modifiers.bottom,
|
104 | left: styles.modifiers.left,
|
105 | right: styles.modifiers.right,
|
106 | 'top-start': styles.modifiers.topLeft,
|
107 | 'top-end': styles.modifiers.topRight,
|
108 | 'bottom-start': styles.modifiers.bottomLeft,
|
109 | 'bottom-end': styles.modifiers.bottomRight,
|
110 | 'left-start': styles.modifiers.leftTop,
|
111 | 'left-end': styles.modifiers.leftBottom,
|
112 | 'right-start': styles.modifiers.rightTop,
|
113 | 'right-end': styles.modifiers.rightBottom
|
114 | };
|
115 | const hasCustomMaxWidth = maxWidth !== tooltipMaxWidth.value;
|
116 | const content = (React.createElement("div", Object.assign({ "aria-live": ariaLive, className: css(styles.tooltip, className), role: "tooltip", id: id, style: {
|
117 | maxWidth: hasCustomMaxWidth ? maxWidth : null,
|
118 | opacity,
|
119 | transition: getOpacityTransition(animationDuration)
|
120 | } }, rest),
|
121 | React.createElement(TooltipArrow, null),
|
122 | React.createElement(TooltipContent, { isLeftAligned: isContentLeftAligned }, bodyContent)));
|
123 | const onDocumentClick = (event, triggerElement) => {
|
124 |
|
125 |
|
126 | if (hideOnClick === true) {
|
127 |
|
128 | if (visible) {
|
129 | hide();
|
130 | }
|
131 | else if (event.target === triggerElement) {
|
132 | show();
|
133 | }
|
134 | }
|
135 | else if (hideOnClick === 'toggle' && event.target === triggerElement) {
|
136 |
|
137 | if (visible) {
|
138 | hide();
|
139 | }
|
140 | else {
|
141 | show();
|
142 | }
|
143 | }
|
144 | else if (hideOnClick === false && !visible && event.target === triggerElement) {
|
145 | show();
|
146 | }
|
147 | };
|
148 | const addAriaToTrigger = () => {
|
149 | if (aria === 'describedby' && children && children.props && !children.props['aria-describedby']) {
|
150 | return React.cloneElement(children, { 'aria-describedby': id });
|
151 | }
|
152 | else if (aria === 'labelledby' && children.props && !children.props['aria-labelledby']) {
|
153 | return React.cloneElement(children, { 'aria-labelledby': id });
|
154 | }
|
155 | return children;
|
156 | };
|
157 | return (React.createElement(Popper, { trigger: aria !== 'none' && visible ? addAriaToTrigger() : children, reference: reference, popper: content, popperMatchesTriggerWidth: false, appendTo: appendTo, isVisible: visible, positionModifiers: positionModifiers, distance: distance, placement: position, onMouseEnter: triggerOnMouseenter && show, onMouseLeave: triggerOnMouseenter && hide, onFocus: triggerOnFocus && show, onBlur: triggerOnFocus && hide, onDocumentClick: triggerOnClick && onDocumentClick, onDocumentKeyDown: triggerManually ? null : onDocumentKeyDown, onTriggerEnter: triggerManually ? null : onTriggerEnter, enableFlip: enableFlip, zIndex: zIndex, flipBehavior: flipBehavior }));
|
158 | };
|
159 | Tooltip.displayName = 'Tooltip';
|
160 |
|
\ | No newline at end of file |