useColumns.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  3. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  4. import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
  5. var _excluded = ["fixed"];
  6. import { createVNode as _createVNode } from "vue";
  7. import { warning } from '../../vc-util/warning';
  8. import { computed, watchEffect } from 'vue';
  9. import { INTERNAL_COL_DEFINE } from '../utils/legacyUtil';
  10. import { EXPAND_COLUMN } from '../constant';
  11. function flatColumns(columns) {
  12. return columns.reduce(function (list, column) {
  13. var fixed = column.fixed;
  14. // Convert `fixed='true'` to `fixed='left'` instead
  15. var parsedFixed = fixed === true ? 'left' : fixed;
  16. var subColumns = column.children;
  17. if (subColumns && subColumns.length > 0) {
  18. return [].concat(_toConsumableArray(list), _toConsumableArray(flatColumns(subColumns).map(function (subColum) {
  19. return _objectSpread({
  20. fixed: parsedFixed
  21. }, subColum);
  22. })));
  23. }
  24. return [].concat(_toConsumableArray(list), [_objectSpread(_objectSpread({}, column), {}, {
  25. fixed: parsedFixed
  26. })]);
  27. }, []);
  28. }
  29. function warningFixed(flattenColumns) {
  30. var allFixLeft = true;
  31. for (var i = 0; i < flattenColumns.length; i += 1) {
  32. var col = flattenColumns[i];
  33. if (allFixLeft && col.fixed !== 'left') {
  34. allFixLeft = false;
  35. } else if (!allFixLeft && col.fixed === 'left') {
  36. warning(false, "Index ".concat(i - 1, " of `columns` missing `fixed='left'` prop."));
  37. break;
  38. }
  39. }
  40. var allFixRight = true;
  41. for (var _i = flattenColumns.length - 1; _i >= 0; _i -= 1) {
  42. var _col = flattenColumns[_i];
  43. if (allFixRight && _col.fixed !== 'right') {
  44. allFixRight = false;
  45. } else if (!allFixRight && _col.fixed === 'right') {
  46. warning(false, "Index ".concat(_i + 1, " of `columns` missing `fixed='right'` prop."));
  47. break;
  48. }
  49. }
  50. }
  51. function revertForRtl(columns) {
  52. return columns.map(function (column) {
  53. var fixed = column.fixed,
  54. restProps = _objectWithoutProperties(column, _excluded);
  55. // Convert `fixed='left'` to `fixed='right'` instead
  56. var parsedFixed = fixed;
  57. if (fixed === 'left') {
  58. parsedFixed = 'right';
  59. } else if (fixed === 'right') {
  60. parsedFixed = 'left';
  61. }
  62. return _objectSpread({
  63. fixed: parsedFixed
  64. }, restProps);
  65. });
  66. }
  67. /**
  68. * Parse `columns` & `children` into `columns`.
  69. */
  70. function useColumns(_ref, transformColumns) {
  71. var prefixCls = _ref.prefixCls,
  72. baseColumns = _ref.columns,
  73. expandable = _ref.expandable,
  74. expandedKeys = _ref.expandedKeys,
  75. getRowKey = _ref.getRowKey,
  76. onTriggerExpand = _ref.onTriggerExpand,
  77. expandIcon = _ref.expandIcon,
  78. rowExpandable = _ref.rowExpandable,
  79. expandIconColumnIndex = _ref.expandIconColumnIndex,
  80. direction = _ref.direction,
  81. expandRowByClick = _ref.expandRowByClick,
  82. expandColumnWidth = _ref.expandColumnWidth,
  83. expandFixed = _ref.expandFixed;
  84. // Add expand column
  85. var withExpandColumns = computed(function () {
  86. if (expandable.value) {
  87. var _expandColumn;
  88. var cloneColumns = baseColumns.value.slice();
  89. // >>> Warning if use `expandIconColumnIndex`
  90. if (process.env.NODE_ENV !== 'production' && expandIconColumnIndex.value >= 0) {
  91. warning(false, '`expandIconColumnIndex` is deprecated. Please use `Table.EXPAND_COLUMN` in `columns` instead.');
  92. }
  93. // >>> Insert expand column if not exist
  94. if (!cloneColumns.includes(EXPAND_COLUMN)) {
  95. var expandColIndex = expandIconColumnIndex.value || 0;
  96. if (expandColIndex >= 0) {
  97. cloneColumns.splice(expandColIndex, 0, EXPAND_COLUMN);
  98. }
  99. }
  100. // >>> Deduplicate additional expand column
  101. if (process.env.NODE_ENV !== 'production' && cloneColumns.filter(function (c) {
  102. return c === EXPAND_COLUMN;
  103. }).length > 1) {
  104. warning(false, 'There exist more than one `EXPAND_COLUMN` in `columns`.');
  105. }
  106. var expandColumnIndex = cloneColumns.indexOf(EXPAND_COLUMN);
  107. cloneColumns = cloneColumns.filter(function (column, index) {
  108. return column !== EXPAND_COLUMN || index === expandColumnIndex;
  109. });
  110. // >>> Check if expand column need to fixed
  111. var prevColumn = baseColumns.value[expandColumnIndex];
  112. var fixedColumn;
  113. if ((expandFixed.value === 'left' || expandFixed.value) && !expandIconColumnIndex.value) {
  114. fixedColumn = 'left';
  115. } else if ((expandFixed.value === 'right' || expandFixed.value) && expandIconColumnIndex.value === baseColumns.value.length) {
  116. fixedColumn = 'right';
  117. } else {
  118. fixedColumn = prevColumn ? prevColumn.fixed : null;
  119. }
  120. var expandedKeysValue = expandedKeys.value;
  121. var rowExpandableValue = rowExpandable.value;
  122. var expandIconValue = expandIcon.value;
  123. var prefixClsValue = prefixCls.value;
  124. var expandRowByClickValue = expandRowByClick.value;
  125. // >>> Create expandable column
  126. var expandColumn = (_expandColumn = {}, _defineProperty(_expandColumn, INTERNAL_COL_DEFINE, {
  127. class: "".concat(prefixCls.value, "-expand-icon-col"),
  128. columnType: 'EXPAND_COLUMN'
  129. }), _defineProperty(_expandColumn, "title", ''), _defineProperty(_expandColumn, "fixed", fixedColumn), _defineProperty(_expandColumn, "class", "".concat(prefixCls.value, "-row-expand-icon-cell")), _defineProperty(_expandColumn, "width", expandColumnWidth.value), _defineProperty(_expandColumn, "customRender", function customRender(_ref2) {
  130. var record = _ref2.record,
  131. index = _ref2.index;
  132. var rowKey = getRowKey.value(record, index);
  133. var expanded = expandedKeysValue.has(rowKey);
  134. var recordExpandable = rowExpandableValue ? rowExpandableValue(record) : true;
  135. var icon = expandIconValue({
  136. prefixCls: prefixClsValue,
  137. expanded: expanded,
  138. expandable: recordExpandable,
  139. record: record,
  140. onExpand: onTriggerExpand
  141. });
  142. if (expandRowByClickValue) {
  143. return _createVNode("span", {
  144. "onClick": function onClick(e) {
  145. return e.stopPropagation();
  146. }
  147. }, [icon]);
  148. }
  149. return icon;
  150. }), _expandColumn);
  151. return cloneColumns.map(function (col) {
  152. return col === EXPAND_COLUMN ? expandColumn : col;
  153. });
  154. }
  155. if (process.env.NODE_ENV !== 'production' && baseColumns.value.includes(EXPAND_COLUMN)) {
  156. warning(false, '`expandable` is not config but there exist `EXPAND_COLUMN` in `columns`.');
  157. }
  158. return baseColumns.value.filter(function (col) {
  159. return col !== EXPAND_COLUMN;
  160. });
  161. });
  162. var mergedColumns = computed(function () {
  163. var finalColumns = withExpandColumns.value;
  164. if (transformColumns.value) {
  165. finalColumns = transformColumns.value(finalColumns);
  166. }
  167. // Always provides at least one column for table display
  168. if (!finalColumns.length) {
  169. finalColumns = [{
  170. customRender: function customRender() {
  171. return null;
  172. }
  173. }];
  174. }
  175. return finalColumns;
  176. });
  177. var flattenColumns = computed(function () {
  178. if (direction.value === 'rtl') {
  179. return revertForRtl(flatColumns(mergedColumns.value));
  180. }
  181. return flatColumns(mergedColumns.value);
  182. });
  183. // Only check out of production since it's waste for each render
  184. if (process.env.NODE_ENV !== 'production') {
  185. watchEffect(function () {
  186. setTimeout(function () {
  187. warningFixed(flattenColumns.value);
  188. });
  189. });
  190. }
  191. return [mergedColumns, flattenColumns];
  192. }
  193. export default useColumns;