choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
274 lines (226 loc) • 9.34 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _placements = _interopRequireDefault(require("./placements"));
var _tooltip = _interopRequireDefault(require("../rc-components/tooltip"));
var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
var splitObject = function splitObject(obj, keys) {
var picked = {};
var omitted = (0, _objectSpread2["default"])({}, obj);
keys.forEach(function (key) {
if (obj && key in obj) {
picked[key] = obj[key];
delete omitted[key];
}
});
return {
picked: picked,
omitted: omitted
};
};
var Tooltip = /*#__PURE__*/function (_Component) {
(0, _inherits2["default"])(Tooltip, _Component);
var _super = (0, _createSuper2["default"])(Tooltip);
function Tooltip(props) {
var _this;
(0, _classCallCheck2["default"])(this, Tooltip);
_this = _super.call(this, props);
_this.onVisibleChange = function (visible) {
var onVisibleChange = _this.props.onVisibleChange;
if (!('visible' in _this.props)) {
_this.setState({
visible: _this.isNoTitle() ? false : visible
});
}
if (onVisibleChange && !_this.isNoTitle()) {
onVisibleChange(visible);
}
}; // 动态设置动画点
_this.onPopupAlign = function (domNode, align) {
var placements = _this.getPlacements(); // 当前返回的位置
var placement = Object.keys(placements).filter(function (key) {
return placements[key].points[0] === align.points[0] && placements[key].points[1] === align.points[1];
})[0];
if (!placement) {
return;
} // 根据当前坐标设置动画点
var rect = domNode.getBoundingClientRect();
var transformOrigin = {
top: '50%',
left: '50%'
};
if (placement.indexOf('top') >= 0 || placement.indexOf('Bottom') >= 0) {
transformOrigin.top = "".concat(rect.height - align.offset[1], "px");
} else if (placement.indexOf('Top') >= 0 || placement.indexOf('bottom') >= 0) {
transformOrigin.top = "".concat(-align.offset[1], "px");
}
if (placement.indexOf('left') >= 0 || placement.indexOf('Right') >= 0) {
transformOrigin.left = "".concat(rect.width - align.offset[0], "px");
} else if (placement.indexOf('right') >= 0 || placement.indexOf('Left') >= 0) {
transformOrigin.left = "".concat(-align.offset[0], "px");
}
domNode.style.transformOrigin = "".concat(transformOrigin.left, " ").concat(transformOrigin.top);
};
_this.saveTooltip = function (node) {
_this.tooltip = node;
};
_this.state = {
visible: !!props.visible || !!props.defaultVisible
};
return _this;
}
(0, _createClass2["default"])(Tooltip, [{
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
if ('visible' in nextProps) {
this.setState({
visible: nextProps.visible
});
}
}
}, {
key: "getPopupDomNode",
value: function getPopupDomNode() {
var tooltip = this.tooltip;
if (tooltip) {
return tooltip.getPopupDomNode();
}
}
}, {
key: "getPlacements",
value: function getPlacements() {
var _this$props = this.props,
builtinPlacements = _this$props.builtinPlacements,
arrowPointAtCenter = _this$props.arrowPointAtCenter,
autoAdjustOverflow = _this$props.autoAdjustOverflow;
return builtinPlacements || (0, _placements["default"])({
arrowPointAtCenter: arrowPointAtCenter,
verticalArrowShift: 8,
autoAdjustOverflow: autoAdjustOverflow
});
}
}, {
key: "isHoverTrigger",
value: function isHoverTrigger() {
var trigger = this.props.trigger;
if (!trigger || trigger === 'hover') {
return true;
}
if (Array.isArray(trigger)) {
return trigger.indexOf('hover') >= 0;
}
return false;
} // Fix Tooltip won't hide at disabled button
// mouse events don't trigger at disabled button in Chrome
// https://github.com/react-component/tooltip/issues/18
}, {
key: "getDisabledCompatibleChildren",
value: function getDisabledCompatibleChildren(element) {
var elementType = element.type;
if ((elementType.__PRO_SWITCH || elementType.__PRO_CHECKBOX || elementType.__PRO_RADIO || elementType === 'button') && element.props.disabled && this.isHoverTrigger()) {
// Pick some layout related style properties up to span
var _splitObject = splitObject(element.props.style, ['position', 'left', 'right', 'top', 'bottom', 'float', 'display', 'zIndex']),
picked = _splitObject.picked,
omitted = _splitObject.omitted;
var spanStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
display: 'inline-block'
}, picked), {}, {
cursor: 'not-allowed'
});
var buttonStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, omitted), {}, {
pointerEvents: 'none'
});
var child = /*#__PURE__*/(0, _react.cloneElement)(element, {
style: buttonStyle,
className: null
});
return /*#__PURE__*/_react["default"].createElement("span", {
style: spanStyle,
className: element.props.className
}, child);
}
return element;
}
}, {
key: "isNoTitle",
value: function isNoTitle() {
var _this$props2 = this.props,
title = _this$props2.title,
overlay = _this$props2.overlay;
return !title && !overlay; // overlay for old version compatibility
}
}, {
key: "render",
value: function render() {
var props = this.props,
state = this.state;
var _this$context = this.context,
getTooltipTheme = _this$context.getTooltipTheme,
getTooltipPlacement = _this$context.getTooltipPlacement,
getPrefixCls = _this$context.getPrefixCls;
var customizePrefixCls = props.prefixCls,
title = props.title,
overlay = props.overlay,
openClassName = props.openClassName,
getPopupContainer = props.getPopupContainer,
getTooltipContainer = props.getTooltipContainer,
_props$theme = props.theme,
theme = _props$theme === void 0 ? getTooltipTheme() : _props$theme,
_props$placement = props.placement,
placement = _props$placement === void 0 ? getTooltipPlacement() : _props$placement;
var prefixCls = getPrefixCls('tooltip', customizePrefixCls);
var children = props.children;
var visible = state.visible; // Hide tooltip when there is no title
if (!('visible' in props) && this.isNoTitle()) {
visible = false;
}
var child = /*#__PURE__*/(0, _react.isValidElement)(children) ? this.getDisabledCompatibleChildren(children) : /*#__PURE__*/_react["default"].createElement("span", null, children);
var childProps = child.props;
var childCls = (0, _classnames["default"])(childProps.className, (0, _defineProperty2["default"])({}, openClassName || "".concat(prefixCls, "-open"), true));
return /*#__PURE__*/_react["default"].createElement(_tooltip["default"], (0, _extends2["default"])({}, this.props, {
prefixCls: prefixCls,
getTooltipContainer: getPopupContainer || getTooltipContainer,
ref: this.saveTooltip,
builtinPlacements: this.getPlacements(),
overlay: overlay || title || '',
visible: visible,
onVisibleChange: this.onVisibleChange,
onPopupAlign: this.onPopupAlign,
theme: theme,
placement: placement
}), visible ? /*#__PURE__*/(0, _react.cloneElement)(child, {
className: childCls
}) : child);
}
}], [{
key: "contextType",
get: function get() {
return _ConfigContext["default"];
}
}]);
return Tooltip;
}(_react.Component);
exports["default"] = Tooltip;
Tooltip.displayName = 'Tooltip';
Tooltip.defaultProps = {
placement: 'top',
transitionName: 'zoom-big-fast',
mouseEnterDelay: 0.1,
mouseLeaveDelay: 0.1,
arrowPointAtCenter: false,
autoAdjustOverflow: true
};
//# sourceMappingURL=index.js.map