react-core-ts 2.1.42 → 2.1.44
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/AutoCompleteWithSelectedList.js +2 -1
- package/dist/AutoCompleteWithSelectedList.js.map +1 -1
- package/dist/AutoCompleteWithTabFilter.js +3 -2
- package/dist/AutoCompleteWithTabFilter.js.map +1 -1
- package/dist/styles/components/autocomplete.css +24 -0
- package/dist/styles/styles/components/autocomplete.css +24 -0
- package/dist/utilities/NewTooltip.js +34 -47
- package/dist/utilities/NewTooltip.js.map +1 -1
- package/dist/utilities/expandableTootltip.js +36 -70
- package/dist/utilities/expandableTootltip.js.map +1 -1
- package/dist/utilities/getPosition.d.ts +9 -0
- package/dist/utilities/getPosition.js +41 -1
- package/dist/utilities/getPosition.js.map +1 -1
- package/docs/App.tsx +21 -0
- package/package.json +1 -1
- package/src/AutoCompleteWithSelectedList.tsx +3 -2
- package/src/AutoCompleteWithTabFilter.tsx +4 -3
- package/src/styles/components/autocomplete.css +24 -0
- package/src/utilities/NewTooltip.tsx +55 -70
- package/src/utilities/expandableTootltip.tsx +53 -83
- package/src/utilities/getPosition.ts +62 -0
- package/dist/injectStyles.d.ts +0 -1
- package/dist/injectStyles.js +0 -16
- package/dist/injectStyles.js.map +0 -1
- package/dist/react-core-ts.css +0 -2889
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NewTooltip.js","sourceRoot":"","sources":["../../src/utilities/NewTooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,+
|
|
1
|
+
{"version":3,"file":"NewTooltip.js","sourceRoot":"","sources":["../../src/utilities/NewTooltip.tsx"],"names":[],"mappings":"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"}
|
|
@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
18
|
var react_1 = require("react");
|
|
19
19
|
var react_dom_1 = __importDefault(require("react-dom"));
|
|
20
|
+
var getPosition_1 = require("./getPosition");
|
|
20
21
|
var ExpandableToolTip = function (_a) {
|
|
21
22
|
var title = _a.title, children = _a.children, enabled = _a.enabled;
|
|
22
23
|
var _b = (0, react_1.useState)('bottom-position'), dropdownPosition = _b[0], setDropdownPosition = _b[1];
|
|
@@ -26,82 +27,45 @@ var ExpandableToolTip = function (_a) {
|
|
|
26
27
|
var _d = (0, react_1.useState)({
|
|
27
28
|
top: 0,
|
|
28
29
|
left: 0,
|
|
29
|
-
|
|
30
|
+
arrowOffset: 50,
|
|
30
31
|
}), tooltipStyle = _d[0], setTooltipStyle = _d[1];
|
|
31
|
-
var
|
|
32
|
-
|
|
33
|
-
if (menuButtonRef.current) {
|
|
34
|
-
var inputBoxRect = (_a = menuButtonRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
35
|
-
var viewportHeight = window.innerHeight;
|
|
36
|
-
var spaceAbove = inputBoxRect.top;
|
|
37
|
-
var spaceBelow = viewportHeight - inputBoxRect.bottom;
|
|
38
|
-
if (spaceAbove > spaceBelow) {
|
|
39
|
-
if (spaceAbove > 90 && spaceBelow < 120) {
|
|
40
|
-
return 'top-position';
|
|
41
|
-
}
|
|
42
|
-
else {
|
|
43
|
-
return 'bottom-position';
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
else {
|
|
47
|
-
var diff = spaceBelow - spaceAbove;
|
|
48
|
-
if (spaceAbove > 90 && spaceBelow > 90 && diff < 90) {
|
|
49
|
-
return 'top-position';
|
|
50
|
-
}
|
|
51
|
-
else {
|
|
52
|
-
return 'bottom-position';
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
|
-
var handleMouseEnter = function (e) {
|
|
58
|
-
var _a;
|
|
59
|
-
if (menuButtonRef.current) {
|
|
60
|
-
var dropPosition = adjustDropdownPosition();
|
|
61
|
-
setDropdownPosition(dropPosition);
|
|
62
|
-
var rect = e.target.getBoundingClientRect();
|
|
63
|
-
var top_1 = rect.bottom + window.scrollY;
|
|
64
|
-
var left = rect.left + window.scrollX;
|
|
65
|
-
var height = rect.height;
|
|
66
|
-
var width = (_a = dropRef === null || dropRef === void 0 ? void 0 : dropRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
|
|
67
|
-
if (dropPosition === 'bottom-position') {
|
|
68
|
-
top_1 = top_1 + height / 2 - 5;
|
|
69
|
-
}
|
|
70
|
-
else {
|
|
71
|
-
top_1 = top_1 - height * 2 + 15;
|
|
72
|
-
}
|
|
73
|
-
setTooltipStyle({
|
|
74
|
-
top: top_1,
|
|
75
|
-
left: left,
|
|
76
|
-
width: width,
|
|
77
|
-
});
|
|
78
|
-
setVisible(true);
|
|
79
|
-
}
|
|
32
|
+
var handleMouseEnter = function () {
|
|
33
|
+
setVisible(true);
|
|
80
34
|
};
|
|
81
35
|
var handleMouseLeave = function () {
|
|
82
36
|
setVisible(false);
|
|
83
37
|
};
|
|
84
|
-
(0, react_1.
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
: prevStyle.top - tooltipHeight_1 })); });
|
|
38
|
+
var updatePosition = (0, react_1.useCallback)(function () {
|
|
39
|
+
if (!menuButtonRef.current || !dropRef.current)
|
|
40
|
+
return;
|
|
41
|
+
var coords = (0, getPosition_1.getPortalTooltipCoords)(menuButtonRef.current, dropRef.current);
|
|
42
|
+
setDropdownPosition(coords.placement);
|
|
43
|
+
setTooltipStyle(function (prev) {
|
|
44
|
+
if (prev.top === coords.top &&
|
|
45
|
+
prev.left === coords.left &&
|
|
46
|
+
prev.arrowOffset === coords.arrowOffset) {
|
|
47
|
+
return prev;
|
|
95
48
|
}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
49
|
+
return {
|
|
50
|
+
top: coords.top,
|
|
51
|
+
left: coords.left,
|
|
52
|
+
arrowOffset: coords.arrowOffset,
|
|
53
|
+
};
|
|
54
|
+
});
|
|
55
|
+
}, []);
|
|
56
|
+
(0, react_1.useLayoutEffect)(function () {
|
|
57
|
+
if (!visible)
|
|
58
|
+
return;
|
|
59
|
+
updatePosition();
|
|
60
|
+
var frame = window.requestAnimationFrame(updatePosition);
|
|
61
|
+
window.addEventListener('resize', updatePosition);
|
|
62
|
+
window.addEventListener('scroll', updatePosition, true);
|
|
101
63
|
return function () {
|
|
102
|
-
window.
|
|
64
|
+
window.cancelAnimationFrame(frame);
|
|
65
|
+
window.removeEventListener('resize', updatePosition);
|
|
66
|
+
window.removeEventListener('scroll', updatePosition, true);
|
|
103
67
|
};
|
|
104
|
-
}, [visible,
|
|
68
|
+
}, [visible, updatePosition]);
|
|
105
69
|
(0, react_1.useEffect)(function () {
|
|
106
70
|
var handleClickOutside = function (event) {
|
|
107
71
|
if (dropRef.current && !dropRef.current.contains(event.target)) {
|
|
@@ -116,14 +80,16 @@ var ExpandableToolTip = function (_a) {
|
|
|
116
80
|
return ((0, jsx_runtime_1.jsxs)("div", __assign({ onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuButtonRef, style: { display: 'flex' } }, { children: [children, visible &&
|
|
117
81
|
enabled &&
|
|
118
82
|
tooltipStyle &&
|
|
119
|
-
react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("span", __assign({ ref: function (node) {
|
|
83
|
+
react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("span", __assign({ ref: function (node) {
|
|
84
|
+
dropRef.current = node;
|
|
85
|
+
}, className: "tooltiptext custom_tooltip_style_class ".concat(dropdownPosition == 'bottom-position' ? 'down' : 'up'), style: {
|
|
120
86
|
top: tooltipStyle.top,
|
|
121
87
|
left: tooltipStyle.left,
|
|
122
88
|
opacity: 1,
|
|
123
|
-
width: tooltipStyle.width,
|
|
124
89
|
minWidth: '60px',
|
|
125
90
|
maxWidth: '200px',
|
|
126
91
|
visibility: 'visible',
|
|
92
|
+
'--tooltip-arrow-left': "".concat(tooltipStyle.arrowOffset, "px"),
|
|
127
93
|
} }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: "tooltip-text-container" }, { children: title })) })), document.body)] })));
|
|
128
94
|
};
|
|
129
95
|
exports.default = ExpandableToolTip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"expandableTootltip.js","sourceRoot":"","sources":["../../src/utilities/expandableTootltip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,+
|
|
1
|
+
{"version":3,"file":"expandableTootltip.js","sourceRoot":"","sources":["../../src/utilities/expandableTootltip.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export declare const applyPositionClass: (textFieldRef: React.RefObject<HTMLDivElement>, isHovered?: boolean) => void;
|
|
3
3
|
export declare const applyToolTipPositionClass: (textFieldRef: React.RefObject<HTMLDivElement>) => void;
|
|
4
|
+
export type PortalTooltipPlacement = 'top-position' | 'bottom-position';
|
|
5
|
+
export type PortalTooltipCoords = {
|
|
6
|
+
top: number;
|
|
7
|
+
left: number;
|
|
8
|
+
arrowOffset: number;
|
|
9
|
+
placement: PortalTooltipPlacement;
|
|
10
|
+
};
|
|
11
|
+
/** Center a portaled tooltip on its trigger and keep the arrow on the trigger. */
|
|
12
|
+
export declare const getPortalTooltipCoords: (anchorEl: HTMLElement, tooltipEl: HTMLElement) => PortalTooltipCoords;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.applyToolTipPositionClass = exports.applyPositionClass = void 0;
|
|
3
|
+
exports.getPortalTooltipCoords = exports.applyToolTipPositionClass = exports.applyPositionClass = void 0;
|
|
4
4
|
// const getPosition = (textFieldElement: HTMLElement) => {
|
|
5
5
|
// const textFieldRect = textFieldElement.getBoundingClientRect()
|
|
6
6
|
// const spaceBelow = window.innerHeight - textFieldRect.bottom
|
|
@@ -52,4 +52,44 @@ var applyToolTipPositionClass = function (textFieldRef) {
|
|
|
52
52
|
}
|
|
53
53
|
};
|
|
54
54
|
exports.applyToolTipPositionClass = applyToolTipPositionClass;
|
|
55
|
+
var VIEWPORT_PAD = 8;
|
|
56
|
+
var TOOLTIP_GAP = 8;
|
|
57
|
+
var ARROW_HALF = 5;
|
|
58
|
+
/** Center a portaled tooltip on its trigger and keep the arrow on the trigger. */
|
|
59
|
+
var getPortalTooltipCoords = function (anchorEl, tooltipEl) {
|
|
60
|
+
var anchor = anchorEl.getBoundingClientRect();
|
|
61
|
+
var tooltipWidth = Math.max(tooltipEl.offsetWidth, 60);
|
|
62
|
+
var tooltipHeight = tooltipEl.offsetHeight;
|
|
63
|
+
var spaceAbove = anchor.top;
|
|
64
|
+
var spaceBelow = window.innerHeight - anchor.bottom;
|
|
65
|
+
var placement = 'bottom-position';
|
|
66
|
+
if (spaceBelow >= tooltipHeight + 20) {
|
|
67
|
+
placement = 'bottom-position';
|
|
68
|
+
}
|
|
69
|
+
else if (spaceAbove >= tooltipHeight + 20) {
|
|
70
|
+
placement = 'top-position';
|
|
71
|
+
}
|
|
72
|
+
else {
|
|
73
|
+
placement = spaceBelow > spaceAbove ? 'bottom-position' : 'top-position';
|
|
74
|
+
}
|
|
75
|
+
var top = placement === 'bottom-position'
|
|
76
|
+
? anchor.bottom + TOOLTIP_GAP + window.scrollY
|
|
77
|
+
: anchor.top - tooltipHeight - TOOLTIP_GAP + window.scrollY;
|
|
78
|
+
var triggerCenterX = anchor.left + anchor.width / 2;
|
|
79
|
+
var minLeft = VIEWPORT_PAD;
|
|
80
|
+
var maxLeft = window.innerWidth - tooltipWidth - VIEWPORT_PAD;
|
|
81
|
+
var left = maxLeft < minLeft
|
|
82
|
+
? minLeft
|
|
83
|
+
: Math.min(Math.max(triggerCenterX - tooltipWidth / 2, minLeft), maxLeft);
|
|
84
|
+
var minArrow = ARROW_HALF + 6;
|
|
85
|
+
var maxArrow = Math.max(minArrow, tooltipWidth - ARROW_HALF - 6);
|
|
86
|
+
var arrowOffset = Math.min(Math.max(triggerCenterX - left, minArrow), maxArrow);
|
|
87
|
+
return {
|
|
88
|
+
top: top,
|
|
89
|
+
left: left + window.scrollX,
|
|
90
|
+
arrowOffset: arrowOffset,
|
|
91
|
+
placement: placement,
|
|
92
|
+
};
|
|
93
|
+
};
|
|
94
|
+
exports.getPortalTooltipCoords = getPortalTooltipCoords;
|
|
55
95
|
//# sourceMappingURL=getPosition.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getPosition.js","sourceRoot":"","sources":["../../src/utilities/getPosition.ts"],"names":[],"mappings":";;;AAEA,2DAA2D;AAC3D,mEAAmE;AAEnE,iEAAiE;AACjE,+CAA+C;AAC/C,IAAI;AACJ,IAAM,mBAAmB,GAAG,UAAC,OAAoB;IAC/C,IAAI,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC;IACnC,OAAO,MAAM,EAAE;QACb,IAAM,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC;QAC5D,IAAI,SAAS,KAAK,QAAQ,IAAI,SAAS,KAAK,MAAM,EAAE;YAClD,OAAO,MAAM,CAAC;SACf;QACD,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;KAC/B;IACD,OAAO,MAAM,CAAC,CAAC,sDAAsD;AACvE,CAAC,CAAC;AAEF,IAAM,WAAW,GAAG,UAClB,gBAA6B,EAC7B,aAAuB;IAEvB,IAAM,aAAa,GAAG,gBAAgB,CAAC,qBAAqB,EAAE,CAAC;IAC/D,IAAM,gBAAgB,GAAG,mBAAmB,CAAC,gBAAgB,CAAgB,CAAC;IAC9E,IAAM,UAAU,GAAG,gBAAgB,CAAC,qBAAqB,EAAE,CAAC;IAE5D,IAAM,UAAU,GAAG,UAAU,CAAC,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC;IAC5D,IAAI,aAAa,EAAE;QACjB,OAAO,UAAU,GAAG,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC;KACrD;SAAM;QACL,OAAO,UAAU,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;KAC3C;AACH,CAAC,CAAC;AACK,IAAM,kBAAkB,GAAG,UAChC,YAA6C,EAC7C,SAAmB;IAEnB,IAAI,YAAY,CAAC,OAAO,EAAE;QACxB,IAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,CAAC;QAC9C,IAAI,SAAS,EAAE;YACb,IAAM,aAAa,GAAG,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,+BAA+B;YACpF,gBAAgB,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;YACnD,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;SAC/C;aAAM;YACL,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;SAC1C;KACF;AACH,CAAC,CAAC;AAdW,QAAA,kBAAkB,sBAc7B;AACK,IAAM,yBAAyB,GAAG,UACvC,YAA6C;IAE7C,IAAI,YAAY,CAAC,OAAO,EAAE;QACxB,IAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,CAAC;QAC9C,IAAM,aAAa,GAAG,WAAW,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC,CAAC,+BAA+B;QAE1F,gBAAgB,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC;QAC7D,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;KAC/C;AACH,CAAC,CAAC;AAVW,QAAA,yBAAyB,6BAUpC"}
|
|
1
|
+
{"version":3,"file":"getPosition.js","sourceRoot":"","sources":["../../src/utilities/getPosition.ts"],"names":[],"mappings":"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"}
|
package/docs/App.tsx
CHANGED
|
@@ -730,6 +730,27 @@ export default function App() {
|
|
|
730
730
|
onChange={(e) => console.log(e, "onchange")}
|
|
731
731
|
/>
|
|
732
732
|
</div>
|
|
733
|
+
<div style={{ width: 300 }} id="chips-demo">
|
|
734
|
+
<AutoCompleteWithSelectedList
|
|
735
|
+
label="Chips Demo (countOnly false)"
|
|
736
|
+
name="chips-demo"
|
|
737
|
+
type="auto_suggestion"
|
|
738
|
+
desc="name"
|
|
739
|
+
isMultiple={true}
|
|
740
|
+
singleSelect={false}
|
|
741
|
+
descId="id"
|
|
742
|
+
data={treeDropData}
|
|
743
|
+
itemCount={2}
|
|
744
|
+
placeholder="Auto Suggestion"
|
|
745
|
+
selectedItems={[
|
|
746
|
+
{ id: 1, name: "Alpha" },
|
|
747
|
+
{ id: 2, name: "Bravo" },
|
|
748
|
+
{ id: 3, name: "Charlie" },
|
|
749
|
+
]}
|
|
750
|
+
onChange={(e) => console.log(e, "onchange")}
|
|
751
|
+
countOnly={false}
|
|
752
|
+
/>
|
|
753
|
+
</div>
|
|
733
754
|
<div style={{ width: 300 }}>
|
|
734
755
|
<AutoCompleteWithSelectedList
|
|
735
756
|
label="Auto Suggestion With Data"
|
package/package.json
CHANGED
|
@@ -781,11 +781,12 @@ const AutoCompleteWithSelectedList = forwardRef<
|
|
|
781
781
|
return selectedRowLimit * maxHeight + 5;
|
|
782
782
|
};
|
|
783
783
|
const getSelectedItems = (dropdown: boolean) => {
|
|
784
|
+
const inline = !dropdown && !expandable;
|
|
784
785
|
return (
|
|
785
786
|
<div
|
|
786
787
|
ref={selItemRef}
|
|
787
|
-
className=
|
|
788
|
-
style={{ maxHeight: `${getSelectedRowLimit()}px` }}
|
|
788
|
+
className={`selected-items-outer-container ${inline ? 'selected-items-inline' : ''}`}
|
|
789
|
+
style={inline ? undefined : { maxHeight: `${getSelectedRowLimit()}px` }}
|
|
789
790
|
>
|
|
790
791
|
{selectedItems
|
|
791
792
|
.slice(
|
|
@@ -859,11 +859,12 @@ const AutoCompleteWithTabFilter = forwardRef<
|
|
|
859
859
|
}, [selectedRowLimit]);
|
|
860
860
|
|
|
861
861
|
const getSelectedItems = useCallback((dropdown: boolean) => {
|
|
862
|
+
const inline = !dropdown && !expandable;
|
|
862
863
|
return (
|
|
863
864
|
<div
|
|
864
865
|
ref={selItemRef}
|
|
865
|
-
className=
|
|
866
|
-
style={{ maxHeight: `${getSelectedRowLimit()}px` }}
|
|
866
|
+
className={`selected-items-outer-container ${inline ? 'selected-items-inline' : ''}`}
|
|
867
|
+
style={inline ? undefined : { maxHeight: `${getSelectedRowLimit()}px` }}
|
|
867
868
|
>
|
|
868
869
|
{selectedItems
|
|
869
870
|
.slice(
|
|
@@ -915,7 +916,7 @@ const AutoCompleteWithTabFilter = forwardRef<
|
|
|
915
916
|
)}
|
|
916
917
|
</div>
|
|
917
918
|
);
|
|
918
|
-
}, [selectedItems, getSelectedRowLimit, itemCount, showAllSelected, desc, textCount, viewMode, handleRemoveSelectedItem, tooltipContent, handleShowAllSelected]);
|
|
919
|
+
}, [selectedItems, getSelectedRowLimit, itemCount, showAllSelected, desc, textCount, viewMode, handleRemoveSelectedItem, tooltipContent, handleShowAllSelected, expandable]);
|
|
919
920
|
|
|
920
921
|
const getTabItems = useCallback(() => {
|
|
921
922
|
return (
|
|
@@ -434,6 +434,25 @@ ul {
|
|
|
434
434
|
left: 0;
|
|
435
435
|
}
|
|
436
436
|
|
|
437
|
+
.selected-items-outer-container.selected-items-inline {
|
|
438
|
+
position: absolute;
|
|
439
|
+
top: 50%;
|
|
440
|
+
left: 8px;
|
|
441
|
+
right: 32px;
|
|
442
|
+
transform: translateY(-50%);
|
|
443
|
+
z-index: 99;
|
|
444
|
+
flex-wrap: nowrap;
|
|
445
|
+
align-items: center;
|
|
446
|
+
overflow: hidden;
|
|
447
|
+
pointer-events: none;
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
.selected-items-inline .selected-items-container {
|
|
451
|
+
position: static;
|
|
452
|
+
flex-shrink: 0;
|
|
453
|
+
pointer-events: auto;
|
|
454
|
+
}
|
|
455
|
+
|
|
437
456
|
.selected-items-container .badge,
|
|
438
457
|
.selected-items-counter-container .badge {
|
|
439
458
|
background-color: #c63a3a;
|
|
@@ -705,6 +724,11 @@ span.dropdown-search-icon {
|
|
|
705
724
|
border-color: transparent transparent #000 transparent;
|
|
706
725
|
}
|
|
707
726
|
|
|
727
|
+
.custom_tooltip_style_class.up.tooltiptext::after,
|
|
728
|
+
.custom_tooltip_style_class.down.tooltiptext::after {
|
|
729
|
+
left: var(--tooltip-arrow-left, 50%);
|
|
730
|
+
}
|
|
731
|
+
|
|
708
732
|
.autocomplete-suggections .qbs-autocomplete-suggections-items {
|
|
709
733
|
display: flex;
|
|
710
734
|
/* justify-content: space-between; */
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import React, { useEffect, useRef, useState } from 'react';
|
|
1
|
+
import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
|
|
2
2
|
import ReactDOM from 'react-dom';
|
|
3
|
+
import { getPortalTooltipCoords } from './getPosition';
|
|
3
4
|
|
|
4
5
|
const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
|
|
5
6
|
const [dropdownPosition, setDropdownPosition] = useState('bottom-position');
|
|
6
|
-
const dropRef = useRef(null);
|
|
7
|
+
const dropRef = useRef<HTMLDivElement | null>(null);
|
|
7
8
|
const menuButtonRef = useRef<HTMLDivElement>(null);
|
|
8
9
|
const [isTooltipMounted, setIsTooltipMounted] = useState(false);
|
|
9
10
|
|
|
@@ -11,11 +12,11 @@ const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
|
|
|
11
12
|
const [tooltipStyle, setTooltipStyle] = useState({
|
|
12
13
|
top: 0,
|
|
13
14
|
left: 0,
|
|
14
|
-
|
|
15
|
+
arrowOffset: 50,
|
|
15
16
|
});
|
|
16
17
|
const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
17
18
|
|
|
18
|
-
const handleMouseEnter = (
|
|
19
|
+
const handleMouseEnter = () => {
|
|
19
20
|
if (hideTimeoutRef.current) {
|
|
20
21
|
clearTimeout(hideTimeoutRef.current);
|
|
21
22
|
hideTimeoutRef.current = null;
|
|
@@ -25,63 +26,45 @@ const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
|
|
|
25
26
|
}
|
|
26
27
|
};
|
|
27
28
|
|
|
28
|
-
|
|
29
|
-
if (
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
menuButtonRef.current
|
|
29
|
+
const updatePosition = useCallback(() => {
|
|
30
|
+
if (!menuButtonRef.current || !dropRef.current) return;
|
|
31
|
+
|
|
32
|
+
const coords = getPortalTooltipCoords(
|
|
33
|
+
menuButtonRef.current,
|
|
33
34
|
dropRef.current
|
|
34
|
-
)
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
let dropPosition: 'top-position' | 'bottom-position' = 'bottom-position';
|
|
45
|
-
if (spaceBelow >= tooltipHeight + 20) {
|
|
46
|
-
dropPosition = 'bottom-position';
|
|
47
|
-
} else if (spaceAbove >= tooltipHeight + 20) {
|
|
48
|
-
dropPosition = 'top-position';
|
|
49
|
-
} else {
|
|
50
|
-
dropPosition =
|
|
51
|
-
spaceBelow > spaceAbove ? 'bottom-position' : 'top-position';
|
|
35
|
+
);
|
|
36
|
+
setDropdownPosition(coords.placement);
|
|
37
|
+
setTooltipStyle((prev) => {
|
|
38
|
+
if (
|
|
39
|
+
prev.top === coords.top &&
|
|
40
|
+
prev.left === coords.left &&
|
|
41
|
+
prev.arrowOffset === coords.arrowOffset
|
|
42
|
+
) {
|
|
43
|
+
return prev;
|
|
52
44
|
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
setTooltipStyle((prev) => ({
|
|
78
|
-
...prev,
|
|
79
|
-
top: correctedTop,
|
|
80
|
-
}));
|
|
81
|
-
}
|
|
82
|
-
}, 0);
|
|
83
|
-
}
|
|
84
|
-
}, [visible]);
|
|
45
|
+
return {
|
|
46
|
+
top: coords.top,
|
|
47
|
+
left: coords.left,
|
|
48
|
+
arrowOffset: coords.arrowOffset,
|
|
49
|
+
};
|
|
50
|
+
});
|
|
51
|
+
}, []);
|
|
52
|
+
|
|
53
|
+
useLayoutEffect(() => {
|
|
54
|
+
if (!visible || !isTooltipMounted) return;
|
|
55
|
+
|
|
56
|
+
updatePosition();
|
|
57
|
+
const frame = window.requestAnimationFrame(updatePosition);
|
|
58
|
+
|
|
59
|
+
window.addEventListener('resize', updatePosition);
|
|
60
|
+
window.addEventListener('scroll', updatePosition, true);
|
|
61
|
+
|
|
62
|
+
return () => {
|
|
63
|
+
window.cancelAnimationFrame(frame);
|
|
64
|
+
window.removeEventListener('resize', updatePosition);
|
|
65
|
+
window.removeEventListener('scroll', updatePosition, true);
|
|
66
|
+
};
|
|
67
|
+
}, [visible, isTooltipMounted, updatePosition]);
|
|
85
68
|
|
|
86
69
|
useEffect(() => {
|
|
87
70
|
const handleMouseMove = (event: MouseEvent) => {
|
|
@@ -152,17 +135,19 @@ const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
|
|
|
152
135
|
className={`tooltiptext custom_tooltip_style_class ${
|
|
153
136
|
dropdownPosition == 'bottom-position' ? 'down' : 'up'
|
|
154
137
|
}`}
|
|
155
|
-
style={
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
138
|
+
style={
|
|
139
|
+
{
|
|
140
|
+
top: tooltipStyle.top,
|
|
141
|
+
left: tooltipStyle.left,
|
|
142
|
+
opacity: visible ? 1 : 0,
|
|
143
|
+
visibility: visible ? 'visible' : 'hidden',
|
|
144
|
+
minWidth: '60px',
|
|
145
|
+
maxWidth: '200px',
|
|
146
|
+
pointerEvents: 'auto',
|
|
147
|
+
maxHeight: '210px',
|
|
148
|
+
'--tooltip-arrow-left': `${tooltipStyle.arrowOffset}px`,
|
|
149
|
+
} as React.CSSProperties
|
|
150
|
+
}
|
|
166
151
|
>
|
|
167
152
|
<div
|
|
168
153
|
className=""
|