shineout/es/Tooltip/Container.js

Shein 前端组件库

import _objectSpread from "@babel/runtime/helpers/objectSpread";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { PureComponent, cloneElement, isValidElement } from 'react';
import { tooltipClass } from './styles';
import { scrollConsumer } from '../Scroll/context';
import { getUidStr } from '../utils/uid';
import { getPosition as _getPosition } from '../utils/dom/popover';
var DefaultProps = {
  animation: true,
  delay: 0,
  position: 'top',
  trigger: 'hover'
};
export default function (options) {
  var show = options.show,
      hide = options.hide,
      move = options.move,
      isCurrent = options.isCurrent;

  var Container =
  /*#__PURE__*/
  function (_PureComponent) {
    _inheritsLoose(Container, _PureComponent);

    function Container(props) {
      var _this;

      _this = _PureComponent.call(this, props) || this;

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "id", void 0);

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "placeholderElement", void 0);

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "showTimer", void 0);

      _this.handleShow = _this.handleShow.bind(_assertThisInitialized(_assertThisInitialized(_this)));
      _this.handleDismiss = _this.handleDismiss.bind(_assertThisInitialized(_assertThisInitialized(_this)));
      _this.tryHide = _this.tryHide.bind(_assertThisInitialized(_assertThisInitialized(_this)));
      _this.elementRef = _this.elementRef.bind(_assertThisInitialized(_assertThisInitialized(_this)));
      _this.id = getUidStr();
      return _this;
    }

    var _proto = Container.prototype;

    _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
      if (!move || !isCurrent(this.id)) return;
      var _this$props = this.props,
          scrollLeft = _this$props.scrollLeft,
          scrollTop = _this$props.scrollTop;

      if (prevProps.scrollLeft !== scrollLeft || prevProps.scrollTop !== scrollTop) {
        var pos = this.getPosition();
        move(this.id, pos);
        this.tryHide();
      }
    };

    _proto.componentWillUnmount = function componentWillUnmount() {
      hide();
    };

    _proto.getElement = function getElement() {
      return this.placeholderElement.nextSibling;
    };

    _proto.getPosition = function getPosition() {
      var _this$props$position = this.props.position,
          position = _this$props$position === void 0 ? DefaultProps.position : _this$props$position;
      var el = this.getElement();
      return _getPosition(position, el);
    };

    _proto.elementRef = function elementRef(el) {
      this.placeholderElement = el;
    };

    _proto.tryHide = function tryHide() {
      var scrollElement = this.props.scrollElement;
      var rect = this.getElement().getBoundingClientRect();
      var scrollRect = scrollElement ? scrollElement.getBoundingClientRect() : {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
      };

      if (rect.bottom < scrollRect.top || rect.top > scrollRect.bottom || rect.right < scrollRect.left || rect.left > scrollRect.right) {
        hide();
      }
    };

    _proto.handleShow = function handleShow() {
      var _this2 = this;

      if (this.showTimer) clearTimeout(this.showTimer);
      var delay = this.props.delay;

      if (!delay) {
        this.showSync();
      } else {
        this.showTimer = setTimeout(function () {
          _this2.showSync();
        }, delay);
      }
    };

    _proto.handleDismiss = function handleDismiss() {
      clearTimeout(this.showTimer);
      hide();
    };

    _proto.showSync = function showSync() {
      var pos = this.getPosition();
      var style = Object.keys(pos).reduce(function (data, key) {
        data[key] = pos[key];
        return data;
      }, {});
      var props = Object.assign({}, this.props, {
        style: style
      });
      show(props, this.id, this.props.style);
    };

    _proto.render = function render() {
      var _this3 = this;

      var _this$props2 = this.props,
          children = _this$props2.children,
          trigger = _this$props2.trigger,
          disabledChild = _this$props2.disabledChild,
          tip = _this$props2.tip;

      if (!isValidElement(children)) {
        console.error(new Error('Tooltip children expect a single ReactElement.'));
        return null;
      }

      if (!tip) return children;
      var inner = disabledChild ? React.createElement("span", {
        className: tooltipClass('disabled-wrapper'),
        style: {
          cursor: 'not-allowed'
        }
      }, cloneElement(children, {
        style: _objectSpread({}, children.props.style, {
          pointerEvents: 'none'
        })
      })) : children;
      var props = {
        key: 'el'
      };

      if (trigger === 'hover') {
        props.onMouseEnter = this.handleShow;
        props.onMouseLeave = this.handleDismiss;
      } else {
        props.onClick = function (e) {
          if (e) e.stopPropagation();
          setTimeout(_this3.handleShow, 10);
          if (children.props.onClick) children.props.onClick();
        };
      }

      return [React.createElement("noscript", {
        ref: this.elementRef,
        key: "ns"
      }), cloneElement(inner, props)];
    };

    return Container;
  }(PureComponent);

  _defineProperty(Container, "defaultProps", DefaultProps);

  return scrollConsumer(Container);
}