@clayui/tooltip 3.142.0 → 3.143.0
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/cjs/Tooltip.js +36 -0
- package/lib/cjs/TooltipProvider.js +218 -0
- package/lib/{index.js → cjs/index.js} +2 -2
- package/lib/cjs/useAlign.js +101 -0
- package/lib/{useClosestTitle.js → cjs/useClosestTitle.js} +26 -27
- package/lib/cjs/useTooltipState.js +38 -0
- package/lib/esm/Tooltip.js +31 -0
- package/lib/esm/TooltipProvider.js +208 -0
- package/lib/esm/index.js +8 -0
- package/lib/esm/useAlign.js +95 -0
- package/lib/esm/useClosestTitle.js +134 -0
- package/lib/esm/useTooltipState.js +32 -0
- package/package.json +11 -8
- package/lib/Tooltip.js +0 -39
- package/lib/TooltipProvider.js +0 -233
- package/lib/useAlign.js +0 -110
- package/lib/useTooltipState.js +0 -44
package/lib/TooltipProvider.js
DELETED
|
@@ -1,233 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.ClayTooltipProvider = void 0;
|
|
8
|
-
var _shared = require("@clayui/shared");
|
|
9
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
-
var _warning = _interopRequireDefault(require("warning"));
|
|
11
|
-
var _Tooltip = require("./Tooltip");
|
|
12
|
-
var _useAlign = require("./useAlign");
|
|
13
|
-
var _useClosestTitle2 = require("./useClosestTitle");
|
|
14
|
-
var _useTooltipState2 = require("./useTooltipState");
|
|
15
|
-
var _excluded = ["type"];
|
|
16
|
-
/**
|
|
17
|
-
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
18
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
19
|
-
*/
|
|
20
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
21
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
22
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }
|
|
23
|
-
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
24
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
25
|
-
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
26
|
-
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) { n[e] = r[e]; } return n; }
|
|
27
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0) { ; } } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
28
|
-
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
29
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
30
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
31
|
-
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
32
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
33
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
34
|
-
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) { o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } } return i; }
|
|
35
|
-
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) { if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } } return t; }
|
|
36
|
-
var initialState = {
|
|
37
|
-
align: 'top',
|
|
38
|
-
floating: false,
|
|
39
|
-
setAsHTML: false,
|
|
40
|
-
title: ''
|
|
41
|
-
};
|
|
42
|
-
var TRIGGER_HIDE_EVENTS = ['dragstart', 'mouseout', 'mouseup', 'pointerup', 'touchend'];
|
|
43
|
-
var TRIGGER_SHOW_EVENTS = ['mouseover', 'mouseup', 'pointerdown', 'touchstart'];
|
|
44
|
-
var reducer = function reducer(state, _ref) {
|
|
45
|
-
var type = _ref.type,
|
|
46
|
-
payload = _objectWithoutProperties(_ref, _excluded);
|
|
47
|
-
switch (type) {
|
|
48
|
-
case 'update':
|
|
49
|
-
return _objectSpread(_objectSpread({}, state), payload);
|
|
50
|
-
case 'reset':
|
|
51
|
-
return _objectSpread(_objectSpread({}, state), {}, {
|
|
52
|
-
align: initialState.align,
|
|
53
|
-
floating: false
|
|
54
|
-
});
|
|
55
|
-
default:
|
|
56
|
-
throw new TypeError();
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
var ClayTooltipProvider = exports.ClayTooltipProvider = function ClayTooltipProvider(_ref2) {
|
|
60
|
-
var _ref2$autoAlign = _ref2.autoAlign,
|
|
61
|
-
autoAlign = _ref2$autoAlign === void 0 ? true : _ref2$autoAlign,
|
|
62
|
-
children = _ref2.children,
|
|
63
|
-
_ref2$containerProps = _ref2.containerProps,
|
|
64
|
-
containerProps = _ref2$containerProps === void 0 ? {} : _ref2$containerProps,
|
|
65
|
-
_ref2$contentRenderer = _ref2.contentRenderer,
|
|
66
|
-
contentRenderer = _ref2$contentRenderer === void 0 ? function (props) {
|
|
67
|
-
return props.title;
|
|
68
|
-
} : _ref2$contentRenderer,
|
|
69
|
-
_ref2$delay = _ref2.delay,
|
|
70
|
-
delay = _ref2$delay === void 0 ? 600 : _ref2$delay,
|
|
71
|
-
scope = _ref2.scope;
|
|
72
|
-
var _useReducer = (0, _react.useReducer)(reducer, initialState),
|
|
73
|
-
_useReducer2 = _slicedToArray(_useReducer, 2),
|
|
74
|
-
_useReducer2$ = _useReducer2[0],
|
|
75
|
-
align = _useReducer2$.align,
|
|
76
|
-
floating = _useReducer2$.floating,
|
|
77
|
-
setAsHTML = _useReducer2$.setAsHTML,
|
|
78
|
-
_useReducer2$$title = _useReducer2$.title,
|
|
79
|
-
title = _useReducer2$$title === void 0 ? '' : _useReducer2$$title,
|
|
80
|
-
dispatch = _useReducer2[1];
|
|
81
|
-
var tooltipRef = (0, _react.useRef)(null);
|
|
82
|
-
var _useInteractionFocus = (0, _shared.useInteractionFocus)(),
|
|
83
|
-
getInteraction = _useInteractionFocus.getInteraction,
|
|
84
|
-
isFocusVisible = _useInteractionFocus.isFocusVisible;
|
|
85
|
-
var isHovered = (0, _react.useRef)(false);
|
|
86
|
-
var isFocused = (0, _react.useRef)(false);
|
|
87
|
-
var _useTooltipState = (0, _useTooltipState2.useTooltipState)({
|
|
88
|
-
delay: delay
|
|
89
|
-
}),
|
|
90
|
-
close = _useTooltipState.close,
|
|
91
|
-
isOpen = _useTooltipState.isOpen,
|
|
92
|
-
open = _useTooltipState.open;
|
|
93
|
-
var _useClosestTitle = (0, _useClosestTitle2.useClosestTitle)({
|
|
94
|
-
forceHide: (0, _react.useCallback)(function () {
|
|
95
|
-
dispatch({
|
|
96
|
-
type: 'reset'
|
|
97
|
-
});
|
|
98
|
-
close();
|
|
99
|
-
}, []),
|
|
100
|
-
onClick: (0, _react.useCallback)(function () {
|
|
101
|
-
isFocused.current = false;
|
|
102
|
-
isHovered.current = false;
|
|
103
|
-
}, []),
|
|
104
|
-
onHide: (0, _react.useCallback)(function () {
|
|
105
|
-
if (!isHovered.current && !isFocused.current) {
|
|
106
|
-
dispatch({
|
|
107
|
-
type: 'reset'
|
|
108
|
-
});
|
|
109
|
-
close();
|
|
110
|
-
}
|
|
111
|
-
}, []),
|
|
112
|
-
tooltipRef: tooltipRef
|
|
113
|
-
}),
|
|
114
|
-
forceHide = _useClosestTitle.forceHide,
|
|
115
|
-
getProps = _useClosestTitle.getProps,
|
|
116
|
-
onHide = _useClosestTitle.onHide,
|
|
117
|
-
target = _useClosestTitle.target,
|
|
118
|
-
titleNode = _useClosestTitle.titleNode;
|
|
119
|
-
(0, _useAlign.useAlign)({
|
|
120
|
-
align: align,
|
|
121
|
-
autoAlign: autoAlign,
|
|
122
|
-
floating: floating,
|
|
123
|
-
isOpen: isOpen,
|
|
124
|
-
onAlign: (0, _react.useCallback)(function (align) {
|
|
125
|
-
return dispatch({
|
|
126
|
-
align: align,
|
|
127
|
-
type: 'update'
|
|
128
|
-
});
|
|
129
|
-
}, []),
|
|
130
|
-
sourceElement: tooltipRef,
|
|
131
|
-
targetElement: titleNode,
|
|
132
|
-
title: title
|
|
133
|
-
});
|
|
134
|
-
var onShow = (0, _react.useCallback)(function (event) {
|
|
135
|
-
if (isHovered.current || isFocused.current) {
|
|
136
|
-
var _props = getProps(event, isHovered.current);
|
|
137
|
-
if (_props) {
|
|
138
|
-
var _ref3;
|
|
139
|
-
dispatch({
|
|
140
|
-
align: (_ref3 = _props.align) !== null && _ref3 !== void 0 ? _ref3 : align,
|
|
141
|
-
floating: _props.floating,
|
|
142
|
-
setAsHTML: _props.setAsHTML,
|
|
143
|
-
title: _props.title,
|
|
144
|
-
type: 'update'
|
|
145
|
-
});
|
|
146
|
-
open(isFocused.current, _props.delay ? Number(_props.delay) : undefined);
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
}, [align]);
|
|
150
|
-
(0, _react.useEffect)(function () {
|
|
151
|
-
var handleEsc = function handleEsc(event) {
|
|
152
|
-
if (isOpen && event.key === _shared.Keys.Esc) {
|
|
153
|
-
event.stopImmediatePropagation();
|
|
154
|
-
forceHide();
|
|
155
|
-
}
|
|
156
|
-
};
|
|
157
|
-
document.addEventListener('keyup', handleEsc, true);
|
|
158
|
-
return function () {
|
|
159
|
-
return document.removeEventListener('keyup', handleEsc, true);
|
|
160
|
-
};
|
|
161
|
-
}, [isOpen]);
|
|
162
|
-
var onHoverStart = function onHoverStart(event) {
|
|
163
|
-
if (getInteraction() === 'pointer') {
|
|
164
|
-
isHovered.current = true;
|
|
165
|
-
} else {
|
|
166
|
-
isHovered.current = false;
|
|
167
|
-
}
|
|
168
|
-
onShow(event);
|
|
169
|
-
};
|
|
170
|
-
var onHoverEnd = function onHoverEnd(event) {
|
|
171
|
-
isFocused.current = false;
|
|
172
|
-
isHovered.current = false;
|
|
173
|
-
onHide(event);
|
|
174
|
-
};
|
|
175
|
-
var onFocus = function onFocus(event) {
|
|
176
|
-
if (isFocusVisible()) {
|
|
177
|
-
isFocused.current = true;
|
|
178
|
-
onShow(event);
|
|
179
|
-
}
|
|
180
|
-
};
|
|
181
|
-
var onBlur = function onBlur(event) {
|
|
182
|
-
isFocused.current = false;
|
|
183
|
-
isHovered.current = false;
|
|
184
|
-
onHide(event);
|
|
185
|
-
};
|
|
186
|
-
(0, _react.useEffect)(function () {
|
|
187
|
-
if (scope) {
|
|
188
|
-
var disposeShowEvents = TRIGGER_SHOW_EVENTS.map(function (eventName) {
|
|
189
|
-
return (0, _shared.delegate)(document.body, eventName, scope, onHoverStart);
|
|
190
|
-
});
|
|
191
|
-
var disposeHideEvents = TRIGGER_HIDE_EVENTS.map(function (eventName) {
|
|
192
|
-
return (0, _shared.delegate)(document.body, eventName, "".concat(scope, ", .tooltip"), onHoverEnd);
|
|
193
|
-
});
|
|
194
|
-
var disposeShowFocus = (0, _shared.delegate)(document.body, 'focus', "".concat(scope, ", .tooltip"), onFocus, true);
|
|
195
|
-
var disposeCloseBlur = (0, _shared.delegate)(document.body, 'blur', "".concat(scope, ", .tooltip"), onBlur, true);
|
|
196
|
-
return function () {
|
|
197
|
-
disposeShowEvents.forEach(function (_ref4) {
|
|
198
|
-
var dispose = _ref4.dispose;
|
|
199
|
-
return dispose();
|
|
200
|
-
});
|
|
201
|
-
disposeHideEvents.forEach(function (_ref5) {
|
|
202
|
-
var dispose = _ref5.dispose;
|
|
203
|
-
return dispose();
|
|
204
|
-
});
|
|
205
|
-
disposeShowFocus.dispose();
|
|
206
|
-
disposeCloseBlur.dispose();
|
|
207
|
-
};
|
|
208
|
-
}
|
|
209
|
-
}, [onShow]);
|
|
210
|
-
"production" !== "production" ? (0, _warning.default)(typeof children === 'undefined' && typeof scope !== 'undefined' || typeof scope === 'undefined' && typeof children !== 'undefined', '<TooltipProvider />: You must use at least one of the following props: `children` or `scope`.') : void 0;
|
|
211
|
-
"production" !== "production" ? (0, _warning.default)(typeof children !== 'undefined' || typeof scope !== 'undefined', '<TooltipProvider />: If you want to use `scope`, use <TooltipProvider /> as a singleton and do not pass `children`.') : void 0;
|
|
212
|
-
"production" !== "production" ? (0, _warning.default)((children === null || children === void 0 ? void 0 : children.type) !== _react.default.Fragment, '<TooltipProvider />: React Fragment is not allowed as a child to TooltipProvider. Child must be a single HTML element that accepts `onMouseOver` and `onMouseOut`.') : void 0;
|
|
213
|
-
var titleContent = contentRenderer({
|
|
214
|
-
targetNode: target.current,
|
|
215
|
-
title: title
|
|
216
|
-
});
|
|
217
|
-
var tooltip = isOpen && /*#__PURE__*/_react.default.createElement(_shared.ClayPortal, containerProps, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
|
|
218
|
-
alignPosition: align,
|
|
219
|
-
ref: tooltipRef,
|
|
220
|
-
show: true
|
|
221
|
-
}, setAsHTML && typeof titleContent === 'string' ? /*#__PURE__*/_react.default.createElement("span", {
|
|
222
|
-
dangerouslySetInnerHTML: {
|
|
223
|
-
__html: titleContent
|
|
224
|
-
}
|
|
225
|
-
}) : titleContent));
|
|
226
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, scope ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tooltip, children) : children && /*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({}, children.props), {}, {
|
|
227
|
-
children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children.props.children, tooltip),
|
|
228
|
-
onBlur: onBlur,
|
|
229
|
-
onFocus: onFocus,
|
|
230
|
-
onMouseOut: onHoverEnd,
|
|
231
|
-
onMouseOver: onHoverStart
|
|
232
|
-
})));
|
|
233
|
-
};
|
package/lib/useAlign.js
DELETED
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useAlign = useAlign;
|
|
7
|
-
var _shared = require("@clayui/shared");
|
|
8
|
-
var _domAlign = require("dom-align");
|
|
9
|
-
var _react = require("react");
|
|
10
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
11
|
-
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
12
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
13
|
-
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
14
|
-
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) { n[e] = r[e]; } return n; }
|
|
15
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0) { ; } } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
16
|
-
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
17
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
18
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
19
|
-
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
20
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
21
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
|
|
22
|
-
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
23
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
24
|
-
*/
|
|
25
|
-
var ALIGNMENTS = ['top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left'];
|
|
26
|
-
var ALIGNMENTS_MAP = {
|
|
27
|
-
bottom: ['tc', 'bc'],
|
|
28
|
-
'bottom-left': ['tl', 'bl'],
|
|
29
|
-
'bottom-right': ['tr', 'br'],
|
|
30
|
-
left: ['cr', 'cl'],
|
|
31
|
-
right: ['cl', 'cr'],
|
|
32
|
-
top: ['bc', 'tc'],
|
|
33
|
-
'top-left': ['bl', 'tl'],
|
|
34
|
-
'top-right': ['br', 'tr']
|
|
35
|
-
};
|
|
36
|
-
var ALIGNMENTS_INVERSE_MAP = {
|
|
37
|
-
bctc: 'top',
|
|
38
|
-
bltl: 'top-left',
|
|
39
|
-
brtr: 'top-right',
|
|
40
|
-
clcr: 'right',
|
|
41
|
-
crcl: 'left',
|
|
42
|
-
tcbc: 'bottom',
|
|
43
|
-
tlbl: 'bottom-left',
|
|
44
|
-
trbr: 'bottom-right'
|
|
45
|
-
};
|
|
46
|
-
var BOTTOM_OFFSET = [0, 7];
|
|
47
|
-
var LEFT_OFFSET = [-7, 0];
|
|
48
|
-
var RIGHT_OFFSET = [7, 0];
|
|
49
|
-
var TOP_OFFSET = [0, -7];
|
|
50
|
-
var OFFSET_MAP = {
|
|
51
|
-
bctc: TOP_OFFSET,
|
|
52
|
-
bltl: TOP_OFFSET,
|
|
53
|
-
brtr: TOP_OFFSET,
|
|
54
|
-
clcr: RIGHT_OFFSET,
|
|
55
|
-
crcl: LEFT_OFFSET,
|
|
56
|
-
tcbc: BOTTOM_OFFSET,
|
|
57
|
-
tlbl: BOTTOM_OFFSET,
|
|
58
|
-
trbr: BOTTOM_OFFSET
|
|
59
|
-
};
|
|
60
|
-
var ALIGNMENTS_FORCE_MAP = _objectSpread(_objectSpread({}, ALIGNMENTS_INVERSE_MAP), {}, {
|
|
61
|
-
bctc: 'top-left',
|
|
62
|
-
tcbc: 'bottom-left'
|
|
63
|
-
});
|
|
64
|
-
function useAlign(_ref) {
|
|
65
|
-
var align = _ref.align,
|
|
66
|
-
autoAlign = _ref.autoAlign,
|
|
67
|
-
floating = _ref.floating,
|
|
68
|
-
isOpen = _ref.isOpen,
|
|
69
|
-
onAlign = _ref.onAlign,
|
|
70
|
-
sourceElement = _ref.sourceElement,
|
|
71
|
-
targetElement = _ref.targetElement,
|
|
72
|
-
title = _ref.title;
|
|
73
|
-
var mousePosition = (0, _shared.useMousePosition)(20);
|
|
74
|
-
(0, _react.useEffect)(function () {
|
|
75
|
-
if (sourceElement.current && isOpen && floating) {
|
|
76
|
-
var points = ALIGNMENTS_MAP[align || 'top'];
|
|
77
|
-
var _mousePosition = _slicedToArray(mousePosition, 2),
|
|
78
|
-
clientX = _mousePosition[0],
|
|
79
|
-
clientY = _mousePosition[1];
|
|
80
|
-
(0, _domAlign.alignPoint)(sourceElement.current, {
|
|
81
|
-
clientX: clientX,
|
|
82
|
-
clientY: clientY
|
|
83
|
-
}, {
|
|
84
|
-
offset: OFFSET_MAP[points.join('')],
|
|
85
|
-
points: points
|
|
86
|
-
});
|
|
87
|
-
}
|
|
88
|
-
}, [isOpen, floating]);
|
|
89
|
-
(0, _react.useEffect)(function () {
|
|
90
|
-
if (targetElement.current && sourceElement.current && isOpen && !floating) {
|
|
91
|
-
var points = ALIGNMENTS_MAP[align || 'top'];
|
|
92
|
-
var alignment = (0, _shared.doAlign)({
|
|
93
|
-
overflow: {
|
|
94
|
-
adjustX: autoAlign,
|
|
95
|
-
adjustY: autoAlign
|
|
96
|
-
},
|
|
97
|
-
points: points,
|
|
98
|
-
sourceElement: sourceElement.current,
|
|
99
|
-
targetElement: targetElement.current
|
|
100
|
-
});
|
|
101
|
-
var alignmentString = alignment.points.join('');
|
|
102
|
-
var pointsString = points.join('');
|
|
103
|
-
if (alignment.overflow.adjustX) {
|
|
104
|
-
onAlign(ALIGNMENTS_FORCE_MAP[alignmentString]);
|
|
105
|
-
} else if (pointsString !== alignmentString) {
|
|
106
|
-
onAlign(ALIGNMENTS_INVERSE_MAP[alignmentString]);
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
}, [align, title, isOpen]);
|
|
110
|
-
}
|
package/lib/useTooltipState.js
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useTooltipState = useTooltipState;
|
|
7
|
-
var _react = require("react");
|
|
8
|
-
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
9
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
10
|
-
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
11
|
-
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) { n[e] = r[e]; } return n; }
|
|
12
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0) { ; } } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
13
|
-
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /**
|
|
14
|
-
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
15
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
16
|
-
*/
|
|
17
|
-
function useTooltipState(_ref) {
|
|
18
|
-
var _ref$delay = _ref.delay,
|
|
19
|
-
delay = _ref$delay === void 0 ? 600 : _ref$delay;
|
|
20
|
-
var _useState = (0, _react.useState)(false),
|
|
21
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
22
|
-
isOpen = _useState2[0],
|
|
23
|
-
setOpen = _useState2[1];
|
|
24
|
-
var timeoutIdRef = (0, _react.useRef)();
|
|
25
|
-
var open = (0, _react.useCallback)(function (immediate, customDelay) {
|
|
26
|
-
if (!immediate) {
|
|
27
|
-
clearTimeout(timeoutIdRef.current);
|
|
28
|
-
timeoutIdRef.current = setTimeout(function () {
|
|
29
|
-
setOpen(true);
|
|
30
|
-
}, customDelay !== undefined ? customDelay : delay);
|
|
31
|
-
} else {
|
|
32
|
-
setOpen(true);
|
|
33
|
-
}
|
|
34
|
-
}, []);
|
|
35
|
-
var close = (0, _react.useCallback)(function () {
|
|
36
|
-
clearTimeout(timeoutIdRef.current);
|
|
37
|
-
setOpen(false);
|
|
38
|
-
}, []);
|
|
39
|
-
return {
|
|
40
|
-
close: close,
|
|
41
|
-
isOpen: isOpen,
|
|
42
|
-
open: open
|
|
43
|
-
};
|
|
44
|
-
}
|