t.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652
  1. import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
  2. import _extends from 'babel-runtime/helpers/extends';
  3. import Vue from 'vue';
  4. import ref from 'vue-ref';
  5. import PropTypes from '../_util/vue-types';
  6. import contains from '../vc-util/Dom/contains';
  7. import { hasProp, getComponentFromProp, getEvents, filterEmpty, getListeners } from '../_util/props-util';
  8. import { requestAnimationTimeout, cancelAnimationTimeout } from '../_util/requestAnimationTimeout';
  9. import addEventListener from '../vc-util/Dom/addEventListener';
  10. import warning from '../_util/warning';
  11. import Popup from './Popup';
  12. import { getAlignFromPlacement, getAlignPopupClassName, noop } from './utils';
  13. import BaseMixin from '../_util/BaseMixin';
  14. import { cloneElement } from '../_util/vnode';
  15. import Portal from '../_util/Portal';
  16. Vue.use(ref, { name: 'ant-ref' });
  17. function returnEmptyString() {
  18. return '';
  19. }
  20. function returnDocument() {
  21. return window.document;
  22. }
  23. var ALL_HANDLERS = ['click', 'mousedown', 'touchstart', 'mouseenter', 'mouseleave', 'focus', 'blur', 'contextmenu'];
  24. export default {
  25. name: 'Trigger',
  26. mixins: [BaseMixin],
  27. props: {
  28. action: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]).def([]),
  29. showAction: PropTypes.any.def([]),
  30. hideAction: PropTypes.any.def([]),
  31. getPopupClassNameFromAlign: PropTypes.any.def(returnEmptyString),
  32. // onPopupVisibleChange: PropTypes.func.def(noop),
  33. afterPopupVisibleChange: PropTypes.func.def(noop),
  34. popup: PropTypes.any,
  35. popupStyle: PropTypes.object.def(function () {
  36. return {};
  37. }),
  38. prefixCls: PropTypes.string.def('rc-trigger-popup'),
  39. popupClassName: PropTypes.string.def(''),
  40. popupPlacement: PropTypes.string,
  41. builtinPlacements: PropTypes.object,
  42. popupTransitionName: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  43. popupAnimation: PropTypes.any,
  44. mouseEnterDelay: PropTypes.number.def(0),
  45. mouseLeaveDelay: PropTypes.number.def(0.1),
  46. zIndex: PropTypes.number,
  47. focusDelay: PropTypes.number.def(0),
  48. blurDelay: PropTypes.number.def(0.15),
  49. getPopupContainer: PropTypes.func,
  50. getDocument: PropTypes.func.def(returnDocument),
  51. forceRender: PropTypes.bool,
  52. destroyPopupOnHide: PropTypes.bool.def(false),
  53. mask: PropTypes.bool.def(false),
  54. maskClosable: PropTypes.bool.def(true),
  55. // onPopupAlign: PropTypes.func.def(noop),
  56. popupAlign: PropTypes.object.def(function () {
  57. return {};
  58. }),
  59. popupVisible: PropTypes.bool,
  60. defaultPopupVisible: PropTypes.bool.def(false),
  61. maskTransitionName: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  62. maskAnimation: PropTypes.string,
  63. stretch: PropTypes.string,
  64. alignPoint: PropTypes.bool // Maybe we can support user pass position in the future
  65. },
  66. provide: function provide() {
  67. return {
  68. vcTriggerContext: this
  69. };
  70. },
  71. inject: {
  72. vcTriggerContext: { 'default': function _default() {
  73. return {};
  74. } },
  75. savePopupRef: { 'default': function _default() {
  76. return noop;
  77. } },
  78. dialogContext: { 'default': function _default() {
  79. return null;
  80. } }
  81. },
  82. data: function data() {
  83. var _this = this;
  84. var props = this.$props;
  85. var popupVisible = void 0;
  86. if (hasProp(this, 'popupVisible')) {
  87. popupVisible = !!props.popupVisible;
  88. } else {
  89. popupVisible = !!props.defaultPopupVisible;
  90. }
  91. ALL_HANDLERS.forEach(function (h) {
  92. _this['fire' + h] = function (e) {
  93. _this.fireEvents(h, e);
  94. };
  95. });
  96. return {
  97. prevPopupVisible: popupVisible,
  98. sPopupVisible: popupVisible,
  99. point: null
  100. };
  101. },
  102. watch: {
  103. popupVisible: function popupVisible(val) {
  104. if (val !== undefined) {
  105. this.prevPopupVisible = this.sPopupVisible;
  106. this.sPopupVisible = val;
  107. }
  108. }
  109. },
  110. deactivated: function deactivated() {
  111. this.setPopupVisible(false);
  112. },
  113. mounted: function mounted() {
  114. var _this2 = this;
  115. this.$nextTick(function () {
  116. _this2.updatedCal();
  117. });
  118. },
  119. updated: function updated() {
  120. var _this3 = this;
  121. this.$nextTick(function () {
  122. _this3.updatedCal();
  123. });
  124. },
  125. beforeDestroy: function beforeDestroy() {
  126. this.clearDelayTimer();
  127. this.clearOutsideHandler();
  128. clearTimeout(this.mouseDownTimeout);
  129. },
  130. methods: {
  131. updatedCal: function updatedCal() {
  132. var props = this.$props;
  133. var state = this.$data;
  134. // We must listen to `mousedown` or `touchstart`, edge case:
  135. // https://github.com/ant-design/ant-design/issues/5804
  136. // https://github.com/react-component/calendar/issues/250
  137. // https://github.com/react-component/trigger/issues/50
  138. if (state.sPopupVisible) {
  139. var currentDocument = void 0;
  140. if (!this.clickOutsideHandler && (this.isClickToHide() || this.isContextmenuToShow())) {
  141. currentDocument = props.getDocument();
  142. this.clickOutsideHandler = addEventListener(currentDocument, 'mousedown', this.onDocumentClick);
  143. }
  144. // always hide on mobile
  145. if (!this.touchOutsideHandler) {
  146. currentDocument = currentDocument || props.getDocument();
  147. this.touchOutsideHandler = addEventListener(currentDocument, 'touchstart', this.onDocumentClick);
  148. }
  149. // close popup when trigger type contains 'onContextmenu' and document is scrolling.
  150. if (!this.contextmenuOutsideHandler1 && this.isContextmenuToShow()) {
  151. currentDocument = currentDocument || props.getDocument();
  152. this.contextmenuOutsideHandler1 = addEventListener(currentDocument, 'scroll', this.onContextmenuClose);
  153. }
  154. // close popup when trigger type contains 'onContextmenu' and window is blur.
  155. if (!this.contextmenuOutsideHandler2 && this.isContextmenuToShow()) {
  156. this.contextmenuOutsideHandler2 = addEventListener(window, 'blur', this.onContextmenuClose);
  157. }
  158. } else {
  159. this.clearOutsideHandler();
  160. }
  161. },
  162. onMouseenter: function onMouseenter(e) {
  163. var mouseEnterDelay = this.$props.mouseEnterDelay;
  164. this.fireEvents('mouseenter', e);
  165. this.delaySetPopupVisible(true, mouseEnterDelay, mouseEnterDelay ? null : e);
  166. },
  167. onMouseMove: function onMouseMove(e) {
  168. this.fireEvents('mousemove', e);
  169. this.setPoint(e);
  170. },
  171. onMouseleave: function onMouseleave(e) {
  172. this.fireEvents('mouseleave', e);
  173. this.delaySetPopupVisible(false, this.$props.mouseLeaveDelay);
  174. },
  175. onPopupMouseenter: function onPopupMouseenter() {
  176. this.clearDelayTimer();
  177. },
  178. onPopupMouseleave: function onPopupMouseleave(e) {
  179. if (e && e.relatedTarget && !e.relatedTarget.setTimeout && this._component && this._component.getPopupDomNode && contains(this._component.getPopupDomNode(), e.relatedTarget)) {
  180. return;
  181. }
  182. this.delaySetPopupVisible(false, this.$props.mouseLeaveDelay);
  183. },
  184. onFocus: function onFocus(e) {
  185. this.fireEvents('focus', e);
  186. // incase focusin and focusout
  187. this.clearDelayTimer();
  188. if (this.isFocusToShow()) {
  189. this.focusTime = Date.now();
  190. this.delaySetPopupVisible(true, this.$props.focusDelay);
  191. }
  192. },
  193. onMousedown: function onMousedown(e) {
  194. this.fireEvents('mousedown', e);
  195. this.preClickTime = Date.now();
  196. },
  197. onTouchstart: function onTouchstart(e) {
  198. this.fireEvents('touchstart', e);
  199. this.preTouchTime = Date.now();
  200. },
  201. onBlur: function onBlur(e) {
  202. if (!contains(e.target, e.relatedTarget || document.activeElement)) {
  203. this.fireEvents('blur', e);
  204. this.clearDelayTimer();
  205. if (this.isBlurToHide()) {
  206. this.delaySetPopupVisible(false, this.$props.blurDelay);
  207. }
  208. }
  209. },
  210. onContextmenu: function onContextmenu(e) {
  211. e.preventDefault();
  212. this.fireEvents('contextmenu', e);
  213. this.setPopupVisible(true, e);
  214. },
  215. onContextmenuClose: function onContextmenuClose() {
  216. if (this.isContextmenuToShow()) {
  217. this.close();
  218. }
  219. },
  220. onClick: function onClick(event) {
  221. this.fireEvents('click', event);
  222. // focus will trigger click
  223. if (this.focusTime) {
  224. var preTime = void 0;
  225. if (this.preClickTime && this.preTouchTime) {
  226. preTime = Math.min(this.preClickTime, this.preTouchTime);
  227. } else if (this.preClickTime) {
  228. preTime = this.preClickTime;
  229. } else if (this.preTouchTime) {
  230. preTime = this.preTouchTime;
  231. }
  232. if (Math.abs(preTime - this.focusTime) < 20) {
  233. return;
  234. }
  235. this.focusTime = 0;
  236. }
  237. this.preClickTime = 0;
  238. this.preTouchTime = 0;
  239. // Only prevent default when all the action is click.
  240. // https://github.com/ant-design/ant-design/issues/17043
  241. // https://github.com/ant-design/ant-design/issues/17291
  242. if (this.isClickToShow() && (this.isClickToHide() || this.isBlurToHide()) && event && event.preventDefault) {
  243. event.preventDefault();
  244. }
  245. if (event && event.domEvent) {
  246. event.domEvent.preventDefault();
  247. }
  248. var nextVisible = !this.$data.sPopupVisible;
  249. if (this.isClickToHide() && !nextVisible || nextVisible && this.isClickToShow()) {
  250. this.setPopupVisible(!this.$data.sPopupVisible, event);
  251. }
  252. },
  253. onPopupMouseDown: function onPopupMouseDown() {
  254. var _this4 = this;
  255. var _vcTriggerContext = this.vcTriggerContext,
  256. vcTriggerContext = _vcTriggerContext === undefined ? {} : _vcTriggerContext;
  257. this.hasPopupMouseDown = true;
  258. clearTimeout(this.mouseDownTimeout);
  259. this.mouseDownTimeout = setTimeout(function () {
  260. _this4.hasPopupMouseDown = false;
  261. }, 0);
  262. if (vcTriggerContext.onPopupMouseDown) {
  263. vcTriggerContext.onPopupMouseDown.apply(vcTriggerContext, arguments);
  264. }
  265. },
  266. onDocumentClick: function onDocumentClick(event) {
  267. if (this.$props.mask && !this.$props.maskClosable) {
  268. return;
  269. }
  270. var target = event.target;
  271. var root = this.$el;
  272. if (!contains(root, target) && !this.hasPopupMouseDown) {
  273. this.close();
  274. }
  275. },
  276. getPopupDomNode: function getPopupDomNode() {
  277. if (this._component && this._component.getPopupDomNode) {
  278. return this._component.getPopupDomNode();
  279. }
  280. return null;
  281. },
  282. getRootDomNode: function getRootDomNode() {
  283. return this.$el;
  284. // return this.$el.children[0] || this.$el
  285. },
  286. handleGetPopupClassFromAlign: function handleGetPopupClassFromAlign(align) {
  287. var className = [];
  288. var props = this.$props;
  289. var popupPlacement = props.popupPlacement,
  290. builtinPlacements = props.builtinPlacements,
  291. prefixCls = props.prefixCls,
  292. alignPoint = props.alignPoint,
  293. getPopupClassNameFromAlign = props.getPopupClassNameFromAlign;
  294. if (popupPlacement && builtinPlacements) {
  295. className.push(getAlignPopupClassName(builtinPlacements, prefixCls, align, alignPoint));
  296. }
  297. if (getPopupClassNameFromAlign) {
  298. className.push(getPopupClassNameFromAlign(align));
  299. }
  300. return className.join(' ');
  301. },
  302. getPopupAlign: function getPopupAlign() {
  303. var props = this.$props;
  304. var popupPlacement = props.popupPlacement,
  305. popupAlign = props.popupAlign,
  306. builtinPlacements = props.builtinPlacements;
  307. if (popupPlacement && builtinPlacements) {
  308. return getAlignFromPlacement(builtinPlacements, popupPlacement, popupAlign);
  309. }
  310. return popupAlign;
  311. },
  312. savePopup: function savePopup(node) {
  313. this._component = node;
  314. this.savePopupRef(node);
  315. },
  316. getComponent: function getComponent() {
  317. var h = this.$createElement;
  318. var self = this;
  319. var mouseProps = {};
  320. if (this.isMouseEnterToShow()) {
  321. mouseProps.mouseenter = self.onPopupMouseenter;
  322. }
  323. if (this.isMouseLeaveToHide()) {
  324. mouseProps.mouseleave = self.onPopupMouseleave;
  325. }
  326. mouseProps.mousedown = this.onPopupMouseDown;
  327. mouseProps.touchstart = this.onPopupMouseDown;
  328. var handleGetPopupClassFromAlign = self.handleGetPopupClassFromAlign,
  329. getRootDomNode = self.getRootDomNode,
  330. getContainer = self.getContainer;
  331. var _self$$props = self.$props,
  332. prefixCls = _self$$props.prefixCls,
  333. destroyPopupOnHide = _self$$props.destroyPopupOnHide,
  334. popupClassName = _self$$props.popupClassName,
  335. action = _self$$props.action,
  336. popupAnimation = _self$$props.popupAnimation,
  337. popupTransitionName = _self$$props.popupTransitionName,
  338. popupStyle = _self$$props.popupStyle,
  339. mask = _self$$props.mask,
  340. maskAnimation = _self$$props.maskAnimation,
  341. maskTransitionName = _self$$props.maskTransitionName,
  342. zIndex = _self$$props.zIndex,
  343. stretch = _self$$props.stretch,
  344. alignPoint = _self$$props.alignPoint;
  345. var _$data = this.$data,
  346. sPopupVisible = _$data.sPopupVisible,
  347. point = _$data.point;
  348. var align = this.getPopupAlign();
  349. var popupProps = {
  350. props: {
  351. prefixCls: prefixCls,
  352. destroyPopupOnHide: destroyPopupOnHide,
  353. visible: sPopupVisible,
  354. point: alignPoint && point,
  355. action: action,
  356. align: align,
  357. animation: popupAnimation,
  358. getClassNameFromAlign: handleGetPopupClassFromAlign,
  359. stretch: stretch,
  360. getRootDomNode: getRootDomNode,
  361. mask: mask,
  362. zIndex: zIndex,
  363. transitionName: popupTransitionName,
  364. maskAnimation: maskAnimation,
  365. maskTransitionName: maskTransitionName,
  366. getContainer: getContainer,
  367. popupClassName: popupClassName,
  368. popupStyle: popupStyle
  369. },
  370. on: _extends({
  371. align: getListeners(this).popupAlign || noop
  372. }, mouseProps),
  373. directives: [{
  374. name: 'ant-ref',
  375. value: this.savePopup
  376. }]
  377. };
  378. return h(
  379. Popup,
  380. popupProps,
  381. [getComponentFromProp(self, 'popup')]
  382. );
  383. },
  384. getContainer: function getContainer() {
  385. var props = this.$props,
  386. dialogContext = this.dialogContext;
  387. var popupContainer = document.createElement('div');
  388. // Make sure default popup container will never cause scrollbar appearing
  389. // https://github.com/react-component/trigger/issues/41
  390. popupContainer.style.position = 'absolute';
  391. popupContainer.style.top = '0';
  392. popupContainer.style.left = '0';
  393. popupContainer.style.width = '100%';
  394. var mountNode = props.getPopupContainer ? props.getPopupContainer(this.$el, dialogContext) : props.getDocument().body;
  395. mountNode.appendChild(popupContainer);
  396. this.popupContainer = popupContainer;
  397. return popupContainer;
  398. },
  399. setPopupVisible: function setPopupVisible(sPopupVisible, event) {
  400. var alignPoint = this.alignPoint,
  401. prevPopupVisible = this.sPopupVisible;
  402. this.clearDelayTimer();
  403. if (prevPopupVisible !== sPopupVisible) {
  404. if (!hasProp(this, 'popupVisible')) {
  405. this.setState({
  406. sPopupVisible: sPopupVisible,
  407. prevPopupVisible: prevPopupVisible
  408. });
  409. }
  410. var listeners = getListeners(this);
  411. listeners.popupVisibleChange && listeners.popupVisibleChange(sPopupVisible);
  412. }
  413. // Always record the point position since mouseEnterDelay will delay the show
  414. if (alignPoint && event) {
  415. this.setPoint(event);
  416. }
  417. },
  418. setPoint: function setPoint(point) {
  419. var alignPoint = this.$props.alignPoint;
  420. if (!alignPoint || !point) return;
  421. this.setState({
  422. point: {
  423. pageX: point.pageX,
  424. pageY: point.pageY
  425. }
  426. });
  427. },
  428. handlePortalUpdate: function handlePortalUpdate() {
  429. if (this.prevPopupVisible !== this.sPopupVisible) {
  430. this.afterPopupVisibleChange(this.sPopupVisible);
  431. }
  432. },
  433. delaySetPopupVisible: function delaySetPopupVisible(visible, delayS, event) {
  434. var _this5 = this;
  435. var delay = delayS * 1000;
  436. this.clearDelayTimer();
  437. if (delay) {
  438. var point = event ? { pageX: event.pageX, pageY: event.pageY } : null;
  439. this.delayTimer = requestAnimationTimeout(function () {
  440. _this5.setPopupVisible(visible, point);
  441. _this5.clearDelayTimer();
  442. }, delay);
  443. } else {
  444. this.setPopupVisible(visible, event);
  445. }
  446. },
  447. clearDelayTimer: function clearDelayTimer() {
  448. if (this.delayTimer) {
  449. cancelAnimationTimeout(this.delayTimer);
  450. this.delayTimer = null;
  451. }
  452. },
  453. clearOutsideHandler: function clearOutsideHandler() {
  454. if (this.clickOutsideHandler) {
  455. this.clickOutsideHandler.remove();
  456. this.clickOutsideHandler = null;
  457. }
  458. if (this.contextmenuOutsideHandler1) {
  459. this.contextmenuOutsideHandler1.remove();
  460. this.contextmenuOutsideHandler1 = null;
  461. }
  462. if (this.contextmenuOutsideHandler2) {
  463. this.contextmenuOutsideHandler2.remove();
  464. this.contextmenuOutsideHandler2 = null;
  465. }
  466. if (this.touchOutsideHandler) {
  467. this.touchOutsideHandler.remove();
  468. this.touchOutsideHandler = null;
  469. }
  470. },
  471. createTwoChains: function createTwoChains(event) {
  472. var fn = function fn() {};
  473. var events = getListeners(this);
  474. if (this.childOriginEvents[event] && events[event]) {
  475. return this['fire' + event];
  476. }
  477. fn = this.childOriginEvents[event] || events[event] || fn;
  478. return fn;
  479. },
  480. isClickToShow: function isClickToShow() {
  481. var _$props = this.$props,
  482. action = _$props.action,
  483. showAction = _$props.showAction;
  484. return action.indexOf('click') !== -1 || showAction.indexOf('click') !== -1;
  485. },
  486. isContextmenuToShow: function isContextmenuToShow() {
  487. var _$props2 = this.$props,
  488. action = _$props2.action,
  489. showAction = _$props2.showAction;
  490. return action.indexOf('contextmenu') !== -1 || showAction.indexOf('contextmenu') !== -1;
  491. },
  492. isClickToHide: function isClickToHide() {
  493. var _$props3 = this.$props,
  494. action = _$props3.action,
  495. hideAction = _$props3.hideAction;
  496. return action.indexOf('click') !== -1 || hideAction.indexOf('click') !== -1;
  497. },
  498. isMouseEnterToShow: function isMouseEnterToShow() {
  499. var _$props4 = this.$props,
  500. action = _$props4.action,
  501. showAction = _$props4.showAction;
  502. return action.indexOf('hover') !== -1 || showAction.indexOf('mouseenter') !== -1;
  503. },
  504. isMouseLeaveToHide: function isMouseLeaveToHide() {
  505. var _$props5 = this.$props,
  506. action = _$props5.action,
  507. hideAction = _$props5.hideAction;
  508. return action.indexOf('hover') !== -1 || hideAction.indexOf('mouseleave') !== -1;
  509. },
  510. isFocusToShow: function isFocusToShow() {
  511. var _$props6 = this.$props,
  512. action = _$props6.action,
  513. showAction = _$props6.showAction;
  514. return action.indexOf('focus') !== -1 || showAction.indexOf('focus') !== -1;
  515. },
  516. isBlurToHide: function isBlurToHide() {
  517. var _$props7 = this.$props,
  518. action = _$props7.action,
  519. hideAction = _$props7.hideAction;
  520. return action.indexOf('focus') !== -1 || hideAction.indexOf('blur') !== -1;
  521. },
  522. forcePopupAlign: function forcePopupAlign() {
  523. if (this.$data.sPopupVisible && this._component && this._component.$refs.alignInstance) {
  524. this._component.$refs.alignInstance.forceAlign();
  525. }
  526. },
  527. fireEvents: function fireEvents(type, e) {
  528. if (this.childOriginEvents[type]) {
  529. this.childOriginEvents[type](e);
  530. }
  531. this.__emit(type, e);
  532. },
  533. close: function close() {
  534. this.setPopupVisible(false);
  535. }
  536. },
  537. render: function render() {
  538. var _this6 = this;
  539. var h = arguments[0];
  540. var sPopupVisible = this.sPopupVisible;
  541. var children = filterEmpty(this.$slots['default']);
  542. var _$props8 = this.$props,
  543. forceRender = _$props8.forceRender,
  544. alignPoint = _$props8.alignPoint;
  545. if (children.length > 1) {
  546. warning(false, 'Trigger $slots.default.length > 1, just support only one default', true);
  547. }
  548. var child = children[0];
  549. this.childOriginEvents = getEvents(child);
  550. var newChildProps = {
  551. props: {},
  552. on: {},
  553. key: 'trigger'
  554. };
  555. if (this.isContextmenuToShow()) {
  556. newChildProps.on.contextmenu = this.onContextmenu;
  557. } else {
  558. newChildProps.on.contextmenu = this.createTwoChains('contextmenu');
  559. }
  560. if (this.isClickToHide() || this.isClickToShow()) {
  561. newChildProps.on.click = this.onClick;
  562. newChildProps.on.mousedown = this.onMousedown;
  563. newChildProps.on.touchstart = this.onTouchstart;
  564. } else {
  565. newChildProps.on.click = this.createTwoChains('click');
  566. newChildProps.on.mousedown = this.createTwoChains('mousedown');
  567. newChildProps.on.touchstart = this.createTwoChains('onTouchstart');
  568. }
  569. if (this.isMouseEnterToShow()) {
  570. newChildProps.on.mouseenter = this.onMouseenter;
  571. if (alignPoint) {
  572. newChildProps.on.mousemove = this.onMouseMove;
  573. }
  574. } else {
  575. newChildProps.on.mouseenter = this.createTwoChains('mouseenter');
  576. }
  577. if (this.isMouseLeaveToHide()) {
  578. newChildProps.on.mouseleave = this.onMouseleave;
  579. } else {
  580. newChildProps.on.mouseleave = this.createTwoChains('mouseleave');
  581. }
  582. if (this.isFocusToShow() || this.isBlurToHide()) {
  583. newChildProps.on.focus = this.onFocus;
  584. newChildProps.on.blur = this.onBlur;
  585. } else {
  586. newChildProps.on.focus = this.createTwoChains('focus');
  587. newChildProps.on.blur = function (e) {
  588. if (e && (!e.relatedTarget || !contains(e.target, e.relatedTarget))) {
  589. _this6.createTwoChains('blur')(e);
  590. }
  591. };
  592. }
  593. var trigger = cloneElement(child, newChildProps);
  594. var portal = void 0;
  595. // prevent unmounting after it's rendered
  596. if (sPopupVisible || this._component || forceRender) {
  597. portal = h(Portal, {
  598. key: 'portal',
  599. attrs: { children: this.getComponent(),
  600. getContainer: this.getContainer,
  601. didUpdate: this.handlePortalUpdate
  602. }
  603. });
  604. }
  605. return portal ? cloneElement(trigger, {
  606. children: [].concat(_toConsumableArray((trigger.componentOptions ? trigger.componentOptions.children : trigger.children) || []), [portal])
  607. }) : trigger;
  608. }
  609. };