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