index.js 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _typeof from "@babel/runtime/helpers/esm/typeof";
  3. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  4. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  5. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  6. import { useContext } from '@rc-component/context';
  7. import classNames from 'classnames';
  8. import * as React from 'react';
  9. import TableContext from "../context/TableContext";
  10. import devRenderTimes from "../hooks/useRenderTimes";
  11. import useCellRender from "./useCellRender";
  12. import useHoverState from "./useHoverState";
  13. import { useEvent } from 'rc-util';
  14. var getTitleFromCellRenderChildren = function getTitleFromCellRenderChildren(_ref) {
  15. var ellipsis = _ref.ellipsis,
  16. rowType = _ref.rowType,
  17. children = _ref.children;
  18. var title;
  19. var ellipsisConfig = ellipsis === true ? {
  20. showTitle: true
  21. } : ellipsis;
  22. if (ellipsisConfig && (ellipsisConfig.showTitle || rowType === 'header')) {
  23. if (typeof children === 'string' || typeof children === 'number') {
  24. title = children.toString();
  25. } else if ( /*#__PURE__*/React.isValidElement(children) && typeof children.props.children === 'string') {
  26. title = children.props.children;
  27. }
  28. }
  29. return title;
  30. };
  31. function Cell(props) {
  32. var _ref2, _ref3, _legacyCellProps$colS, _ref4, _ref5, _legacyCellProps$rowS, _additionalProps$titl, _classNames;
  33. if (process.env.NODE_ENV !== 'production') {
  34. devRenderTimes(props);
  35. }
  36. var Component = props.component,
  37. children = props.children,
  38. ellipsis = props.ellipsis,
  39. scope = props.scope,
  40. prefixCls = props.prefixCls,
  41. className = props.className,
  42. align = props.align,
  43. record = props.record,
  44. render = props.render,
  45. dataIndex = props.dataIndex,
  46. renderIndex = props.renderIndex,
  47. shouldCellUpdate = props.shouldCellUpdate,
  48. index = props.index,
  49. rowType = props.rowType,
  50. colSpan = props.colSpan,
  51. rowSpan = props.rowSpan,
  52. fixLeft = props.fixLeft,
  53. fixRight = props.fixRight,
  54. firstFixLeft = props.firstFixLeft,
  55. lastFixLeft = props.lastFixLeft,
  56. firstFixRight = props.firstFixRight,
  57. lastFixRight = props.lastFixRight,
  58. appendNode = props.appendNode,
  59. _props$additionalProp = props.additionalProps,
  60. additionalProps = _props$additionalProp === void 0 ? {} : _props$additionalProp,
  61. isSticky = props.isSticky;
  62. var cellPrefixCls = "".concat(prefixCls, "-cell");
  63. var _useContext = useContext(TableContext, ['supportSticky', 'allColumnsFixedLeft', 'rowHoverable']),
  64. supportSticky = _useContext.supportSticky,
  65. allColumnsFixedLeft = _useContext.allColumnsFixedLeft,
  66. rowHoverable = _useContext.rowHoverable;
  67. // ====================== Value =======================
  68. var _useCellRender = useCellRender(record, dataIndex, renderIndex, children, render, shouldCellUpdate),
  69. _useCellRender2 = _slicedToArray(_useCellRender, 2),
  70. childNode = _useCellRender2[0],
  71. legacyCellProps = _useCellRender2[1];
  72. // ====================== Fixed =======================
  73. var fixedStyle = {};
  74. var isFixLeft = typeof fixLeft === 'number' && supportSticky;
  75. var isFixRight = typeof fixRight === 'number' && supportSticky;
  76. if (isFixLeft) {
  77. fixedStyle.position = 'sticky';
  78. fixedStyle.left = fixLeft;
  79. }
  80. if (isFixRight) {
  81. fixedStyle.position = 'sticky';
  82. fixedStyle.right = fixRight;
  83. }
  84. // ================ RowSpan & ColSpan =================
  85. var mergedColSpan = (_ref2 = (_ref3 = (_legacyCellProps$colS = legacyCellProps === null || legacyCellProps === void 0 ? void 0 : legacyCellProps.colSpan) !== null && _legacyCellProps$colS !== void 0 ? _legacyCellProps$colS : additionalProps.colSpan) !== null && _ref3 !== void 0 ? _ref3 : colSpan) !== null && _ref2 !== void 0 ? _ref2 : 1;
  86. var mergedRowSpan = (_ref4 = (_ref5 = (_legacyCellProps$rowS = legacyCellProps === null || legacyCellProps === void 0 ? void 0 : legacyCellProps.rowSpan) !== null && _legacyCellProps$rowS !== void 0 ? _legacyCellProps$rowS : additionalProps.rowSpan) !== null && _ref5 !== void 0 ? _ref5 : rowSpan) !== null && _ref4 !== void 0 ? _ref4 : 1;
  87. // ====================== Hover =======================
  88. var _useHoverState = useHoverState(index, mergedRowSpan),
  89. _useHoverState2 = _slicedToArray(_useHoverState, 2),
  90. hovering = _useHoverState2[0],
  91. onHover = _useHoverState2[1];
  92. var onMouseEnter = useEvent(function (event) {
  93. var _additionalProps$onMo;
  94. if (record) {
  95. onHover(index, index + mergedRowSpan - 1);
  96. }
  97. additionalProps === null || additionalProps === void 0 || (_additionalProps$onMo = additionalProps.onMouseEnter) === null || _additionalProps$onMo === void 0 || _additionalProps$onMo.call(additionalProps, event);
  98. });
  99. var onMouseLeave = useEvent(function (event) {
  100. var _additionalProps$onMo2;
  101. if (record) {
  102. onHover(-1, -1);
  103. }
  104. additionalProps === null || additionalProps === void 0 || (_additionalProps$onMo2 = additionalProps.onMouseLeave) === null || _additionalProps$onMo2 === void 0 || _additionalProps$onMo2.call(additionalProps, event);
  105. });
  106. // ====================== Render ======================
  107. if (mergedColSpan === 0 || mergedRowSpan === 0) {
  108. return null;
  109. }
  110. // >>>>> Title
  111. var title = (_additionalProps$titl = additionalProps.title) !== null && _additionalProps$titl !== void 0 ? _additionalProps$titl : getTitleFromCellRenderChildren({
  112. rowType: rowType,
  113. ellipsis: ellipsis,
  114. children: childNode
  115. });
  116. // >>>>> ClassName
  117. var mergedClassName = classNames(cellPrefixCls, className, (_classNames = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classNames, "".concat(cellPrefixCls, "-fix-left"), isFixLeft && supportSticky), "".concat(cellPrefixCls, "-fix-left-first"), firstFixLeft && supportSticky), "".concat(cellPrefixCls, "-fix-left-last"), lastFixLeft && supportSticky), "".concat(cellPrefixCls, "-fix-left-all"), lastFixLeft && allColumnsFixedLeft && supportSticky), "".concat(cellPrefixCls, "-fix-right"), isFixRight && supportSticky), "".concat(cellPrefixCls, "-fix-right-first"), firstFixRight && supportSticky), "".concat(cellPrefixCls, "-fix-right-last"), lastFixRight && supportSticky), "".concat(cellPrefixCls, "-ellipsis"), ellipsis), "".concat(cellPrefixCls, "-with-append"), appendNode), "".concat(cellPrefixCls, "-fix-sticky"), (isFixLeft || isFixRight) && isSticky && supportSticky), _defineProperty(_classNames, "".concat(cellPrefixCls, "-row-hover"), !legacyCellProps && hovering)), additionalProps.className, legacyCellProps === null || legacyCellProps === void 0 ? void 0 : legacyCellProps.className);
  118. // >>>>> Style
  119. var alignStyle = {};
  120. if (align) {
  121. alignStyle.textAlign = align;
  122. }
  123. // The order is important since user can overwrite style.
  124. // For example ant-design/ant-design#51763
  125. var mergedStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, legacyCellProps === null || legacyCellProps === void 0 ? void 0 : legacyCellProps.style), fixedStyle), alignStyle), additionalProps.style);
  126. // >>>>> Children Node
  127. var mergedChildNode = childNode;
  128. // Not crash if final `childNode` is not validate ReactNode
  129. if (_typeof(mergedChildNode) === 'object' && !Array.isArray(mergedChildNode) && ! /*#__PURE__*/React.isValidElement(mergedChildNode)) {
  130. mergedChildNode = null;
  131. }
  132. if (ellipsis && (lastFixLeft || firstFixRight)) {
  133. mergedChildNode = /*#__PURE__*/React.createElement("span", {
  134. className: "".concat(cellPrefixCls, "-content")
  135. }, mergedChildNode);
  136. }
  137. return /*#__PURE__*/React.createElement(Component, _extends({}, legacyCellProps, additionalProps, {
  138. className: mergedClassName,
  139. style: mergedStyle
  140. // A11y
  141. ,
  142. title: title,
  143. scope: scope
  144. // Hover
  145. ,
  146. onMouseEnter: rowHoverable ? onMouseEnter : undefined,
  147. onMouseLeave: rowHoverable ? onMouseLeave : undefined
  148. //Span
  149. ,
  150. colSpan: mergedColSpan !== 1 ? mergedColSpan : null,
  151. rowSpan: mergedRowSpan !== 1 ? mergedRowSpan : null
  152. }), appendNode, mergedChildNode);
  153. }
  154. export default /*#__PURE__*/React.memo(Cell);