Trigger.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
  10. var _contains = _interopRequireDefault(require("../vc-util/Dom/contains"));
  11. var _raf = _interopRequireDefault(require("../_util/raf"));
  12. var _propsUtil = require("../_util/props-util");
  13. var _requestAnimationTimeout = require("../_util/requestAnimationTimeout");
  14. var _addEventListener = _interopRequireDefault(require("../vc-util/Dom/addEventListener"));
  15. var _Popup = _interopRequireDefault(require("./Popup"));
  16. var _alignUtil = require("./utils/alignUtil");
  17. var _BaseMixin = _interopRequireDefault(require("../_util/BaseMixin"));
  18. var _Portal = _interopRequireDefault(require("../_util/Portal"));
  19. var _classNames = _interopRequireDefault(require("../_util/classNames"));
  20. var _vnode = require("../_util/vnode");
  21. var _supportsPassive = _interopRequireDefault(require("../_util/supportsPassive"));
  22. var _context = require("./context");
  23. function noop() {}
  24. function returnEmptyString() {
  25. return '';
  26. }
  27. function returnDocument(element) {
  28. if (element) {
  29. return element.ownerDocument;
  30. }
  31. return window.document;
  32. }
  33. var ALL_HANDLERS = ['onClick', 'onMousedown', 'onTouchstart', 'onMouseenter', 'onMouseleave', 'onFocus', 'onBlur', 'onContextmenu'];
  34. var _default = (0, _vue.defineComponent)({
  35. compatConfig: {
  36. MODE: 3
  37. },
  38. name: 'Trigger',
  39. mixins: [_BaseMixin.default],
  40. inheritAttrs: false,
  41. props: {
  42. action: _vueTypes.default.oneOfType([_vueTypes.default.string, _vueTypes.default.arrayOf(_vueTypes.default.string)]).def([]),
  43. showAction: _vueTypes.default.any.def([]),
  44. hideAction: _vueTypes.default.any.def([]),
  45. getPopupClassNameFromAlign: _vueTypes.default.any.def(returnEmptyString),
  46. onPopupVisibleChange: Function,
  47. afterPopupVisibleChange: _vueTypes.default.func.def(noop),
  48. popup: _vueTypes.default.any,
  49. popupStyle: {
  50. type: Object,
  51. default: undefined
  52. },
  53. prefixCls: _vueTypes.default.string.def('rc-trigger-popup'),
  54. popupClassName: _vueTypes.default.string.def(''),
  55. popupPlacement: String,
  56. builtinPlacements: _vueTypes.default.object,
  57. popupTransitionName: String,
  58. popupAnimation: _vueTypes.default.any,
  59. mouseEnterDelay: _vueTypes.default.number.def(0),
  60. mouseLeaveDelay: _vueTypes.default.number.def(0.1),
  61. zIndex: Number,
  62. focusDelay: _vueTypes.default.number.def(0),
  63. blurDelay: _vueTypes.default.number.def(0.15),
  64. getPopupContainer: Function,
  65. getDocument: _vueTypes.default.func.def(returnDocument),
  66. forceRender: {
  67. type: Boolean,
  68. default: undefined
  69. },
  70. destroyPopupOnHide: {
  71. type: Boolean,
  72. default: false
  73. },
  74. mask: {
  75. type: Boolean,
  76. default: false
  77. },
  78. maskClosable: {
  79. type: Boolean,
  80. default: true
  81. },
  82. // onPopupAlign: PropTypes.func.def(noop),
  83. popupAlign: _vueTypes.default.object.def(function () {
  84. return {};
  85. }),
  86. popupVisible: {
  87. type: Boolean,
  88. default: undefined
  89. },
  90. defaultPopupVisible: {
  91. type: Boolean,
  92. default: false
  93. },
  94. maskTransitionName: String,
  95. maskAnimation: String,
  96. stretch: String,
  97. alignPoint: {
  98. type: Boolean,
  99. default: undefined
  100. },
  101. autoDestroy: {
  102. type: Boolean,
  103. default: false
  104. },
  105. mobile: Object,
  106. getTriggerDOMNode: Function,
  107. // portal context will change
  108. tryPopPortal: Boolean // no need reactive
  109. },
  110. setup: function setup(props) {
  111. var align = (0, _vue.computed)(function () {
  112. var popupPlacement = props.popupPlacement,
  113. popupAlign = props.popupAlign,
  114. builtinPlacements = props.builtinPlacements;
  115. if (popupPlacement && builtinPlacements) {
  116. return (0, _alignUtil.getAlignFromPlacement)(builtinPlacements, popupPlacement, popupAlign);
  117. }
  118. return popupAlign;
  119. });
  120. var _useInjectTrigger = (0, _context.useInjectTrigger)(props.tryPopPortal),
  121. setPortal = _useInjectTrigger.setPortal,
  122. popPortal = _useInjectTrigger.popPortal;
  123. var popupRef = (0, _vue.ref)(null);
  124. var setPopupRef = function setPopupRef(val) {
  125. popupRef.value = val;
  126. };
  127. return {
  128. popPortal: popPortal,
  129. setPortal: setPortal,
  130. vcTriggerContext: (0, _vue.inject)('vcTriggerContext', {}),
  131. popupRef: popupRef,
  132. setPopupRef: setPopupRef,
  133. triggerRef: (0, _vue.ref)(null),
  134. align: align,
  135. focusTime: null,
  136. clickOutsideHandler: null,
  137. contextmenuOutsideHandler1: null,
  138. contextmenuOutsideHandler2: null,
  139. touchOutsideHandler: null,
  140. attachId: null,
  141. delayTimer: null,
  142. hasPopupMouseDown: false,
  143. preClickTime: null,
  144. preTouchTime: null,
  145. mouseDownTimeout: null,
  146. childOriginEvents: {}
  147. };
  148. },
  149. data: function data() {
  150. var _this = this,
  151. _this$setPortal;
  152. var props = this.$props;
  153. var popupVisible;
  154. if (this.popupVisible !== undefined) {
  155. popupVisible = !!props.popupVisible;
  156. } else {
  157. popupVisible = !!props.defaultPopupVisible;
  158. }
  159. ALL_HANDLERS.forEach(function (h) {
  160. _this["fire".concat(h)] = function (e) {
  161. _this.fireEvents(h, e);
  162. };
  163. });
  164. (_this$setPortal = this.setPortal) === null || _this$setPortal === void 0 ? void 0 : _this$setPortal.call(this, (0, _vue.createVNode)(_Portal.default, {
  165. "key": "portal",
  166. "getContainer": this.getContainer,
  167. "didUpdate": this.handlePortalUpdate
  168. }, {
  169. default: this.getComponent
  170. }));
  171. return {
  172. prevPopupVisible: popupVisible,
  173. sPopupVisible: popupVisible,
  174. point: null
  175. };
  176. },
  177. watch: {
  178. popupVisible: function popupVisible(val) {
  179. if (val !== undefined) {
  180. this.prevPopupVisible = this.sPopupVisible;
  181. this.sPopupVisible = val;
  182. }
  183. }
  184. },
  185. created: function created() {
  186. (0, _vue.provide)('vcTriggerContext', {
  187. onPopupMouseDown: this.onPopupMouseDown
  188. });
  189. (0, _context.useProvidePortal)(this);
  190. },
  191. deactivated: function deactivated() {
  192. this.setPopupVisible(false);
  193. },
  194. mounted: function mounted() {
  195. var _this2 = this;
  196. this.$nextTick(function () {
  197. _this2.updatedCal();
  198. });
  199. },
  200. updated: function updated() {
  201. var _this3 = this;
  202. this.$nextTick(function () {
  203. _this3.updatedCal();
  204. });
  205. },
  206. beforeUnmount: function beforeUnmount() {
  207. this.clearDelayTimer();
  208. this.clearOutsideHandler();
  209. clearTimeout(this.mouseDownTimeout);
  210. _raf.default.cancel(this.attachId);
  211. },
  212. methods: {
  213. updatedCal: function updatedCal() {
  214. var props = this.$props;
  215. var state = this.$data;
  216. // We must listen to `mousedown` or `touchstart`, edge case:
  217. // https://github.com/ant-design/ant-design/issues/5804
  218. // https://github.com/react-component/calendar/issues/250
  219. // https://github.com/react-component/trigger/issues/50
  220. if (state.sPopupVisible) {
  221. var currentDocument;
  222. if (!this.clickOutsideHandler && (this.isClickToHide() || this.isContextmenuToShow())) {
  223. currentDocument = props.getDocument(this.getRootDomNode());
  224. this.clickOutsideHandler = (0, _addEventListener.default)(currentDocument, 'mousedown', this.onDocumentClick);
  225. }
  226. // always hide on mobile
  227. if (!this.touchOutsideHandler) {
  228. currentDocument = currentDocument || props.getDocument(this.getRootDomNode());
  229. this.touchOutsideHandler = (0, _addEventListener.default)(currentDocument, 'touchstart', this.onDocumentClick, _supportsPassive.default ? {
  230. passive: false
  231. } : false);
  232. }
  233. // close popup when trigger type contains 'onContextmenu' and document is scrolling.
  234. if (!this.contextmenuOutsideHandler1 && this.isContextmenuToShow()) {
  235. currentDocument = currentDocument || props.getDocument(this.getRootDomNode());
  236. this.contextmenuOutsideHandler1 = (0, _addEventListener.default)(currentDocument, 'scroll', this.onContextmenuClose);
  237. }
  238. // close popup when trigger type contains 'onContextmenu' and window is blur.
  239. if (!this.contextmenuOutsideHandler2 && this.isContextmenuToShow()) {
  240. this.contextmenuOutsideHandler2 = (0, _addEventListener.default)(window, 'blur', this.onContextmenuClose);
  241. }
  242. } else {
  243. this.clearOutsideHandler();
  244. }
  245. },
  246. onMouseenter: function onMouseenter(e) {
  247. var mouseEnterDelay = this.$props.mouseEnterDelay;
  248. this.fireEvents('onMouseenter', e);
  249. this.delaySetPopupVisible(true, mouseEnterDelay, mouseEnterDelay ? null : e);
  250. },
  251. onMouseMove: function onMouseMove(e) {
  252. this.fireEvents('onMousemove', e);
  253. this.setPoint(e);
  254. },
  255. onMouseleave: function onMouseleave(e) {
  256. this.fireEvents('onMouseleave', e);
  257. this.delaySetPopupVisible(false, this.$props.mouseLeaveDelay);
  258. },
  259. onPopupMouseenter: function onPopupMouseenter() {
  260. this.clearDelayTimer();
  261. },
  262. onPopupMouseleave: function onPopupMouseleave(e) {
  263. var _this$popupRef;
  264. if (e && e.relatedTarget && !e.relatedTarget.setTimeout && (0, _contains.default)((_this$popupRef = this.popupRef) === null || _this$popupRef === void 0 ? void 0 : _this$popupRef.getElement(), e.relatedTarget)) {
  265. return;
  266. }
  267. this.delaySetPopupVisible(false, this.$props.mouseLeaveDelay);
  268. },
  269. onFocus: function onFocus(e) {
  270. this.fireEvents('onFocus', e);
  271. // incase focusin and focusout
  272. this.clearDelayTimer();
  273. if (this.isFocusToShow()) {
  274. this.focusTime = Date.now();
  275. this.delaySetPopupVisible(true, this.$props.focusDelay);
  276. }
  277. },
  278. onMousedown: function onMousedown(e) {
  279. this.fireEvents('onMousedown', e);
  280. this.preClickTime = Date.now();
  281. },
  282. onTouchstart: function onTouchstart(e) {
  283. this.fireEvents('onTouchstart', e);
  284. this.preTouchTime = Date.now();
  285. },
  286. onBlur: function onBlur(e) {
  287. if (!(0, _contains.default)(e.target, e.relatedTarget || document.activeElement)) {
  288. this.fireEvents('onBlur', e);
  289. this.clearDelayTimer();
  290. if (this.isBlurToHide()) {
  291. this.delaySetPopupVisible(false, this.$props.blurDelay);
  292. }
  293. }
  294. },
  295. onContextmenu: function onContextmenu(e) {
  296. e.preventDefault();
  297. this.fireEvents('onContextmenu', e);
  298. this.setPopupVisible(true, e);
  299. },
  300. onContextmenuClose: function onContextmenuClose() {
  301. if (this.isContextmenuToShow()) {
  302. this.close();
  303. }
  304. },
  305. onClick: function onClick(event) {
  306. this.fireEvents('onClick', event);
  307. // focus will trigger click
  308. if (this.focusTime) {
  309. var preTime;
  310. if (this.preClickTime && this.preTouchTime) {
  311. preTime = Math.min(this.preClickTime, this.preTouchTime);
  312. } else if (this.preClickTime) {
  313. preTime = this.preClickTime;
  314. } else if (this.preTouchTime) {
  315. preTime = this.preTouchTime;
  316. }
  317. if (Math.abs(preTime - this.focusTime) < 20) {
  318. return;
  319. }
  320. this.focusTime = 0;
  321. }
  322. this.preClickTime = 0;
  323. this.preTouchTime = 0;
  324. // Only prevent default when all the action is click.
  325. // https://github.com/ant-design/ant-design/issues/17043
  326. // https://github.com/ant-design/ant-design/issues/17291
  327. if (this.isClickToShow() && (this.isClickToHide() || this.isBlurToHide()) && event && event.preventDefault) {
  328. event.preventDefault();
  329. }
  330. if (event && event.domEvent) {
  331. event.domEvent.preventDefault();
  332. }
  333. var nextVisible = !this.$data.sPopupVisible;
  334. if (this.isClickToHide() && !nextVisible || nextVisible && this.isClickToShow()) {
  335. this.setPopupVisible(!this.$data.sPopupVisible, event);
  336. }
  337. },
  338. onPopupMouseDown: function onPopupMouseDown() {
  339. var _this4 = this;
  340. var _this$vcTriggerContex = this.vcTriggerContext,
  341. vcTriggerContext = _this$vcTriggerContex === void 0 ? {} : _this$vcTriggerContex;
  342. this.hasPopupMouseDown = true;
  343. clearTimeout(this.mouseDownTimeout);
  344. this.mouseDownTimeout = setTimeout(function () {
  345. _this4.hasPopupMouseDown = false;
  346. }, 0);
  347. if (vcTriggerContext.onPopupMouseDown) {
  348. vcTriggerContext.onPopupMouseDown.apply(vcTriggerContext, arguments);
  349. }
  350. },
  351. onDocumentClick: function onDocumentClick(event) {
  352. if (this.$props.mask && !this.$props.maskClosable) {
  353. return;
  354. }
  355. var target = event.target;
  356. var root = this.getRootDomNode();
  357. var popupNode = this.getPopupDomNode();
  358. if (
  359. // mousedown on the target should also close popup when action is contextMenu.
  360. // https://github.com/ant-design/ant-design/issues/29853
  361. (!(0, _contains.default)(root, target) || this.isContextMenuOnly()) && !(0, _contains.default)(popupNode, target) && !this.hasPopupMouseDown) {
  362. // https://github.com/vuejs/core/issues/4462
  363. // vue 动画bug导致 https://github.com/vueComponent/ant-design-vue/issues/5259,
  364. // 改成延时解决
  365. this.delaySetPopupVisible(false, 0.1);
  366. }
  367. },
  368. getPopupDomNode: function getPopupDomNode() {
  369. var _this$popupRef2;
  370. // for test
  371. return ((_this$popupRef2 = this.popupRef) === null || _this$popupRef2 === void 0 ? void 0 : _this$popupRef2.getElement()) || null;
  372. },
  373. getRootDomNode: function getRootDomNode() {
  374. var getTriggerDOMNode = this.$props.getTriggerDOMNode;
  375. if (getTriggerDOMNode) {
  376. var domNode = (0, _propsUtil.findDOMNode)(this.triggerRef);
  377. return (0, _propsUtil.findDOMNode)(getTriggerDOMNode(domNode));
  378. }
  379. try {
  380. var _domNode = (0, _propsUtil.findDOMNode)(this.triggerRef);
  381. if (_domNode) {
  382. return _domNode;
  383. }
  384. } catch (err) {
  385. // Do nothing
  386. }
  387. return (0, _propsUtil.findDOMNode)(this);
  388. },
  389. handleGetPopupClassFromAlign: function handleGetPopupClassFromAlign(align) {
  390. var className = [];
  391. var props = this.$props;
  392. var popupPlacement = props.popupPlacement,
  393. builtinPlacements = props.builtinPlacements,
  394. prefixCls = props.prefixCls,
  395. alignPoint = props.alignPoint,
  396. getPopupClassNameFromAlign = props.getPopupClassNameFromAlign;
  397. if (popupPlacement && builtinPlacements) {
  398. className.push((0, _alignUtil.getAlignPopupClassName)(builtinPlacements, prefixCls, align, alignPoint));
  399. }
  400. if (getPopupClassNameFromAlign) {
  401. className.push(getPopupClassNameFromAlign(align));
  402. }
  403. return className.join(' ');
  404. },
  405. getPopupAlign: function getPopupAlign() {
  406. var props = this.$props;
  407. var popupPlacement = props.popupPlacement,
  408. popupAlign = props.popupAlign,
  409. builtinPlacements = props.builtinPlacements;
  410. if (popupPlacement && builtinPlacements) {
  411. return (0, _alignUtil.getAlignFromPlacement)(builtinPlacements, popupPlacement, popupAlign);
  412. }
  413. return popupAlign;
  414. },
  415. getComponent: function getComponent() {
  416. var _this5 = this;
  417. var mouseProps = {};
  418. if (this.isMouseEnterToShow()) {
  419. mouseProps.onMouseenter = this.onPopupMouseenter;
  420. }
  421. if (this.isMouseLeaveToHide()) {
  422. mouseProps.onMouseleave = this.onPopupMouseleave;
  423. }
  424. mouseProps.onMousedown = this.onPopupMouseDown;
  425. mouseProps[_supportsPassive.default ? 'onTouchstartPassive' : 'onTouchstart'] = this.onPopupMouseDown;
  426. var handleGetPopupClassFromAlign = this.handleGetPopupClassFromAlign,
  427. getRootDomNode = this.getRootDomNode,
  428. getContainer = this.getContainer,
  429. $attrs = this.$attrs;
  430. var _this$$props = this.$props,
  431. prefixCls = _this$$props.prefixCls,
  432. destroyPopupOnHide = _this$$props.destroyPopupOnHide,
  433. popupClassName = _this$$props.popupClassName,
  434. popupAnimation = _this$$props.popupAnimation,
  435. popupTransitionName = _this$$props.popupTransitionName,
  436. popupStyle = _this$$props.popupStyle,
  437. mask = _this$$props.mask,
  438. maskAnimation = _this$$props.maskAnimation,
  439. maskTransitionName = _this$$props.maskTransitionName,
  440. zIndex = _this$$props.zIndex,
  441. stretch = _this$$props.stretch,
  442. alignPoint = _this$$props.alignPoint,
  443. mobile = _this$$props.mobile,
  444. forceRender = _this$$props.forceRender;
  445. var _this$$data = this.$data,
  446. sPopupVisible = _this$$data.sPopupVisible,
  447. point = _this$$data.point;
  448. var popupProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({
  449. prefixCls: prefixCls,
  450. destroyPopupOnHide: destroyPopupOnHide,
  451. visible: sPopupVisible,
  452. point: alignPoint ? point : null,
  453. align: this.align,
  454. animation: popupAnimation,
  455. getClassNameFromAlign: handleGetPopupClassFromAlign,
  456. stretch: stretch,
  457. getRootDomNode: getRootDomNode,
  458. mask: mask,
  459. zIndex: zIndex,
  460. transitionName: popupTransitionName,
  461. maskAnimation: maskAnimation,
  462. maskTransitionName: maskTransitionName,
  463. getContainer: getContainer,
  464. class: popupClassName,
  465. style: popupStyle,
  466. onAlign: $attrs.onPopupAlign || noop
  467. }, mouseProps), {}, {
  468. ref: this.setPopupRef,
  469. mobile: mobile,
  470. forceRender: forceRender
  471. });
  472. return (0, _vue.createVNode)(_Popup.default, popupProps, {
  473. default: this.$slots.popup || function () {
  474. return (0, _propsUtil.getComponent)(_this5, 'popup');
  475. }
  476. });
  477. },
  478. attachParent: function attachParent(popupContainer) {
  479. var _this6 = this;
  480. _raf.default.cancel(this.attachId);
  481. var _this$$props2 = this.$props,
  482. getPopupContainer = _this$$props2.getPopupContainer,
  483. getDocument = _this$$props2.getDocument;
  484. var domNode = this.getRootDomNode();
  485. var mountNode;
  486. if (!getPopupContainer) {
  487. mountNode = getDocument(this.getRootDomNode()).body;
  488. } else if (domNode || getPopupContainer.length === 0) {
  489. // Compatible for legacy getPopupContainer with domNode argument.
  490. // If no need `domNode` argument, will call directly.
  491. // https://codesandbox.io/s/eloquent-mclean-ss93m?file=/src/App.js
  492. mountNode = getPopupContainer(domNode);
  493. }
  494. if (mountNode) {
  495. mountNode.appendChild(popupContainer);
  496. } else {
  497. // Retry after frame render in case parent not ready
  498. this.attachId = (0, _raf.default)(function () {
  499. _this6.attachParent(popupContainer);
  500. });
  501. }
  502. },
  503. getContainer: function getContainer() {
  504. var props = this.$props;
  505. var getDocument = props.getDocument;
  506. var popupContainer = getDocument(this.getRootDomNode()).createElement('div');
  507. // Make sure default popup container will never cause scrollbar appearing
  508. // https://github.com/react-component/trigger/issues/41
  509. popupContainer.style.position = 'absolute';
  510. popupContainer.style.top = '0';
  511. popupContainer.style.left = '0';
  512. popupContainer.style.width = '100%';
  513. this.attachParent(popupContainer);
  514. return popupContainer;
  515. },
  516. setPopupVisible: function setPopupVisible(sPopupVisible, event) {
  517. var alignPoint = this.alignPoint,
  518. prevPopupVisible = this.sPopupVisible,
  519. onPopupVisibleChange = this.onPopupVisibleChange;
  520. this.clearDelayTimer();
  521. if (prevPopupVisible !== sPopupVisible) {
  522. if (!(0, _propsUtil.hasProp)(this, 'popupVisible')) {
  523. this.setState({
  524. sPopupVisible: sPopupVisible,
  525. prevPopupVisible: prevPopupVisible
  526. });
  527. }
  528. onPopupVisibleChange && onPopupVisibleChange(sPopupVisible);
  529. }
  530. // Always record the point position since mouseEnterDelay will delay the show
  531. if (alignPoint && event && sPopupVisible) {
  532. this.setPoint(event);
  533. }
  534. },
  535. setPoint: function setPoint(point) {
  536. var alignPoint = this.$props.alignPoint;
  537. if (!alignPoint || !point) return;
  538. this.setState({
  539. point: {
  540. pageX: point.pageX,
  541. pageY: point.pageY
  542. }
  543. });
  544. },
  545. handlePortalUpdate: function handlePortalUpdate() {
  546. if (this.prevPopupVisible !== this.sPopupVisible) {
  547. this.afterPopupVisibleChange(this.sPopupVisible);
  548. }
  549. },
  550. delaySetPopupVisible: function delaySetPopupVisible(visible, delayS, event) {
  551. var _this7 = this;
  552. var delay = delayS * 1000;
  553. this.clearDelayTimer();
  554. if (delay) {
  555. var point = event ? {
  556. pageX: event.pageX,
  557. pageY: event.pageY
  558. } : null;
  559. this.delayTimer = (0, _requestAnimationTimeout.requestAnimationTimeout)(function () {
  560. _this7.setPopupVisible(visible, point);
  561. _this7.clearDelayTimer();
  562. }, delay);
  563. } else {
  564. this.setPopupVisible(visible, event);
  565. }
  566. },
  567. clearDelayTimer: function clearDelayTimer() {
  568. if (this.delayTimer) {
  569. (0, _requestAnimationTimeout.cancelAnimationTimeout)(this.delayTimer);
  570. this.delayTimer = null;
  571. }
  572. },
  573. clearOutsideHandler: function clearOutsideHandler() {
  574. if (this.clickOutsideHandler) {
  575. this.clickOutsideHandler.remove();
  576. this.clickOutsideHandler = null;
  577. }
  578. if (this.contextmenuOutsideHandler1) {
  579. this.contextmenuOutsideHandler1.remove();
  580. this.contextmenuOutsideHandler1 = null;
  581. }
  582. if (this.contextmenuOutsideHandler2) {
  583. this.contextmenuOutsideHandler2.remove();
  584. this.contextmenuOutsideHandler2 = null;
  585. }
  586. if (this.touchOutsideHandler) {
  587. this.touchOutsideHandler.remove();
  588. this.touchOutsideHandler = null;
  589. }
  590. },
  591. createTwoChains: function createTwoChains(event) {
  592. var fn = function fn() {};
  593. var events = (0, _propsUtil.getEvents)(this);
  594. if (this.childOriginEvents[event] && events[event]) {
  595. return this["fire".concat(event)];
  596. }
  597. fn = this.childOriginEvents[event] || events[event] || fn;
  598. return fn;
  599. },
  600. isClickToShow: function isClickToShow() {
  601. var _this$$props3 = this.$props,
  602. action = _this$$props3.action,
  603. showAction = _this$$props3.showAction;
  604. return action.indexOf('click') !== -1 || showAction.indexOf('click') !== -1;
  605. },
  606. isContextMenuOnly: function isContextMenuOnly() {
  607. var action = this.$props.action;
  608. return action === 'contextmenu' || action.length === 1 && action[0] === 'contextmenu';
  609. },
  610. isContextmenuToShow: function isContextmenuToShow() {
  611. var _this$$props4 = this.$props,
  612. action = _this$$props4.action,
  613. showAction = _this$$props4.showAction;
  614. return action.indexOf('contextmenu') !== -1 || showAction.indexOf('contextmenu') !== -1;
  615. },
  616. isClickToHide: function isClickToHide() {
  617. var _this$$props5 = this.$props,
  618. action = _this$$props5.action,
  619. hideAction = _this$$props5.hideAction;
  620. return action.indexOf('click') !== -1 || hideAction.indexOf('click') !== -1;
  621. },
  622. isMouseEnterToShow: function isMouseEnterToShow() {
  623. var _this$$props6 = this.$props,
  624. action = _this$$props6.action,
  625. showAction = _this$$props6.showAction;
  626. return action.indexOf('hover') !== -1 || showAction.indexOf('mouseenter') !== -1;
  627. },
  628. isMouseLeaveToHide: function isMouseLeaveToHide() {
  629. var _this$$props7 = this.$props,
  630. action = _this$$props7.action,
  631. hideAction = _this$$props7.hideAction;
  632. return action.indexOf('hover') !== -1 || hideAction.indexOf('mouseleave') !== -1;
  633. },
  634. isFocusToShow: function isFocusToShow() {
  635. var _this$$props8 = this.$props,
  636. action = _this$$props8.action,
  637. showAction = _this$$props8.showAction;
  638. return action.indexOf('focus') !== -1 || showAction.indexOf('focus') !== -1;
  639. },
  640. isBlurToHide: function isBlurToHide() {
  641. var _this$$props9 = this.$props,
  642. action = _this$$props9.action,
  643. hideAction = _this$$props9.hideAction;
  644. return action.indexOf('focus') !== -1 || hideAction.indexOf('blur') !== -1;
  645. },
  646. forcePopupAlign: function forcePopupAlign() {
  647. if (this.$data.sPopupVisible) {
  648. var _this$popupRef3;
  649. (_this$popupRef3 = this.popupRef) === null || _this$popupRef3 === void 0 ? void 0 : _this$popupRef3.forceAlign();
  650. }
  651. },
  652. fireEvents: function fireEvents(type, e) {
  653. if (this.childOriginEvents[type]) {
  654. this.childOriginEvents[type](e);
  655. }
  656. var event = this.$props[type] || this.$attrs[type];
  657. if (event) {
  658. event(e);
  659. }
  660. },
  661. close: function close() {
  662. this.setPopupVisible(false);
  663. }
  664. },
  665. render: function render() {
  666. var _this8 = this;
  667. var $attrs = this.$attrs;
  668. var children = (0, _propsUtil.filterEmpty)((0, _propsUtil.getSlot)(this));
  669. var alignPoint = this.$props.alignPoint;
  670. var child = children[0];
  671. this.childOriginEvents = (0, _propsUtil.getEvents)(child);
  672. var newChildProps = {
  673. key: 'trigger'
  674. };
  675. if (this.isContextmenuToShow()) {
  676. newChildProps.onContextmenu = this.onContextmenu;
  677. } else {
  678. newChildProps.onContextmenu = this.createTwoChains('onContextmenu');
  679. }
  680. if (this.isClickToHide() || this.isClickToShow()) {
  681. newChildProps.onClick = this.onClick;
  682. newChildProps.onMousedown = this.onMousedown;
  683. newChildProps[_supportsPassive.default ? 'onTouchstartPassive' : 'onTouchstart'] = this.onTouchstart;
  684. } else {
  685. newChildProps.onClick = this.createTwoChains('onClick');
  686. newChildProps.onMousedown = this.createTwoChains('onMousedown');
  687. newChildProps[_supportsPassive.default ? 'onTouchstartPassive' : 'onTouchstart'] = this.createTwoChains('onTouchstart');
  688. }
  689. if (this.isMouseEnterToShow()) {
  690. newChildProps.onMouseenter = this.onMouseenter;
  691. if (alignPoint) {
  692. newChildProps.onMousemove = this.onMouseMove;
  693. }
  694. } else {
  695. newChildProps.onMouseenter = this.createTwoChains('onMouseenter');
  696. }
  697. if (this.isMouseLeaveToHide()) {
  698. newChildProps.onMouseleave = this.onMouseleave;
  699. } else {
  700. newChildProps.onMouseleave = this.createTwoChains('onMouseleave');
  701. }
  702. if (this.isFocusToShow() || this.isBlurToHide()) {
  703. newChildProps.onFocus = this.onFocus;
  704. newChildProps.onBlur = this.onBlur;
  705. } else {
  706. newChildProps.onFocus = this.createTwoChains('onFocus');
  707. newChildProps.onBlur = function (e) {
  708. if (e && (!e.relatedTarget || !(0, _contains.default)(e.target, e.relatedTarget))) {
  709. _this8.createTwoChains('onBlur')(e);
  710. }
  711. };
  712. }
  713. var childrenClassName = (0, _classNames.default)(child && child.props && child.props.class, $attrs.class);
  714. if (childrenClassName) {
  715. newChildProps.class = childrenClassName;
  716. }
  717. var trigger = (0, _vnode.cloneElement)(child, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, newChildProps), {}, {
  718. ref: 'triggerRef'
  719. }), true, true);
  720. if (this.popPortal) {
  721. return trigger;
  722. } else {
  723. var portal = (0, _vue.createVNode)(_Portal.default, {
  724. "key": "portal",
  725. "getContainer": this.getContainer,
  726. "didUpdate": this.handlePortalUpdate
  727. }, {
  728. default: this.getComponent
  729. });
  730. return (0, _vue.createVNode)(_vue.Fragment, null, [portal, trigger]);
  731. }
  732. }
  733. });
  734. exports.default = _default;