index.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  2. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  3. import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
  4. import _typeof from "@babel/runtime/helpers/esm/typeof";
  5. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  6. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  7. var _excluded = ["children"],
  8. _excluded2 = ["fixed"];
  9. import toArray from "rc-util/es/Children/toArray";
  10. import warning from "rc-util/es/warning";
  11. import * as React from 'react';
  12. import { EXPAND_COLUMN } from "../../constant";
  13. import { INTERNAL_COL_DEFINE } from "../../utils/legacyUtil";
  14. import useWidthColumns from "./useWidthColumns";
  15. export function convertChildrenToColumns(children) {
  16. return toArray(children).filter(function (node) {
  17. return /*#__PURE__*/React.isValidElement(node);
  18. }).map(function (_ref) {
  19. var key = _ref.key,
  20. props = _ref.props;
  21. var nodeChildren = props.children,
  22. restProps = _objectWithoutProperties(props, _excluded);
  23. var column = _objectSpread({
  24. key: key
  25. }, restProps);
  26. if (nodeChildren) {
  27. column.children = convertChildrenToColumns(nodeChildren);
  28. }
  29. return column;
  30. });
  31. }
  32. function filterHiddenColumns(columns) {
  33. return columns.filter(function (column) {
  34. return column && _typeof(column) === 'object' && !column.hidden;
  35. }).map(function (column) {
  36. var subColumns = column.children;
  37. if (subColumns && subColumns.length > 0) {
  38. return _objectSpread(_objectSpread({}, column), {}, {
  39. children: filterHiddenColumns(subColumns)
  40. });
  41. }
  42. return column;
  43. });
  44. }
  45. function flatColumns(columns) {
  46. var parentKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'key';
  47. return columns.filter(function (column) {
  48. return column && _typeof(column) === 'object';
  49. }).reduce(function (list, column, index) {
  50. var fixed = column.fixed;
  51. // Convert `fixed='true'` to `fixed='left'` instead
  52. var parsedFixed = fixed === true ? 'left' : fixed;
  53. var mergedKey = "".concat(parentKey, "-").concat(index);
  54. var subColumns = column.children;
  55. if (subColumns && subColumns.length > 0) {
  56. return [].concat(_toConsumableArray(list), _toConsumableArray(flatColumns(subColumns, mergedKey).map(function (subColum) {
  57. var _subColum$fixed;
  58. return _objectSpread(_objectSpread({}, subColum), {}, {
  59. fixed: (_subColum$fixed = subColum.fixed) !== null && _subColum$fixed !== void 0 ? _subColum$fixed : parsedFixed
  60. });
  61. })));
  62. }
  63. return [].concat(_toConsumableArray(list), [_objectSpread(_objectSpread({
  64. key: mergedKey
  65. }, column), {}, {
  66. fixed: parsedFixed
  67. })]);
  68. }, []);
  69. }
  70. function revertForRtl(columns) {
  71. return columns.map(function (column) {
  72. var fixed = column.fixed,
  73. restProps = _objectWithoutProperties(column, _excluded2);
  74. // Convert `fixed='left'` to `fixed='right'` instead
  75. var parsedFixed = fixed;
  76. if (fixed === 'left') {
  77. parsedFixed = 'right';
  78. } else if (fixed === 'right') {
  79. parsedFixed = 'left';
  80. }
  81. return _objectSpread({
  82. fixed: parsedFixed
  83. }, restProps);
  84. });
  85. }
  86. /**
  87. * Parse `columns` & `children` into `columns`.
  88. */
  89. function useColumns(_ref2, transformColumns) {
  90. var prefixCls = _ref2.prefixCls,
  91. columns = _ref2.columns,
  92. children = _ref2.children,
  93. expandable = _ref2.expandable,
  94. expandedKeys = _ref2.expandedKeys,
  95. columnTitle = _ref2.columnTitle,
  96. getRowKey = _ref2.getRowKey,
  97. onTriggerExpand = _ref2.onTriggerExpand,
  98. expandIcon = _ref2.expandIcon,
  99. rowExpandable = _ref2.rowExpandable,
  100. expandIconColumnIndex = _ref2.expandIconColumnIndex,
  101. _ref2$expandedRowOffs = _ref2.expandedRowOffset,
  102. expandedRowOffset = _ref2$expandedRowOffs === void 0 ? 0 : _ref2$expandedRowOffs,
  103. direction = _ref2.direction,
  104. expandRowByClick = _ref2.expandRowByClick,
  105. columnWidth = _ref2.columnWidth,
  106. fixed = _ref2.fixed,
  107. scrollWidth = _ref2.scrollWidth,
  108. clientWidth = _ref2.clientWidth;
  109. var baseColumns = React.useMemo(function () {
  110. var newColumns = columns || convertChildrenToColumns(children) || [];
  111. return filterHiddenColumns(newColumns.slice());
  112. }, [columns, children]);
  113. // ========================== Expand ==========================
  114. var withExpandColumns = React.useMemo(function () {
  115. if (expandable) {
  116. var cloneColumns = baseColumns.slice();
  117. // >>> Warning if use `expandIconColumnIndex`
  118. if (process.env.NODE_ENV !== 'production' && expandIconColumnIndex >= 0) {
  119. warning(false, '`expandIconColumnIndex` is deprecated. Please use `Table.EXPAND_COLUMN` in `columns` instead.');
  120. }
  121. // >>> Insert expand column if not exist
  122. if (!cloneColumns.includes(EXPAND_COLUMN)) {
  123. var expandColIndex = expandIconColumnIndex || 0;
  124. var insertIndex = expandColIndex === 0 && fixed === 'right' ? baseColumns.length : expandColIndex;
  125. if (insertIndex >= 0) {
  126. cloneColumns.splice(insertIndex, 0, EXPAND_COLUMN);
  127. }
  128. }
  129. // >>> Deduplicate additional expand column
  130. if (process.env.NODE_ENV !== 'production' && cloneColumns.filter(function (c) {
  131. return c === EXPAND_COLUMN;
  132. }).length > 1) {
  133. warning(false, 'There exist more than one `EXPAND_COLUMN` in `columns`.');
  134. }
  135. var expandColumnIndex = cloneColumns.indexOf(EXPAND_COLUMN);
  136. cloneColumns = cloneColumns.filter(function (column, index) {
  137. return column !== EXPAND_COLUMN || index === expandColumnIndex;
  138. });
  139. // >>> Check if expand column need to fixed
  140. var prevColumn = baseColumns[expandColumnIndex];
  141. var fixedColumn;
  142. if (fixed) {
  143. fixedColumn = fixed;
  144. } else {
  145. fixedColumn = prevColumn ? prevColumn.fixed : null;
  146. }
  147. // >>> Create expandable column
  148. var expandColumn = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, INTERNAL_COL_DEFINE, {
  149. className: "".concat(prefixCls, "-expand-icon-col"),
  150. columnType: 'EXPAND_COLUMN'
  151. }), "title", columnTitle), "fixed", fixedColumn), "className", "".concat(prefixCls, "-row-expand-icon-cell")), "width", columnWidth), "render", function render(_, record, index) {
  152. var rowKey = getRowKey(record, index);
  153. var expanded = expandedKeys.has(rowKey);
  154. var recordExpandable = rowExpandable ? rowExpandable(record) : true;
  155. var icon = expandIcon({
  156. prefixCls: prefixCls,
  157. expanded: expanded,
  158. expandable: recordExpandable,
  159. record: record,
  160. onExpand: onTriggerExpand
  161. });
  162. if (expandRowByClick) {
  163. return /*#__PURE__*/React.createElement("span", {
  164. onClick: function onClick(e) {
  165. return e.stopPropagation();
  166. }
  167. }, icon);
  168. }
  169. return icon;
  170. });
  171. return cloneColumns.map(function (col, index) {
  172. var column = col === EXPAND_COLUMN ? expandColumn : col;
  173. if (index < expandedRowOffset) {
  174. return _objectSpread(_objectSpread({}, column), {}, {
  175. fixed: column.fixed || 'left'
  176. });
  177. }
  178. return column;
  179. });
  180. }
  181. if (process.env.NODE_ENV !== 'production' && baseColumns.includes(EXPAND_COLUMN)) {
  182. warning(false, '`expandable` is not config but there exist `EXPAND_COLUMN` in `columns`.');
  183. }
  184. return baseColumns.filter(function (col) {
  185. return col !== EXPAND_COLUMN;
  186. });
  187. // eslint-disable-next-line react-hooks/exhaustive-deps
  188. }, [expandable, baseColumns, getRowKey, expandedKeys, expandIcon, direction, expandedRowOffset]);
  189. // ========================= Transform ========================
  190. var mergedColumns = React.useMemo(function () {
  191. var finalColumns = withExpandColumns;
  192. if (transformColumns) {
  193. finalColumns = transformColumns(finalColumns);
  194. }
  195. // Always provides at least one column for table display
  196. if (!finalColumns.length) {
  197. finalColumns = [{
  198. render: function render() {
  199. return null;
  200. }
  201. }];
  202. }
  203. return finalColumns;
  204. // eslint-disable-next-line react-hooks/exhaustive-deps
  205. }, [transformColumns, withExpandColumns, direction]);
  206. // ========================== Flatten =========================
  207. var flattenColumns = React.useMemo(function () {
  208. if (direction === 'rtl') {
  209. return revertForRtl(flatColumns(mergedColumns));
  210. }
  211. return flatColumns(mergedColumns);
  212. // eslint-disable-next-line react-hooks/exhaustive-deps
  213. }, [mergedColumns, direction, scrollWidth]);
  214. // ========================= Gap Fixed ========================
  215. var hasGapFixed = React.useMemo(function () {
  216. // Fixed: left, since old browser not support `findLastIndex`, we should use reverse loop
  217. var lastLeftIndex = -1;
  218. for (var i = flattenColumns.length - 1; i >= 0; i -= 1) {
  219. var colFixed = flattenColumns[i].fixed;
  220. if (colFixed === 'left' || colFixed === true) {
  221. lastLeftIndex = i;
  222. break;
  223. }
  224. }
  225. if (lastLeftIndex >= 0) {
  226. for (var _i = 0; _i <= lastLeftIndex; _i += 1) {
  227. var _colFixed = flattenColumns[_i].fixed;
  228. if (_colFixed !== 'left' && _colFixed !== true) {
  229. return true;
  230. }
  231. }
  232. }
  233. // Fixed: right
  234. var firstRightIndex = flattenColumns.findIndex(function (_ref3) {
  235. var colFixed = _ref3.fixed;
  236. return colFixed === 'right';
  237. });
  238. if (firstRightIndex >= 0) {
  239. for (var _i2 = firstRightIndex; _i2 < flattenColumns.length; _i2 += 1) {
  240. var _colFixed2 = flattenColumns[_i2].fixed;
  241. if (_colFixed2 !== 'right') {
  242. return true;
  243. }
  244. }
  245. }
  246. return false;
  247. }, [flattenColumns]);
  248. // ========================= FillWidth ========================
  249. var _useWidthColumns = useWidthColumns(flattenColumns, scrollWidth, clientWidth),
  250. _useWidthColumns2 = _slicedToArray(_useWidthColumns, 2),
  251. filledColumns = _useWidthColumns2[0],
  252. realScrollWidth = _useWidthColumns2[1];
  253. return [mergedColumns, filledColumns, realScrollWidth, hasGapFixed];
  254. }
  255. export default useColumns;