intelicoreact 1.5.17 → 1.5.18

package/dist/Atomic/UI/Hint/Hint.js

@@ -15,8 +15,6 @@ var _utils2 = require("./partials/_utils");
 require("./Hint.scss");
 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); }
 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 && Object.prototype.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; }
-// ToDo - не понятно зачем (ф-я не используется), но не трогаю
-const time = (Date.now() * Math.random() / 1000).toString().replace(/\./g, "_");
 const Hint = _ref => {
   var _ref2, _label$replace;
   let {
@@ -32,25 +30,25 @@ const Hint = _ref => {
     id,
     children,
     icon,
+    activeHint,
+    setActiveHint,
     isAccessability = false,
     testId = "test-hint",
     isHoverableContent = false
   } = _ref;
   const hintRef = (0, _react.useRef)(null);
   const [hintId] = (0, _react.useState)((_ref2 = key !== null && key !== void 0 ? key : id) !== null && _ref2 !== void 0 ? _ref2 : Math.random().toString(16).slice(2));
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-
-  //? Определяем handleScroll-стейт, чтобы никогда не менять ссылку тем самым гарантировать корректную работу removeEventListener.
-  //? Инициализируем стейт вызовом конструктора HandleScrollObj, передаем setIsOpen для записи в объект.
-  const [handleScroll] = (0, _react.useState)(new _utils2.HandleScrollObj(setIsOpen));
-  //? По аналогии определяем handleClickOutside
-  const [handleClickOutside] = (0, _react.useState)(new _utils2.HandleClickOutsideObj(hintId, setIsOpen));
+  const isOpen = activeHint === id;
+  const [handleScroll] = (0, _react.useState)(new _utils2.HandleScrollObj(setActiveHint));
+  const [handleClickOutside] = (0, _react.useState)(new _utils2.HandleClickOutsideObj(hintId, setActiveHint));
+  const [hoverTimeout, setHoverTimeout] = (0, _react.useState)(null);
+  const [closeTimeout, setCloseTimeout] = (0, _react.useState)(null);
   const isCallbackExist = typeof onClickCallback === "function";
   const getHintMarkUp = className => {
     return /*#__PURE__*/_react.default.createElement("div", {
       "data-testid": "test-hint-text",
       className: (0, _classnames.default)("hint__text", "hint__text_".concat(side), "hint--".concat(className, "__text")),
-      onMouseLeave: () => isHoverableContent && handleOpenType === "hover" && setIsOpen(false)
+      onMouseLeave: () => isHoverableContent && handleOpenType === "hover" && startCloseTimeout()
     }, hint, children);
   };
   const setHintContainerStyles = () => {
@@ -117,13 +115,47 @@ const Hint = _ref => {
     if (!hc) return null;
     return /*#__PURE__*/(0, _reactDom.createPortal)(getHintMarkUp(className), hc);
   };
+  const startCloseTimeout = () => {
+    const timeout = setTimeout(() => {
+      if (activeHint === id) setActiveHint(null);
+    }, 1000);
+    setCloseTimeout(timeout);
+  };
+  const stopCloseTimeout = () => {
+    if (closeTimeout) {
+      clearTimeout(closeTimeout);
+      setCloseTimeout(null);
+    }
+  };
+  const handle = {
+    onMouseEnterHintIcon: () => {
+      stopCloseTimeout();
+      if (handleOpenType === "hover") {
+        const timeout = setTimeout(() => {
+          setActiveHint(id);
+          !isOpen && onClickCallback();
+        }, 350);
+        setHoverTimeout(timeout);
+      }
+    },
+    onMouseLeaveHintIcon: () => {
+      if (!isHoverableContent && handleOpenType === "hover") {
+        clearTimeout(hoverTimeout);
+        setHoverTimeout(null);
+        startCloseTimeout();
+      }
+    },
+    onClickHintIcon: () => {
+      if (handleOpenType === "click") {
+        isCallbackExist ? onClickCallback() : setActiveHint(id);
+      }
+    }
+  };
   (0, _react.useEffect)(() => {
     (0, _utils2.initHintContainer)(hintId, hintContainer);
   }, []);
   (0, _react.useEffect)(() => {
     setHintContainerStyles();
-
-    //! Обеспечиваем работу колбэка ТОЛЬКО для открытых тултипов
     if (isOpen) {
       document.addEventListener("scroll", handleScroll, true);
       document.addEventListener("click", handleClickOutside, true);
@@ -132,6 +164,9 @@ const Hint = _ref => {
       document.removeEventListener("click", handleClickOutside, true);
     }
   }, [isOpen]);
+  (0, _react.useEffect)(() => {
+    stopCloseTimeout(null);
+  }, [activeHint]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("hint", className),
     ref: hintRef
@@ -139,9 +174,9 @@ const Hint = _ref => {
     tabIndex: isAccessability ? 0 : -1,
     "data-testid": typeof label === "string" && label.length ? (_label$replace = label.replace) === null || _label$replace === void 0 ? void 0 : _label$replace.call(label, /\s/g, "-") : testId,
     "aria-label": isAccessability && label || "",
-    onClick: () => handleOpenType === "click" && (isCallbackExist ? onClickCallback() : setIsOpen(!isOpen)),
-    onMouseEnter: () => handleOpenType === "hover" && setIsOpen(true),
-    onMouseLeave: () => !isHoverableContent && handleOpenType === "hover" && setIsOpen(false),
+    onClick: handle.onClickHintIcon,
+    onMouseEnter: handle.onMouseEnterHintIcon,
+    onMouseLeave: handle.onMouseLeaveHintIcon,
     className: (0, _classnames.default)("hint__button", {
       hint__button_active: isOpen
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "1.5.17",
+  "version": "1.5.18",
   "description": "",
   "main": "dist/index.js",
   "files": [