be466e777aa2f6df3cfc1f5a764ad234a6a05824a3118e0c787464bac789977873c32fe9e1d4ad74d2339238cbc4c258a8ff1f5528c40adaf890a98a004fd9 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  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 eventsHelper = require('./events-helper.js');
  8. var stylesHelper = require('./styles-helper.js');
  9. var tdWrapper = require('./td-wrapper.js');
  10. var index = require('../../../../hooks/use-namespace/index.js');
  11. var types = require('../../../../utils/types.js');
  12. function useRender(props) {
  13. const parent = vue.inject(tokens.TABLE_INJECTION_KEY);
  14. const ns = index.useNamespace("table");
  15. const {
  16. handleDoubleClick,
  17. handleClick,
  18. handleContextMenu,
  19. handleMouseEnter,
  20. handleMouseLeave,
  21. handleCellMouseEnter,
  22. handleCellMouseLeave,
  23. tooltipContent,
  24. tooltipTrigger
  25. } = eventsHelper["default"](props);
  26. const {
  27. getRowStyle,
  28. getRowClass,
  29. getCellStyle,
  30. getCellClass,
  31. getSpan,
  32. getColspanRealWidth
  33. } = stylesHelper["default"](props);
  34. let displayIndex = -1;
  35. const firstDefaultColumnIndex = vue.computed(() => {
  36. var _a;
  37. return (_a = props.store) == null ? void 0 : _a.states.columns.value.findIndex(({ type }) => type === "default");
  38. });
  39. const getKeyOfRow = (row, index) => {
  40. var _a;
  41. const rowKey = (_a = parent == null ? void 0 : parent.props) == null ? void 0 : _a.rowKey;
  42. if (rowKey) {
  43. return util.getRowIdentity(row, rowKey);
  44. }
  45. return index;
  46. };
  47. const rowRender = (row, $index, treeRowData, expanded = false) => {
  48. const { tooltipEffect, tooltipOptions, store } = props;
  49. const { indent, columns } = store.states;
  50. const rowClasses = [];
  51. let display = true;
  52. if (treeRowData) {
  53. rowClasses.push(ns.em("row", `level-${treeRowData.level}`));
  54. display = !!treeRowData.display;
  55. }
  56. if ($index === 0) {
  57. displayIndex = -1;
  58. }
  59. if (props.stripe && display) {
  60. displayIndex++;
  61. }
  62. rowClasses.push(...getRowClass(row, $index, displayIndex));
  63. const displayStyle = display ? null : { display: "none" };
  64. return vue.h("tr", {
  65. style: [displayStyle, getRowStyle(row, $index)],
  66. class: rowClasses,
  67. key: getKeyOfRow(row, $index),
  68. onDblclick: ($event) => handleDoubleClick($event, row),
  69. onClick: ($event) => handleClick($event, row),
  70. onContextmenu: ($event) => handleContextMenu($event, row),
  71. onMouseenter: () => handleMouseEnter($index),
  72. onMouseleave: handleMouseLeave
  73. }, columns.value.map((column, cellIndex) => {
  74. const { rowspan, colspan } = getSpan(row, column, $index, cellIndex);
  75. if (!rowspan || !colspan) {
  76. return null;
  77. }
  78. const columnData = Object.assign({}, column);
  79. columnData.realWidth = getColspanRealWidth(columns.value, colspan, cellIndex);
  80. const data = {
  81. store,
  82. _self: props.context || parent,
  83. column: columnData,
  84. row,
  85. $index,
  86. cellIndex,
  87. expanded
  88. };
  89. if (cellIndex === firstDefaultColumnIndex.value && treeRowData) {
  90. data.treeNode = {
  91. indent: treeRowData.level && treeRowData.level * indent.value,
  92. level: treeRowData.level
  93. };
  94. if (types.isBoolean(treeRowData.expanded)) {
  95. data.treeNode.expanded = treeRowData.expanded;
  96. if ("loading" in treeRowData) {
  97. data.treeNode.loading = treeRowData.loading;
  98. }
  99. if ("noLazyChildren" in treeRowData) {
  100. data.treeNode.noLazyChildren = treeRowData.noLazyChildren;
  101. }
  102. }
  103. }
  104. const baseKey = `${getKeyOfRow(row, $index)},${cellIndex}`;
  105. const patchKey = columnData.columnKey || columnData.rawColumnKey || "";
  106. const mergedTooltipOptions = column.showOverflowTooltip && lodashUnified.merge({
  107. effect: tooltipEffect
  108. }, tooltipOptions, column.showOverflowTooltip);
  109. return vue.h(tdWrapper["default"], {
  110. style: getCellStyle($index, cellIndex, row, column),
  111. class: getCellClass($index, cellIndex, row, column, colspan - 1),
  112. key: `${patchKey}${baseKey}`,
  113. rowspan,
  114. colspan,
  115. onMouseenter: ($event) => handleCellMouseEnter($event, row, mergedTooltipOptions),
  116. onMouseleave: handleCellMouseLeave
  117. }, {
  118. default: () => cellChildren(cellIndex, column, data)
  119. });
  120. }));
  121. };
  122. const cellChildren = (_cellIndex, column, data) => {
  123. return column.renderCell(data);
  124. };
  125. const wrappedRowRender = (row, $index) => {
  126. const store = props.store;
  127. const { isRowExpanded, assertRowKey } = store;
  128. const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } = store.states;
  129. const columns = store.states.columns.value;
  130. const hasExpandColumn = columns.some(({ type }) => type === "expand");
  131. if (hasExpandColumn) {
  132. const expanded = isRowExpanded(row);
  133. const tr = rowRender(row, $index, void 0, expanded);
  134. const renderExpanded = parent == null ? void 0 : parent.renderExpanded;
  135. if (!renderExpanded) {
  136. console.error("[Element Error]renderExpanded is required.");
  137. return tr;
  138. }
  139. const rows = [[tr]];
  140. if (parent.props.preserveExpandedContent || expanded) {
  141. rows[0].push(vue.h("tr", {
  142. key: `expanded-row__${tr.key}`,
  143. style: { display: expanded ? "" : "none" }
  144. }, [
  145. vue.h("td", {
  146. colspan: columns.length,
  147. class: `${ns.e("cell")} ${ns.e("expanded-cell")}`
  148. }, [renderExpanded({ row, $index, store, expanded })])
  149. ]));
  150. }
  151. return rows;
  152. } else if (Object.keys(treeData.value).length) {
  153. assertRowKey();
  154. const key = util.getRowIdentity(row, rowKey.value);
  155. let cur = treeData.value[key];
  156. let treeRowData = null;
  157. if (cur) {
  158. treeRowData = {
  159. expanded: cur.expanded,
  160. level: cur.level,
  161. display: true,
  162. noLazyChildren: void 0,
  163. loading: void 0
  164. };
  165. if (types.isBoolean(cur.lazy)) {
  166. if (treeRowData && types.isBoolean(cur.loaded) && cur.loaded) {
  167. treeRowData.noLazyChildren = !(cur.children && cur.children.length);
  168. }
  169. treeRowData.loading = cur.loading;
  170. }
  171. }
  172. const tmp = [rowRender(row, $index, treeRowData != null ? treeRowData : void 0)];
  173. if (cur) {
  174. let i = 0;
  175. const traverse = (children, parent2) => {
  176. if (!(children && children.length && parent2))
  177. return;
  178. children.forEach((node) => {
  179. const innerTreeRowData = {
  180. display: parent2.display && parent2.expanded,
  181. level: parent2.level + 1,
  182. expanded: false,
  183. noLazyChildren: false,
  184. loading: false
  185. };
  186. const childKey = util.getRowIdentity(node, rowKey.value);
  187. if (types.isPropAbsent(childKey)) {
  188. throw new Error("For nested data item, row-key is required.");
  189. }
  190. cur = { ...treeData.value[childKey] };
  191. if (cur) {
  192. innerTreeRowData.expanded = cur.expanded;
  193. cur.level = cur.level || innerTreeRowData.level;
  194. cur.display = !!(cur.expanded && innerTreeRowData.display);
  195. if (types.isBoolean(cur.lazy)) {
  196. if (types.isBoolean(cur.loaded) && cur.loaded) {
  197. innerTreeRowData.noLazyChildren = !(cur.children && cur.children.length);
  198. }
  199. innerTreeRowData.loading = cur.loading;
  200. }
  201. }
  202. i++;
  203. tmp.push(rowRender(node, $index + i, innerTreeRowData));
  204. if (cur) {
  205. const nodes2 = lazyTreeNodeMap.value[childKey] || node[childrenColumnName.value];
  206. traverse(nodes2, cur);
  207. }
  208. });
  209. };
  210. cur.display = true;
  211. const nodes = lazyTreeNodeMap.value[key] || row[childrenColumnName.value];
  212. traverse(nodes, cur);
  213. }
  214. return tmp;
  215. } else {
  216. return rowRender(row, $index, void 0);
  217. }
  218. };
  219. return {
  220. wrappedRowRender,
  221. tooltipContent,
  222. tooltipTrigger
  223. };
  224. }
  225. exports["default"] = useRender;
  226. //# sourceMappingURL=render-helper.js.map