choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
267 lines (234 loc) • 8.38 kB
JavaScript
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 _createSuper from "@babel/runtime/helpers/createSuper";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
var _excluded = ["children", "placement", "onHiddenChange", "onHiddenBeforeChange", "trigger", "defaultHidden", "hidden", "getRootDomNode"];
import { __decorate } from "tslib";
import React, { Children, Component, isValidElement } from 'react';
import isNil from 'lodash/isNil';
import { toJS } from 'mobx';
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(_objectSpread({
display: 'inline-block'
}, picked), {}, {
cursor: 'not-allowed',
width: block ? '100%' : null
});
var buttonStyle = _objectSpread(_objectSpread({}, ommitted), {}, {
pointerEvents: 'none'
});
var child = /*#__PURE__*/React.cloneElement(element, {
style: buttonStyle,
className: null
});
return /*#__PURE__*/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,
popupInnerStyle = props.popupInnerStyle;
var arrowCls = "".concat(prefixCls, "-popup-arrow");
var contentCls = "".concat(prefixCls, "-popup-inner");
var arrowStyle = x || y ? {
marginLeft: -x,
marginTop: -y
} : undefined;
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
className: "".concat(arrowCls, " ").concat(arrowCls, "-").concat(theme),
style: arrowStyle
}), /*#__PURE__*/React.createElement("div", {
className: "".concat(contentCls, " ").concat(contentCls, "-").concat(theme),
style: popupInnerStyle
}, toJS(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: "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 || getPlacements({
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$props4 = this.props,
_this$props4$theme = _this$props4.theme,
theme = _this$props4$theme === void 0 ? getTooltipTheme() : _this$props4$theme,
popupInnerStyle = _this$props4.popupInnerStyle;
var content = this.getContent.apply(this, arguments);
if (content) {
return /*#__PURE__*/React.createElement(PopupContent, {
content: content,
theme: theme,
prefixCls: this.prefixCls,
translate: translate,
popupInnerStyle: popupInnerStyle
});
}
}
}, {
key: "render",
value: function render() {
var prefixCls = this.prefixCls,
_this$props5 = this.props,
children = _this$props5.children,
placement = _this$props5.placement,
onHiddenChange = _this$props5.onHiddenChange,
onHiddenBeforeChange = _this$props5.onHiddenBeforeChange,
trigger = _this$props5.trigger,
defaultHidden = _this$props5.defaultHidden,
hidden = _this$props5.hidden,
getRootDomNode = _this$props5.getRootDomNode,
restProps = _objectWithoutProperties(_this$props5, _excluded); // 修复特殊情况为0，以及 undefined 出现的报错情况
var child = Children.count(children) ? Children.map(children, function (node) {
return !isNil(node) && ( /*#__PURE__*/isValidElement(node) ? getDisabledCompatableChildren(node) : /*#__PURE__*/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 ? /*#__PURE__*/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: "contextType",
get: function get() {
return ConfigContext;
}
}]);
return Tooltip;
}(Component);
export { Tooltip as default };
Tooltip.displayName = 'Tooltip';
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