react-tooltip 5.26.1 → 5.26.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react-tooltip.cjs +39 -22
- package/dist/react-tooltip.cjs.map +1 -1
- package/dist/react-tooltip.min.cjs +2 -2
- package/dist/react-tooltip.min.cjs.map +1 -1
- package/dist/react-tooltip.min.mjs +2 -2
- package/dist/react-tooltip.min.mjs.map +1 -1
- package/dist/react-tooltip.mjs +39 -22
- package/dist/react-tooltip.mjs.map +1 -1
- package/dist/react-tooltip.umd.js +39 -22
- package/dist/react-tooltip.umd.js.map +1 -1
- package/dist/react-tooltip.umd.min.js +2 -2
- package/dist/react-tooltip.umd.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -351,6 +351,28 @@
|
|
|
351
351
|
return Number(amount) * (unit === 'ms' ? 1 : 1000);
|
|
352
352
|
};
|
|
353
353
|
|
|
354
|
+
const isObject = (object) => {
|
|
355
|
+
return object !== null && typeof object === 'object';
|
|
356
|
+
};
|
|
357
|
+
const deepEqual = (object1, object2) => {
|
|
358
|
+
if (!isObject(object1) || !isObject(object2)) {
|
|
359
|
+
return object1 === object2;
|
|
360
|
+
}
|
|
361
|
+
const keys1 = Object.keys(object1);
|
|
362
|
+
const keys2 = Object.keys(object2);
|
|
363
|
+
if (keys1.length !== keys2.length) {
|
|
364
|
+
return false;
|
|
365
|
+
}
|
|
366
|
+
return keys1.every((key) => {
|
|
367
|
+
const val1 = object1[key];
|
|
368
|
+
const val2 = object2[key];
|
|
369
|
+
if (isObject(val1) && isObject(val2)) {
|
|
370
|
+
return deepEqual(val1, val2);
|
|
371
|
+
}
|
|
372
|
+
return val1 === val2;
|
|
373
|
+
});
|
|
374
|
+
};
|
|
375
|
+
|
|
354
376
|
var coreStyles = {"tooltip":"core-styles-module_tooltip__3vRRp","fixed":"core-styles-module_fixed__pcSol","arrow":"core-styles-module_arrow__cvMwQ","noArrow":"core-styles-module_noArrow__xock6","clickable":"core-styles-module_clickable__ZuTTB","show":"core-styles-module_show__Nt9eE","closing":"core-styles-module_closing__sGnxF"};
|
|
355
377
|
|
|
356
378
|
var styles = {"tooltip":"styles-module_tooltip__mnnfp","arrow":"styles-module_arrow__K0L3T","dark":"styles-module_dark__xNqje","light":"styles-module_light__Z6W-X","success":"styles-module_success__A2AKt","warning":"styles-module_warning__SCK0X","error":"styles-module_error__JvumD","info":"styles-module_info__BWdHW"};
|
|
@@ -366,9 +388,11 @@
|
|
|
366
388
|
const tooltipShowDelayTimerRef = React.useRef(null);
|
|
367
389
|
const tooltipHideDelayTimerRef = React.useRef(null);
|
|
368
390
|
const missedTransitionTimerRef = React.useRef(null);
|
|
369
|
-
const [
|
|
370
|
-
|
|
371
|
-
|
|
391
|
+
const [computedPosition, setComputedPosition] = React.useState({
|
|
392
|
+
tooltipStyles: {},
|
|
393
|
+
tooltipArrowStyles: {},
|
|
394
|
+
place,
|
|
395
|
+
});
|
|
372
396
|
const [show, setShow] = React.useState(false);
|
|
373
397
|
const [rendered, setRendered] = React.useState(false);
|
|
374
398
|
const [imperativeOptions, setImperativeOptions] = React.useState(null);
|
|
@@ -526,6 +550,11 @@
|
|
|
526
550
|
}, transitionShowDelay + 25);
|
|
527
551
|
}
|
|
528
552
|
}, [show]);
|
|
553
|
+
const handleComputedPosition = (newComputedPosition) => {
|
|
554
|
+
setComputedPosition((oldComputedPosition) => deepEqual(oldComputedPosition, newComputedPosition)
|
|
555
|
+
? oldComputedPosition
|
|
556
|
+
: newComputedPosition);
|
|
557
|
+
};
|
|
529
558
|
const handleShowTooltipDelayed = (delay = delayShow) => {
|
|
530
559
|
if (tooltipShowDelayTimerRef.current) {
|
|
531
560
|
clearTimeout(tooltipShowDelayTimerRef.current);
|
|
@@ -618,13 +647,7 @@
|
|
|
618
647
|
middlewares,
|
|
619
648
|
border,
|
|
620
649
|
}).then((computedStylesData) => {
|
|
621
|
-
|
|
622
|
-
setInlineStyles(computedStylesData.tooltipStyles);
|
|
623
|
-
}
|
|
624
|
-
if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
|
|
625
|
-
setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
|
|
626
|
-
}
|
|
627
|
-
setActualPlacement(computedStylesData.place);
|
|
650
|
+
handleComputedPosition(computedStylesData);
|
|
628
651
|
});
|
|
629
652
|
};
|
|
630
653
|
const handlePointerMove = (event) => {
|
|
@@ -717,13 +740,7 @@
|
|
|
717
740
|
// invalidate computed positions after remount
|
|
718
741
|
return;
|
|
719
742
|
}
|
|
720
|
-
|
|
721
|
-
setInlineStyles(computedStylesData.tooltipStyles);
|
|
722
|
-
}
|
|
723
|
-
if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
|
|
724
|
-
setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
|
|
725
|
-
}
|
|
726
|
-
setActualPlacement(computedStylesData.place);
|
|
743
|
+
handleComputedPosition(computedStylesData);
|
|
727
744
|
});
|
|
728
745
|
}, [
|
|
729
746
|
show,
|
|
@@ -1066,7 +1083,7 @@
|
|
|
1066
1083
|
}
|
|
1067
1084
|
}, [delayShow]);
|
|
1068
1085
|
const actualContent = (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.content) !== null && _a !== void 0 ? _a : content;
|
|
1069
|
-
const canShow = show && Object.keys(
|
|
1086
|
+
const canShow = show && Object.keys(computedPosition.tooltipStyles).length > 0;
|
|
1070
1087
|
React.useImperativeHandle(forwardRef, () => ({
|
|
1071
1088
|
open: (options) => {
|
|
1072
1089
|
if (options === null || options === void 0 ? void 0 : options.anchorSelect) {
|
|
@@ -1098,10 +1115,10 @@
|
|
|
1098
1115
|
}
|
|
1099
1116
|
},
|
|
1100
1117
|
activeAnchor,
|
|
1101
|
-
place:
|
|
1118
|
+
place: computedPosition.place,
|
|
1102
1119
|
isOpen: Boolean(rendered && !hidden && actualContent && canShow),
|
|
1103
1120
|
}));
|
|
1104
|
-
return rendered && !hidden && actualContent ? (React__default["default"].createElement(WrapperElement, { id: id, role: role, className: classNames__default["default"]('react-tooltip', coreStyles['tooltip'], styles['tooltip'], styles[variant], className, `react-tooltip__place-${
|
|
1121
|
+
return rendered && !hidden && actualContent ? (React__default["default"].createElement(WrapperElement, { id: id, role: role, className: classNames__default["default"]('react-tooltip', coreStyles['tooltip'], styles['tooltip'], styles[variant], className, `react-tooltip__place-${computedPosition.place}`, coreStyles[canShow ? 'show' : 'closing'], canShow ? 'react-tooltip__show' : 'react-tooltip__closing', positionStrategy === 'fixed' && coreStyles['fixed'], clickable && coreStyles['clickable']), onTransitionEnd: (event) => {
|
|
1105
1122
|
if (missedTransitionTimerRef.current) {
|
|
1106
1123
|
clearTimeout(missedTransitionTimerRef.current);
|
|
1107
1124
|
}
|
|
@@ -1113,12 +1130,12 @@
|
|
|
1113
1130
|
afterHide === null || afterHide === void 0 ? void 0 : afterHide();
|
|
1114
1131
|
}, style: {
|
|
1115
1132
|
...externalStyles,
|
|
1116
|
-
...
|
|
1133
|
+
...computedPosition.tooltipStyles,
|
|
1117
1134
|
opacity: opacity !== undefined && canShow ? opacity : undefined,
|
|
1118
1135
|
}, ref: tooltipRef },
|
|
1119
1136
|
actualContent,
|
|
1120
1137
|
React__default["default"].createElement(WrapperElement, { className: classNames__default["default"]('react-tooltip-arrow', coreStyles['arrow'], styles['arrow'], classNameArrow, noArrow && coreStyles['noArrow']), style: {
|
|
1121
|
-
...
|
|
1138
|
+
...computedPosition.tooltipArrowStyles,
|
|
1122
1139
|
background: arrowColor
|
|
1123
1140
|
? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
|
|
1124
1141
|
: undefined,
|