react-tooltip 4.4.0 → 4.4.3
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/index.es.js +19 -5
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +19 -5
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -2347,7 +2347,7 @@ function generateUUID() {
|
|
|
2347
2347
|
return 't' + uuid.v4();
|
|
2348
2348
|
}
|
|
2349
2349
|
|
|
2350
|
-
var baseCss = ".__react_component_tooltip {\n border-radius: 3px;\n display: inline-block;\n font-size: 13px;\n left: -999em;\n opacity: 0;\n position: fixed;\n pointer-events: none;\n transition: opacity 0.3s ease-out;\n top: -999em;\n visibility: hidden;\n z-index: 999;\n}\n.__react_component_tooltip.allow_hover, .__react_component_tooltip.allow_click {\n pointer-events: auto;\n}\n.__react_component_tooltip::before, .__react_component_tooltip::after {\n content: \"\";\n width: 0;\n height: 0;\n position: absolute;\n}\n.__react_component_tooltip.show {\n opacity: 0.9;\n margin-top: 0;\n margin-left: 0;\n visibility: visible;\n}\n.__react_component_tooltip.place-top::before {\n
|
|
2350
|
+
var baseCss = ".__react_component_tooltip {\n border-radius: 3px;\n display: inline-block;\n font-size: 13px;\n left: -999em;\n opacity: 0;\n position: fixed;\n pointer-events: none;\n transition: opacity 0.3s ease-out;\n top: -999em;\n visibility: hidden;\n z-index: 999;\n}\n.__react_component_tooltip.allow_hover, .__react_component_tooltip.allow_click {\n pointer-events: auto;\n}\n.__react_component_tooltip::before, .__react_component_tooltip::after {\n content: \"\";\n width: 0;\n height: 0;\n position: absolute;\n}\n.__react_component_tooltip.show {\n opacity: 0.9;\n margin-top: 0;\n margin-left: 0;\n visibility: visible;\n}\n.__react_component_tooltip.place-top::before {\n bottom: 0;\n left: 50%;\n margin-left: -11px;\n}\n.__react_component_tooltip.place-bottom::before {\n top: 0;\n left: 50%;\n margin-left: -11px;\n}\n.__react_component_tooltip.place-left::before {\n right: 0;\n top: 50%;\n margin-top: -9px;\n}\n.__react_component_tooltip.place-right::before {\n left: 0;\n top: 50%;\n margin-top: -9px;\n}\n.__react_component_tooltip .multi-line {\n display: block;\n padding: 2px 0;\n text-align: center;\n}";
|
|
2351
2351
|
|
|
2352
2352
|
/**
|
|
2353
2353
|
* Default pop-up style values (text color, background color).
|
|
@@ -2394,12 +2394,16 @@ function getDefaultPopupColors(type) {
|
|
|
2394
2394
|
return defaultColors[type] ? _objectSpread2({}, defaultColors[type]) : undefined;
|
|
2395
2395
|
}
|
|
2396
2396
|
var DEFAULT_PADDING = '8px 21px';
|
|
2397
|
+
var DEFAULT_RADIUS = {
|
|
2398
|
+
tooltip: 3,
|
|
2399
|
+
arrow: 0
|
|
2400
|
+
};
|
|
2397
2401
|
|
|
2398
2402
|
/**
|
|
2399
2403
|
* Generates the specific tooltip style for use on render.
|
|
2400
2404
|
*/
|
|
2401
|
-
function generateTooltipStyle(uuid, customColors, type, hasBorder, padding) {
|
|
2402
|
-
return generateStyle(uuid, getPopupColors(customColors, type, hasBorder), padding);
|
|
2405
|
+
function generateTooltipStyle(uuid, customColors, type, hasBorder, padding, radius) {
|
|
2406
|
+
return generateStyle(uuid, getPopupColors(customColors, type, hasBorder), padding, radius);
|
|
2403
2407
|
}
|
|
2404
2408
|
|
|
2405
2409
|
/**
|
|
@@ -2407,11 +2411,14 @@ function generateTooltipStyle(uuid, customColors, type, hasBorder, padding) {
|
|
|
2407
2411
|
*/
|
|
2408
2412
|
function generateStyle(uuid, colors) {
|
|
2409
2413
|
var padding = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_PADDING;
|
|
2414
|
+
var radius = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : DEFAULT_RADIUS;
|
|
2410
2415
|
var textColor = colors.text;
|
|
2411
2416
|
var backgroundColor = colors.background;
|
|
2412
2417
|
var borderColor = colors.border;
|
|
2413
2418
|
var arrowColor = colors.arrow;
|
|
2414
|
-
|
|
2419
|
+
var arrowRadius = radius.arrow;
|
|
2420
|
+
var tooltipRadius = radius.tooltip;
|
|
2421
|
+
return "\n \t.".concat(uuid, " {\n\t color: ").concat(textColor, ";\n\t background: ").concat(backgroundColor, ";\n\t border: 1px solid ").concat(borderColor, ";\n\t border-radius: ").concat(tooltipRadius, "px;\n\t padding: ").concat(padding, ";\n \t}\n\n \t.").concat(uuid, ".place-top {\n margin-top: -10px;\n }\n .").concat(uuid, ".place-top::before {\n content: \"\";\n background-color: inherit;\n position: absolute;\n z-index: 2;\n width: 18px;\n height: 10px;\n }\n .").concat(uuid, ".place-top::after {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 10px;\n border-top-right-radius: ").concat(arrowRadius, "px;\n border: 1px solid ").concat(borderColor, ";\n background-color: ").concat(arrowColor, ";\n z-index: 1;\n bottom: -6px;\n left: 50%;\n margin-left: -8px;\n transform: rotate(135deg);\n }\n\n .").concat(uuid, ".place-bottom {\n margin-top: 10px;\n }\n .").concat(uuid, ".place-bottom::before {\n content: \"\";\n background-color: inherit;\n position: absolute;\n z-index: 2;\n width: 18px;\n height: 10px;\n }\n .").concat(uuid, ".place-bottom::after {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 10px;\n border-top-right-radius: ").concat(arrowRadius, "px;\n border: 1px solid ").concat(borderColor, ";\n background-color: ").concat(arrowColor, ";\n z-index: 1;\n top: -6px;\n left: 50%;\n margin-left: -8px;\n transform: rotate(45deg);\n }\n\n .").concat(uuid, ".place-left {\n margin-left: -10px;\n }\n .").concat(uuid, ".place-left::before {\n content: \"\";\n background-color: inherit;\n position: absolute;\n z-index: 2;\n width: 10px;\n height: 18px;\n }\n .").concat(uuid, ".place-left::after {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 10px;\n border-top-right-radius: ").concat(arrowRadius, "px;\n border: 1px solid ").concat(borderColor, ";\n background-color: ").concat(arrowColor, ";\n z-index: 1;\n right: -6px;\n top: 50%;\n margin-top: -6px;\n transform: rotate(45deg);\n }\n\n .").concat(uuid, ".place-right {\n margin-left: 10px;\n }\n .").concat(uuid, ".place-right::before {\n content: \"\";\n background-color: inherit;\n position: absolute;\n z-index: 2;\n width: 10px;\n height: 18px;\n }\n .").concat(uuid, ".place-right::after {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 10px;\n border-top-right-radius: ").concat(arrowRadius, "px;\n border: 1px solid ").concat(borderColor, ";\n background-color: ").concat(arrowColor, ";\n z-index: 1;\n left: -6px;\n top: 50%;\n margin-top: -6px;\n transform: rotate(-135deg);\n }\n ");
|
|
2415
2422
|
}
|
|
2416
2423
|
function getPopupColors(customColors, type, hasBorder) {
|
|
2417
2424
|
var textColor = customColors.text;
|
|
@@ -2461,6 +2468,7 @@ var ReactTooltip = staticMethods(_class = windowListener(_class = customEvent(_c
|
|
|
2461
2468
|
border: false,
|
|
2462
2469
|
borderClass: 'border',
|
|
2463
2470
|
customColors: {},
|
|
2471
|
+
customRadius: {},
|
|
2464
2472
|
offset: {},
|
|
2465
2473
|
padding: props.padding,
|
|
2466
2474
|
extraClass: '',
|
|
@@ -2786,6 +2794,10 @@ var ReactTooltip = staticMethods(_class = windowListener(_class = customEvent(_c
|
|
|
2786
2794
|
border: target.getAttribute('data-border-color') || self.props.borderColor || null,
|
|
2787
2795
|
arrow: target.getAttribute('data-arrow-color') || self.props.arrowColor || null
|
|
2788
2796
|
},
|
|
2797
|
+
customRadius: {
|
|
2798
|
+
tooltip: target.getAttribute('data-tooltip-radius') || self.props.tooltipRadius || '3',
|
|
2799
|
+
arrow: target.getAttribute('data-arrow-radius') || self.props.arrowRadius || '0'
|
|
2800
|
+
},
|
|
2789
2801
|
effect: effect,
|
|
2790
2802
|
offset: offset,
|
|
2791
2803
|
padding: target.getAttribute('data-padding') || self.props.padding,
|
|
@@ -3060,7 +3072,7 @@ var ReactTooltip = staticMethods(_class = windowListener(_class = customEvent(_c
|
|
|
3060
3072
|
uuid = _this$state3.uuid;
|
|
3061
3073
|
var content = this.getTooltipContent();
|
|
3062
3074
|
var isEmptyTip = this.isEmptyTip(content);
|
|
3063
|
-
var style = generateTooltipStyle(this.state.uuid, this.state.customColors, this.state.type, this.state.border, this.state.padding);
|
|
3075
|
+
var style = generateTooltipStyle(this.state.uuid, this.state.customColors, this.state.type, this.state.border, this.state.padding, this.state.customRadius);
|
|
3064
3076
|
var tooltipClass = '__react_component_tooltip' + " ".concat(this.state.uuid) + (this.state.show && !disable && !isEmptyTip ? ' show' : '') + (this.state.border ? ' ' + this.state.borderClass : '') + " place-".concat(this.state.place) + // top, bottom, left, right
|
|
3065
3077
|
" type-".concat(this.hasCustomColors() ? 'custom' : this.state.type) + (
|
|
3066
3078
|
// dark, success, warning, error, info, light, custom
|
|
@@ -3119,6 +3131,8 @@ var ReactTooltip = staticMethods(_class = windowListener(_class = customEvent(_c
|
|
|
3119
3131
|
backgroundColor: PropTypes__default["default"].string,
|
|
3120
3132
|
borderColor: PropTypes__default["default"].string,
|
|
3121
3133
|
arrowColor: PropTypes__default["default"].string,
|
|
3134
|
+
arrowRadius: PropTypes__default["default"].string,
|
|
3135
|
+
tooltipRadius: PropTypes__default["default"].string,
|
|
3122
3136
|
insecure: PropTypes__default["default"].bool,
|
|
3123
3137
|
"class": PropTypes__default["default"].string,
|
|
3124
3138
|
className: PropTypes__default["default"].string,
|