index.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  3. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  4. import _typeof from "@babel/runtime/helpers/esm/typeof";
  5. var _excluded = ["colSpan", "rowSpan", "style", "class"];
  6. import { createVNode as _createVNode } from "vue";
  7. import classNames from '../../_util/classNames';
  8. import { filterEmpty, flattenChildren, isValidElement, parseStyleText } from '../../_util/props-util';
  9. import { Text, computed, defineComponent, isVNode, renderSlot } from 'vue';
  10. import { getPathValue, validateValue } from '../utils/valueUtil';
  11. import { useInjectSlots } from '../../table/context';
  12. import { INTERNAL_COL_DEFINE } from '../utils/legacyUtil';
  13. import { useInjectHover } from '../context/HoverContext';
  14. import { useInjectSticky } from '../context/StickyContext';
  15. import { warning } from '../../vc-util/warning';
  16. import eagerComputed from '../../_util/eagerComputed';
  17. /** Check if cell is in hover range */
  18. function inHoverRange(cellStartRow, cellRowSpan, startRow, endRow) {
  19. var cellEndRow = cellStartRow + cellRowSpan - 1;
  20. return cellStartRow <= endRow && cellEndRow >= startRow;
  21. }
  22. function isRenderCell(data) {
  23. return data && _typeof(data) === 'object' && !Array.isArray(data) && !isVNode(data);
  24. }
  25. export default defineComponent({
  26. name: 'Cell',
  27. props: ['prefixCls', 'record', 'index', 'renderIndex', 'dataIndex', 'customRender', 'component', 'colSpan', 'rowSpan', 'fixLeft', 'fixRight', 'firstFixLeft', 'lastFixLeft', 'firstFixRight', 'lastFixRight', 'appendNode', 'additionalProps', 'ellipsis', 'align', 'rowType', 'isSticky', 'column', 'cellType', 'transformCellText'],
  28. slots: ['appendNode'],
  29. setup: function setup(props, _ref) {
  30. var slots = _ref.slots;
  31. var contextSlots = useInjectSlots();
  32. var _useInjectHover = useInjectHover(),
  33. onHover = _useInjectHover.onHover,
  34. startRow = _useInjectHover.startRow,
  35. endRow = _useInjectHover.endRow;
  36. var colSpan = computed(function () {
  37. var _ref2, _props$colSpan, _props$additionalProp, _props$additionalProp2;
  38. return (_ref2 = (_props$colSpan = props.colSpan) !== null && _props$colSpan !== void 0 ? _props$colSpan : (_props$additionalProp = props.additionalProps) === null || _props$additionalProp === void 0 ? void 0 : _props$additionalProp.colSpan) !== null && _ref2 !== void 0 ? _ref2 : (_props$additionalProp2 = props.additionalProps) === null || _props$additionalProp2 === void 0 ? void 0 : _props$additionalProp2.colspan;
  39. });
  40. var rowSpan = computed(function () {
  41. var _ref3, _props$rowSpan, _props$additionalProp3, _props$additionalProp4;
  42. return (_ref3 = (_props$rowSpan = props.rowSpan) !== null && _props$rowSpan !== void 0 ? _props$rowSpan : (_props$additionalProp3 = props.additionalProps) === null || _props$additionalProp3 === void 0 ? void 0 : _props$additionalProp3.rowSpan) !== null && _ref3 !== void 0 ? _ref3 : (_props$additionalProp4 = props.additionalProps) === null || _props$additionalProp4 === void 0 ? void 0 : _props$additionalProp4.rowspan;
  43. });
  44. var hovering = eagerComputed(function () {
  45. var index = props.index;
  46. return inHoverRange(index, rowSpan.value || 1, startRow.value, endRow.value);
  47. });
  48. var supportSticky = useInjectSticky();
  49. // ====================== Hover =======================
  50. var _onMouseenter = function onMouseenter(event, mergedRowSpan) {
  51. var _additionalProps$onMo;
  52. var record = props.record,
  53. index = props.index,
  54. additionalProps = props.additionalProps;
  55. if (record) {
  56. onHover(index, index + mergedRowSpan - 1);
  57. }
  58. additionalProps === null || additionalProps === void 0 ? void 0 : (_additionalProps$onMo = additionalProps.onMouseenter) === null || _additionalProps$onMo === void 0 ? void 0 : _additionalProps$onMo.call(additionalProps, event);
  59. };
  60. var onMouseleave = function onMouseleave(event) {
  61. var _additionalProps$onMo2;
  62. var record = props.record,
  63. additionalProps = props.additionalProps;
  64. if (record) {
  65. onHover(-1, -1);
  66. }
  67. additionalProps === null || additionalProps === void 0 ? void 0 : (_additionalProps$onMo2 = additionalProps.onMouseleave) === null || _additionalProps$onMo2 === void 0 ? void 0 : _additionalProps$onMo2.call(additionalProps, event);
  68. };
  69. var getTitle = function getTitle(vnodes) {
  70. var vnode = filterEmpty(vnodes)[0];
  71. if (isVNode(vnode)) {
  72. if (vnode.type === Text) {
  73. return vnode.children;
  74. } else {
  75. return Array.isArray(vnode.children) ? getTitle(vnode.children) : undefined;
  76. }
  77. } else {
  78. return vnode;
  79. }
  80. };
  81. return function () {
  82. var _slots$appendNode, _slots$default, _ref5, _ref6, _classNames, _slots$dragHandle;
  83. var prefixCls = props.prefixCls,
  84. record = props.record,
  85. index = props.index,
  86. renderIndex = props.renderIndex,
  87. dataIndex = props.dataIndex,
  88. customRender = props.customRender,
  89. _props$component = props.component,
  90. Component = _props$component === void 0 ? 'td' : _props$component,
  91. fixLeft = props.fixLeft,
  92. fixRight = props.fixRight,
  93. firstFixLeft = props.firstFixLeft,
  94. lastFixLeft = props.lastFixLeft,
  95. firstFixRight = props.firstFixRight,
  96. lastFixRight = props.lastFixRight,
  97. _props$appendNode = props.appendNode,
  98. appendNode = _props$appendNode === void 0 ? (_slots$appendNode = slots.appendNode) === null || _slots$appendNode === void 0 ? void 0 : _slots$appendNode.call(slots) : _props$appendNode,
  99. _props$additionalProp5 = props.additionalProps,
  100. additionalProps = _props$additionalProp5 === void 0 ? {} : _props$additionalProp5,
  101. ellipsis = props.ellipsis,
  102. align = props.align,
  103. rowType = props.rowType,
  104. isSticky = props.isSticky,
  105. _props$column = props.column,
  106. column = _props$column === void 0 ? {} : _props$column,
  107. cellType = props.cellType;
  108. var cellPrefixCls = "".concat(prefixCls, "-cell");
  109. // ==================== Child Node ====================
  110. var cellProps;
  111. var childNode;
  112. var children = (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
  113. if (validateValue(children) || cellType === 'header') {
  114. childNode = children;
  115. } else {
  116. var _column$slots;
  117. var value = getPathValue(record, dataIndex);
  118. // Customize render node
  119. childNode = value;
  120. if (customRender) {
  121. var renderData = customRender({
  122. text: value,
  123. value: value,
  124. record: record,
  125. index: index,
  126. renderIndex: renderIndex,
  127. column: column.__originColumn__
  128. });
  129. if (isRenderCell(renderData)) {
  130. if (process.env.NODE_ENV !== 'production') {
  131. warning(false, '`columns.customRender` return cell props is deprecated with perf issue, please use `customCell` instead.');
  132. }
  133. childNode = renderData.children;
  134. cellProps = renderData.props;
  135. } else {
  136. childNode = renderData;
  137. }
  138. }
  139. if (!(INTERNAL_COL_DEFINE in column) && cellType === 'body' && contextSlots.value.bodyCell && !((_column$slots = column.slots) !== null && _column$slots !== void 0 && _column$slots.customRender)) {
  140. var child = renderSlot(contextSlots.value, 'bodyCell', {
  141. text: value,
  142. value: value,
  143. record: record,
  144. index: index,
  145. column: column.__originColumn__
  146. }, function () {
  147. var fallback = childNode === undefined ? value : childNode;
  148. return [_typeof(fallback) === 'object' && isValidElement(fallback) || _typeof(fallback) !== 'object' ? fallback : null];
  149. });
  150. childNode = flattenChildren(child);
  151. }
  152. /** maybe we should @deprecated */
  153. if (props.transformCellText) {
  154. childNode = props.transformCellText({
  155. text: childNode,
  156. record: record,
  157. index: index,
  158. column: column.__originColumn__
  159. });
  160. }
  161. }
  162. // Not crash if final `childNode` is not validate VueNode
  163. if (_typeof(childNode) === 'object' && !Array.isArray(childNode) && !isVNode(childNode)) {
  164. childNode = null;
  165. }
  166. if (ellipsis && (lastFixLeft || firstFixRight)) {
  167. var _childNode = function () {
  168. return childNode;
  169. }();
  170. childNode = _createVNode("span", {
  171. "class": "".concat(cellPrefixCls, "-content")
  172. }, [childNode]);
  173. }
  174. if (Array.isArray(childNode) && childNode.length === 1) {
  175. childNode = childNode[0];
  176. }
  177. var _ref4 = cellProps || {},
  178. cellColSpan = _ref4.colSpan,
  179. cellRowSpan = _ref4.rowSpan,
  180. cellStyle = _ref4.style,
  181. cellClassName = _ref4.class,
  182. restCellProps = _objectWithoutProperties(_ref4, _excluded);
  183. var mergedColSpan = (_ref5 = cellColSpan !== undefined ? cellColSpan : colSpan.value) !== null && _ref5 !== void 0 ? _ref5 : 1;
  184. var mergedRowSpan = (_ref6 = cellRowSpan !== undefined ? cellRowSpan : rowSpan.value) !== null && _ref6 !== void 0 ? _ref6 : 1;
  185. if (mergedColSpan === 0 || mergedRowSpan === 0) {
  186. return null;
  187. }
  188. // ====================== Fixed =======================
  189. var fixedStyle = {};
  190. var isFixLeft = typeof fixLeft === 'number' && supportSticky.value;
  191. var isFixRight = typeof fixRight === 'number' && supportSticky.value;
  192. if (isFixLeft) {
  193. fixedStyle.position = 'sticky';
  194. fixedStyle.left = "".concat(fixLeft, "px");
  195. }
  196. if (isFixRight) {
  197. fixedStyle.position = 'sticky';
  198. fixedStyle.right = "".concat(fixRight, "px");
  199. }
  200. // ====================== Align =======================
  201. var alignStyle = {};
  202. if (align) {
  203. alignStyle.textAlign = align;
  204. }
  205. // ====================== Render ======================
  206. var title;
  207. var ellipsisConfig = ellipsis === true ? {
  208. showTitle: true
  209. } : ellipsis;
  210. if (ellipsisConfig && (ellipsisConfig.showTitle || rowType === 'header')) {
  211. if (typeof childNode === 'string' || typeof childNode === 'number') {
  212. title = childNode.toString();
  213. } else if (isVNode(childNode)) {
  214. title = getTitle([childNode]);
  215. }
  216. }
  217. var componentProps = _objectSpread(_objectSpread(_objectSpread({
  218. title: title
  219. }, restCellProps), additionalProps), {}, {
  220. colSpan: mergedColSpan !== 1 ? mergedColSpan : null,
  221. rowSpan: mergedRowSpan !== 1 ? mergedRowSpan : null,
  222. class: classNames(cellPrefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(cellPrefixCls, "-fix-left"), isFixLeft && supportSticky.value), _defineProperty(_classNames, "".concat(cellPrefixCls, "-fix-left-first"), firstFixLeft && supportSticky.value), _defineProperty(_classNames, "".concat(cellPrefixCls, "-fix-left-last"), lastFixLeft && supportSticky.value), _defineProperty(_classNames, "".concat(cellPrefixCls, "-fix-right"), isFixRight && supportSticky.value), _defineProperty(_classNames, "".concat(cellPrefixCls, "-fix-right-first"), firstFixRight && supportSticky.value), _defineProperty(_classNames, "".concat(cellPrefixCls, "-fix-right-last"), lastFixRight && supportSticky.value), _defineProperty(_classNames, "".concat(cellPrefixCls, "-ellipsis"), ellipsis), _defineProperty(_classNames, "".concat(cellPrefixCls, "-with-append"), appendNode), _defineProperty(_classNames, "".concat(cellPrefixCls, "-fix-sticky"), (isFixLeft || isFixRight) && isSticky && supportSticky.value), _defineProperty(_classNames, "".concat(cellPrefixCls, "-row-hover"), !cellProps && hovering.value), _classNames), additionalProps.class, cellClassName),
  223. onMouseenter: function onMouseenter(e) {
  224. _onMouseenter(e, mergedRowSpan);
  225. },
  226. onMouseleave: onMouseleave,
  227. style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, parseStyleText(additionalProps.style)), alignStyle), fixedStyle), cellStyle)
  228. });
  229. return _createVNode(Component, componentProps, {
  230. default: function _default() {
  231. return [appendNode, childNode, (_slots$dragHandle = slots.dragHandle) === null || _slots$dragHandle === void 0 ? void 0 : _slots$dragHandle.call(slots)];
  232. }
  233. });
  234. };
  235. }
  236. });