useSorter.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = useFilterSorter;
  7. exports.getSortData = getSortData;
  8. var _vue = require("vue");
  9. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  10. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  11. var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  12. var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
  13. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  14. var _CaretDownOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/CaretDownOutlined"));
  15. var _CaretUpOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/CaretUpOutlined"));
  16. var _tooltip = _interopRequireDefault(require("../../tooltip"));
  17. var _util = require("../util");
  18. var _classNames3 = _interopRequireDefault(require("../../_util/classNames"));
  19. var _useState3 = _interopRequireDefault(require("../../_util/hooks/useState"));
  20. var ASCEND = 'ascend';
  21. var DESCEND = 'descend';
  22. function getMultiplePriority(column) {
  23. if ((0, _typeof2.default)(column.sorter) === 'object' && typeof column.sorter.multiple === 'number') {
  24. return column.sorter.multiple;
  25. }
  26. return false;
  27. }
  28. function getSortFunction(sorter) {
  29. if (typeof sorter === 'function') {
  30. return sorter;
  31. }
  32. if (sorter && (0, _typeof2.default)(sorter) === 'object' && sorter.compare) {
  33. return sorter.compare;
  34. }
  35. return false;
  36. }
  37. function nextSortDirection(sortDirections, current) {
  38. if (!current) {
  39. return sortDirections[0];
  40. }
  41. return sortDirections[sortDirections.indexOf(current) + 1];
  42. }
  43. function collectSortStates(columns, init, pos) {
  44. var sortStates = [];
  45. function pushState(column, columnPos) {
  46. sortStates.push({
  47. column: column,
  48. key: (0, _util.getColumnKey)(column, columnPos),
  49. multiplePriority: getMultiplePriority(column),
  50. sortOrder: column.sortOrder
  51. });
  52. }
  53. (columns || []).forEach(function (column, index) {
  54. var columnPos = (0, _util.getColumnPos)(index, pos);
  55. if (column.children) {
  56. if ('sortOrder' in column) {
  57. // Controlled
  58. pushState(column, columnPos);
  59. }
  60. sortStates = [].concat((0, _toConsumableArray2.default)(sortStates), (0, _toConsumableArray2.default)(collectSortStates(column.children, init, columnPos)));
  61. } else if (column.sorter) {
  62. if ('sortOrder' in column) {
  63. // Controlled
  64. pushState(column, columnPos);
  65. } else if (init && column.defaultSortOrder) {
  66. // Default sorter
  67. sortStates.push({
  68. column: column,
  69. key: (0, _util.getColumnKey)(column, columnPos),
  70. multiplePriority: getMultiplePriority(column),
  71. sortOrder: column.defaultSortOrder
  72. });
  73. }
  74. }
  75. });
  76. return sortStates;
  77. }
  78. function injectSorter(prefixCls, columns, sorterSates, triggerSorter, defaultSortDirections, tableLocale, tableShowSorterTooltip, pos) {
  79. return (columns || []).map(function (column, index) {
  80. var columnPos = (0, _util.getColumnPos)(index, pos);
  81. var newColumn = column;
  82. if (newColumn.sorter) {
  83. var sortDirections = newColumn.sortDirections || defaultSortDirections;
  84. var showSorterTooltip = newColumn.showSorterTooltip === undefined ? tableShowSorterTooltip : newColumn.showSorterTooltip;
  85. var columnKey = (0, _util.getColumnKey)(newColumn, columnPos);
  86. var sorterState = sorterSates.find(function (_ref) {
  87. var key = _ref.key;
  88. return key === columnKey;
  89. });
  90. var sorterOrder = sorterState ? sorterState.sortOrder : null;
  91. var nextSortOrder = nextSortDirection(sortDirections, sorterOrder);
  92. var upNode = sortDirections.includes(ASCEND) && (0, _vue.createVNode)(_CaretUpOutlined.default, {
  93. "class": (0, _classNames3.default)("".concat(prefixCls, "-column-sorter-up"), {
  94. active: sorterOrder === ASCEND
  95. })
  96. }, null);
  97. var downNode = sortDirections.includes(DESCEND) && (0, _vue.createVNode)(_CaretDownOutlined.default, {
  98. "class": (0, _classNames3.default)("".concat(prefixCls, "-column-sorter-down"), {
  99. active: sorterOrder === DESCEND
  100. })
  101. }, null);
  102. var _ref2 = tableLocale || {},
  103. cancelSort = _ref2.cancelSort,
  104. triggerAsc = _ref2.triggerAsc,
  105. triggerDesc = _ref2.triggerDesc;
  106. var sortTip = cancelSort;
  107. if (nextSortOrder === DESCEND) {
  108. sortTip = triggerDesc;
  109. } else if (nextSortOrder === ASCEND) {
  110. sortTip = triggerAsc;
  111. }
  112. var tooltipProps = (0, _typeof2.default)(showSorterTooltip) === 'object' ? showSorterTooltip : {
  113. title: sortTip
  114. };
  115. newColumn = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, newColumn), {}, {
  116. className: (0, _classNames3.default)(newColumn.className, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-column-sort"), sorterOrder)),
  117. title: function title(renderProps) {
  118. var renderSortTitle = (0, _vue.createVNode)("div", {
  119. "class": "".concat(prefixCls, "-column-sorters")
  120. }, [(0, _vue.createVNode)("span", {
  121. "class": "".concat(prefixCls, "-column-title")
  122. }, [(0, _util.renderColumnTitle)(column.title, renderProps)]), (0, _vue.createVNode)("span", {
  123. "class": (0, _classNames3.default)("".concat(prefixCls, "-column-sorter"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-column-sorter-full"), !!(upNode && downNode)))
  124. }, [(0, _vue.createVNode)("span", {
  125. "class": "".concat(prefixCls, "-column-sorter-inner")
  126. }, [upNode, downNode])])]);
  127. return showSorterTooltip ? (0, _vue.createVNode)(_tooltip.default, tooltipProps, {
  128. default: function _default() {
  129. return [renderSortTitle];
  130. }
  131. }) : renderSortTitle;
  132. },
  133. customHeaderCell: function customHeaderCell(col) {
  134. var cell = column.customHeaderCell && column.customHeaderCell(col) || {};
  135. var originOnClick = cell.onClick;
  136. cell.onClick = function (event) {
  137. triggerSorter({
  138. column: column,
  139. key: columnKey,
  140. sortOrder: nextSortOrder,
  141. multiplePriority: getMultiplePriority(column)
  142. });
  143. if (originOnClick) {
  144. originOnClick(event);
  145. }
  146. };
  147. cell.class = (0, _classNames3.default)(cell.class, "".concat(prefixCls, "-column-has-sorters"));
  148. return cell;
  149. }
  150. });
  151. }
  152. if ('children' in newColumn) {
  153. newColumn = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, newColumn), {}, {
  154. children: injectSorter(prefixCls, newColumn.children, sorterSates, triggerSorter, defaultSortDirections, tableLocale, tableShowSorterTooltip, columnPos)
  155. });
  156. }
  157. return newColumn;
  158. });
  159. }
  160. function stateToInfo(sorterStates) {
  161. var column = sorterStates.column,
  162. sortOrder = sorterStates.sortOrder;
  163. return {
  164. column: column,
  165. order: sortOrder,
  166. field: column.dataIndex,
  167. columnKey: column.key
  168. };
  169. }
  170. function generateSorterInfo(sorterStates) {
  171. var list = sorterStates.filter(function (_ref3) {
  172. var sortOrder = _ref3.sortOrder;
  173. return sortOrder;
  174. }).map(stateToInfo);
  175. // =========== Legacy compatible support ===========
  176. // https://github.com/ant-design/ant-design/pull/19226
  177. if (list.length === 0 && sorterStates.length) {
  178. return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, stateToInfo(sorterStates[sorterStates.length - 1])), {}, {
  179. column: undefined
  180. });
  181. }
  182. if (list.length <= 1) {
  183. return list[0] || {};
  184. }
  185. return list;
  186. }
  187. function getSortData(data, sortStates, childrenColumnName) {
  188. var innerSorterStates = sortStates.slice().sort(function (a, b) {
  189. return b.multiplePriority - a.multiplePriority;
  190. });
  191. var cloneData = data.slice();
  192. var runningSorters = innerSorterStates.filter(function (_ref4) {
  193. var sorter = _ref4.column.sorter,
  194. sortOrder = _ref4.sortOrder;
  195. return getSortFunction(sorter) && sortOrder;
  196. });
  197. // Skip if no sorter needed
  198. if (!runningSorters.length) {
  199. return cloneData;
  200. }
  201. return cloneData.sort(function (record1, record2) {
  202. for (var i = 0; i < runningSorters.length; i += 1) {
  203. var sorterState = runningSorters[i];
  204. var sorter = sorterState.column.sorter,
  205. sortOrder = sorterState.sortOrder;
  206. var compareFn = getSortFunction(sorter);
  207. if (compareFn && sortOrder) {
  208. var compareResult = compareFn(record1, record2, sortOrder);
  209. if (compareResult !== 0) {
  210. return sortOrder === ASCEND ? compareResult : -compareResult;
  211. }
  212. }
  213. }
  214. return 0;
  215. }).map(function (record) {
  216. var subRecords = record[childrenColumnName];
  217. if (subRecords) {
  218. return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, record), {}, (0, _defineProperty2.default)({}, childrenColumnName, getSortData(subRecords, sortStates, childrenColumnName)));
  219. }
  220. return record;
  221. });
  222. }
  223. function useFilterSorter(_ref5) {
  224. var prefixCls = _ref5.prefixCls,
  225. mergedColumns = _ref5.mergedColumns,
  226. onSorterChange = _ref5.onSorterChange,
  227. sortDirections = _ref5.sortDirections,
  228. tableLocale = _ref5.tableLocale,
  229. showSorterTooltip = _ref5.showSorterTooltip;
  230. var _useState = (0, _useState3.default)(collectSortStates(mergedColumns.value, true)),
  231. _useState2 = (0, _slicedToArray2.default)(_useState, 2),
  232. sortStates = _useState2[0],
  233. setSortStates = _useState2[1];
  234. var mergedSorterStates = (0, _vue.computed)(function () {
  235. var validate = true;
  236. var collectedStates = collectSortStates(mergedColumns.value, false);
  237. // Return if not controlled
  238. if (!collectedStates.length) {
  239. return sortStates.value;
  240. }
  241. var validateStates = [];
  242. function patchStates(state) {
  243. if (validate) {
  244. validateStates.push(state);
  245. } else {
  246. validateStates.push((0, _objectSpread3.default)((0, _objectSpread3.default)({}, state), {}, {
  247. sortOrder: null
  248. }));
  249. }
  250. }
  251. var multipleMode = null;
  252. collectedStates.forEach(function (state) {
  253. if (multipleMode === null) {
  254. patchStates(state);
  255. if (state.sortOrder) {
  256. if (state.multiplePriority === false) {
  257. validate = false;
  258. } else {
  259. multipleMode = true;
  260. }
  261. }
  262. } else if (multipleMode && state.multiplePriority !== false) {
  263. patchStates(state);
  264. } else {
  265. validate = false;
  266. patchStates(state);
  267. }
  268. });
  269. return validateStates;
  270. });
  271. // Get render columns title required props
  272. var columnTitleSorterProps = (0, _vue.computed)(function () {
  273. var sortColumns = mergedSorterStates.value.map(function (_ref6) {
  274. var column = _ref6.column,
  275. sortOrder = _ref6.sortOrder;
  276. return {
  277. column: column,
  278. order: sortOrder
  279. };
  280. });
  281. return {
  282. sortColumns: sortColumns,
  283. // Legacy
  284. sortColumn: sortColumns[0] && sortColumns[0].column,
  285. sortOrder: sortColumns[0] && sortColumns[0].order
  286. };
  287. });
  288. function triggerSorter(sortState) {
  289. var newSorterStates;
  290. if (sortState.multiplePriority === false || !mergedSorterStates.value.length || mergedSorterStates.value[0].multiplePriority === false) {
  291. newSorterStates = [sortState];
  292. } else {
  293. newSorterStates = [].concat((0, _toConsumableArray2.default)(mergedSorterStates.value.filter(function (_ref7) {
  294. var key = _ref7.key;
  295. return key !== sortState.key;
  296. })), [sortState]);
  297. }
  298. setSortStates(newSorterStates);
  299. onSorterChange(generateSorterInfo(newSorterStates), newSorterStates);
  300. }
  301. var transformColumns = function transformColumns(innerColumns) {
  302. return injectSorter(prefixCls.value, innerColumns, mergedSorterStates.value, triggerSorter, sortDirections.value, tableLocale.value, showSorterTooltip.value);
  303. };
  304. var sorters = (0, _vue.computed)(function () {
  305. return generateSorterInfo(mergedSorterStates.value);
  306. });
  307. return [transformColumns, mergedSorterStates, columnTitleSorterProps, sorters];
  308. }