@bigbinary/neetoui/dist/Tooltip.js

neetoUI drives the experience at all neeto products

import _extends from '@babel/runtime/helpers/extends';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default, { useState, useEffect } from 'react';
import Tippy from '@tippyjs/react';
import { followCursor } from 'tippy.js';

var ARROW = "<svg width='12' height='6' viewBox='0 0 10 5' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M10 5H0.926697L3.95208 1.63847C4.74227 0.760478 6.11722 0.754951 6.91445 1.62656L10 5Z' /></svg>";

var _excluded = ["content", "children", "theme", "disabled", "position", "interactive", "hideAfter", "hideOnTargetExit"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var Tooltip = function Tooltip(_ref) {
  var content = _ref.content,
    children = _ref.children,
    _ref$theme = _ref.theme,
    theme = _ref$theme === void 0 ? "dark" : _ref$theme,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    _ref$position = _ref.position,
    position = _ref$position === void 0 ? "auto" : _ref$position,
    _ref$interactive = _ref.interactive,
    interactive = _ref$interactive === void 0 ? false : _ref$interactive,
    _ref$hideAfter = _ref.hideAfter,
    hideAfter = _ref$hideAfter === void 0 ? -1 : _ref$hideAfter,
    _ref$hideOnTargetExit = _ref.hideOnTargetExit,
    hideOnTargetExit = _ref$hideOnTargetExit === void 0 ? false : _ref$hideOnTargetExit,
    otherProps = _objectWithoutProperties(_ref, _excluded);
  var _useState = useState(null),
    _useState2 = _slicedToArray(_useState, 2),
    instance = _useState2[0],
    setInstance = _useState2[1];
  var localProps = {};
  if (hideAfter > 0) {
    localProps["onShow"] = function (instance) {
      return setTimeout(function () {
        var _instance$state;
        return !((_instance$state = instance.state) !== null && _instance$state !== void 0 && _instance$state.isDestroyed) && instance.hide();
      }, hideAfter);
    };
  }
  useEffect(function () {
    if (hideOnTargetExit) {
      var intersectionObserver = new IntersectionObserver(function (entries) {
        entries.forEach(function (entry) {
          return !entry.isIntersecting && (instance === null || instance === void 0 ? void 0 : instance.hide());
        });
      });
      (instance === null || instance === void 0 ? void 0 : instance.reference) && intersectionObserver.observe(instance === null || instance === void 0 ? void 0 : instance.reference);
      return function () {
        return intersectionObserver.disconnect();
      };
    }
    return undefined;
  }, [instance, hideOnTargetExit]);
  var handleCreate = function handleCreate(instance) {
    var _instance$popper$firs;
    setInstance(instance);
    (_instance$popper$firs = instance.popper.firstElementChild) === null || _instance$popper$firs === void 0 || _instance$popper$firs.setAttribute("data-cy", "tooltip-box");
  };
  return /*#__PURE__*/React__default.createElement(Tippy, _extends({
    animation: "scale-subtle",
    arrow: ARROW,
    duration: [100, 200],
    placement: position,
    plugins: [followCursor],
    role: "tooltip",
    zIndex: 100001,
    onCreate: handleCreate
  }, _objectSpread(_objectSpread({
    content: content,
    disabled: disabled,
    interactive: interactive,
    theme: theme
  }, localProps), otherProps)), /*#__PURE__*/React__default.isValidElement(children) ? children : children && /*#__PURE__*/React__default.createElement("span", null, children));
};

export { Tooltip as default };
//# sourceMappingURL=Tooltip.js.map