choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
280 lines (235 loc) • 9.2 kB
JavaScript
"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