@clayui/tooltip 3.95.2 → 3.99.1
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/lib/useClosestTitle.js +30 -20
- package/package.json +3 -3
- package/src/useClosestTitle.ts +28 -16
package/lib/useClosestTitle.js
CHANGED
|
@@ -59,26 +59,32 @@ function useClosestTitle(props) {
|
|
|
59
59
|
titleTag.remove();
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
|
+
|
|
63
|
+
var hasParentTitle = element.closest('[title]');
|
|
64
|
+
|
|
65
|
+
if (hasParentTitle) {
|
|
66
|
+
saveTitle(hasParentTitle);
|
|
67
|
+
}
|
|
62
68
|
}, []);
|
|
63
|
-
var restoreTitle = (0, _react.useCallback)(function () {
|
|
64
|
-
var
|
|
65
|
-
|
|
66
|
-
if (
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
element.appendChild(titleTag);
|
|
74
|
-
} else {
|
|
75
|
-
element.setAttribute('title', title);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
element.removeAttribute('data-restore-title');
|
|
69
|
+
var restoreTitle = (0, _react.useCallback)(function (element) {
|
|
70
|
+
var title = element.getAttribute('data-restore-title');
|
|
71
|
+
|
|
72
|
+
if (title) {
|
|
73
|
+
if (element.tagName === 'svg') {
|
|
74
|
+
var titleTag = document.createElement('title');
|
|
75
|
+
titleTag.innerHTML = title;
|
|
76
|
+
element.appendChild(titleTag);
|
|
77
|
+
} else {
|
|
78
|
+
element.setAttribute('title', title);
|
|
79
79
|
}
|
|
80
80
|
|
|
81
|
-
|
|
81
|
+
element.removeAttribute('data-restore-title');
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
var hasParentTitle = element.closest('[data-restore-title]');
|
|
85
|
+
|
|
86
|
+
if (hasParentTitle) {
|
|
87
|
+
restoreTitle(hasParentTitle);
|
|
82
88
|
}
|
|
83
89
|
}, []);
|
|
84
90
|
var onClick = (0, _react.useCallback)(function (event) {
|
|
@@ -87,14 +93,18 @@ function useClosestTitle(props) {
|
|
|
87
93
|
onHide(event);
|
|
88
94
|
}, []);
|
|
89
95
|
var onHide = (0, _react.useCallback)(function (event) {
|
|
90
|
-
var _props$tooltipRef$cur, _targetRef$current;
|
|
96
|
+
var _event$relatedTarget, _props$tooltipRef$cur, _targetRef$current;
|
|
91
97
|
|
|
92
|
-
if (event && ((_props$tooltipRef$cur = props.tooltipRef.current) !== null && _props$tooltipRef$cur !== void 0 && _props$tooltipRef$cur.contains(event.relatedTarget) || (_targetRef$current = targetRef.current) !== null && _targetRef$current !== void 0 && _targetRef$current.contains(event.relatedTarget))) {
|
|
98
|
+
if (event && !((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && _event$relatedTarget.getAttribute('title')) && ((_props$tooltipRef$cur = props.tooltipRef.current) !== null && _props$tooltipRef$cur !== void 0 && _props$tooltipRef$cur.contains(event.relatedTarget) || (_targetRef$current = targetRef.current) !== null && _targetRef$current !== void 0 && _targetRef$current.contains(event.relatedTarget))) {
|
|
93
99
|
return null;
|
|
94
100
|
}
|
|
95
101
|
|
|
96
102
|
props.onHide();
|
|
97
|
-
|
|
103
|
+
|
|
104
|
+
if (titleNodeRef.current) {
|
|
105
|
+
restoreTitle(titleNodeRef.current);
|
|
106
|
+
titleNodeRef.current = null;
|
|
107
|
+
}
|
|
98
108
|
|
|
99
109
|
if (targetRef.current) {
|
|
100
110
|
targetRef.current.removeEventListener('click', onClick);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clayui/tooltip",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.99.1",
|
|
4
4
|
"description": "ClayTooltip component",
|
|
5
5
|
"license": "BSD-3-Clause",
|
|
6
6
|
"repository": "https://github.com/liferay/clay",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"react"
|
|
27
27
|
],
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@clayui/shared": "^3.
|
|
29
|
+
"@clayui/shared": "^3.96.0",
|
|
30
30
|
"classnames": "^2.2.6",
|
|
31
31
|
"dom-align": "^1.12.2",
|
|
32
32
|
"warning": "^4.0.3"
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"browserslist": [
|
|
40
40
|
"extends browserslist-config-clay"
|
|
41
41
|
],
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "8cfc0c25944df8c8e8fa878b05967d41e3604f9c"
|
|
43
43
|
}
|
package/src/useClosestTitle.ts
CHANGED
|
@@ -66,29 +66,37 @@ export function useClosestTitle(props: Props) {
|
|
|
66
66
|
titleTag.remove();
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
|
-
}, []);
|
|
70
69
|
|
|
71
|
-
|
|
72
|
-
const element = titleNodeRef.current;
|
|
70
|
+
const hasParentTitle = element.closest<HTMLElement>('[title]');
|
|
73
71
|
|
|
74
|
-
if (
|
|
75
|
-
|
|
72
|
+
if (hasParentTitle) {
|
|
73
|
+
saveTitle(hasParentTitle);
|
|
74
|
+
}
|
|
75
|
+
}, []);
|
|
76
76
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
const titleTag = document.createElement('title');
|
|
77
|
+
const restoreTitle = useCallback((element: HTMLElement) => {
|
|
78
|
+
const title = element.getAttribute('data-restore-title');
|
|
80
79
|
|
|
81
|
-
|
|
80
|
+
if (title) {
|
|
81
|
+
if (element.tagName === 'svg') {
|
|
82
|
+
const titleTag = document.createElement('title');
|
|
82
83
|
|
|
83
|
-
|
|
84
|
-
} else {
|
|
85
|
-
element.setAttribute('title', title);
|
|
86
|
-
}
|
|
84
|
+
titleTag.innerHTML = title;
|
|
87
85
|
|
|
88
|
-
element.
|
|
86
|
+
element.appendChild(titleTag);
|
|
87
|
+
} else {
|
|
88
|
+
element.setAttribute('title', title);
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
-
|
|
91
|
+
element.removeAttribute('data-restore-title');
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
const hasParentTitle = element.closest<HTMLElement>(
|
|
95
|
+
'[data-restore-title]'
|
|
96
|
+
);
|
|
97
|
+
|
|
98
|
+
if (hasParentTitle) {
|
|
99
|
+
restoreTitle(hasParentTitle);
|
|
92
100
|
}
|
|
93
101
|
}, []);
|
|
94
102
|
|
|
@@ -101,6 +109,7 @@ export function useClosestTitle(props: Props) {
|
|
|
101
109
|
const onHide = useCallback((event?: any) => {
|
|
102
110
|
if (
|
|
103
111
|
event &&
|
|
112
|
+
!event.relatedTarget?.getAttribute('title') &&
|
|
104
113
|
(props.tooltipRef.current?.contains(event.relatedTarget) ||
|
|
105
114
|
targetRef.current?.contains(event.relatedTarget))
|
|
106
115
|
) {
|
|
@@ -109,7 +118,10 @@ export function useClosestTitle(props: Props) {
|
|
|
109
118
|
|
|
110
119
|
props.onHide();
|
|
111
120
|
|
|
112
|
-
|
|
121
|
+
if (titleNodeRef.current) {
|
|
122
|
+
restoreTitle(titleNodeRef.current);
|
|
123
|
+
titleNodeRef.current = null;
|
|
124
|
+
}
|
|
113
125
|
|
|
114
126
|
if (targetRef.current) {
|
|
115
127
|
targetRef.current.removeEventListener('click', onClick);
|