phx-react 1.3.1079 → 1.3.1080
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/cjs/components/ToolTip/ToolTip.d.ts +0 -1
- package/dist/cjs/components/ToolTip/ToolTip.js +34 -79
- package/dist/cjs/components/ToolTip/ToolTip.js.map +1 -1
- package/dist/esm/components/ToolTip/ToolTip.d.ts +0 -1
- package/dist/esm/components/ToolTip/ToolTip.js +35 -80
- package/dist/esm/components/ToolTip/ToolTip.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ exports.__esModule = true;
|
|
|
3
3
|
var tslib_1 = require("tslib");
|
|
4
4
|
var react_1 = tslib_1.__importStar(require("react"));
|
|
5
5
|
var PHXTooltip = function (_a) {
|
|
6
|
-
var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.contentClassName, contentClassName = _c === void 0 ? 'max-w-[18rem]' : _c, content = _a.content, _d = _a.underLine, underLine = _d === void 0 ? false : _d, _e = _a.isDisableHover, isDisableHover = _e === void 0 ? false : _e
|
|
6
|
+
var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.contentClassName, contentClassName = _c === void 0 ? 'max-w-[18rem]' : _c, content = _a.content, _d = _a.underLine, underLine = _d === void 0 ? false : _d, _e = _a.isDisableHover, isDisableHover = _e === void 0 ? false : _e;
|
|
7
7
|
var contentRef = (0, react_1.useRef)(null);
|
|
8
8
|
var titleRef = (0, react_1.useRef)(null);
|
|
9
9
|
var _f = (0, react_1.useState)({
|
|
@@ -25,85 +25,43 @@ var PHXTooltip = function (_a) {
|
|
|
25
25
|
isOverFlowRight: left + width > viewportWidth - 10
|
|
26
26
|
};
|
|
27
27
|
};
|
|
28
|
-
var
|
|
29
|
-
var titleTop = titleBounding.top;
|
|
30
|
-
var titleLeft = titleBounding.left;
|
|
31
|
-
var titleWidth = titleBounding.width;
|
|
32
|
-
var titleHeight = titleBounding.height;
|
|
33
|
-
switch (position) {
|
|
34
|
-
case 'top':
|
|
35
|
-
return {
|
|
36
|
-
width: contentBounding.width,
|
|
37
|
-
height: contentBounding.height,
|
|
38
|
-
top: titleTop - contentBounding.height - 10,
|
|
39
|
-
left: titleLeft - contentBounding.width / 2 + titleWidth / 2,
|
|
40
|
-
pos: 'top'
|
|
41
|
-
};
|
|
42
|
-
case 'bottom':
|
|
43
|
-
return {
|
|
44
|
-
width: contentBounding.width,
|
|
45
|
-
height: contentBounding.height,
|
|
46
|
-
top: titleTop + titleHeight + 10,
|
|
47
|
-
left: titleLeft - contentBounding.width / 2 + titleWidth / 2,
|
|
48
|
-
pos: 'bottom'
|
|
49
|
-
};
|
|
50
|
-
case 'left':
|
|
51
|
-
return {
|
|
52
|
-
width: contentBounding.width,
|
|
53
|
-
height: contentBounding.height,
|
|
54
|
-
top: titleTop - contentBounding.height / 2 + titleHeight / 2,
|
|
55
|
-
left: titleLeft - contentBounding.width - 20,
|
|
56
|
-
pos: 'left'
|
|
57
|
-
};
|
|
58
|
-
case 'right':
|
|
59
|
-
return {
|
|
60
|
-
width: contentBounding.width,
|
|
61
|
-
height: contentBounding.height,
|
|
62
|
-
top: titleTop - contentBounding.height / 2 + titleHeight / 2,
|
|
63
|
-
left: titleLeft + titleWidth + 20,
|
|
64
|
-
pos: 'right'
|
|
65
|
-
};
|
|
66
|
-
default:
|
|
67
|
-
return {
|
|
68
|
-
width: contentBounding.width,
|
|
69
|
-
height: contentBounding.height,
|
|
70
|
-
top: titleTop - contentBounding.height - 10,
|
|
71
|
-
left: titleLeft - contentBounding.width / 2 + titleWidth / 2,
|
|
72
|
-
pos: 'top'
|
|
73
|
-
};
|
|
74
|
-
}
|
|
75
|
-
};
|
|
76
|
-
var calculateTooltipPosition = (0, react_1.useCallback)(function () {
|
|
28
|
+
var calculateTooltipPosition = function () {
|
|
77
29
|
if (!contentRef.current || !titleRef.current)
|
|
78
30
|
return;
|
|
79
31
|
var titleBounding = titleRef.current.getBoundingClientRect();
|
|
80
32
|
var contentBounding = contentRef.current.getBoundingClientRect();
|
|
81
|
-
var
|
|
82
|
-
var
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
|
|
33
|
+
var titleTop = titleBounding.top;
|
|
34
|
+
var titleLeft = titleBounding.left;
|
|
35
|
+
var titleWidth = titleBounding.width;
|
|
36
|
+
var titleHeight = titleBounding.height;
|
|
37
|
+
var newProps = {
|
|
38
|
+
width: contentBounding.width,
|
|
39
|
+
height: contentBounding.height,
|
|
40
|
+
top: titleTop - contentBounding.height - 10,
|
|
41
|
+
left: titleLeft - contentBounding.width / 2 + titleWidth / 2,
|
|
42
|
+
pos: 'top'
|
|
43
|
+
};
|
|
44
|
+
var _a = getOverflowDirections(newProps), isOverFlowLeft = _a.isOverFlowLeft, isOverFlowRight = _a.isOverFlowRight;
|
|
45
|
+
if (isOverFlowLeft) {
|
|
46
|
+
newProps = {
|
|
47
|
+
width: contentBounding.width,
|
|
48
|
+
height: contentBounding.height,
|
|
49
|
+
top: titleTop - contentBounding.height / 2 + titleHeight / 2,
|
|
50
|
+
left: titleLeft + titleWidth + 20,
|
|
51
|
+
pos: 'right'
|
|
52
|
+
};
|
|
94
53
|
}
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}
|
|
54
|
+
else if (isOverFlowRight) {
|
|
55
|
+
newProps = {
|
|
56
|
+
width: contentBounding.width,
|
|
57
|
+
height: contentBounding.height,
|
|
58
|
+
top: titleTop - contentBounding.height / 2 + titleHeight / 2,
|
|
59
|
+
left: titleLeft - contentBounding.width - 20,
|
|
60
|
+
pos: 'left'
|
|
61
|
+
};
|
|
104
62
|
}
|
|
105
63
|
setContentProps(function (prev) { return (tslib_1.__assign(tslib_1.__assign({}, prev), newProps)); });
|
|
106
|
-
}
|
|
64
|
+
};
|
|
107
65
|
var handleMouseEnter = function () {
|
|
108
66
|
setContentProps(function (prev) { return (tslib_1.__assign(tslib_1.__assign({}, prev), { show: true })); });
|
|
109
67
|
calculateTooltipPosition();
|
|
@@ -123,7 +81,7 @@ var PHXTooltip = function (_a) {
|
|
|
123
81
|
return function () {
|
|
124
82
|
cancelAnimationFrame(animationFrameId);
|
|
125
83
|
};
|
|
126
|
-
}, [contentProps.show
|
|
84
|
+
}, [contentProps.show]);
|
|
127
85
|
return (react_1["default"].createElement("div", { className: "relative w-fit text-xs font-normal text-gray-600 ".concat(underLine && 'border-b-2 border-dotted border-[#B5B5B5] pb-[1px]', " ").concat(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
|
|
128
86
|
content && (react_1["default"].createElement("div", { className: "fixed z-20 mb-2 flex transform flex-col items-center justify-center drop-shadow-md transition-opacity duration-200 ".concat(contentProps.show ? 'visible opacity-100' : 'invisible opacity-0'), style: {
|
|
129
87
|
top: contentProps.top,
|
|
@@ -133,19 +91,16 @@ var PHXTooltip = function (_a) {
|
|
|
133
91
|
contentProps.pos === 'top' && (react_1["default"].createElement("svg", { className: 'absolute -bottom-[10px] rotate-180 w-full', fill: 'none', height: '16', viewBox: '0 0 20 16', width: '20', xmlns: 'http://www.w3.org/2000/svg' },
|
|
134
92
|
react_1["default"].createElement("path", { d: 'M10.6082 1.2699L17.3135 10.5611C17.6715 11.0571 17.3171 11.75 16.7053 11.75H3.29465C2.68295 11.75 2.32852 11.0571 2.68649 10.5611L9.39184 1.2699C9.69119 0.855102 10.3088 0.855102 10.6082 1.2699Z', fill: 'white', stroke: '#D1D5DB', strokeWidth: '1' }),
|
|
135
93
|
react_1["default"].createElement("rect", { fill: 'white', height: '3', rx: '1.5', width: '16', x: '2', y: '10' }))),
|
|
136
|
-
contentProps.pos === 'bottom' && (react_1["default"].createElement("svg", { className: 'absolute -top-[10px] w-full', fill: 'none', height: '16', viewBox: '0 0 20 16', width: '20', xmlns: 'http://www.w3.org/2000/svg' },
|
|
137
|
-
react_1["default"].createElement("path", { d: 'M10.6082 1.2699L17.3135 10.5611C17.6715 11.0571 17.3171 11.75 16.7053 11.75H3.29465C2.68295 11.75 2.32852 11.0571 2.68649 10.5611L9.39184 1.2699C9.69119 0.855102 10.3088 0.855102 10.6082 1.2699Z', fill: 'white', stroke: '#D1D5DB', strokeWidth: '1' }),
|
|
138
|
-
react_1["default"].createElement("rect", { fill: 'white', height: '3', rx: '1.5', width: '16', x: '2', y: '10' }))),
|
|
139
94
|
contentProps.pos === 'left' && (react_1["default"].createElement("svg", { className: 'absolute -right-[12px] rotate-90', fill: 'none', height: '16', viewBox: '0 0 20 16', width: '20', xmlns: 'http://www.w3.org/2000/svg' },
|
|
140
95
|
react_1["default"].createElement("path", { d: 'M10.6082 1.2699L17.3135 10.5611C17.6715 11.0571 17.3171 11.75 16.7053 11.75H3.29465C2.68295 11.75 2.32852 11.0571 2.68649 10.5611L9.39184 1.2699C9.69119 0.855102 10.3088 0.855102 10.6082 1.2699Z', fill: 'white', stroke: '#D1D5DB', strokeWidth: '1' }),
|
|
141
96
|
react_1["default"].createElement("rect", { fill: 'white', height: '3', rx: '1.5', width: '16', x: '2', y: '10' }))),
|
|
142
97
|
contentProps.pos === 'right' && (react_1["default"].createElement("svg", { className: 'absolute -left-[12px] -rotate-90', fill: 'none', height: '16', viewBox: '0 0 20 16', width: '20', xmlns: 'http://www.w3.org/2000/svg' },
|
|
143
98
|
react_1["default"].createElement("path", { d: 'M10.6082 1.2699L17.3135 10.5611C17.6715 11.0571 17.3171 11.75 16.7053 11.75H3.29465C2.68295 11.75 2.32852 11.0571 2.68649 10.5611L9.39184 1.2699C9.69119 0.855102 10.3088 0.855102 10.6082 1.2699Z', fill: 'white', stroke: '#D1D5DB', strokeWidth: '1' }),
|
|
144
99
|
react_1["default"].createElement("rect", { fill: 'white', height: '3', rx: '1.5', width: '16', x: '2', y: '10' }))),
|
|
145
|
-
!isDisableHover && (react_1["default"].createElement("div", { className: 'absolute
|
|
100
|
+
!isDisableHover && (react_1["default"].createElement("div", { className: ' absolute cursor-pointer h-7 top-12', style: {
|
|
146
101
|
width: "".concat(contentProps.width, "px")
|
|
147
102
|
} })))),
|
|
148
|
-
react_1["default"].createElement("div", { ref: titleRef, className: 'cursor-pointer ' }, children)));
|
|
103
|
+
react_1["default"].createElement("div", { ref: titleRef, className: ' cursor-pointer ' }, children)));
|
|
149
104
|
};
|
|
150
105
|
exports["default"] = PHXTooltip;
|
|
151
106
|
//# sourceMappingURL=ToolTip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolTip.js","sourceRoot":"","sources":["../../../../src/components/ToolTip/ToolTip.tsx"],"names":[],"mappings":";;;AAAA,
|
|
1
|
+
{"version":3,"file":"ToolTip.js","sourceRoot":"","sources":["../../../../src/components/ToolTip/ToolTip.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __assign } from "tslib";
|
|
2
|
-
import React, { useRef, useState, useEffect
|
|
2
|
+
import React, { useRef, useState, useEffect } from 'react';
|
|
3
3
|
var PHXTooltip = function (_a) {
|
|
4
|
-
var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.contentClassName, contentClassName = _c === void 0 ? 'max-w-[18rem]' : _c, content = _a.content, _d = _a.underLine, underLine = _d === void 0 ? false : _d, _e = _a.isDisableHover, isDisableHover = _e === void 0 ? false : _e
|
|
4
|
+
var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.contentClassName, contentClassName = _c === void 0 ? 'max-w-[18rem]' : _c, content = _a.content, _d = _a.underLine, underLine = _d === void 0 ? false : _d, _e = _a.isDisableHover, isDisableHover = _e === void 0 ? false : _e;
|
|
5
5
|
var contentRef = useRef(null);
|
|
6
6
|
var titleRef = useRef(null);
|
|
7
7
|
var _f = useState({
|
|
@@ -23,85 +23,43 @@ var PHXTooltip = function (_a) {
|
|
|
23
23
|
isOverFlowRight: left + width > viewportWidth - 10
|
|
24
24
|
};
|
|
25
25
|
};
|
|
26
|
-
var
|
|
27
|
-
var titleTop = titleBounding.top;
|
|
28
|
-
var titleLeft = titleBounding.left;
|
|
29
|
-
var titleWidth = titleBounding.width;
|
|
30
|
-
var titleHeight = titleBounding.height;
|
|
31
|
-
switch (position) {
|
|
32
|
-
case 'top':
|
|
33
|
-
return {
|
|
34
|
-
width: contentBounding.width,
|
|
35
|
-
height: contentBounding.height,
|
|
36
|
-
top: titleTop - contentBounding.height - 10,
|
|
37
|
-
left: titleLeft - contentBounding.width / 2 + titleWidth / 2,
|
|
38
|
-
pos: 'top'
|
|
39
|
-
};
|
|
40
|
-
case 'bottom':
|
|
41
|
-
return {
|
|
42
|
-
width: contentBounding.width,
|
|
43
|
-
height: contentBounding.height,
|
|
44
|
-
top: titleTop + titleHeight + 10,
|
|
45
|
-
left: titleLeft - contentBounding.width / 2 + titleWidth / 2,
|
|
46
|
-
pos: 'bottom'
|
|
47
|
-
};
|
|
48
|
-
case 'left':
|
|
49
|
-
return {
|
|
50
|
-
width: contentBounding.width,
|
|
51
|
-
height: contentBounding.height,
|
|
52
|
-
top: titleTop - contentBounding.height / 2 + titleHeight / 2,
|
|
53
|
-
left: titleLeft - contentBounding.width - 20,
|
|
54
|
-
pos: 'left'
|
|
55
|
-
};
|
|
56
|
-
case 'right':
|
|
57
|
-
return {
|
|
58
|
-
width: contentBounding.width,
|
|
59
|
-
height: contentBounding.height,
|
|
60
|
-
top: titleTop - contentBounding.height / 2 + titleHeight / 2,
|
|
61
|
-
left: titleLeft + titleWidth + 20,
|
|
62
|
-
pos: 'right'
|
|
63
|
-
};
|
|
64
|
-
default:
|
|
65
|
-
return {
|
|
66
|
-
width: contentBounding.width,
|
|
67
|
-
height: contentBounding.height,
|
|
68
|
-
top: titleTop - contentBounding.height - 10,
|
|
69
|
-
left: titleLeft - contentBounding.width / 2 + titleWidth / 2,
|
|
70
|
-
pos: 'top'
|
|
71
|
-
};
|
|
72
|
-
}
|
|
73
|
-
};
|
|
74
|
-
var calculateTooltipPosition = useCallback(function () {
|
|
26
|
+
var calculateTooltipPosition = function () {
|
|
75
27
|
if (!contentRef.current || !titleRef.current)
|
|
76
28
|
return;
|
|
77
29
|
var titleBounding = titleRef.current.getBoundingClientRect();
|
|
78
30
|
var contentBounding = contentRef.current.getBoundingClientRect();
|
|
79
|
-
var
|
|
80
|
-
var
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
|
|
31
|
+
var titleTop = titleBounding.top;
|
|
32
|
+
var titleLeft = titleBounding.left;
|
|
33
|
+
var titleWidth = titleBounding.width;
|
|
34
|
+
var titleHeight = titleBounding.height;
|
|
35
|
+
var newProps = {
|
|
36
|
+
width: contentBounding.width,
|
|
37
|
+
height: contentBounding.height,
|
|
38
|
+
top: titleTop - contentBounding.height - 10,
|
|
39
|
+
left: titleLeft - contentBounding.width / 2 + titleWidth / 2,
|
|
40
|
+
pos: 'top'
|
|
41
|
+
};
|
|
42
|
+
var _a = getOverflowDirections(newProps), isOverFlowLeft = _a.isOverFlowLeft, isOverFlowRight = _a.isOverFlowRight;
|
|
43
|
+
if (isOverFlowLeft) {
|
|
44
|
+
newProps = {
|
|
45
|
+
width: contentBounding.width,
|
|
46
|
+
height: contentBounding.height,
|
|
47
|
+
top: titleTop - contentBounding.height / 2 + titleHeight / 2,
|
|
48
|
+
left: titleLeft + titleWidth + 20,
|
|
49
|
+
pos: 'right'
|
|
50
|
+
};
|
|
92
51
|
}
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
}
|
|
52
|
+
else if (isOverFlowRight) {
|
|
53
|
+
newProps = {
|
|
54
|
+
width: contentBounding.width,
|
|
55
|
+
height: contentBounding.height,
|
|
56
|
+
top: titleTop - contentBounding.height / 2 + titleHeight / 2,
|
|
57
|
+
left: titleLeft - contentBounding.width - 20,
|
|
58
|
+
pos: 'left'
|
|
59
|
+
};
|
|
102
60
|
}
|
|
103
61
|
setContentProps(function (prev) { return (__assign(__assign({}, prev), newProps)); });
|
|
104
|
-
}
|
|
62
|
+
};
|
|
105
63
|
var handleMouseEnter = function () {
|
|
106
64
|
setContentProps(function (prev) { return (__assign(__assign({}, prev), { show: true })); });
|
|
107
65
|
calculateTooltipPosition();
|
|
@@ -121,7 +79,7 @@ var PHXTooltip = function (_a) {
|
|
|
121
79
|
return function () {
|
|
122
80
|
cancelAnimationFrame(animationFrameId);
|
|
123
81
|
};
|
|
124
|
-
}, [contentProps.show
|
|
82
|
+
}, [contentProps.show]);
|
|
125
83
|
return (React.createElement("div", { className: "relative w-fit text-xs font-normal text-gray-600 ".concat(underLine && 'border-b-2 border-dotted border-[#B5B5B5] pb-[1px]', " ").concat(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
|
|
126
84
|
content && (React.createElement("div", { className: "fixed z-20 mb-2 flex transform flex-col items-center justify-center drop-shadow-md transition-opacity duration-200 ".concat(contentProps.show ? 'visible opacity-100' : 'invisible opacity-0'), style: {
|
|
127
85
|
top: contentProps.top,
|
|
@@ -131,19 +89,16 @@ var PHXTooltip = function (_a) {
|
|
|
131
89
|
contentProps.pos === 'top' && (React.createElement("svg", { className: 'absolute -bottom-[10px] rotate-180 w-full', fill: 'none', height: '16', viewBox: '0 0 20 16', width: '20', xmlns: 'http://www.w3.org/2000/svg' },
|
|
132
90
|
React.createElement("path", { d: 'M10.6082 1.2699L17.3135 10.5611C17.6715 11.0571 17.3171 11.75 16.7053 11.75H3.29465C2.68295 11.75 2.32852 11.0571 2.68649 10.5611L9.39184 1.2699C9.69119 0.855102 10.3088 0.855102 10.6082 1.2699Z', fill: 'white', stroke: '#D1D5DB', strokeWidth: '1' }),
|
|
133
91
|
React.createElement("rect", { fill: 'white', height: '3', rx: '1.5', width: '16', x: '2', y: '10' }))),
|
|
134
|
-
contentProps.pos === 'bottom' && (React.createElement("svg", { className: 'absolute -top-[10px] w-full', fill: 'none', height: '16', viewBox: '0 0 20 16', width: '20', xmlns: 'http://www.w3.org/2000/svg' },
|
|
135
|
-
React.createElement("path", { d: 'M10.6082 1.2699L17.3135 10.5611C17.6715 11.0571 17.3171 11.75 16.7053 11.75H3.29465C2.68295 11.75 2.32852 11.0571 2.68649 10.5611L9.39184 1.2699C9.69119 0.855102 10.3088 0.855102 10.6082 1.2699Z', fill: 'white', stroke: '#D1D5DB', strokeWidth: '1' }),
|
|
136
|
-
React.createElement("rect", { fill: 'white', height: '3', rx: '1.5', width: '16', x: '2', y: '10' }))),
|
|
137
92
|
contentProps.pos === 'left' && (React.createElement("svg", { className: 'absolute -right-[12px] rotate-90', fill: 'none', height: '16', viewBox: '0 0 20 16', width: '20', xmlns: 'http://www.w3.org/2000/svg' },
|
|
138
93
|
React.createElement("path", { d: 'M10.6082 1.2699L17.3135 10.5611C17.6715 11.0571 17.3171 11.75 16.7053 11.75H3.29465C2.68295 11.75 2.32852 11.0571 2.68649 10.5611L9.39184 1.2699C9.69119 0.855102 10.3088 0.855102 10.6082 1.2699Z', fill: 'white', stroke: '#D1D5DB', strokeWidth: '1' }),
|
|
139
94
|
React.createElement("rect", { fill: 'white', height: '3', rx: '1.5', width: '16', x: '2', y: '10' }))),
|
|
140
95
|
contentProps.pos === 'right' && (React.createElement("svg", { className: 'absolute -left-[12px] -rotate-90', fill: 'none', height: '16', viewBox: '0 0 20 16', width: '20', xmlns: 'http://www.w3.org/2000/svg' },
|
|
141
96
|
React.createElement("path", { d: 'M10.6082 1.2699L17.3135 10.5611C17.6715 11.0571 17.3171 11.75 16.7053 11.75H3.29465C2.68295 11.75 2.32852 11.0571 2.68649 10.5611L9.39184 1.2699C9.69119 0.855102 10.3088 0.855102 10.6082 1.2699Z', fill: 'white', stroke: '#D1D5DB', strokeWidth: '1' }),
|
|
142
97
|
React.createElement("rect", { fill: 'white', height: '3', rx: '1.5', width: '16', x: '2', y: '10' }))),
|
|
143
|
-
!isDisableHover && (React.createElement("div", { className: 'absolute
|
|
98
|
+
!isDisableHover && (React.createElement("div", { className: ' absolute cursor-pointer h-7 top-12', style: {
|
|
144
99
|
width: "".concat(contentProps.width, "px")
|
|
145
100
|
} })))),
|
|
146
|
-
React.createElement("div", { ref: titleRef, className: 'cursor-pointer ' }, children)));
|
|
101
|
+
React.createElement("div", { ref: titleRef, className: ' cursor-pointer ' }, children)));
|
|
147
102
|
};
|
|
148
103
|
export default PHXTooltip;
|
|
149
104
|
//# sourceMappingURL=ToolTip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolTip.js","sourceRoot":"","sources":["../../../../src/components/ToolTip/ToolTip.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,
|
|
1
|
+
{"version":3,"file":"ToolTip.js","sourceRoot":"","sources":["../../../../src/components/ToolTip/ToolTip.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAW9D,IAAM,UAAU,GAAqB,UAAC,EAOrC;QANC,QAAQ,cAAA,EACR,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,wBAAkC,EAAlC,gBAAgB,mBAAG,eAAe,KAAA,EAClC,OAAO,aAAA,EACP,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA;IAEtB,IAAM,UAAU,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAA;IACrD,IAAM,QAAQ,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAA;IAC7C,IAAA,KAAkC,QAAQ,CAAC;QAC/C,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,GAAG,EAAE,KAAK;QACV,IAAI,EAAE,KAAK;KACZ,CAAC,EAPK,YAAY,QAAA,EAAE,eAAe,QAOlC,CAAA;IAEF,IAAM,qBAAqB,GAAG,UAAC,EAU9B;YATC,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,GAAG,SAAA,EACH,KAAK,WAAA;QAOL,IAAM,aAAa,GAAG,MAAM,CAAC,UAAU,CAAA;QACvC,IAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAA;QAEzC,OAAO;YACL,aAAa,EAAE,GAAG,GAAG,CAAC;YACtB,cAAc,EAAE,IAAI,GAAG,EAAE;YACzB,gBAAgB,EAAE,GAAG,GAAG,MAAM,GAAG,cAAc;YAC/C,eAAe,EAAE,IAAI,GAAG,KAAK,GAAG,aAAa,GAAG,EAAE;SACnD,CAAA;IACH,CAAC,CAAA;IAED,IAAM,wBAAwB,GAAG;QAC/B,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAM;QAEpD,IAAM,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAA;QAC9D,IAAM,eAAe,GAAG,UAAU,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAA;QAElE,IAAM,QAAQ,GAAG,aAAa,CAAC,GAAG,CAAA;QAClC,IAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAA;QACpC,IAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAA;QACtC,IAAM,WAAW,GAAG,aAAa,CAAC,MAAM,CAAA;QAExC,IAAI,QAAQ,GAAG;YACb,KAAK,EAAE,eAAe,CAAC,KAAK;YAC5B,MAAM,EAAE,eAAe,CAAC,MAAM;YAC9B,GAAG,EAAE,QAAQ,GAAG,eAAe,CAAC,MAAM,GAAG,EAAE;YAC3C,IAAI,EAAE,SAAS,GAAG,eAAe,CAAC,KAAK,GAAG,CAAC,GAAG,UAAU,GAAG,CAAC;YAC5D,GAAG,EAAE,KAAK;SACX,CAAA;QAEK,IAAA,KAAsC,qBAAqB,CAAC,QAAQ,CAAC,EAAnE,cAAc,oBAAA,EAAE,eAAe,qBAAoC,CAAA;QAE3E,IAAI,cAAc,EAAE;YAClB,QAAQ,GAAG;gBACT,KAAK,EAAE,eAAe,CAAC,KAAK;gBAC5B,MAAM,EAAE,eAAe,CAAC,MAAM;gBAC9B,GAAG,EAAE,QAAQ,GAAG,eAAe,CAAC,MAAM,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC;gBAC5D,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,EAAE;gBACjC,GAAG,EAAE,OAAO;aACb,CAAA;SACF;aAAM,IAAI,eAAe,EAAE;YAC1B,QAAQ,GAAG;gBACT,KAAK,EAAE,eAAe,CAAC,KAAK;gBAC5B,MAAM,EAAE,eAAe,CAAC,MAAM;gBAC9B,GAAG,EAAE,QAAQ,GAAG,eAAe,CAAC,MAAM,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC;gBAC5D,IAAI,EAAE,SAAS,GAAG,eAAe,CAAC,KAAK,GAAG,EAAE;gBAC5C,GAAG,EAAE,MAAM;aACZ,CAAA;SACF;QAED,eAAe,CAAC,UAAC,IAAI,IAAK,OAAA,uBAAM,IAAI,GAAK,QAAQ,EAAG,EAA1B,CAA0B,CAAC,CAAA;IACvD,CAAC,CAAA;IAED,IAAM,gBAAgB,GAAG;QACvB,eAAe,CAAC,UAAC,IAAI,IAAK,OAAA,uBAAM,IAAI,KAAE,IAAI,EAAE,IAAI,IAAG,EAAzB,CAAyB,CAAC,CAAA;QACpD,wBAAwB,EAAE,CAAA;IAC5B,CAAC,CAAA;IAED,IAAM,gBAAgB,GAAG;QACvB,eAAe,CAAC,UAAC,IAAI,IAAK,OAAA,uBAAM,IAAI,KAAE,IAAI,EAAE,KAAK,IAAG,EAA1B,CAA0B,CAAC,CAAA;IACvD,CAAC,CAAA;IAED,SAAS,CAAC;QACR,IAAI,gBAAwB,CAAA;QAE5B,IAAM,cAAc,GAAG;YACrB,IAAI,YAAY,CAAC,IAAI,EAAE;gBACrB,wBAAwB,EAAE,CAAA;gBAC1B,gBAAgB,GAAG,qBAAqB,CAAC,cAAc,CAAC,CAAA;aACzD;QACH,CAAC,CAAA;QAED,cAAc,EAAE,CAAA;QAEhB,OAAO;YACL,oBAAoB,CAAC,gBAAgB,CAAC,CAAA;QACxC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAA;IAEvB,OAAO,CACL,6BACE,SAAS,EAAE,6DACT,SAAS,IAAI,oDAAoD,cAC/D,SAAS,CAAE,EACf,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB;QAE7B,OAAO,IAAI,CACV,6BACE,SAAS,EAAE,6HACT,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CACjE,EACF,KAAK,EAAE;gBACL,GAAG,EAAE,YAAY,CAAC,GAAG;gBACrB,IAAI,EAAE,YAAY,CAAC,IAAI;aACxB;YAED,2BACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,8GAAuG,gBAAgB,CAAE,IAEnI,OAAO,CACN;YAEH,YAAY,CAAC,GAAG,KAAK,KAAK,IAAI,CAC7B,6BACE,SAAS,EAAC,2CAA2C,EACrD,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,KAAK,EAAC,4BAA4B;gBAElC,8BACE,CAAC,EAAC,oMAAoM,EACtM,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,GACf;gBACF,8BAAM,IAAI,EAAC,OAAO,EAAC,MAAM,EAAC,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,IAAI,GAAG,CAC7D,CACP;YAEA,YAAY,CAAC,GAAG,KAAK,MAAM,IAAI,CAC9B,6BACE,SAAS,EAAC,kCAAkC,EAC5C,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,KAAK,EAAC,4BAA4B;gBAElC,8BACE,CAAC,EAAC,oMAAoM,EACtM,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,GACf;gBACF,8BAAM,IAAI,EAAC,OAAO,EAAC,MAAM,EAAC,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,IAAI,GAAG,CAC7D,CACP;YAEA,YAAY,CAAC,GAAG,KAAK,OAAO,IAAI,CAC/B,6BACE,SAAS,EAAC,kCAAkC,EAC5C,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,KAAK,EAAC,4BAA4B;gBAElC,8BACE,CAAC,EAAC,oMAAoM,EACtM,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,GACf;gBACF,8BAAM,IAAI,EAAC,OAAO,EAAC,MAAM,EAAC,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,IAAI,GAAG,CAC7D,CACP;YACA,CAAC,cAAc,IAAI,CAClB,6BACE,SAAS,EAAC,uCAAuC,EACjD,KAAK,EAAE;oBACL,KAAK,EAAE,UAAG,YAAY,CAAC,KAAK,OAAI;iBACjC,GACD,CACH,CACG,CACP;QAED,6BAAK,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAC,mBAAmB,IAC9C,QAAQ,CACL,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}
|