choerodon-ui/es/tooltip/index.js

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

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import React, { cloneElement, Component, isValidElement } from 'react';
import classNames from 'classnames';
import _getPlacements from './placements';
import RcTooltip from '../rc-components/tooltip';
import ConfigContext from '../config-provider/ConfigContext';

var splitObject = function splitObject(obj, keys) {
  var picked = {};

  var omitted = _objectSpread({}, obj);

  keys.forEach(function (key) {
    if (obj && key in obj) {
      picked[key] = obj[key];
      delete omitted[key];
    }
  });
  return {
    picked: picked,
    omitted: omitted
  };
};

var Tooltip = /*#__PURE__*/function (_Component) {
  _inherits(Tooltip, _Component);

  var _super = _createSuper(Tooltip);

  function Tooltip(props) {
    var _this;

    _classCallCheck(this, Tooltip);

    _this = _super.call(this, props);

    _this.onVisibleChange = function (visible) {
      var onVisibleChange = _this.props.onVisibleChange;

      if (!('visible' in _this.props)) {
        _this.setState({
          visible: _this.isNoTitle() ? false : visible
        });
      }

      if (onVisibleChange && !_this.isNoTitle()) {
        onVisibleChange(visible);
      }
    }; // 动态设置动画点


    _this.onPopupAlign = function (domNode, align) {
      var placements = _this.getPlacements(); // 当前返回的位置


      var placement = Object.keys(placements).filter(function (key) {
        return placements[key].points[0] === align.points[0] && placements[key].points[1] === align.points[1];
      })[0];

      if (!placement) {
        return;
      } // 根据当前坐标设置动画点


      var rect = domNode.getBoundingClientRect();
      var transformOrigin = {
        top: '50%',
        left: '50%'
      };

      if (placement.indexOf('top') >= 0 || placement.indexOf('Bottom') >= 0) {
        transformOrigin.top = "".concat(rect.height - align.offset[1], "px");
      } else if (placement.indexOf('Top') >= 0 || placement.indexOf('bottom') >= 0) {
        transformOrigin.top = "".concat(-align.offset[1], "px");
      }

      if (placement.indexOf('left') >= 0 || placement.indexOf('Right') >= 0) {
        transformOrigin.left = "".concat(rect.width - align.offset[0], "px");
      } else if (placement.indexOf('right') >= 0 || placement.indexOf('Left') >= 0) {
        transformOrigin.left = "".concat(-align.offset[0], "px");
      }

      domNode.style.transformOrigin = "".concat(transformOrigin.left, " ").concat(transformOrigin.top);
    };

    _this.saveTooltip = function (node) {
      _this.tooltip = node;
    };

    _this.state = {
      visible: !!props.visible || !!props.defaultVisible
    };
    return _this;
  }

  _createClass(Tooltip, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if ('visible' in nextProps) {
        this.setState({
          visible: nextProps.visible
        });
      }
    }
  }, {
    key: "getPopupDomNode",
    value: function getPopupDomNode() {
      var tooltip = this.tooltip;

      if (tooltip) {
        return tooltip.getPopupDomNode();
      }
    }
  }, {
    key: "getPlacements",
    value: function getPlacements() {
      var _this$props = this.props,
          builtinPlacements = _this$props.builtinPlacements,
          arrowPointAtCenter = _this$props.arrowPointAtCenter,
          autoAdjustOverflow = _this$props.autoAdjustOverflow;
      return builtinPlacements || _getPlacements({
        arrowPointAtCenter: arrowPointAtCenter,
        verticalArrowShift: 8,
        autoAdjustOverflow: autoAdjustOverflow
      });
    }
  }, {
    key: "isHoverTrigger",
    value: function isHoverTrigger() {
      var trigger = this.props.trigger;

      if (!trigger || trigger === 'hover') {
        return true;
      }

      if (Array.isArray(trigger)) {
        return trigger.indexOf('hover') >= 0;
      }

      return false;
    } // Fix Tooltip won't hide at disabled button
    // mouse events don't trigger at disabled button in Chrome
    // https://github.com/react-component/tooltip/issues/18

  }, {
    key: "getDisabledCompatibleChildren",
    value: function getDisabledCompatibleChildren(element) {
      var elementType = element.type;

      if ((elementType.__PRO_SWITCH || elementType.__PRO_CHECKBOX || elementType.__PRO_RADIO || elementType === 'button') && element.props.disabled && this.isHoverTrigger()) {
        // Pick some layout related style properties up to span
        var _splitObject = splitObject(element.props.style, ['position', 'left', 'right', 'top', 'bottom', 'float', 'display', 'zIndex']),
            picked = _splitObject.picked,
            omitted = _splitObject.omitted;

        var spanStyle = _objectSpread(_objectSpread({
          display: 'inline-block'
        }, picked), {}, {
          cursor: 'not-allowed'
        });

        var buttonStyle = _objectSpread(_objectSpread({}, omitted), {}, {
          pointerEvents: 'none'
        });

        var child = /*#__PURE__*/cloneElement(element, {
          style: buttonStyle,
          className: null
        });
        return /*#__PURE__*/React.createElement("span", {
          style: spanStyle,
          className: element.props.className
        }, child);
      }

      return element;
    }
  }, {
    key: "isNoTitle",
    value: function isNoTitle() {
      var _this$props2 = this.props,
          title = _this$props2.title,
          overlay = _this$props2.overlay;
      return !title && !overlay; // overlay for old version compatibility
    }
  }, {
    key: "render",
    value: function render() {
      var props = this.props,
          state = this.state;
      var _this$context = this.context,
          getTooltipTheme = _this$context.getTooltipTheme,
          getTooltipPlacement = _this$context.getTooltipPlacement,
          getPrefixCls = _this$context.getPrefixCls;
      var customizePrefixCls = props.prefixCls,
          title = props.title,
          overlay = props.overlay,
          openClassName = props.openClassName,
          getPopupContainer = props.getPopupContainer,
          getTooltipContainer = props.getTooltipContainer,
          _props$theme = props.theme,
          theme = _props$theme === void 0 ? getTooltipTheme() : _props$theme,
          _props$placement = props.placement,
          placement = _props$placement === void 0 ? getTooltipPlacement() : _props$placement;
      var prefixCls = getPrefixCls('tooltip', customizePrefixCls);
      var children = props.children;
      var visible = state.visible; // Hide tooltip when there is no title

      if (!('visible' in props) && this.isNoTitle()) {
        visible = false;
      }

      var child = /*#__PURE__*/isValidElement(children) ? this.getDisabledCompatibleChildren(children) : /*#__PURE__*/React.createElement("span", null, children);
      var childProps = child.props;
      var childCls = classNames(childProps.className, _defineProperty({}, openClassName || "".concat(prefixCls, "-open"), true));
      return /*#__PURE__*/React.createElement(RcTooltip, _extends({}, this.props, {
        prefixCls: prefixCls,
        getTooltipContainer: getPopupContainer || getTooltipContainer,
        ref: this.saveTooltip,
        builtinPlacements: this.getPlacements(),
        overlay: overlay || title || '',
        visible: visible,
        onVisibleChange: this.onVisibleChange,
        onPopupAlign: this.onPopupAlign,
        theme: theme,
        placement: placement
      }), visible ? /*#__PURE__*/cloneElement(child, {
        className: childCls
      }) : child);
    }
  }], [{
    key: "contextType",
    get: function get() {
      return ConfigContext;
    }
  }]);

  return Tooltip;
}(Component);

export { Tooltip as default };
Tooltip.displayName = 'Tooltip';
Tooltip.defaultProps = {
  placement: 'top',
  transitionName: 'zoom-big-fast',
  mouseEnterDelay: 0.1,
  mouseLeaveDelay: 0.1,
  arrowPointAtCenter: false,
  autoAdjustOverflow: true
};
//# sourceMappingURL=index.js.map