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

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

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import { __decorate } from "tslib";
import React, { Children, Component, isValidElement } from 'react';
import PropTypes from 'prop-types';
import isNil from 'lodash/isNil';
import ConfigContext from '../../../es/config-provider/ConfigContext';
import Trigger from '../../../es/trigger/Trigger';
import { Action } from '../../../es/trigger/enum';
import getPlacements from './placements';
import autobind from '../_util/autobind';

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

  var ommitted = _objectSpread({}, obj);

  keys.forEach(function (key) {
    if (obj && key in obj) {
      picked[key] = obj[key];
      delete ommitted[key];
    }
  });
  return {
    picked: picked,
    ommitted: ommitted
  };
};
/**
 * Fix the tooltip won't hide when child element is button
 * @param element ReactElement
 */


function getDisabledCompatableChildren(element) {
  var elementType = element.type;
  var props = element.props;

  if (elementType === 'button' && props.disabled) {
    var style = props.style,
        block = props.block,
        className = props.className;

    var _splitObject = splitObject(style, ['position', 'left', 'right', 'top', 'bottom', 'float', 'display', 'zIndex']),
        picked = _splitObject.picked,
        ommitted = _splitObject.ommitted;

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

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

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

  return element;
}

var PopupContent = function PopupContent(props) {
  var content = props.content,
      prefixCls = props.prefixCls,
      theme = props.theme,
      _props$translate = props.translate,
      x = _props$translate.x,
      y = _props$translate.y;
  var arrowCls = "".concat(prefixCls, "-popup-arrow");
  var contentCls = "".concat(prefixCls, "-popup-inner");
  var arrowStyle = x || y ? {
    marginLeft: -x,
    marginTop: -y
  } : undefined;
  return React.createElement("div", null, React.createElement("div", {
    className: "".concat(arrowCls, " ").concat(arrowCls, "-").concat(theme),
    style: arrowStyle
  }), React.createElement("div", {
    className: "".concat(contentCls, " ").concat(contentCls, "-").concat(theme)
  }, content));
};

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

  var _super = _createSuper(Tooltip);

  function Tooltip() {
    var _this;

    _classCallCheck(this, Tooltip);

    _this = _super.apply(this, arguments);
    _this.state = {
      translate: {
        x: 0,
        y: 0
      }
    };
    return _this;
  }

  _createClass(Tooltip, [{
    key: "getContent",
    value: function getContent() {
      var _this$props = this.props,
          title = _this$props.title,
          overlay = _this$props.overlay;

      if (typeof overlay === 'function') {
        return overlay.apply(void 0, arguments);
      }

      if (overlay) {
        return overlay;
      }

      if (typeof title === 'function') {
        return title.apply(void 0, arguments);
      }

      return title;
    }
  }, {
    key: "handlePopupAlign",
    value: function handlePopupAlign(_source, _align, _target, translate) {
      var _this$state$translate = this.state.translate,
          x = _this$state$translate.x,
          y = _this$state$translate.y;

      if (x !== translate.x || y !== translate.y) {
        this.setState({
          translate: translate
        });
      }
    }
  }, {
    key: "renderPopupContent",
    value: function renderPopupContent() {
      var translate = this.state.translate;
      var getTooltipTheme = this.context.getTooltipTheme;
      var _this$props$theme = this.props.theme,
          theme = _this$props$theme === void 0 ? getTooltipTheme() : _this$props$theme;
      var content = this.getContent.apply(this, arguments);

      if (content) {
        return React.createElement(PopupContent, {
          content: content,
          theme: theme,
          prefixCls: this.prefixCls,
          translate: translate
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var prefixCls = this.prefixCls,
          _this$props2 = this.props,
          children = _this$props2.children,
          placement = _this$props2.placement,
          onHiddenChange = _this$props2.onHiddenChange,
          onHiddenBeforeChange = _this$props2.onHiddenBeforeChange,
          trigger = _this$props2.trigger,
          defaultHidden = _this$props2.defaultHidden,
          hidden = _this$props2.hidden,
          getRootDomNode = _this$props2.getRootDomNode,
          restProps = _objectWithoutProperties(_this$props2, ["children", "placement", "onHiddenChange", "onHiddenBeforeChange", "trigger", "defaultHidden", "hidden", "getRootDomNode"]); // 修复特殊情况为0，以及 undefined 出现的报错情况


      var child = Children.count(children) ? Children.map(children, function (node) {
        return !isNil(node) && (isValidElement(node) ? getDisabledCompatableChildren(node) : React.createElement("span", {
          key: "text-".concat(node)
        }, node));
      }) : null;
      var hasHiddenProp = 'hidden' in this.props;

      if (hasHiddenProp) {
        restProps.popupHidden = hidden;
      }

      delete restProps.theme;
      return !isNil(child) || getRootDomNode && hasHiddenProp ? React.createElement(Trigger, _extends({
        prefixCls: prefixCls,
        action: trigger,
        builtinPlacements: this.placements,
        popupPlacement: placement,
        popupContent: this.renderPopupContent,
        onPopupHiddenBeforeChange: onHiddenBeforeChange,
        onPopupHiddenChange: onHiddenChange,
        onPopupAlign: this.handlePopupAlign,
        defaultPopupHidden: defaultHidden,
        getRootDomNode: getRootDomNode
      }, restProps), child) : child;
    }
  }, {
    key: "prefixCls",
    get: function get() {
      var _this$props3 = this.props,
          suffixCls = _this$props3.suffixCls,
          prefixCls = _this$props3.prefixCls;
      var context = this.context;
      return context.getProPrefixCls(suffixCls, prefixCls);
    }
  }, {
    key: "placements",
    get: function get() {
      var _this$props4 = this.props,
          builtinPlacements = _this$props4.builtinPlacements,
          arrowPointAtCenter = _this$props4.arrowPointAtCenter,
          autoAdjustOverflow = _this$props4.autoAdjustOverflow;
      return builtinPlacements || getPlacements({
        arrowPointAtCenter: arrowPointAtCenter,
        verticalArrowShift: 8,
        autoAdjustOverflow: autoAdjustOverflow
      });
    }
  }], [{
    key: "contextType",
    get: function get() {
      return ConfigContext;
    }
  }]);

  return Tooltip;
}(Component);

export { Tooltip as default };
Tooltip.displayName = 'Tooltip';
Tooltip.propTypes = {
  title: PropTypes.any,
  arrowPointAtCenter: PropTypes.bool,
  autoAdjustOverflow: PropTypes.bool,
  defaultHidden: PropTypes.bool,
  mouseEnterDelay: PropTypes.number,
  mouseLeaveDelay: PropTypes.number,
  placement: PropTypes.oneOf(['top', 'topLeft', 'topRight', 'bottom', 'bottomLeft', 'bottomRight', 'left', 'leftTop', 'leftBottom', 'right', 'rightTop', 'rightBottom']),
  trigger: PropTypes.arrayOf(PropTypes.oneOf([Action.click, Action.hover, Action.contextMenu, Action.focus])),
  hidden: PropTypes.bool,
  onHiddenChange: PropTypes.func,
  suffixCls: PropTypes.string,
  transitionName: PropTypes.string,
  theme: PropTypes.oneOf(['light', 'dark'])
};
Tooltip.defaultProps = {
  suffixCls: 'tooltip',
  placement: 'top',
  transitionName: 'zoom-big-fast',
  mouseEnterDelay: 100,
  mouseLeaveDelay: 100,
  arrowPointAtCenter: false,
  autoAdjustOverflow: true,
  defaultHidden: true,
  trigger: [Action.hover]
};

__decorate([autobind], Tooltip.prototype, "handlePopupAlign", null);

__decorate([autobind], Tooltip.prototype, "renderPopupContent", null);
//# sourceMappingURL=Tooltip.js.map