Trigger.js 22 KB

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