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

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

import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { createRef, forwardRef, useCallback, useContext, useImperativeHandle, useMemo, useState } from 'react';
import { render } from 'react-dom';
import defer from 'lodash/defer';
import { TooltipManager } from 'choerodon-ui/shared';
import ConfigContext from '../../../es/config-provider/ConfigContext';
import { getProPrefixCls } from '../../../es/configure/utils';
import { getGlobalPopupContainer } from '../../../es/trigger/Popup';
import Tooltip from './Tooltip';
import TaskRunner from '../_util/TaskRunner';
export var suffixCls = 'singleton-tooltip';
var TooltipContainer = /*#__PURE__*/forwardRef(function (_, ref) {
  var task = useMemo(function () {
    return new TaskRunner();
  }, []);

  var _useState = useState(),
      _useState2 = _slicedToArray(_useState, 2),
      tooltipProps = _useState2[0],
      setTooltipProps = _useState2[1];

  var _useContext = useContext(ConfigContext),
      getTooltipTheme = _useContext.getTooltipTheme,
      getTooltipPlacement = _useContext.getTooltipPlacement;

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

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

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

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

  return root;
}

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

function _getContainer() {
  _getContainer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
    var container;
    return _regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            container = 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__*/createRef();
                TooltipManager.container = ref;
                render( /*#__PURE__*/React.createElement(TooltipContainer, {
                  ref: ref
                }), root, function () {
                  return resolve(ref);
                });
              }
            }));

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

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

function _show() {
  _show = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(target, props) {
    var duration,
        container,
        current,
        _args2 = arguments;
    return _regeneratorRuntime.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);
}

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

function _hide() {
  _hide = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
    var duration,
        container,
        current,
        _args3 = arguments;
    return _regeneratorRuntime.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