ae2b1f830d05de36c19103eb2c552341a0f3fdbbd17c8074ba4ab9993a1c3a6b4b7cd6ae6895b6b364cb5e82e0b4de4f69a60019c16f5f7a90f4285363ca83 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var row = require('../row.js');
  5. var tokens = require('../tokens.js');
  6. var _private = require('../private.js');
  7. var shared = require('@vue/shared');
  8. var types = require('../../../../utils/types.js');
  9. const useTableRow = (props) => {
  10. const {
  11. isScrolling
  12. } = vue.inject(tokens.TableV2InjectionKey);
  13. const measured = vue.ref(false);
  14. const rowRef = vue.ref();
  15. const measurable = vue.computed(() => {
  16. return types.isNumber(props.estimatedRowHeight) && props.rowIndex >= 0;
  17. });
  18. const doMeasure = (isInit = false) => {
  19. const $rowRef = vue.unref(rowRef);
  20. if (!$rowRef)
  21. return;
  22. const {
  23. columns,
  24. onRowHeightChange,
  25. rowKey,
  26. rowIndex,
  27. style
  28. } = props;
  29. const {
  30. height
  31. } = $rowRef.getBoundingClientRect();
  32. measured.value = true;
  33. vue.nextTick(() => {
  34. if (isInit || height !== Number.parseInt(style.height)) {
  35. const firstColumn = columns[0];
  36. const isPlaceholder = (firstColumn == null ? void 0 : firstColumn.placeholderSign) === _private.placeholderSign;
  37. onRowHeightChange == null ? void 0 : onRowHeightChange({
  38. rowKey,
  39. height,
  40. rowIndex
  41. }, firstColumn && !isPlaceholder && firstColumn.fixed);
  42. }
  43. });
  44. };
  45. const eventHandlers = vue.computed(() => {
  46. const {
  47. rowData,
  48. rowIndex,
  49. rowKey,
  50. onRowHover
  51. } = props;
  52. const handlers = props.rowEventHandlers || {};
  53. const eventHandlers2 = {};
  54. Object.entries(handlers).forEach(([eventName, handler]) => {
  55. if (shared.isFunction(handler)) {
  56. eventHandlers2[eventName] = (event) => {
  57. handler({
  58. event,
  59. rowData,
  60. rowIndex,
  61. rowKey
  62. });
  63. };
  64. }
  65. });
  66. if (onRowHover) {
  67. [{
  68. name: "onMouseleave",
  69. hovered: false
  70. }, {
  71. name: "onMouseenter",
  72. hovered: true
  73. }].forEach(({
  74. name,
  75. hovered
  76. }) => {
  77. const existedHandler = eventHandlers2[name];
  78. eventHandlers2[name] = (event) => {
  79. onRowHover({
  80. event,
  81. hovered,
  82. rowData,
  83. rowIndex,
  84. rowKey
  85. });
  86. existedHandler == null ? void 0 : existedHandler(event);
  87. };
  88. });
  89. }
  90. return eventHandlers2;
  91. });
  92. const onExpand = (expanded) => {
  93. const {
  94. onRowExpand,
  95. rowData,
  96. rowIndex,
  97. rowKey
  98. } = props;
  99. onRowExpand == null ? void 0 : onRowExpand({
  100. expanded,
  101. rowData,
  102. rowIndex,
  103. rowKey
  104. });
  105. };
  106. vue.onMounted(() => {
  107. if (vue.unref(measurable)) {
  108. doMeasure(true);
  109. }
  110. });
  111. return {
  112. isScrolling,
  113. measurable,
  114. measured,
  115. rowRef,
  116. eventHandlers,
  117. onExpand
  118. };
  119. };
  120. const COMPONENT_NAME = "ElTableV2TableRow";
  121. const TableV2Row = vue.defineComponent({
  122. name: COMPONENT_NAME,
  123. props: row.tableV2RowProps,
  124. setup(props, {
  125. expose,
  126. slots,
  127. attrs
  128. }) {
  129. const {
  130. eventHandlers,
  131. isScrolling,
  132. measurable,
  133. measured,
  134. rowRef,
  135. onExpand
  136. } = useTableRow(props);
  137. expose({
  138. onExpand
  139. });
  140. return () => {
  141. const {
  142. columns,
  143. columnsStyles,
  144. expandColumnKey,
  145. depth,
  146. rowData,
  147. rowIndex,
  148. style
  149. } = props;
  150. let ColumnCells = columns.map((column, columnIndex) => {
  151. const expandable = shared.isArray(rowData.children) && rowData.children.length > 0 && column.key === expandColumnKey;
  152. return slots.cell({
  153. column,
  154. columns,
  155. columnIndex,
  156. depth,
  157. style: columnsStyles[column.key],
  158. rowData,
  159. rowIndex,
  160. isScrolling: vue.unref(isScrolling),
  161. expandIconProps: expandable ? {
  162. rowData,
  163. rowIndex,
  164. onExpand
  165. } : void 0
  166. });
  167. });
  168. if (slots.row) {
  169. ColumnCells = slots.row({
  170. cells: ColumnCells.map((node) => {
  171. if (shared.isArray(node) && node.length === 1) {
  172. return node[0];
  173. }
  174. return node;
  175. }),
  176. style,
  177. columns,
  178. depth,
  179. rowData,
  180. rowIndex,
  181. isScrolling: vue.unref(isScrolling)
  182. });
  183. }
  184. if (vue.unref(measurable)) {
  185. const {
  186. height,
  187. ...exceptHeightStyle
  188. } = style || {};
  189. const _measured = vue.unref(measured);
  190. return vue.createVNode("div", vue.mergeProps({
  191. "ref": rowRef,
  192. "class": props.class,
  193. "style": _measured ? style : exceptHeightStyle,
  194. "role": "row"
  195. }, attrs, vue.unref(eventHandlers)), [ColumnCells]);
  196. }
  197. return vue.createVNode("div", vue.mergeProps(attrs, {
  198. "ref": rowRef,
  199. "class": props.class,
  200. "style": style,
  201. "role": "row"
  202. }, vue.unref(eventHandlers)), [ColumnCells]);
  203. };
  204. }
  205. });
  206. var Row = TableV2Row;
  207. exports["default"] = Row;
  208. //# sourceMappingURL=row.js.map