choerodon-ui/pro/lib/tooltip/singleton.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.hide = hide;
exports.show = show;
exports.suffixCls = void 0;

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _reactDom = require("react-dom");

var _shared = require("choerodon-ui/shared");

var _ConfigContext = _interopRequireDefault(require("../../../lib/config-provider/ConfigContext"));

var _utils = require("../../../lib/configure/utils");

var _Popup = require("../../../lib/trigger/Popup");

var _Tooltip = _interopRequireDefault(require("./Tooltip"));

var _TaskRunner = _interopRequireDefault(require("../_util/TaskRunner"));

var suffixCls = 'singleton-tooltip';
exports.suffixCls = suffixCls;
var TooltipContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_, ref) {
  var task = (0, _react.useMemo)(function () {
    return new _TaskRunner["default"]();
  }, []);

  var _useState = (0, _react.useState)(),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      tooltipProps = _useState2[0],
      setTooltipProps = _useState2[1];

  var _useContext = (0, _react.useContext)(_ConfigContext["default"]),
      getTooltipTheme = _useContext.getTooltipTheme,
      getTooltipPlacement = _useContext.getTooltipPlacement;

  var open = (0, _react.useCallback)(function (target, args) {
    var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
    task.cancel();
    task.delay(duration, function () {
      setTooltipProps((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
        theme: getTooltipTheme(),
        placement: getTooltipPlacement()
      }, args), {}, {
        hidden: false,
        getRootDomNode: function getRootDomNode() {
          return target;
        }
      }));
    });
    return task;
  }, [task, getTooltipTheme, getTooltipPlacement]);
  var close = (0, _react.useCallback)(function () {
    var duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;
    task.cancel();
    task.delay(duration, function () {
      setTooltipProps(function (preState) {
        return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, preState), {}, {
          hidden: true
        });
      });
    });
    return task;
  }, [task]);
  var handlePopupMouseEnter = (0, _react.useCallback)(function () {
    task.cancel();
  }, [task]);
  var handlePopupMouseLeave = (0, _react.useCallback)(function () {
    close();
  }, [close]);
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      open: open,
      close: close
    };
  }, [open, close]);
  return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({}, tooltipProps, {
    onPopupMouseEnter: handlePopupMouseEnter,
    onPopupMouseLeave: handlePopupMouseLeave
  }));
});

function getRoot() {
  var root = _shared.TooltipManager.root;

  if (typeof window !== 'undefined') {
    var popupContainer = (0, _Popup.getGlobalPopupContainer)();
    var doc = window.document;

    if (root) {
      if (!root.parentNode) {
        popupContainer.appendChild(root);
      }
    } else {
      root = doc.createElement('div');
      root.className = "".concat((0, _utils.getProPrefixCls)(suffixCls), "-container");
      popupContainer.appendChild(root);
      _shared.TooltipManager.root = root;
    }
  }

  return root;
}

function getContainer() {
  return _getContainer.apply(this, arguments);
}

function _getContainer() {
  _getContainer = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
    var container;
    return _regenerator["default"].wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            container = _shared.TooltipManager.container;

            if (!container) {
              _context.next = 3;
              break;
            }

            return _context.abrupt("return", container);

          case 3:
            return _context.abrupt("return", new Promise(function (resolve) {
              var root = getRoot();

              if (root) {
                var ref = /*#__PURE__*/(0, _react.createRef)();
                _shared.TooltipManager.container = ref;
                (0, _reactDom.render)( /*#__PURE__*/_react["default"].createElement(TooltipContainer, {
                  ref: ref
                }), root, function () {
                  return resolve(ref);
                });
              }
            }));

          case 4:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  }));
  return _getContainer.apply(this, arguments);
}

function show(_x, _x2) {
  return _show.apply(this, arguments);
}

function _show() {
  _show = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(target, props) {
    var duration,
        container,
        current,
        _args2 = arguments;
    return _regenerator["default"].wrap(function _callee2$(_context2) {
      while (1) {
        switch (_context2.prev = _context2.next) {
          case 0:
            duration = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : 100;
            _context2.next = 3;
            return getContainer();

          case 3:
            container = _context2.sent;
            current = container.current;

            if (!current) {
              _context2.next = 7;
              break;
            }

            return _context2.abrupt("return", current.open(target, props, duration));

          case 7:
          case "end":
            return _context2.stop();
        }
      }
    }, _callee2);
  }));
  return _show.apply(this, arguments);
}

function hide() {
  return _hide.apply(this, arguments);
}

function _hide() {
  _hide = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
    var duration,
        container,
        current,
        _args3 = arguments;
    return _regenerator["default"].wrap(function _callee3$(_context3) {
      while (1) {
        switch (_context3.prev = _context3.next) {
          case 0:
            duration = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : 100;
            _context3.next = 3;
            return getContainer();

          case 3:
            container = _context3.sent;
            current = container.current;

            if (!current) {
              _context3.next = 7;
              break;
            }

            return _context3.abrupt("return", current.close(duration));

          case 7:
          case "end":
            return _context3.stop();
        }
      }
    }, _callee3);
  }));
  return _hide.apply(this, arguments);
}
//# sourceMappingURL=singleton.js.map