UNPKG

choerodon-ui

Version:

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

280 lines (235 loc) 9.2 kB
"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