iguazio.dashboard-react-controls 1.9.2 → 2.0.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/dist/components/Backdrop/Backdrop.js +7 -7
- package/dist/components/Button/Button.js +20 -26
- package/dist/components/ConfirmDialog/ConfirmDialog.js +18 -17
- package/dist/components/FormCheckBox/FormCheckBox.js +28 -32
- package/dist/components/FormChipCell/FormChip/FormChip.js +46 -50
- package/dist/components/FormChipCell/FormChipCell.js +122 -142
- package/dist/components/FormChipCell/FormChipCellView.js +44 -47
- package/dist/components/FormChipCell/HiddenChipsBlock/HiddenChipsBlock.js +23 -20
- package/dist/components/FormChipCell/NewChipForm/NewChipForm.js +129 -152
- package/dist/components/FormChipCell/NewChipInput/NewChipInput.js +24 -27
- package/dist/components/FormChipCell/formChipCell.util.js +6 -16
- package/dist/components/FormCombobox/FormCombobox.js +134 -195
- package/dist/components/FormInput/FormInput.js +134 -212
- package/dist/components/FormInput/InputNumberButtons/InputNumberButtons.js +15 -14
- package/dist/components/FormKeyValueTable/FormKeyValueTable.js +72 -72
- package/dist/components/FormRadio/FormRadio.js +21 -25
- package/dist/components/FormSelect/FormSelect.js +98 -126
- package/dist/components/FormSelect/FormSelect.test.js +56 -60
- package/dist/components/FormTextarea/FormTextarea.js +55 -71
- package/dist/components/FormToggle/FormToggle.js +25 -29
- package/dist/components/Modal/Modal.js +17 -18
- package/dist/components/PopUpDialog/PopUpDialog.js +53 -63
- package/dist/components/RoundedIcon/RoundedIcon.js +14 -13
- package/dist/components/Tip/Tip.js +58 -64
- package/dist/components/Tip/Tip.test.js +41 -64
- package/dist/components/Tooltip/Tooltip.js +75 -89
- package/dist/components/TooltipTemplate/ProducerTooltipTemplate.js +6 -5
- package/dist/components/TooltipTemplate/TextTooltipTemplate.js +10 -10
- package/dist/components/Wizard/Wizard.js +73 -107
- package/dist/components/Wizard/WizardSteps/WizardSteps.js +19 -20
- package/dist/components/index.js +18 -18
- package/dist/constants.js +26 -44
- package/dist/elements/FormActionButton/FormActionButton.js +12 -13
- package/dist/elements/FormRowActions/FormRowActions.js +19 -22
- package/dist/elements/OptionsMenu/OptionsMenu.js +10 -8
- package/dist/elements/SelectOption/SelectOption.js +14 -13
- package/dist/elements/SelectOption/SelectOption.test.js +39 -47
- package/dist/elements/ValidationTemplate/ValidationTemplate.js +7 -6
- package/dist/elements/index.js +5 -5
- package/dist/hooks/index.js +5 -5
- package/dist/hooks/useChipCell.hook.js +66 -85
- package/dist/hooks/useDebounce.hook.js +22 -24
- package/dist/hooks/useDetectOutsideClick.hook.js +4 -4
- package/dist/hooks/useFormTable.hook.js +99 -112
- package/dist/hooks/useHiddenChipsBlock.hook.js +40 -55
- package/dist/index.js +2 -3
- package/dist/scss/borders.scss +6 -0
- package/dist/scss/mixins.scss +32 -0
- package/dist/types.js +43 -67
- package/dist/utils/common.util.js +19 -23
- package/dist/utils/form.util.js +33 -39
- package/dist/utils/generateChipsList.util.js +7 -7
- package/dist/utils/getFirstScrollableParent.util.js +4 -10
- package/dist/utils/math.util.js +3 -3
- package/dist/utils/validation.util.js +74 -131
- package/package.json +34 -34
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
@@ -15,74 +14,70 @@ var _exclamationMark = require("../../images/exclamation-mark.svg");
|
|
|
15
14
|
var _tip = _interopRequireDefault(require("./tip.scss"));
|
|
16
15
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
|
-
function _getRequireWildcardCache(
|
|
19
|
-
function _interopRequireWildcard(
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
55
|
-
tipClassName = _useState4[0],
|
|
56
|
-
setTipClassName = _useState4[1];
|
|
57
|
-
var iconRef = (0, _react.useRef)();
|
|
58
|
-
var tipBodyRef = (0, _react.useRef)();
|
|
59
|
-
var tipContainerClassNames = (0, _classnames.default)(className, 'tip-container');
|
|
60
|
-
var tipClassNames = (0, _classnames.default)('tip', tipClassName, text.length <= minTextLength ? 'tip_small' : 'tip_big');
|
|
61
|
-
var handleMouseEnter = (0, _react.useCallback)(function (event) {
|
|
17
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
18
|
+
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; }
|
|
19
|
+
/*
|
|
20
|
+
Copyright 2022 Iguazio Systems Ltd.
|
|
21
|
+
Licensed under the Apache License, Version 2.0 (the "License") with
|
|
22
|
+
an addition restriction as set forth herein. You may not use this
|
|
23
|
+
file except in compliance with the License. You may obtain a copy of
|
|
24
|
+
the License at http://www.apache.org/licenses/LICENSE-2.0.
|
|
25
|
+
Unless required by applicable law or agreed to in writing, software
|
|
26
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
27
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
28
|
+
implied. See the License for the specific language governing
|
|
29
|
+
permissions and limitations under the License.
|
|
30
|
+
In addition, you may not use the software for any purposes that are
|
|
31
|
+
illegal under applicable law, and the grant of the foregoing license
|
|
32
|
+
under the Apache 2.0 license is conditioned upon your compliance with
|
|
33
|
+
such restriction.
|
|
34
|
+
*/
|
|
35
|
+
|
|
36
|
+
const arrowOffset = parseInt(_tip.default.arrowoffset);
|
|
37
|
+
const arrowLength = parseInt(_tip.default.arrowlength);
|
|
38
|
+
const iconLength = parseInt(_tip.default.iconlength);
|
|
39
|
+
const minTextLength = 40;
|
|
40
|
+
const Tip = _ref => {
|
|
41
|
+
let {
|
|
42
|
+
className,
|
|
43
|
+
text,
|
|
44
|
+
withExclamationMark
|
|
45
|
+
} = _ref;
|
|
46
|
+
const [isShow, setIsShow] = (0, _react.useState)(false);
|
|
47
|
+
const [tipClassName, setTipClassName] = (0, _react.useState)('tip_top tip_left');
|
|
48
|
+
const iconRef = (0, _react.useRef)();
|
|
49
|
+
const tipBodyRef = (0, _react.useRef)();
|
|
50
|
+
const tipContainerClassNames = (0, _classnames.default)(className, 'tip-container');
|
|
51
|
+
const tipClassNames = (0, _classnames.default)('tip', tipClassName, text.length <= minTextLength ? 'tip_small' : 'tip_big');
|
|
52
|
+
const handleMouseEnter = (0, _react.useCallback)(event => {
|
|
62
53
|
setIsShow(true);
|
|
63
|
-
var iconRect = iconRef.current.getBoundingClientRect();
|
|
64
|
-
var tipRect = tipBodyRef.current.getBoundingClientRect();
|
|
65
|
-
var widthPosition = iconRect.left > tipRect.width - arrowOffset ? 'tip_left' : 'tip_right';
|
|
66
|
-
var heightPosition = iconRect.top > tipRect.height + arrowLength ? 'tip_top' : 'tip_bottom';
|
|
67
|
-
setTipClassName("".concat(heightPosition, " ").concat(widthPosition));
|
|
68
|
-
if (widthPosition === 'tip_left') {
|
|
69
|
-
var computedArrowOffset = arrowOffset + (iconLength + arrowLength) / 2;
|
|
70
|
-
tipBodyRef.current.style.left = "".concat(iconRect.left - (tipRect.width - computedArrowOffset), "px");
|
|
71
|
-
} else {
|
|
72
|
-
var _computedArrowOffset = arrowOffset - (iconLength - arrowLength) / 2;
|
|
73
|
-
tipBodyRef.current.style.left = "".concat(iconRect.left - _computedArrowOffset, "px");
|
|
74
|
-
}
|
|
75
|
-
tipBodyRef.current.style.top = heightPosition === 'tip_top' ? "".concat(iconRect.top - tipRect.height - arrowLength, "px") : "".concat(iconRect.bottom + arrowLength, "px");
|
|
76
54
|
}, []);
|
|
77
|
-
|
|
55
|
+
(0, _react.useEffect)(() => {
|
|
56
|
+
if (isShow) {
|
|
57
|
+
const iconRect = iconRef.current.getBoundingClientRect();
|
|
58
|
+
const tipRect = tipBodyRef.current.getBoundingClientRect();
|
|
59
|
+
const widthPosition = iconRect.left > tipRect.width - arrowOffset ? 'tip_left' : 'tip_right';
|
|
60
|
+
const heightPosition = iconRect.top > tipRect.height + arrowLength ? 'tip_top' : 'tip_bottom';
|
|
61
|
+
setTipClassName("".concat(heightPosition, " ").concat(widthPosition));
|
|
62
|
+
if (widthPosition === 'tip_left') {
|
|
63
|
+
const computedArrowOffset = arrowOffset + (iconLength + arrowLength) / 2;
|
|
64
|
+
tipBodyRef.current.style.left = "".concat(iconRect.left - (tipRect.width - computedArrowOffset), "px");
|
|
65
|
+
} else {
|
|
66
|
+
const computedArrowOffset = arrowOffset - (iconLength - arrowLength) / 2;
|
|
67
|
+
tipBodyRef.current.style.left = "".concat(iconRect.left - computedArrowOffset, "px");
|
|
68
|
+
}
|
|
69
|
+
tipBodyRef.current.style.top = heightPosition === 'tip_top' ? "".concat(iconRect.top - tipRect.height - arrowLength, "px") : "".concat(iconRect.bottom + arrowLength, "px");
|
|
70
|
+
}
|
|
71
|
+
}, [isShow]);
|
|
72
|
+
const handleMouseLeave = () => {
|
|
78
73
|
setIsShow(false);
|
|
79
74
|
};
|
|
80
|
-
(0, _react.useEffect)(
|
|
81
|
-
|
|
75
|
+
(0, _react.useEffect)(() => {
|
|
76
|
+
const node = iconRef.current;
|
|
82
77
|
if (iconRef.current) {
|
|
83
78
|
node.addEventListener('mouseenter', handleMouseEnter);
|
|
84
79
|
node.addEventListener('mouseleave', handleMouseLeave);
|
|
85
|
-
return
|
|
80
|
+
return () => {
|
|
86
81
|
node.removeEventListener('mouseenter', handleMouseEnter);
|
|
87
82
|
node.removeEventListener('mouseleave', handleMouseLeave);
|
|
88
83
|
};
|
|
@@ -120,5 +115,4 @@ Tip.propTypes = {
|
|
|
120
115
|
className: _propTypes.default.string,
|
|
121
116
|
text: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]).isRequired
|
|
122
117
|
};
|
|
123
|
-
var _default = Tip;
|
|
124
|
-
exports.default = _default;
|
|
118
|
+
var _default = exports.default = Tip;
|
|
@@ -5,83 +5,60 @@ var _react2 = require("@testing-library/react");
|
|
|
5
5
|
var _Tip = _interopRequireDefault(require("./Tip"));
|
|
6
6
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
7
7
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
8
|
-
|
|
9
|
-
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = Object.defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, catch: function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
};
|
|
36
|
-
});
|
|
37
|
-
var renderComponent = function renderComponent(props) {
|
|
38
|
-
return (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tip.default, _objectSpread({}, props)));
|
|
39
|
-
};
|
|
40
|
-
describe('Tip component', function () {
|
|
41
|
-
var wrapper;
|
|
42
|
-
beforeEach(function () {
|
|
43
|
-
var props = {
|
|
8
|
+
/*
|
|
9
|
+
Copyright 2022 Iguazio Systems Ltd.
|
|
10
|
+
Licensed under the Apache License, Version 2.0 (the "License") with
|
|
11
|
+
an addition restriction as set forth herein. You may not use this
|
|
12
|
+
file except in compliance with the License. You may obtain a copy of
|
|
13
|
+
the License at http://www.apache.org/licenses/LICENSE-2.0.
|
|
14
|
+
Unless required by applicable law or agreed to in writing, software
|
|
15
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
16
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
17
|
+
implied. See the License for the specific language governing
|
|
18
|
+
permissions and limitations under the License.
|
|
19
|
+
In addition, you may not use the software for any purposes that are
|
|
20
|
+
illegal under applicable law, and the grant of the foregoing license
|
|
21
|
+
under the Apache 2.0 license is conditioned upon your compliance with
|
|
22
|
+
such restriction.
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
jest.mock('../../images/question-mark.svg', () => ({
|
|
26
|
+
ReactComponent: 'Question-icon'
|
|
27
|
+
}));
|
|
28
|
+
const renderComponent = props => (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tip.default, {
|
|
29
|
+
...props
|
|
30
|
+
}));
|
|
31
|
+
describe('Tip component', () => {
|
|
32
|
+
let wrapper;
|
|
33
|
+
beforeEach(() => {
|
|
34
|
+
const props = {
|
|
44
35
|
text: 'Show tip component'
|
|
45
36
|
};
|
|
46
37
|
wrapper = renderComponent(props);
|
|
47
38
|
});
|
|
48
|
-
it('renders without crashing',
|
|
39
|
+
it('renders without crashing', () => {
|
|
49
40
|
expect(wrapper.queryByTestId('tip')).not.toBeNull();
|
|
50
41
|
});
|
|
51
|
-
it('should display tip text if mouse over the icon',
|
|
52
|
-
|
|
42
|
+
it('should display tip text if mouse over the icon', () => {
|
|
43
|
+
const tipIcon = wrapper.getByTestId('tip-icon');
|
|
44
|
+
_react2.fireEvent.mouseEnter(tipIcon);
|
|
45
|
+
expect(wrapper.queryByTestId('tip-text')).not.toBeNull();
|
|
46
|
+
});
|
|
47
|
+
it('should hide tip text if mouse leave the icon', async () => {
|
|
48
|
+
const tipIcon = wrapper.getByTestId('tip-icon');
|
|
53
49
|
_react2.fireEvent.mouseEnter(tipIcon);
|
|
54
50
|
expect(wrapper.queryByTestId('tip-text')).not.toBeNull();
|
|
51
|
+
_react2.fireEvent.mouseLeave(tipIcon);
|
|
52
|
+
const tipText = await (0, _react2.waitForElementToBeRemoved)(() => wrapper.queryByTestId('tip-text'));
|
|
53
|
+
expect(tipText).toBeUndefined();
|
|
55
54
|
});
|
|
56
|
-
it('should
|
|
57
|
-
var tipIcon, tipText;
|
|
58
|
-
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
59
|
-
while (1) switch (_context.prev = _context.next) {
|
|
60
|
-
case 0:
|
|
61
|
-
tipIcon = wrapper.getByTestId('tip-icon');
|
|
62
|
-
_react2.fireEvent.mouseEnter(tipIcon);
|
|
63
|
-
expect(wrapper.queryByTestId('tip-text')).not.toBeNull();
|
|
64
|
-
_react2.fireEvent.mouseLeave(tipIcon);
|
|
65
|
-
_context.next = 6;
|
|
66
|
-
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
67
|
-
return wrapper.queryByTestId('tip-text');
|
|
68
|
-
});
|
|
69
|
-
case 6:
|
|
70
|
-
tipText = _context.sent;
|
|
71
|
-
expect(tipText).toBeUndefined();
|
|
72
|
-
case 8:
|
|
73
|
-
case "end":
|
|
74
|
-
return _context.stop();
|
|
75
|
-
}
|
|
76
|
-
}, _callee);
|
|
77
|
-
})));
|
|
78
|
-
it('should add the class "tip_big" if the length of the prop text is more than 40 characters', function () {
|
|
55
|
+
it('should add the class "tip_big" if the length of the prop text is more than 40 characters', () => {
|
|
79
56
|
wrapper.rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tip.default, {
|
|
80
57
|
text: "Lorem Ipsum is simply dummy text of the printing and typesetting"
|
|
81
58
|
}));
|
|
82
|
-
|
|
59
|
+
const tipIcon = wrapper.getByTestId('tip-icon');
|
|
83
60
|
_react2.fireEvent.mouseEnter(tipIcon);
|
|
84
|
-
|
|
61
|
+
const tipText = wrapper.getByTestId('tip-text');
|
|
85
62
|
expect(tipText.className).toMatch('tip_big');
|
|
86
63
|
});
|
|
87
64
|
});
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
@@ -15,138 +14,124 @@ var _common = require("../../utils/common.util");
|
|
|
15
14
|
require("./tooltip.scss");
|
|
16
15
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
|
-
function _getRequireWildcardCache(
|
|
19
|
-
function _interopRequireWildcard(
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
56
|
-
show = _useState2[0],
|
|
57
|
-
setShow = _useState2[1];
|
|
58
|
-
var _useState3 = (0, _react.useState)({}),
|
|
59
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
60
|
-
style = _useState4[0],
|
|
61
|
-
setStyle = _useState4[1];
|
|
62
|
-
var tooltipClassNames = (0, _classnames.default)('data-ellipsis', 'tooltip-wrapper', className);
|
|
63
|
-
var duration = 200;
|
|
64
|
-
var parentRef = (0, _react.useRef)();
|
|
65
|
-
var tooltipRef = (0, _react.useRef)();
|
|
66
|
-
var offset = 10;
|
|
67
|
-
var handleScroll = function handleScroll() {
|
|
17
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
18
|
+
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; }
|
|
19
|
+
/*
|
|
20
|
+
Copyright 2022 Iguazio Systems Ltd.
|
|
21
|
+
Licensed under the Apache License, Version 2.0 (the "License") with
|
|
22
|
+
an addition restriction as set forth herein. You may not use this
|
|
23
|
+
file except in compliance with the License. You may obtain a copy of
|
|
24
|
+
the License at http://www.apache.org/licenses/LICENSE-2.0.
|
|
25
|
+
Unless required by applicable law or agreed to in writing, software
|
|
26
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
27
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
28
|
+
implied. See the License for the specific language governing
|
|
29
|
+
permissions and limitations under the License.
|
|
30
|
+
In addition, you may not use the software for any purposes that are
|
|
31
|
+
illegal under applicable law, and the grant of the foregoing license
|
|
32
|
+
under the Apache 2.0 license is conditioned upon your compliance with
|
|
33
|
+
such restriction.
|
|
34
|
+
*/
|
|
35
|
+
|
|
36
|
+
const Tooltip = _ref => {
|
|
37
|
+
let {
|
|
38
|
+
children,
|
|
39
|
+
className,
|
|
40
|
+
hidden,
|
|
41
|
+
id,
|
|
42
|
+
renderChildAsHtml,
|
|
43
|
+
template,
|
|
44
|
+
textShow
|
|
45
|
+
} = _ref;
|
|
46
|
+
const [show, setShow] = (0, _react.useState)(false);
|
|
47
|
+
const [style, setStyle] = (0, _react.useState)({});
|
|
48
|
+
const tooltipClassNames = (0, _classnames.default)('data-ellipsis', 'tooltip-wrapper', className);
|
|
49
|
+
const duration = 200;
|
|
50
|
+
const parentRef = (0, _react.useRef)();
|
|
51
|
+
const tooltipRef = (0, _react.useRef)();
|
|
52
|
+
const offset = 10;
|
|
53
|
+
const handleScroll = () => {
|
|
68
54
|
setShow(false);
|
|
69
55
|
};
|
|
70
|
-
|
|
56
|
+
const handleMouseLeave = (0, _react.useCallback)(event => {
|
|
71
57
|
if (tooltipRef.current && !tooltipRef.current.contains(event.relatedTarget) && parentRef.current && !parentRef.current.contains(event.relatedTarget) || hidden) {
|
|
72
58
|
setShow(false);
|
|
73
59
|
}
|
|
74
60
|
}, [hidden]);
|
|
75
|
-
|
|
61
|
+
const handleMouseEnter = (0, _react.useCallback)(event => {
|
|
76
62
|
if (!show) {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
var _show = !hidden && (textShow ? true : !child ? false : child.nodeType !== Node.TEXT_NODE ||
|
|
63
|
+
const [child] = parentRef.current.childNodes;
|
|
64
|
+
let show = !hidden && (textShow ? true : !child ? false : child.nodeType !== Node.TEXT_NODE || (
|
|
80
65
|
/*
|
|
81
66
|
If the child node is a text node and the text of the child node inside the container is greater than the width of the container, then show tooltip.
|
|
82
67
|
*/
|
|
83
|
-
child.nodeType === Node.TEXT_NODE && parentRef.current.scrollWidth > parentRef.current.offsetWidth);
|
|
84
|
-
if (
|
|
68
|
+
child.nodeType === Node.TEXT_NODE && parentRef.current.scrollWidth > parentRef.current.offsetWidth));
|
|
69
|
+
if (show) {
|
|
85
70
|
var _parentRef$current$ge, _parentRef$current, _tooltipRef$current$g, _tooltipRef$current;
|
|
86
71
|
setShow(true);
|
|
87
|
-
|
|
88
|
-
height
|
|
89
|
-
top
|
|
90
|
-
bottom
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
72
|
+
let {
|
|
73
|
+
height,
|
|
74
|
+
top,
|
|
75
|
+
bottom
|
|
76
|
+
} = (_parentRef$current$ge = parentRef === null || parentRef === void 0 || (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : _parentRef$current.getBoundingClientRect()) !== null && _parentRef$current$ge !== void 0 ? _parentRef$current$ge : {};
|
|
77
|
+
const {
|
|
78
|
+
height: tooltipHeight,
|
|
79
|
+
width: tooltipWidth
|
|
80
|
+
} = (_tooltipRef$current$g = (_tooltipRef$current = tooltipRef.current) === null || _tooltipRef$current === void 0 ? void 0 : _tooltipRef$current.getBoundingClientRect()) !== null && _tooltipRef$current$g !== void 0 ? _tooltipRef$current$g : {
|
|
81
|
+
height: 0,
|
|
82
|
+
width: 0
|
|
83
|
+
};
|
|
84
|
+
const leftPosition = event.x - (event.x + tooltipWidth - window.innerWidth + offset);
|
|
85
|
+
const left = event.x + tooltipWidth + offset > window.innerWidth ? leftPosition > offset ? leftPosition : offset : event.x + offset;
|
|
99
86
|
if (top + height + offset + tooltipHeight >= window.innerHeight) {
|
|
100
|
-
|
|
87
|
+
const topPosition = bottom - height - offset - tooltipHeight;
|
|
101
88
|
setStyle({
|
|
102
89
|
top: topPosition > 0 ? topPosition : offset,
|
|
103
|
-
left
|
|
90
|
+
left
|
|
104
91
|
});
|
|
105
92
|
} else {
|
|
106
93
|
setStyle({
|
|
107
94
|
top: top + height + offset,
|
|
108
|
-
left
|
|
95
|
+
left
|
|
109
96
|
});
|
|
110
97
|
}
|
|
111
98
|
}
|
|
112
99
|
}
|
|
113
100
|
}, [hidden, textShow, show]);
|
|
114
|
-
|
|
101
|
+
const clearStyles = (0, _lodash.debounce)(() => {
|
|
115
102
|
if (!(0, _common.isEveryObjectValueEmpty)(style)) {
|
|
116
103
|
setStyle({});
|
|
117
104
|
}
|
|
118
105
|
}, 100);
|
|
119
|
-
(0, _react.useEffect)(
|
|
120
|
-
|
|
106
|
+
(0, _react.useEffect)(() => {
|
|
107
|
+
const parentNode = parentRef.current;
|
|
121
108
|
if (parentNode) {
|
|
122
109
|
parentNode.addEventListener('mouseenter', handleMouseEnter);
|
|
123
110
|
parentNode.addEventListener('mouseleave', handleMouseLeave);
|
|
124
|
-
return
|
|
111
|
+
return () => {
|
|
125
112
|
parentNode.removeEventListener('mouseenter', handleMouseEnter);
|
|
126
113
|
parentNode.removeEventListener('mouseleave', handleMouseLeave);
|
|
127
114
|
};
|
|
128
115
|
}
|
|
129
116
|
}, [parentRef, handleMouseEnter, handleMouseLeave]);
|
|
130
|
-
(0, _react.useEffect)(
|
|
131
|
-
|
|
117
|
+
(0, _react.useEffect)(() => {
|
|
118
|
+
const tooltipNode = tooltipRef.current;
|
|
132
119
|
if (tooltipNode && show) {
|
|
133
120
|
tooltipNode.addEventListener('mouseleave', handleMouseLeave);
|
|
134
|
-
return
|
|
121
|
+
return () => {
|
|
135
122
|
tooltipNode.removeEventListener('mouseleave', handleMouseLeave);
|
|
136
123
|
};
|
|
137
124
|
}
|
|
138
125
|
}, [tooltipRef, handleMouseEnter, handleMouseLeave, show]);
|
|
139
|
-
(0, _react.useEffect)(
|
|
126
|
+
(0, _react.useEffect)(() => {
|
|
140
127
|
if (show) {
|
|
141
128
|
window.addEventListener('scroll', handleScroll, true);
|
|
142
129
|
}
|
|
143
|
-
return
|
|
144
|
-
return window.removeEventListener('scroll', handleScroll, true);
|
|
145
|
-
};
|
|
130
|
+
return () => window.removeEventListener('scroll', handleScroll, true);
|
|
146
131
|
}, [show]);
|
|
147
|
-
(0, _react.useEffect)(
|
|
132
|
+
(0, _react.useEffect)(() => {
|
|
148
133
|
window.addEventListener('resize', clearStyles);
|
|
149
|
-
return
|
|
134
|
+
return () => {
|
|
150
135
|
window.removeEventListener('resize', clearStyles);
|
|
151
136
|
};
|
|
152
137
|
}, [clearStyles, style]);
|
|
@@ -171,7 +156,9 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
171
156
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
172
157
|
"data-testid": id ? "".concat(id, "-tooltip") : 'tooltip',
|
|
173
158
|
ref: tooltipRef,
|
|
174
|
-
style:
|
|
159
|
+
style: {
|
|
160
|
+
...style
|
|
161
|
+
},
|
|
175
162
|
className: "tooltip",
|
|
176
163
|
children: template
|
|
177
164
|
})
|
|
@@ -192,5 +179,4 @@ Tooltip.propTypes = {
|
|
|
192
179
|
template: _propTypes.default.element.isRequired,
|
|
193
180
|
textShow: _propTypes.default.bool
|
|
194
181
|
};
|
|
195
|
-
var _default = /*#__PURE__*/_react.default.memo(Tooltip);
|
|
196
|
-
exports.default = _default;
|
|
182
|
+
var _default = exports.default = /*#__PURE__*/_react.default.memo(Tooltip);
|
|
@@ -26,9 +26,11 @@ under the Apache 2.0 license is conditioned upon your compliance with
|
|
|
26
26
|
such restriction.
|
|
27
27
|
*/
|
|
28
28
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
const ProducerTooltipTemplate = _ref => {
|
|
30
|
+
let {
|
|
31
|
+
kind,
|
|
32
|
+
owner
|
|
33
|
+
} = _ref;
|
|
32
34
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
33
35
|
className: "tooltip-container",
|
|
34
36
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
@@ -52,5 +54,4 @@ ProducerTooltipTemplate.propTypes = {
|
|
|
52
54
|
kind: _propTypes.default.string.isRequired,
|
|
53
55
|
owner: _propTypes.default.string.isRequired
|
|
54
56
|
};
|
|
55
|
-
var _default = ProducerTooltipTemplate;
|
|
56
|
-
exports.default = _default;
|
|
57
|
+
var _default = exports.default = ProducerTooltipTemplate;
|