87a0e1d6d5280fc48a3883c782a409edb407f836cd3f66a4fd8c7c8a1ff1c038d17be52c459e441e0c85d92da7f35b1a64d606f8a06fff57ac21e252e8c17c 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var lodashUnified = require('lodash-unified');
  5. var util = require('../util.js');
  6. var tokens = require('../tokens.js');
  7. var style = require('../../../../utils/dom/style.js');
  8. function isGreaterThan(a, b, epsilon = 0.03) {
  9. return a - b > epsilon;
  10. }
  11. function useEvents(props) {
  12. const parent = vue.inject(tokens.TABLE_INJECTION_KEY);
  13. const tooltipContent = vue.ref("");
  14. const tooltipTrigger = vue.ref(vue.h("div"));
  15. const handleEvent = (event, row, name) => {
  16. var _a, _b, _c;
  17. const table = parent;
  18. const cell = util.getCell(event);
  19. let column = null;
  20. const namespace = (_a = table == null ? void 0 : table.vnode.el) == null ? void 0 : _a.dataset.prefix;
  21. if (cell) {
  22. column = util.getColumnByCell({
  23. columns: (_c = (_b = props.store) == null ? void 0 : _b.states.columns.value) != null ? _c : []
  24. }, cell, namespace);
  25. if (column) {
  26. table == null ? void 0 : table.emit(`cell-${name}`, row, column, cell, event);
  27. }
  28. }
  29. table == null ? void 0 : table.emit(`row-${name}`, row, column, event);
  30. };
  31. const handleDoubleClick = (event, row) => {
  32. handleEvent(event, row, "dblclick");
  33. };
  34. const handleClick = (event, row) => {
  35. var _a;
  36. (_a = props.store) == null ? void 0 : _a.commit("setCurrentRow", row);
  37. handleEvent(event, row, "click");
  38. };
  39. const handleContextMenu = (event, row) => {
  40. handleEvent(event, row, "contextmenu");
  41. };
  42. const handleMouseEnter = lodashUnified.debounce((index) => {
  43. var _a;
  44. (_a = props.store) == null ? void 0 : _a.commit("setHoverRow", index);
  45. }, 30);
  46. const handleMouseLeave = lodashUnified.debounce(() => {
  47. var _a;
  48. (_a = props.store) == null ? void 0 : _a.commit("setHoverRow", null);
  49. }, 30);
  50. const getPadding = (el) => {
  51. const style = window.getComputedStyle(el, null);
  52. const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0;
  53. const paddingRight = Number.parseInt(style.paddingRight, 10) || 0;
  54. const paddingTop = Number.parseInt(style.paddingTop, 10) || 0;
  55. const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0;
  56. return {
  57. left: paddingLeft,
  58. right: paddingRight,
  59. top: paddingTop,
  60. bottom: paddingBottom
  61. };
  62. };
  63. const toggleRowClassByCell = (rowSpan, event, toggle) => {
  64. var _a;
  65. let node = (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.parentNode;
  66. while (rowSpan > 1) {
  67. node = node == null ? void 0 : node.nextSibling;
  68. if (!node || node.nodeName !== "TR")
  69. break;
  70. toggle(node, "hover-row hover-fixed-row");
  71. rowSpan--;
  72. }
  73. };
  74. const handleCellMouseEnter = (event, row, tooltipOptions) => {
  75. var _a, _b, _c, _d, _e, _f, _g, _h;
  76. if (!parent)
  77. return;
  78. const table = parent;
  79. const cell = util.getCell(event);
  80. const namespace = (_a = table == null ? void 0 : table.vnode.el) == null ? void 0 : _a.dataset.prefix;
  81. let column = null;
  82. if (cell) {
  83. column = util.getColumnByCell({
  84. columns: (_c = (_b = props.store) == null ? void 0 : _b.states.columns.value) != null ? _c : []
  85. }, cell, namespace);
  86. if (!column) {
  87. return;
  88. }
  89. if (cell.rowSpan > 1) {
  90. toggleRowClassByCell(cell.rowSpan, event, style.addClass);
  91. }
  92. const hoverState = table.hoverState = {
  93. cell,
  94. column,
  95. row
  96. };
  97. table == null ? void 0 : table.emit("cell-mouse-enter", hoverState.row, hoverState.column, hoverState.cell, event);
  98. }
  99. if (!tooltipOptions) {
  100. if (((_d = util.removePopper) == null ? void 0 : _d.trigger) === cell) {
  101. (_e = util.removePopper) == null ? void 0 : _e();
  102. }
  103. return;
  104. }
  105. const cellChild = event.target.querySelector(".cell");
  106. if (!(style.hasClass(cellChild, `${namespace}-tooltip`) && cellChild.childNodes.length)) {
  107. return;
  108. }
  109. const range = document.createRange();
  110. range.setStart(cellChild, 0);
  111. range.setEnd(cellChild, cellChild.childNodes.length);
  112. const { width: rangeWidth, height: rangeHeight } = range.getBoundingClientRect();
  113. const { width: cellChildWidth, height: cellChildHeight } = cellChild.getBoundingClientRect();
  114. const { top, left, right, bottom } = getPadding(cellChild);
  115. const horizontalPadding = left + right;
  116. const verticalPadding = top + bottom;
  117. if (isGreaterThan(rangeWidth + horizontalPadding, cellChildWidth) || isGreaterThan(rangeHeight + verticalPadding, cellChildHeight) || isGreaterThan(cellChild.scrollWidth, cellChildWidth)) {
  118. util.createTablePopper(tooltipOptions, (_f = (cell == null ? void 0 : cell.innerText) || (cell == null ? void 0 : cell.textContent)) != null ? _f : "", row, column, cell, table);
  119. } else if (((_g = util.removePopper) == null ? void 0 : _g.trigger) === cell) {
  120. (_h = util.removePopper) == null ? void 0 : _h();
  121. }
  122. };
  123. const handleCellMouseLeave = (event) => {
  124. const cell = util.getCell(event);
  125. if (!cell)
  126. return;
  127. if (cell.rowSpan > 1) {
  128. toggleRowClassByCell(cell.rowSpan, event, style.removeClass);
  129. }
  130. const oldHoverState = parent == null ? void 0 : parent.hoverState;
  131. parent == null ? void 0 : parent.emit("cell-mouse-leave", oldHoverState == null ? void 0 : oldHoverState.row, oldHoverState == null ? void 0 : oldHoverState.column, oldHoverState == null ? void 0 : oldHoverState.cell, event);
  132. };
  133. return {
  134. handleDoubleClick,
  135. handleClick,
  136. handleContextMenu,
  137. handleMouseEnter,
  138. handleMouseLeave,
  139. handleCellMouseEnter,
  140. handleCellMouseLeave,
  141. tooltipContent,
  142. tooltipTrigger
  143. };
  144. }
  145. exports["default"] = useEvents;
  146. //# sourceMappingURL=events-helper.js.map