choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
328 lines (277 loc) • 10.8 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _tslib = require("tslib");
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
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"));
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 = (0, _getPrototypeOf2["default"])(Derived),
result;
if (isNativeReflectConstruct()) {
var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return (0, _possibleConstructorReturn2["default"])(this, result);
};
}
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"])({
display: 'inline-block'
}, picked, {
cursor: 'not-allowed',
width: block ? '100%' : null
});
var buttonStyle = (0, _objectSpread2["default"])({}, ommitted, {
pointerEvents: 'none'
});
var child = _react["default"].cloneElement(element, {
style: buttonStyle,
className: null
});
return _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 _react["default"].createElement("div", null, _react["default"].createElement("div", {
className: "".concat(arrowCls, " ").concat(arrowCls, "-").concat(theme),
style: arrowStyle
}), _react["default"].createElement("div", {
className: "".concat(contentCls, " ").concat(contentCls, "-").concat(theme)
}, content));
};
var Tooltip =
/*#__PURE__*/
function (_Component) {
(0, _inherits2["default"])(Tooltip, _Component);
var _super = _createSuper(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: "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["default"].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 = (0, _objectWithoutProperties2["default"])(_this$props2, ["children", "placement", "onHiddenChange", "onHiddenBeforeChange", "trigger", "defaultHidden", "hidden", "getRootDomNode"]); // 修复特殊情况为0，以及 undefined 出现的报错情况
var child = _react.Children.count(children) ? _react.Children.map(children, function (node) {
return !(0, _isNil["default"])(node) && ((0, _react.isValidElement)(node) ? getDisabledCompatableChildren(node) : _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 ? _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: "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 || (0, _placements["default"])({
arrowPointAtCenter: arrowPointAtCenter,
verticalArrowShift: 8,
autoAdjustOverflow: autoAdjustOverflow
});
}
}], [{
key: "contextType",
get: function get() {
return _ConfigContext["default"];
}
}]);
return Tooltip;
}(_react.Component);
exports["default"] = Tooltip;
Tooltip.displayName = 'Tooltip';
Tooltip.propTypes = {
title: _propTypes["default"].any,
arrowPointAtCenter: _propTypes["default"].bool,
autoAdjustOverflow: _propTypes["default"].bool,
defaultHidden: _propTypes["default"].bool,
mouseEnterDelay: _propTypes["default"].number,
mouseLeaveDelay: _propTypes["default"].number,
placement: _propTypes["default"].oneOf(['top', 'topLeft', 'topRight', 'bottom', 'bottomLeft', 'bottomRight', 'left', 'leftTop', 'leftBottom', 'right', 'rightTop', 'rightBottom']),
trigger: _propTypes["default"].arrayOf(_propTypes["default"].oneOf([_enum.Action.click, _enum.Action.hover, _enum.Action.contextMenu, _enum.Action.focus])),
hidden: _propTypes["default"].bool,
onHiddenChange: _propTypes["default"].func,
suffixCls: _propTypes["default"].string,
transitionName: _propTypes["default"].string,
theme: _propTypes["default"].oneOf(['light', 'dark'])
};
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