Tooltip.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.tooltipProps = exports.tooltipDefaultProps = exports.default = void 0;
  7. var _vue = require("vue");
  8. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  9. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  10. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  11. var _vcTooltip = _interopRequireDefault(require("../vc-tooltip"));
  12. var _classNames3 = _interopRequireDefault(require("../_util/classNames"));
  13. var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
  14. var _colors = require("../_util/colors");
  15. var _warning = _interopRequireDefault(require("../_util/warning"));
  16. var _propsUtil = require("../_util/props-util");
  17. var _vnode = require("../_util/vnode");
  18. var _abstractTooltipProps = _interopRequireDefault(require("./abstractTooltipProps"));
  19. var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));
  20. var _placements = _interopRequireDefault(require("./placements"));
  21. var _firstNotUndefined = _interopRequireDefault(require("../_util/firstNotUndefined"));
  22. var _raf = _interopRequireDefault(require("../_util/raf"));
  23. var splitObject = function splitObject(obj, keys) {
  24. var picked = {};
  25. var omitted = (0, _objectSpread2.default)({}, obj);
  26. keys.forEach(function (key) {
  27. if (obj && key in obj) {
  28. picked[key] = obj[key];
  29. delete omitted[key];
  30. }
  31. });
  32. return {
  33. picked: picked,
  34. omitted: omitted
  35. };
  36. };
  37. var PresetColorRegex = new RegExp("^(".concat(_colors.PresetColorTypes.join('|'), ")(-inverse)?$"));
  38. var tooltipProps = function tooltipProps() {
  39. return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _abstractTooltipProps.default)()), {}, {
  40. title: _vueTypes.default.any
  41. });
  42. };
  43. exports.tooltipProps = tooltipProps;
  44. var tooltipDefaultProps = function tooltipDefaultProps() {
  45. return {
  46. trigger: 'hover',
  47. transitionName: 'zoom-big-fast',
  48. align: {},
  49. placement: 'top',
  50. mouseEnterDelay: 0.1,
  51. mouseLeaveDelay: 0.1,
  52. arrowPointAtCenter: false,
  53. autoAdjustOverflow: true
  54. };
  55. };
  56. exports.tooltipDefaultProps = tooltipDefaultProps;
  57. var _default2 = (0, _vue.defineComponent)({
  58. compatConfig: {
  59. MODE: 3
  60. },
  61. name: 'ATooltip',
  62. inheritAttrs: false,
  63. props: (0, _propsUtil.initDefaultProps)(tooltipProps(), {
  64. trigger: 'hover',
  65. transitionName: 'zoom-big-fast',
  66. align: {},
  67. placement: 'top',
  68. mouseEnterDelay: 0.1,
  69. mouseLeaveDelay: 0.1,
  70. arrowPointAtCenter: false,
  71. autoAdjustOverflow: true
  72. }),
  73. slots: ['title'],
  74. // emits: ['update:visible', 'visibleChange'],
  75. setup: function setup(props, _ref) {
  76. var slots = _ref.slots,
  77. emit = _ref.emit,
  78. attrs = _ref.attrs,
  79. expose = _ref.expose;
  80. var _useConfigInject = (0, _useConfigInject2.default)('tooltip', props),
  81. prefixCls = _useConfigInject.prefixCls,
  82. getPopupContainer = _useConfigInject.getPopupContainer;
  83. var visible = (0, _vue.ref)((0, _firstNotUndefined.default)([props.visible, props.defaultVisible]));
  84. var tooltip = (0, _vue.ref)();
  85. (0, _vue.onMounted)(function () {
  86. (0, _warning.default)(props.defaultVisible === undefined, 'Tooltip', "'defaultVisible' is deprecated, please use 'v-model:visible'");
  87. });
  88. var rafId;
  89. (0, _vue.watch)(function () {
  90. return props.visible;
  91. }, function (val) {
  92. _raf.default.cancel(rafId);
  93. rafId = (0, _raf.default)(function () {
  94. visible.value = !!val;
  95. });
  96. });
  97. var isNoTitle = function isNoTitle() {
  98. var _props$title;
  99. var title = (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : slots.title;
  100. return !title && title !== 0;
  101. };
  102. var handleVisibleChange = function handleVisibleChange(val) {
  103. var noTitle = isNoTitle();
  104. if (props.visible === undefined) {
  105. visible.value = noTitle ? false : val;
  106. }
  107. if (!noTitle) {
  108. emit('update:visible', val);
  109. emit('visibleChange', val);
  110. }
  111. };
  112. var getPopupDomNode = function getPopupDomNode() {
  113. return tooltip.value.getPopupDomNode();
  114. };
  115. expose({
  116. getPopupDomNode: getPopupDomNode,
  117. visible: visible,
  118. forcePopupAlign: function forcePopupAlign() {
  119. var _tooltip$value;
  120. return (_tooltip$value = tooltip.value) === null || _tooltip$value === void 0 ? void 0 : _tooltip$value.forcePopupAlign();
  121. }
  122. });
  123. var tooltipPlacements = (0, _vue.computed)(function () {
  124. var builtinPlacements = props.builtinPlacements,
  125. arrowPointAtCenter = props.arrowPointAtCenter,
  126. autoAdjustOverflow = props.autoAdjustOverflow;
  127. return builtinPlacements || (0, _placements.default)({
  128. arrowPointAtCenter: arrowPointAtCenter,
  129. autoAdjustOverflow: autoAdjustOverflow
  130. });
  131. });
  132. var isTrueProps = function isTrueProps(val) {
  133. return val || val === '';
  134. };
  135. var getDisabledCompatibleChildren = function getDisabledCompatibleChildren(ele) {
  136. var elementType = ele.type;
  137. if ((0, _typeof2.default)(elementType) === 'object' && ele.props) {
  138. if ((elementType.__ANT_BUTTON === true || elementType === 'button') && isTrueProps(ele.props.disabled) || elementType.__ANT_SWITCH === true && (isTrueProps(ele.props.disabled) || isTrueProps(ele.props.loading))) {
  139. // Pick some layout related style properties up to span
  140. // Prevent layout bugs like https://github.com/ant-design/ant-design/issues/5254
  141. var _splitObject = splitObject((0, _propsUtil.getStyle)(ele), ['position', 'left', 'right', 'top', 'bottom', 'float', 'display', 'zIndex']),
  142. picked = _splitObject.picked,
  143. omitted = _splitObject.omitted;
  144. var spanStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)({
  145. display: 'inline-block'
  146. }, picked), {}, {
  147. cursor: 'not-allowed',
  148. lineHeight: 1,
  149. width: ele.props && ele.props.block ? '100%' : null
  150. });
  151. var buttonStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, omitted), {}, {
  152. pointerEvents: 'none'
  153. });
  154. var child = (0, _vnode.cloneElement)(ele, {
  155. style: buttonStyle
  156. }, true);
  157. return (0, _vue.createVNode)("span", {
  158. "style": spanStyle,
  159. "class": "".concat(prefixCls.value, "-disabled-compatible-wrapper")
  160. }, [child]);
  161. }
  162. }
  163. return ele;
  164. };
  165. var getOverlay = function getOverlay() {
  166. var _props$title2, _slots$title;
  167. return (_props$title2 = props.title) !== null && _props$title2 !== void 0 ? _props$title2 : (_slots$title = slots.title) === null || _slots$title === void 0 ? void 0 : _slots$title.call(slots);
  168. };
  169. var onPopupAlign = function onPopupAlign(domNode, align) {
  170. var placements = tooltipPlacements.value;
  171. // 当前返回的位置
  172. var placement = Object.keys(placements).filter(function (key) {
  173. return placements[key].points[0] === align.points[0] && placements[key].points[1] === align.points[1];
  174. })[0];
  175. if (!placement) {
  176. return;
  177. }
  178. // 根据当前坐标设置动画点
  179. var rect = domNode.getBoundingClientRect();
  180. var transformOrigin = {
  181. top: '50%',
  182. left: '50%'
  183. };
  184. if (placement.indexOf('top') >= 0 || placement.indexOf('Bottom') >= 0) {
  185. transformOrigin.top = "".concat(rect.height - align.offset[1], "px");
  186. } else if (placement.indexOf('Top') >= 0 || placement.indexOf('bottom') >= 0) {
  187. transformOrigin.top = "".concat(-align.offset[1], "px");
  188. }
  189. if (placement.indexOf('left') >= 0 || placement.indexOf('Right') >= 0) {
  190. transformOrigin.left = "".concat(rect.width - align.offset[0], "px");
  191. } else if (placement.indexOf('right') >= 0 || placement.indexOf('Left') >= 0) {
  192. transformOrigin.left = "".concat(-align.offset[0], "px");
  193. }
  194. domNode.style.transformOrigin = "".concat(transformOrigin.left, " ").concat(transformOrigin.top);
  195. };
  196. return function () {
  197. var _filterEmpty, _slots$default, _classNames;
  198. var openClassName = props.openClassName,
  199. color = props.color,
  200. overlayClassName = props.overlayClassName;
  201. var children = (_filterEmpty = (0, _propsUtil.filterEmpty)((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots))) !== null && _filterEmpty !== void 0 ? _filterEmpty : null;
  202. children = children.length === 1 ? children[0] : children;
  203. var tempVisible = visible.value;
  204. // Hide tooltip when there is no title
  205. if (props.visible === undefined && isNoTitle()) {
  206. tempVisible = false;
  207. }
  208. if (!children) {
  209. return null;
  210. }
  211. var child = getDisabledCompatibleChildren((0, _propsUtil.isValidElement)(children) ? children : (0, _vue.createVNode)("span", null, [children]));
  212. var childCls = (0, _classNames3.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, openClassName || "".concat(prefixCls.value, "-open"), true), (0, _defineProperty2.default)(_classNames, child.props && child.props.class, child.props && child.props.class), _classNames));
  213. var customOverlayClassName = (0, _classNames3.default)(overlayClassName, (0, _defineProperty2.default)({}, "".concat(prefixCls.value, "-").concat(color), color && PresetColorRegex.test(color)));
  214. var formattedOverlayInnerStyle;
  215. var arrowContentStyle;
  216. if (color && !PresetColorRegex.test(color)) {
  217. formattedOverlayInnerStyle = {
  218. backgroundColor: color
  219. };
  220. arrowContentStyle = {
  221. backgroundColor: color
  222. };
  223. }
  224. var vcTooltipProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, attrs), props), {}, {
  225. prefixCls: prefixCls.value,
  226. getPopupContainer: getPopupContainer.value,
  227. builtinPlacements: tooltipPlacements.value,
  228. visible: tempVisible,
  229. ref: tooltip,
  230. overlayClassName: customOverlayClassName,
  231. overlayInnerStyle: formattedOverlayInnerStyle,
  232. onVisibleChange: handleVisibleChange,
  233. onPopupAlign: onPopupAlign
  234. });
  235. return (0, _vue.createVNode)(_vcTooltip.default, vcTooltipProps, {
  236. default: function _default() {
  237. return [visible.value ? (0, _vnode.cloneElement)(child, {
  238. class: childCls
  239. }) : child];
  240. },
  241. arrowContent: function arrowContent() {
  242. return (0, _vue.createVNode)("span", {
  243. "class": "".concat(prefixCls.value, "-arrow-content"),
  244. "style": arrowContentStyle
  245. }, null);
  246. },
  247. overlay: getOverlay
  248. });
  249. };
  250. }
  251. });
  252. exports.default = _default2;