shineout/css/Tooltip/events.js

Shein 前端组件库

"use strict";

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

exports.__esModule = true;
exports.hide = hide;
exports.isCurrent = exports.move = exports.show = void 0;

var _classnames = _interopRequireDefault(require("classnames"));

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

var _styles = require("./styles");

var _popContainer = _interopRequireDefault(require("../utils/dom/popContainer"));

var div = null;
var timer;
var arrow = null;
var inner = null;
var currentId;

var transStyle = function transStyle(value) {
  if (value === void 0) {
    value = '';
  }

  return typeof value === 'number' ? value + "px" : value;
};

function hide() {
  if (timer) clearTimeout(timer);

  if (div) {
    div.style.display = 'none';
    div.className = '';
  }

  currentId = undefined;
}

function clickaway() {
  hide();
  document.removeEventListener('click', clickaway);
}

var show = function show(props, id, innerStyle) {
  var position = props.position,
      _props$style = props.style,
      style = _props$style === void 0 ? {} : _props$style,
      tip = props.tip,
      trigger = props.trigger,
      animation = props.animation,
      cn = props.className;
  var container = (0, _popContainer.default)(); // create

  if (!container.contains(div)) {
    div = null;
    arrow = null;
    inner = null;
  }

  if (!div) {
    div = document.createElement('div');
    div.style.display = 'none';
    container.appendChild(div);
  }

  if (!arrow) {
    arrow = document.createElement('div');
    arrow.className = (0, _styles.tooltipClass)('arrow');
    div.appendChild(arrow);
  }

  if (!inner) {
    inner = document.createElement('div');
    inner.className = (0, _styles.tooltipClass)('inner');
    div.appendChild(inner);
  }

  currentId = id;
  div.style.cssText = 'display: none';
  Object.keys(style).forEach(function (k) {
    div.style[k] = transStyle(style[k]);
  });
  var className = (0, _styles.tooltipClass)('_', 'in', position, animation && 'animation'); // fix safari

  timer = setTimeout(function () {
    div.style.display = 'block';
    div.className = (0, _classnames.default)(className, cn);
  }, 0);

  _reactDom.default.render(tip, inner);

  inner.setAttribute('style', '');

  if (innerStyle) {
    Object.keys(innerStyle).forEach(function (k) {
      inner.style[k] = transStyle(innerStyle[k]);
    });
  }

  if (trigger === 'click') {
    document.addEventListener('click', clickaway);
  }
};

exports.show = show;

var move = function move(id, pos) {
  if (id === currentId && div) {
    // eslint-disable-next-line no-return-assign
    Object.keys(pos).map(function (key) {
      return div.style[key] = transStyle(pos[key]);
    });
  }
};

exports.move = move;

var isCurrent = function isCurrent(id) {
  return id === currentId;
};

exports.isCurrent = isCurrent;