use-table.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var useColumns = require('./composables/use-columns.js');
  5. var useScrollbar = require('./composables/use-scrollbar.js');
  6. var useRow = require('./composables/use-row.js');
  7. var useData = require('./composables/use-data.js');
  8. var useStyles = require('./composables/use-styles.js');
  9. var index = require('../../../hooks/use-namespace/index.js');
  10. var types = require('../../../utils/types.js');
  11. var shared = require('@vue/shared');
  12. function useTable(props) {
  13. const mainTableRef = vue.ref();
  14. const leftTableRef = vue.ref();
  15. const rightTableRef = vue.ref();
  16. const {
  17. columns,
  18. columnsStyles,
  19. columnsTotalWidth,
  20. fixedColumnsOnLeft,
  21. fixedColumnsOnRight,
  22. hasFixedColumns,
  23. mainColumns,
  24. onColumnSorted
  25. } = useColumns.useColumns(props, vue.toRef(props, "columns"), vue.toRef(props, "fixed"));
  26. const {
  27. scrollTo,
  28. scrollToLeft,
  29. scrollToTop,
  30. scrollToRow,
  31. onScroll,
  32. onVerticalScroll,
  33. scrollPos
  34. } = useScrollbar.useScrollbar(props, {
  35. mainTableRef,
  36. leftTableRef,
  37. rightTableRef,
  38. onMaybeEndReached
  39. });
  40. const ns = index.useNamespace("table-v2");
  41. const instance = vue.getCurrentInstance();
  42. const isScrolling = vue.shallowRef(false);
  43. const {
  44. expandedRowKeys,
  45. lastRenderedRowIndex,
  46. isDynamic,
  47. isResetting,
  48. rowHeights,
  49. resetAfterIndex,
  50. onRowExpanded,
  51. onRowHeightChange,
  52. onRowHovered,
  53. onRowsRendered
  54. } = useRow.useRow(props, {
  55. mainTableRef,
  56. leftTableRef,
  57. rightTableRef,
  58. tableInstance: instance,
  59. ns,
  60. isScrolling
  61. });
  62. const { data, depthMap } = useData.useData(props, {
  63. expandedRowKeys,
  64. lastRenderedRowIndex,
  65. resetAfterIndex
  66. });
  67. const rowsHeight = vue.computed(() => {
  68. const { estimatedRowHeight, rowHeight } = props;
  69. const _data = vue.unref(data);
  70. if (types.isNumber(estimatedRowHeight)) {
  71. return Object.values(vue.unref(rowHeights)).reduce((acc, curr) => acc + curr, 0);
  72. }
  73. return _data.length * rowHeight;
  74. });
  75. const {
  76. bodyWidth,
  77. fixedTableHeight,
  78. mainTableHeight,
  79. leftTableWidth,
  80. rightTableWidth,
  81. headerWidth,
  82. windowHeight,
  83. footerHeight,
  84. emptyStyle,
  85. rootStyle,
  86. headerHeight
  87. } = useStyles.useStyles(props, {
  88. columnsTotalWidth,
  89. fixedColumnsOnLeft,
  90. fixedColumnsOnRight,
  91. rowsHeight
  92. });
  93. const containerRef = vue.ref();
  94. const showEmpty = vue.computed(() => {
  95. const noData = vue.unref(data).length === 0;
  96. return shared.isArray(props.fixedData) ? props.fixedData.length === 0 && noData : noData;
  97. });
  98. function getRowHeight(rowIndex) {
  99. const { estimatedRowHeight, rowHeight, rowKey } = props;
  100. if (!estimatedRowHeight)
  101. return rowHeight;
  102. return vue.unref(rowHeights)[vue.unref(data)[rowIndex][rowKey]] || estimatedRowHeight;
  103. }
  104. const isEndReached = vue.ref(false);
  105. function onMaybeEndReached() {
  106. const { onEndReached } = props;
  107. if (!onEndReached)
  108. return;
  109. const { scrollTop } = vue.unref(scrollPos);
  110. const _totalHeight = vue.unref(rowsHeight);
  111. const clientHeight = vue.unref(windowHeight);
  112. const remainDistance = _totalHeight - (scrollTop + clientHeight) + props.hScrollbarSize;
  113. if (!isEndReached.value && vue.unref(lastRenderedRowIndex) >= 0 && _totalHeight <= scrollTop + vue.unref(mainTableHeight) - vue.unref(headerHeight)) {
  114. isEndReached.value = true;
  115. onEndReached(remainDistance);
  116. } else {
  117. isEndReached.value = false;
  118. }
  119. }
  120. vue.watch(() => vue.unref(rowsHeight), () => isEndReached.value = false);
  121. vue.watch(() => props.expandedRowKeys, (val) => expandedRowKeys.value = val, {
  122. deep: true
  123. });
  124. return {
  125. columns,
  126. containerRef,
  127. mainTableRef,
  128. leftTableRef,
  129. rightTableRef,
  130. isDynamic,
  131. isResetting,
  132. isScrolling,
  133. hasFixedColumns,
  134. columnsStyles,
  135. columnsTotalWidth,
  136. data,
  137. expandedRowKeys,
  138. depthMap,
  139. fixedColumnsOnLeft,
  140. fixedColumnsOnRight,
  141. mainColumns,
  142. bodyWidth,
  143. emptyStyle,
  144. rootStyle,
  145. headerWidth,
  146. footerHeight,
  147. mainTableHeight,
  148. fixedTableHeight,
  149. leftTableWidth,
  150. rightTableWidth,
  151. showEmpty,
  152. getRowHeight,
  153. onColumnSorted,
  154. onRowHovered,
  155. onRowExpanded,
  156. onRowsRendered,
  157. onRowHeightChange,
  158. scrollTo,
  159. scrollToLeft,
  160. scrollToTop,
  161. scrollToRow,
  162. onScroll,
  163. onVerticalScroll
  164. };
  165. }
  166. exports.useTable = useTable;
  167. //# sourceMappingURL=use-table.js.map