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

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

"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

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

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

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

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

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

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

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

var _tslib = require("tslib");

var _react = _interopRequireWildcard(require("react"));

var _isNil = _interopRequireDefault(require("lodash/isNil"));

var _ConfigContext = _interopRequireDefault(require("../../../lib/config-provider/ConfigContext"));

var _Trigger = _interopRequireDefault(require("../../../lib/trigger/Trigger"));

var _enum = require("../../../lib/trigger/enum");

var _placements = _interopRequireDefault(require("./placements"));

var _autobind = _interopRequireDefault(require("../_util/autobind"));

var _excluded = ["children", "placement", "onHiddenChange", "onHiddenBeforeChange", "trigger", "defaultHidden", "hidden", "getRootDomNode"];

var splitObject = function splitObject(obj, keys) {
  var picked = {};
  var ommitted = (0, _objectSpread2["default"])({}, 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 = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
      display: 'inline-block'
    }, picked), {}, {
      cursor: 'not-allowed',
      width: block ? '100%' : null
    });
    var buttonStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, ommitted), {}, {
      pointerEvents: 'none'
    });

    var child = /*#__PURE__*/_react["default"].cloneElement(element, {
      style: buttonStyle,
      className: null
    });

    return /*#__PURE__*/_react["default"].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 /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(arrowCls, " ").concat(arrowCls, "-").concat(theme),
    style: arrowStyle
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(contentCls, " ").concat(contentCls, "-").concat(theme)
  }, content));
};

var Tooltip = /*#__PURE__*/function (_Component) {
  (0, _inherits2["default"])(Tooltip, _Component);

  var _super = (0, _createSuper2["default"])(Tooltip);

  function Tooltip() {
    var _this;

    (0, _classCallCheck2["default"])(this, Tooltip);
    _this = _super.apply(this, arguments);
    _this.state = {
      translate: {
        x: 0,
        y: 0
      }
    };
    return _this;
  }

  (0, _createClass2["default"])(Tooltip, [{
    key: "prefixCls",
    get: function get() {
      var _this$props = this.props,
          suffixCls = _this$props.suffixCls,
          prefixCls = _this$props.prefixCls;
      var context = this.context;
      return context.getProPrefixCls(suffixCls, prefixCls);
    }
  }, {
    key: "placements",
    get: function get() {
      var _this$props2 = this.props,
          builtinPlacements = _this$props2.builtinPlacements,
          arrowPointAtCenter = _this$props2.arrowPointAtCenter,
          autoAdjustOverflow = _this$props2.autoAdjustOverflow;
      return builtinPlacements || (0, _placements["default"])({
        arrowPointAtCenter: arrowPointAtCenter,
        verticalArrowShift: 8,
        autoAdjustOverflow: autoAdjustOverflow
      });
    }
  }, {
    key: "getContent",
    value: function getContent() {
      var _this$props3 = this.props,
          title = _this$props3.title,
          overlay = _this$props3.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 /*#__PURE__*/_react["default"].createElement(PopupContent, {
          content: content,
          theme: theme,
          prefixCls: this.prefixCls,
          translate: translate
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var prefixCls = this.prefixCls,
          _this$props4 = this.props,
          children = _this$props4.children,
          placement = _this$props4.placement,
          onHiddenChange = _this$props4.onHiddenChange,
          onHiddenBeforeChange = _this$props4.onHiddenBeforeChange,
          trigger = _this$props4.trigger,
          defaultHidden = _this$props4.defaultHidden,
          hidden = _this$props4.hidden,
          getRootDomNode = _this$props4.getRootDomNode,
          restProps = (0, _objectWithoutProperties2["default"])(_this$props4, _excluded); // 修复特殊情况为0，以及 undefined 出现的报错情况

      var child = _react.Children.count(children) ? _react.Children.map(children, function (node) {
        return !(0, _isNil["default"])(node) && ( /*#__PURE__*/(0, _react.isValidElement)(node) ? getDisabledCompatableChildren(node) : /*#__PURE__*/_react["default"].createElement("span", {
          key: "text-".concat(node)
        }, node));
      }) : null;
      var hasHiddenProp = ('hidden' in this.props);

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

      delete restProps.theme;
      return !(0, _isNil["default"])(child) || getRootDomNode && hasHiddenProp ? /*#__PURE__*/_react["default"].createElement(_Trigger["default"], (0, _extends2["default"])({
        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: "contextType",
    get: function get() {
      return _ConfigContext["default"];
    }
  }]);
  return Tooltip;
}(_react.Component);

exports["default"] = Tooltip;
Tooltip.displayName = 'Tooltip';
Tooltip.defaultProps = {
  suffixCls: 'tooltip',
  placement: 'top',
  transitionName: 'zoom-big-fast',
  mouseEnterDelay: 100,
  mouseLeaveDelay: 100,
  arrowPointAtCenter: false,
  autoAdjustOverflow: true,
  defaultHidden: true,
  trigger: [_enum.Action.hover]
};
(0, _tslib.__decorate)([_autobind["default"]], Tooltip.prototype, "handlePopupAlign", null);
(0, _tslib.__decorate)([_autobind["default"]], Tooltip.prototype, "renderPopupContent", null);
//# sourceMappingURL=Tooltip.js.map