index.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  10. var _classNames = _interopRequireDefault(require("../../_util/classNames"));
  11. var _propsUtil = require("../../_util/props-util");
  12. var _valueUtil = require("../utils/valueUtil");
  13. var _context = require("../../table/context");
  14. var _legacyUtil = require("../utils/legacyUtil");
  15. var _HoverContext = require("../context/HoverContext");
  16. var _StickyContext = require("../context/StickyContext");
  17. var _warning = require("../../vc-util/warning");
  18. var _eagerComputed = _interopRequireDefault(require("../../_util/eagerComputed"));
  19. var _vnode = require("../../_util/vnode");
  20. var _class = require("../../vc-util/Dom/class");
  21. var __rest = void 0 && (void 0).__rest || function (s, e) {
  22. var t = {};
  23. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  24. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  25. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  26. }
  27. return t;
  28. };
  29. /** Check if cell is in hover range */
  30. function inHoverRange(cellStartRow, cellRowSpan, startRow, endRow) {
  31. const cellEndRow = cellStartRow + cellRowSpan - 1;
  32. return cellStartRow <= endRow && cellEndRow >= startRow;
  33. }
  34. function isRenderCell(data) {
  35. return data && typeof data === 'object' && !Array.isArray(data) && !(0, _vue.isVNode)(data);
  36. }
  37. var _default = exports.default = (0, _vue.defineComponent)({
  38. name: 'Cell',
  39. 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'],
  40. setup(props, _ref) {
  41. let {
  42. slots
  43. } = _ref;
  44. const contextSlots = (0, _context.useInjectSlots)();
  45. const {
  46. onHover,
  47. startRow,
  48. endRow
  49. } = (0, _HoverContext.useInjectHover)();
  50. const colSpan = (0, _vue.computed)(() => {
  51. var _a, _b, _c, _d;
  52. return (_c = (_a = props.colSpan) !== null && _a !== void 0 ? _a : (_b = props.additionalProps) === null || _b === void 0 ? void 0 : _b.colSpan) !== null && _c !== void 0 ? _c : (_d = props.additionalProps) === null || _d === void 0 ? void 0 : _d.colspan;
  53. });
  54. const rowSpan = (0, _vue.computed)(() => {
  55. var _a, _b, _c, _d;
  56. return (_c = (_a = props.rowSpan) !== null && _a !== void 0 ? _a : (_b = props.additionalProps) === null || _b === void 0 ? void 0 : _b.rowSpan) !== null && _c !== void 0 ? _c : (_d = props.additionalProps) === null || _d === void 0 ? void 0 : _d.rowspan;
  57. });
  58. const hovering = (0, _eagerComputed.default)(() => {
  59. const {
  60. index
  61. } = props;
  62. return inHoverRange(index, rowSpan.value || 1, startRow.value, endRow.value);
  63. });
  64. const supportSticky = (0, _StickyContext.useInjectSticky)();
  65. // ====================== Hover =======================
  66. const onMouseenter = (event, mergedRowSpan) => {
  67. var _a;
  68. const {
  69. record,
  70. index,
  71. additionalProps
  72. } = props;
  73. if (record) {
  74. onHover(index, index + mergedRowSpan - 1);
  75. }
  76. (_a = additionalProps === null || additionalProps === void 0 ? void 0 : additionalProps.onMouseenter) === null || _a === void 0 ? void 0 : _a.call(additionalProps, event);
  77. };
  78. const onMouseleave = event => {
  79. var _a;
  80. const {
  81. record,
  82. additionalProps
  83. } = props;
  84. if (record) {
  85. onHover(-1, -1);
  86. }
  87. (_a = additionalProps === null || additionalProps === void 0 ? void 0 : additionalProps.onMouseleave) === null || _a === void 0 ? void 0 : _a.call(additionalProps, event);
  88. };
  89. const getTitle = vnodes => {
  90. const vnode = (0, _propsUtil.filterEmpty)(vnodes)[0];
  91. if ((0, _vue.isVNode)(vnode)) {
  92. if (vnode.type === _vue.Text) {
  93. return vnode.children;
  94. } else {
  95. return Array.isArray(vnode.children) ? getTitle(vnode.children) : undefined;
  96. }
  97. } else {
  98. return vnode;
  99. }
  100. };
  101. const hoverRef = (0, _vue.shallowRef)(null);
  102. (0, _vue.watch)([hovering, () => props.prefixCls, hoverRef], () => {
  103. const cellDom = (0, _propsUtil.findDOMNode)(hoverRef.value);
  104. if (!cellDom) return;
  105. if (hovering.value) {
  106. (0, _class.addClass)(cellDom, `${props.prefixCls}-cell-row-hover`);
  107. } else {
  108. (0, _class.removeClass)(cellDom, `${props.prefixCls}-cell-row-hover`);
  109. }
  110. });
  111. return () => {
  112. var _a, _b, _c, _d, _e, _f;
  113. const {
  114. prefixCls,
  115. record,
  116. index,
  117. renderIndex,
  118. dataIndex,
  119. customRender,
  120. component: Component = 'td',
  121. fixLeft,
  122. fixRight,
  123. firstFixLeft,
  124. lastFixLeft,
  125. firstFixRight,
  126. lastFixRight,
  127. appendNode = (_a = slots.appendNode) === null || _a === void 0 ? void 0 : _a.call(slots),
  128. additionalProps = {},
  129. ellipsis,
  130. align,
  131. rowType,
  132. isSticky,
  133. column = {},
  134. cellType
  135. } = props;
  136. const cellPrefixCls = `${prefixCls}-cell`;
  137. // ==================== Child Node ====================
  138. let cellProps;
  139. let childNode;
  140. const children = (_b = slots.default) === null || _b === void 0 ? void 0 : _b.call(slots);
  141. if ((0, _valueUtil.validateValue)(children) || cellType === 'header') {
  142. childNode = children;
  143. } else {
  144. const value = (0, _valueUtil.getPathValue)(record, dataIndex);
  145. // Customize render node
  146. childNode = value;
  147. if (customRender) {
  148. const renderData = customRender({
  149. text: value,
  150. value,
  151. record,
  152. index,
  153. renderIndex,
  154. column: column.__originColumn__
  155. });
  156. if (isRenderCell(renderData)) {
  157. if (process.env.NODE_ENV !== 'production') {
  158. (0, _warning.warning)(false, '`columns.customRender` return cell props is deprecated with perf issue, please use `customCell` instead.');
  159. }
  160. childNode = renderData.children;
  161. cellProps = renderData.props;
  162. } else {
  163. childNode = renderData;
  164. }
  165. }
  166. if (!(_legacyUtil.INTERNAL_COL_DEFINE in column) && cellType === 'body' && contextSlots.value.bodyCell && !((_c = column.slots) === null || _c === void 0 ? void 0 : _c.customRender)) {
  167. const child = (0, _vnode.customRenderSlot)(contextSlots.value, 'bodyCell', {
  168. text: value,
  169. value,
  170. record,
  171. index,
  172. column: column.__originColumn__
  173. }, () => {
  174. const fallback = childNode === undefined ? value : childNode;
  175. return [typeof fallback === 'object' && (0, _propsUtil.isValidElement)(fallback) || typeof fallback !== 'object' ? fallback : null];
  176. });
  177. childNode = (0, _propsUtil.flattenChildren)(child);
  178. }
  179. /** maybe we should @deprecated */
  180. if (props.transformCellText) {
  181. childNode = props.transformCellText({
  182. text: childNode,
  183. record,
  184. index,
  185. column: column.__originColumn__
  186. });
  187. }
  188. }
  189. // Not crash if final `childNode` is not validate VueNode
  190. if (typeof childNode === 'object' && !Array.isArray(childNode) && !(0, _vue.isVNode)(childNode)) {
  191. childNode = null;
  192. }
  193. if (ellipsis && (lastFixLeft || firstFixRight)) {
  194. const _childNode = function () {
  195. return childNode;
  196. }();
  197. childNode = (0, _vue.createVNode)("span", {
  198. "class": `${cellPrefixCls}-content`
  199. }, [childNode]);
  200. }
  201. if (Array.isArray(childNode) && childNode.length === 1) {
  202. childNode = childNode[0];
  203. }
  204. const _g = cellProps || {},
  205. {
  206. colSpan: cellColSpan,
  207. rowSpan: cellRowSpan,
  208. style: cellStyle,
  209. class: cellClassName
  210. } = _g,
  211. restCellProps = __rest(_g, ["colSpan", "rowSpan", "style", "class"]);
  212. const mergedColSpan = (_d = cellColSpan !== undefined ? cellColSpan : colSpan.value) !== null && _d !== void 0 ? _d : 1;
  213. const mergedRowSpan = (_e = cellRowSpan !== undefined ? cellRowSpan : rowSpan.value) !== null && _e !== void 0 ? _e : 1;
  214. if (mergedColSpan === 0 || mergedRowSpan === 0) {
  215. return null;
  216. }
  217. // ====================== Fixed =======================
  218. const fixedStyle = {};
  219. const isFixLeft = typeof fixLeft === 'number' && supportSticky.value;
  220. const isFixRight = typeof fixRight === 'number' && supportSticky.value;
  221. if (isFixLeft) {
  222. fixedStyle.position = 'sticky';
  223. fixedStyle.left = `${fixLeft}px`;
  224. }
  225. if (isFixRight) {
  226. fixedStyle.position = 'sticky';
  227. fixedStyle.right = `${fixRight}px`;
  228. }
  229. // ====================== Align =======================
  230. const alignStyle = {};
  231. if (align) {
  232. alignStyle.textAlign = align;
  233. }
  234. // ====================== Render ======================
  235. let title;
  236. const ellipsisConfig = ellipsis === true ? {
  237. showTitle: true
  238. } : ellipsis;
  239. if (ellipsisConfig && (ellipsisConfig.showTitle || rowType === 'header')) {
  240. if (typeof childNode === 'string' || typeof childNode === 'number') {
  241. title = childNode.toString();
  242. } else if ((0, _vue.isVNode)(childNode)) {
  243. title = getTitle([childNode]);
  244. }
  245. }
  246. const componentProps = (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({
  247. title
  248. }, restCellProps), additionalProps), {
  249. colSpan: mergedColSpan !== 1 ? mergedColSpan : null,
  250. rowSpan: mergedRowSpan !== 1 ? mergedRowSpan : null,
  251. class: (0, _classNames.default)(cellPrefixCls, {
  252. [`${cellPrefixCls}-fix-left`]: isFixLeft && supportSticky.value,
  253. [`${cellPrefixCls}-fix-left-first`]: firstFixLeft && supportSticky.value,
  254. [`${cellPrefixCls}-fix-left-last`]: lastFixLeft && supportSticky.value,
  255. [`${cellPrefixCls}-fix-right`]: isFixRight && supportSticky.value,
  256. [`${cellPrefixCls}-fix-right-first`]: firstFixRight && supportSticky.value,
  257. [`${cellPrefixCls}-fix-right-last`]: lastFixRight && supportSticky.value,
  258. [`${cellPrefixCls}-ellipsis`]: ellipsis,
  259. [`${cellPrefixCls}-with-append`]: appendNode,
  260. [`${cellPrefixCls}-fix-sticky`]: (isFixLeft || isFixRight) && isSticky && supportSticky.value
  261. }, additionalProps.class, cellClassName),
  262. onMouseenter: e => {
  263. onMouseenter(e, mergedRowSpan);
  264. },
  265. onMouseleave,
  266. style: [additionalProps.style, alignStyle, fixedStyle, cellStyle]
  267. });
  268. return (0, _vue.createVNode)(Component, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, componentProps), {}, {
  269. "ref": hoverRef
  270. }), {
  271. default: () => [appendNode, childNode, (_f = slots.dragHandle) === null || _f === void 0 ? void 0 : _f.call(slots)]
  272. });
  273. };
  274. }
  275. });