@visns-studio/visns-components 5.9.5 → 5.9.6
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/package.json
CHANGED
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
87
87
|
},
|
|
88
88
|
"name": "@visns-studio/visns-components",
|
|
89
|
-
"version": "5.9.
|
|
89
|
+
"version": "5.9.6",
|
|
90
90
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
91
91
|
"main": "src/index.js",
|
|
92
92
|
"files": [
|
|
@@ -334,7 +334,7 @@ const CellWithTooltip = ({
|
|
|
334
334
|
}}
|
|
335
335
|
{...(shouldShowTooltip && {
|
|
336
336
|
'data-tooltip-id': tooltipId,
|
|
337
|
-
'data-tooltip-
|
|
337
|
+
'data-tooltip-html': tooltipContent,
|
|
338
338
|
})}
|
|
339
339
|
>
|
|
340
340
|
{children}
|
|
@@ -347,9 +347,9 @@ const CellWithTooltip = ({
|
|
|
347
347
|
borderRadius: '6px',
|
|
348
348
|
padding: '8px 12px',
|
|
349
349
|
fontSize: '13px',
|
|
350
|
-
maxWidth: '
|
|
350
|
+
maxWidth: '500px',
|
|
351
351
|
wordWrap: 'break-word',
|
|
352
|
-
zIndex:
|
|
352
|
+
zIndex: 1000,
|
|
353
353
|
}}
|
|
354
354
|
place="top"
|
|
355
355
|
offset={5}
|
|
@@ -683,16 +683,29 @@ const DataGrid = forwardRef(
|
|
|
683
683
|
});
|
|
684
684
|
|
|
685
685
|
// Initialize all groups as collapsed when data is first loaded
|
|
686
|
-
if (
|
|
687
|
-
|
|
686
|
+
if (
|
|
687
|
+
!groupsInitializedRef.current &&
|
|
688
|
+
res.data.length > 0
|
|
689
|
+
) {
|
|
690
|
+
const uniqueGroups = [
|
|
691
|
+
...new Set(
|
|
692
|
+
res.data.map((row) => row[groupField])
|
|
693
|
+
),
|
|
694
|
+
];
|
|
688
695
|
const initialCollapsedState = {};
|
|
689
|
-
uniqueGroups.forEach(groupValue => {
|
|
690
|
-
if (
|
|
696
|
+
uniqueGroups.forEach((groupValue) => {
|
|
697
|
+
if (
|
|
698
|
+
groupValue !== undefined &&
|
|
699
|
+
groupValue !== null
|
|
700
|
+
) {
|
|
691
701
|
initialCollapsedState[groupValue] = true;
|
|
692
702
|
}
|
|
693
703
|
});
|
|
694
704
|
|
|
695
|
-
console.log(
|
|
705
|
+
console.log(
|
|
706
|
+
'Initializing all groups as collapsed:',
|
|
707
|
+
initialCollapsedState
|
|
708
|
+
);
|
|
696
709
|
setCollapsedGroups(initialCollapsedState);
|
|
697
710
|
groupsInitializedRef.current = true;
|
|
698
711
|
}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import SystemTooltip from '../utils/SystemTooltip';
|
|
3
|
+
|
|
4
|
+
const TooltipTest = () => {
|
|
5
|
+
return (
|
|
6
|
+
<div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
|
|
7
|
+
<h1>SystemTooltip Test Component</h1>
|
|
8
|
+
|
|
9
|
+
<p>This component tests the SystemTooltip functionality. Hover over the elements below:</p>
|
|
10
|
+
|
|
11
|
+
<div style={{ margin: '20px 0' }}>
|
|
12
|
+
<button
|
|
13
|
+
style={{
|
|
14
|
+
background: '#007bff',
|
|
15
|
+
color: 'white',
|
|
16
|
+
border: 'none',
|
|
17
|
+
padding: '10px 20px',
|
|
18
|
+
borderRadius: '4px',
|
|
19
|
+
cursor: 'pointer',
|
|
20
|
+
margin: '10px'
|
|
21
|
+
}}
|
|
22
|
+
data-tooltip-content="This is a test button tooltip"
|
|
23
|
+
>
|
|
24
|
+
Test Button
|
|
25
|
+
</button>
|
|
26
|
+
|
|
27
|
+
<div
|
|
28
|
+
style={{
|
|
29
|
+
width: '30px',
|
|
30
|
+
height: '30px',
|
|
31
|
+
background: '#28a745',
|
|
32
|
+
borderRadius: '50%',
|
|
33
|
+
display: 'inline-block',
|
|
34
|
+
margin: '10px',
|
|
35
|
+
cursor: 'pointer'
|
|
36
|
+
}}
|
|
37
|
+
data-tooltip-content="This is a test icon tooltip"
|
|
38
|
+
></div>
|
|
39
|
+
|
|
40
|
+
<span
|
|
41
|
+
style={{
|
|
42
|
+
background: '#f8f9fa',
|
|
43
|
+
padding: '10px',
|
|
44
|
+
border: '1px solid #dee2e6',
|
|
45
|
+
borderRadius: '4px',
|
|
46
|
+
margin: '10px',
|
|
47
|
+
display: 'inline-block',
|
|
48
|
+
cursor: 'pointer'
|
|
49
|
+
}}
|
|
50
|
+
data-tooltip-content="This is a test text tooltip with some longer content to see how it wraps"
|
|
51
|
+
>
|
|
52
|
+
Test Text Element
|
|
53
|
+
</span>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<div style={{ margin: '20px 0' }}>
|
|
57
|
+
<p data-tooltip-content="This paragraph has a tooltip">
|
|
58
|
+
Paragraph with tooltip
|
|
59
|
+
</p>
|
|
60
|
+
|
|
61
|
+
<div data-tooltip-content="Nested element test">
|
|
62
|
+
<span>Nested content</span>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<div style={{ margin: '20px 0' }}>
|
|
67
|
+
<input
|
|
68
|
+
type="text"
|
|
69
|
+
placeholder="Input field"
|
|
70
|
+
data-tooltip-content="This is an input field tooltip"
|
|
71
|
+
style={{ margin: '10px' }}
|
|
72
|
+
/>
|
|
73
|
+
|
|
74
|
+
<select
|
|
75
|
+
data-tooltip-content="This is a select dropdown tooltip"
|
|
76
|
+
style={{ margin: '10px' }}
|
|
77
|
+
>
|
|
78
|
+
<option>Option 1</option>
|
|
79
|
+
<option>Option 2</option>
|
|
80
|
+
</select>
|
|
81
|
+
</div>
|
|
82
|
+
|
|
83
|
+
<div style={{ margin: '20px 0' }}>
|
|
84
|
+
<div
|
|
85
|
+
data-tooltip-content="HTML content test: <strong>Bold text</strong><br/>Line break<br/>Another line"
|
|
86
|
+
style={{
|
|
87
|
+
background: '#ffc107',
|
|
88
|
+
padding: '10px',
|
|
89
|
+
borderRadius: '4px',
|
|
90
|
+
cursor: 'pointer',
|
|
91
|
+
display: 'inline-block'
|
|
92
|
+
}}
|
|
93
|
+
>
|
|
94
|
+
Element with HTML content tooltip
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
|
|
98
|
+
{/* Include SystemTooltip component */}
|
|
99
|
+
<SystemTooltip />
|
|
100
|
+
</div>
|
|
101
|
+
);
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
export default TooltipTest;
|