useColumns.js 7.6 KB

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