750faae04df43cdb77deff4891879dfe1d2beb50df1a308251343947537ad6206d47f4035ec369741432d88f835dddedf3f1c3bb0ab87787ee441e2d546beb 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. import { getCurrentInstance, shallowRef, ref, computed, unref, nextTick } from 'vue';
  2. import { debounce } from 'lodash-unified';
  3. import { FixedDir } from '../constants.mjs';
  4. import { isNumber } from '../../../../utils/types.mjs';
  5. const useRow = (props, {
  6. mainTableRef,
  7. leftTableRef,
  8. rightTableRef,
  9. tableInstance,
  10. ns,
  11. isScrolling
  12. }) => {
  13. const vm = getCurrentInstance();
  14. const { emit } = vm;
  15. const isResetting = shallowRef(false);
  16. const expandedRowKeys = ref(props.defaultExpandedRowKeys || []);
  17. const lastRenderedRowIndex = ref(-1);
  18. const resetIndex = shallowRef(null);
  19. const rowHeights = ref({});
  20. const pendingRowHeights = ref({});
  21. const leftTableHeights = shallowRef({});
  22. const mainTableHeights = shallowRef({});
  23. const rightTableHeights = shallowRef({});
  24. const isDynamic = computed(() => isNumber(props.estimatedRowHeight));
  25. function onRowsRendered(params) {
  26. var _a;
  27. (_a = props.onRowsRendered) == null ? void 0 : _a.call(props, params);
  28. if (params.rowCacheEnd > unref(lastRenderedRowIndex)) {
  29. lastRenderedRowIndex.value = params.rowCacheEnd;
  30. }
  31. }
  32. function onRowHovered({ hovered, rowKey }) {
  33. if (isScrolling.value) {
  34. return;
  35. }
  36. const tableRoot = tableInstance.vnode.el;
  37. const rows = tableRoot.querySelectorAll(`[rowkey="${String(rowKey)}"]`);
  38. rows.forEach((row) => {
  39. if (hovered) {
  40. row.classList.add(ns.is("hovered"));
  41. } else {
  42. row.classList.remove(ns.is("hovered"));
  43. }
  44. });
  45. }
  46. function onRowExpanded({
  47. expanded,
  48. rowData,
  49. rowIndex,
  50. rowKey
  51. }) {
  52. var _a, _b;
  53. const _expandedRowKeys = [...unref(expandedRowKeys)];
  54. const currentKeyIndex = _expandedRowKeys.indexOf(rowKey);
  55. if (expanded) {
  56. if (currentKeyIndex === -1)
  57. _expandedRowKeys.push(rowKey);
  58. } else {
  59. if (currentKeyIndex > -1)
  60. _expandedRowKeys.splice(currentKeyIndex, 1);
  61. }
  62. expandedRowKeys.value = _expandedRowKeys;
  63. emit("update:expandedRowKeys", _expandedRowKeys);
  64. (_a = props.onRowExpand) == null ? void 0 : _a.call(props, {
  65. expanded,
  66. rowData,
  67. rowIndex,
  68. rowKey
  69. });
  70. (_b = props.onExpandedRowsChange) == null ? void 0 : _b.call(props, _expandedRowKeys);
  71. const tableRoot = tableInstance.vnode.el;
  72. const hoverRow = tableRoot.querySelector(`.${ns.is("hovered")}[rowkey="${String(rowKey)}"]`);
  73. if (hoverRow) {
  74. nextTick(() => onRowHovered({ hovered: true, rowKey }));
  75. }
  76. }
  77. const flushingRowHeights = debounce(() => {
  78. var _a, _b, _c, _d;
  79. isResetting.value = true;
  80. rowHeights.value = { ...unref(rowHeights), ...unref(pendingRowHeights) };
  81. resetAfterIndex(unref(resetIndex), false);
  82. pendingRowHeights.value = {};
  83. resetIndex.value = null;
  84. (_a = mainTableRef.value) == null ? void 0 : _a.forceUpdate();
  85. (_b = leftTableRef.value) == null ? void 0 : _b.forceUpdate();
  86. (_c = rightTableRef.value) == null ? void 0 : _c.forceUpdate();
  87. (_d = vm.proxy) == null ? void 0 : _d.$forceUpdate();
  88. isResetting.value = false;
  89. }, 0);
  90. function resetAfterIndex(index, forceUpdate = false) {
  91. if (!unref(isDynamic))
  92. return;
  93. [mainTableRef, leftTableRef, rightTableRef].forEach((tableRef) => {
  94. const table = unref(tableRef);
  95. if (table)
  96. table.resetAfterRowIndex(index, forceUpdate);
  97. });
  98. }
  99. function resetHeights(rowKey, height, rowIdx) {
  100. const resetIdx = unref(resetIndex);
  101. if (resetIdx === null) {
  102. resetIndex.value = rowIdx;
  103. } else {
  104. if (resetIdx > rowIdx) {
  105. resetIndex.value = rowIdx;
  106. }
  107. }
  108. pendingRowHeights.value[rowKey] = height;
  109. }
  110. function onRowHeightChange({ rowKey, height, rowIndex }, fixedDir) {
  111. if (!fixedDir) {
  112. mainTableHeights.value[rowKey] = height;
  113. } else {
  114. if (fixedDir === FixedDir.RIGHT) {
  115. rightTableHeights.value[rowKey] = height;
  116. } else {
  117. leftTableHeights.value[rowKey] = height;
  118. }
  119. }
  120. const maximumHeight = Math.max(...[leftTableHeights, rightTableHeights, mainTableHeights].map((records) => records.value[rowKey] || 0));
  121. if (unref(rowHeights)[rowKey] !== maximumHeight) {
  122. resetHeights(rowKey, maximumHeight, rowIndex);
  123. flushingRowHeights();
  124. }
  125. }
  126. return {
  127. expandedRowKeys,
  128. lastRenderedRowIndex,
  129. isDynamic,
  130. isResetting,
  131. rowHeights,
  132. resetAfterIndex,
  133. onRowExpanded,
  134. onRowHovered,
  135. onRowsRendered,
  136. onRowHeightChange
  137. };
  138. };
  139. export { useRow };
  140. //# sourceMappingURL=use-row.mjs.map