BodyRow.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _Cell = _interopRequireDefault(require("../Cell"));
  10. var _valueUtil = require("../utils/valueUtil");
  11. var _ExpandedRow = _interopRequireDefault(require("./ExpandedRow"));
  12. var _TableContext = require("../context/TableContext");
  13. var _BodyContext = require("../context/BodyContext");
  14. var _classNames = _interopRequireDefault(require("../../_util/classNames"));
  15. var _default = exports.default = (0, _vue.defineComponent)({
  16. name: 'BodyRow',
  17. inheritAttrs: false,
  18. props: ['record', 'index', 'renderIndex', 'recordKey', 'expandedKeys', 'rowComponent', 'cellComponent', 'customRow', 'rowExpandable', 'indent', 'rowKey', 'getRowKey', 'childrenColumnName'],
  19. setup(props, _ref) {
  20. let {
  21. attrs
  22. } = _ref;
  23. const tableContext = (0, _TableContext.useInjectTable)();
  24. const bodyContext = (0, _BodyContext.useInjectBody)();
  25. const expandRended = (0, _vue.shallowRef)(false);
  26. const expanded = (0, _vue.computed)(() => props.expandedKeys && props.expandedKeys.has(props.recordKey));
  27. (0, _vue.watchEffect)(() => {
  28. if (expanded.value) {
  29. expandRended.value = true;
  30. }
  31. });
  32. const rowSupportExpand = (0, _vue.computed)(() => bodyContext.expandableType === 'row' && (!props.rowExpandable || props.rowExpandable(props.record)));
  33. // Only when row is not expandable and `children` exist in record
  34. const nestExpandable = (0, _vue.computed)(() => bodyContext.expandableType === 'nest');
  35. const hasNestChildren = (0, _vue.computed)(() => props.childrenColumnName && props.record && props.record[props.childrenColumnName]);
  36. const mergedExpandable = (0, _vue.computed)(() => rowSupportExpand.value || nestExpandable.value);
  37. const onInternalTriggerExpand = (record, event) => {
  38. bodyContext.onTriggerExpand(record, event);
  39. };
  40. // =========================== onRow ===========================
  41. const additionalProps = (0, _vue.computed)(() => {
  42. var _a;
  43. return ((_a = props.customRow) === null || _a === void 0 ? void 0 : _a.call(props, props.record, props.index)) || {};
  44. });
  45. const onClick = function (event) {
  46. var _a, _b;
  47. if (bodyContext.expandRowByClick && mergedExpandable.value) {
  48. onInternalTriggerExpand(props.record, event);
  49. }
  50. for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  51. args[_key - 1] = arguments[_key];
  52. }
  53. (_b = (_a = additionalProps.value) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event, ...args);
  54. };
  55. const computeRowClassName = (0, _vue.computed)(() => {
  56. const {
  57. record,
  58. index,
  59. indent
  60. } = props;
  61. const {
  62. rowClassName
  63. } = bodyContext;
  64. if (typeof rowClassName === 'string') {
  65. return rowClassName;
  66. } else if (typeof rowClassName === 'function') {
  67. return rowClassName(record, index, indent);
  68. }
  69. return '';
  70. });
  71. const columnsKey = (0, _vue.computed)(() => (0, _valueUtil.getColumnsKey)(bodyContext.flattenColumns));
  72. return () => {
  73. const {
  74. class: className,
  75. style
  76. } = attrs;
  77. const {
  78. record,
  79. index,
  80. rowKey,
  81. indent = 0,
  82. rowComponent: RowComponent,
  83. cellComponent
  84. } = props;
  85. const {
  86. prefixCls,
  87. fixedInfoList,
  88. transformCellText
  89. } = tableContext;
  90. const {
  91. flattenColumns,
  92. expandedRowClassName,
  93. indentSize,
  94. expandIcon,
  95. expandedRowRender,
  96. expandIconColumnIndex
  97. } = bodyContext;
  98. const baseRowNode = (0, _vue.createVNode)(RowComponent, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, additionalProps.value), {}, {
  99. "data-row-key": rowKey,
  100. "class": (0, _classNames.default)(className, `${prefixCls}-row`, `${prefixCls}-row-level-${indent}`, computeRowClassName.value, additionalProps.value.class),
  101. "style": [style, additionalProps.value.style],
  102. "onClick": onClick
  103. }), {
  104. default: () => [flattenColumns.map((column, colIndex) => {
  105. const {
  106. customRender,
  107. dataIndex,
  108. className: columnClassName
  109. } = column;
  110. const key = columnsKey[colIndex];
  111. const fixedInfo = fixedInfoList[colIndex];
  112. let additionalCellProps;
  113. if (column.customCell) {
  114. additionalCellProps = column.customCell(record, index, column);
  115. }
  116. // not use slot to fix https://github.com/vueComponent/ant-design-vue/issues/5295
  117. const appendNode = colIndex === (expandIconColumnIndex || 0) && nestExpandable.value ? (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)("span", {
  118. "style": {
  119. paddingLeft: `${indentSize * indent}px`
  120. },
  121. "class": `${prefixCls}-row-indent indent-level-${indent}`
  122. }, null), expandIcon({
  123. prefixCls,
  124. expanded: expanded.value,
  125. expandable: hasNestChildren.value,
  126. record,
  127. onExpand: onInternalTriggerExpand
  128. })]) : null;
  129. return (0, _vue.createVNode)(_Cell.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
  130. "cellType": "body",
  131. "class": columnClassName,
  132. "ellipsis": column.ellipsis,
  133. "align": column.align,
  134. "component": cellComponent,
  135. "prefixCls": prefixCls,
  136. "key": key,
  137. "record": record,
  138. "index": index,
  139. "renderIndex": props.renderIndex,
  140. "dataIndex": dataIndex,
  141. "customRender": customRender
  142. }, fixedInfo), {}, {
  143. "additionalProps": additionalCellProps,
  144. "column": column,
  145. "transformCellText": transformCellText,
  146. "appendNode": appendNode
  147. }), null);
  148. })]
  149. });
  150. // ======================== Expand Row =========================
  151. let expandRowNode;
  152. if (rowSupportExpand.value && (expandRended.value || expanded.value)) {
  153. const expandContent = expandedRowRender({
  154. record,
  155. index,
  156. indent: indent + 1,
  157. expanded: expanded.value
  158. });
  159. const computedExpandedRowClassName = expandedRowClassName && expandedRowClassName(record, index, indent);
  160. expandRowNode = (0, _vue.createVNode)(_ExpandedRow.default, {
  161. "expanded": expanded.value,
  162. "class": (0, _classNames.default)(`${prefixCls}-expanded-row`, `${prefixCls}-expanded-row-level-${indent + 1}`, computedExpandedRowClassName),
  163. "prefixCls": prefixCls,
  164. "component": RowComponent,
  165. "cellComponent": cellComponent,
  166. "colSpan": flattenColumns.length,
  167. "isEmpty": false
  168. }, {
  169. default: () => [expandContent]
  170. });
  171. }
  172. return (0, _vue.createVNode)(_vue.Fragment, null, [baseRowNode, expandRowNode]);
  173. };
  174. }
  175. });