import CaretDownOutlined from '@ant-design/icons/CaretDownOutlined'; import CaretUpOutlined from '@ant-design/icons/CaretUpOutlined'; import classNames from 'classnames'; import KeyCode from 'rc-util/lib/KeyCode'; import * as React from 'react'; import type { TooltipProps } from '../../tooltip'; import Tooltip from '../../tooltip'; import type { ColumnGroupType, ColumnsType, ColumnTitleProps, ColumnType, CompareFn, Key, SorterResult, SortOrder, TableLocale, TransformColumns, } from '../interface'; import { getColumnKey, getColumnPos, renderColumnTitle, safeColumnTitle } from '../util'; const ASCEND = 'ascend'; const DESCEND = 'descend'; function getMultiplePriority(column: ColumnType): number | false { if (typeof column.sorter === 'object' && typeof column.sorter.multiple === 'number') { return column.sorter.multiple; } return false; } function getSortFunction( sorter: ColumnType['sorter'], ): CompareFn | false { if (typeof sorter === 'function') { return sorter; } if (sorter && typeof sorter === 'object' && sorter.compare) { return sorter.compare; } return false; } function nextSortDirection(sortDirections: SortOrder[], current: SortOrder | null) { if (!current) { return sortDirections[0]; } return sortDirections[sortDirections.indexOf(current) + 1]; } export interface SortState { column: ColumnType; key: Key; sortOrder: SortOrder | null; multiplePriority: number | false; } function collectSortStates( columns: ColumnsType, init: boolean, pos?: string, ): SortState[] { let sortStates: SortState[] = []; function pushState(column: ColumnsType[number], columnPos: string) { sortStates.push({ column, key: getColumnKey(column, columnPos), multiplePriority: getMultiplePriority(column), sortOrder: column.sortOrder!, }); } (columns || []).forEach((column, index) => { const columnPos = getColumnPos(index, pos); if ((column as ColumnGroupType).children) { if ('sortOrder' in column) { // Controlled pushState(column, columnPos); } sortStates = [ ...sortStates, ...collectSortStates((column as ColumnGroupType).children, init, columnPos), ]; } else if (column.sorter) { if ('sortOrder' in column) { // Controlled pushState(column, columnPos); } else if (init && column.defaultSortOrder) { // Default sorter sortStates.push({ column, key: getColumnKey(column, columnPos), multiplePriority: getMultiplePriority(column), sortOrder: column.defaultSortOrder!, }); } } }); return sortStates; } function injectSorter( prefixCls: string, columns: ColumnsType, sorterStates: SortState[], triggerSorter: (sorterSates: SortState) => void, defaultSortDirections: SortOrder[], tableLocale?: TableLocale, tableShowSorterTooltip?: boolean | TooltipProps, pos?: string, ): ColumnsType { return (columns || []).map((column, index) => { const columnPos = getColumnPos(index, pos); let newColumn: ColumnsType[number] = column; if (newColumn.sorter) { const sortDirections: SortOrder[] = newColumn.sortDirections || defaultSortDirections; const showSorterTooltip = newColumn.showSorterTooltip === undefined ? tableShowSorterTooltip : newColumn.showSorterTooltip; const columnKey = getColumnKey(newColumn, columnPos); const sorterState = sorterStates.find(({ key }) => key === columnKey); const sorterOrder = sorterState ? sorterState.sortOrder : null; const nextSortOrder = nextSortDirection(sortDirections, sorterOrder); let sorter: React.ReactNode; if (column.sortIcon) { sorter = column.sortIcon({ sorterOrder }); } else { const upNode: React.ReactNode = sortDirections.includes(ASCEND) && ( ); const downNode: React.ReactNode = sortDirections.includes(DESCEND) && ( ); sorter = ( ); } const { cancelSort, triggerAsc, triggerDesc } = tableLocale || {}; let sortTip: string | undefined = cancelSort; if (nextSortOrder === DESCEND) { sortTip = triggerDesc; } else if (nextSortOrder === ASCEND) { sortTip = triggerAsc; } const tooltipProps: TooltipProps = typeof showSorterTooltip === 'object' ? showSorterTooltip : { title: sortTip }; newColumn = { ...newColumn, className: classNames(newColumn.className, { [`${prefixCls}-column-sort`]: sorterOrder }), title: (renderProps: ColumnTitleProps) => { const renderSortTitle = (
{renderColumnTitle(column.title, renderProps)} {sorter}
); return showSorterTooltip ? ( {renderSortTitle} ) : ( renderSortTitle ); }, onHeaderCell: (col) => { const cell: React.HTMLAttributes = (column.onHeaderCell && column.onHeaderCell(col)) || {}; const originOnClick = cell.onClick; const originOKeyDown = cell.onKeyDown; cell.onClick = (event: React.MouseEvent) => { triggerSorter({ column, key: columnKey, sortOrder: nextSortOrder, multiplePriority: getMultiplePriority(column), }); originOnClick?.(event); }; cell.onKeyDown = (event: React.KeyboardEvent) => { if (event.keyCode === KeyCode.ENTER) { triggerSorter({ column, key: columnKey, sortOrder: nextSortOrder, multiplePriority: getMultiplePriority(column), }); originOKeyDown?.(event); } }; const renderTitle = safeColumnTitle(column.title, {}); const displayTitle = renderTitle?.toString(); // Inform the screen-reader so it can tell the visually impaired user which column is sorted if (sorterOrder) { cell['aria-sort'] = sorterOrder === 'ascend' ? 'ascending' : 'descending'; } else { cell['aria-label'] = displayTitle || ''; } cell.className = classNames(cell.className, `${prefixCls}-column-has-sorters`); cell.tabIndex = 0; if (column.ellipsis) { cell.title = (renderTitle ?? '').toString(); } return cell; }, }; } if ('children' in newColumn) { newColumn = { ...newColumn, children: injectSorter( prefixCls, newColumn.children, sorterStates, triggerSorter, defaultSortDirections, tableLocale, tableShowSorterTooltip, columnPos, ), }; } return newColumn; }); } function stateToInfo(sorterStates: SortState) { const { column, sortOrder } = sorterStates; return { column, order: sortOrder, field: column.dataIndex, columnKey: column.key }; } function generateSorterInfo( sorterStates: SortState[], ): SorterResult | SorterResult[] { const list = sorterStates.filter(({ sortOrder }) => sortOrder).map(stateToInfo); // =========== Legacy compatible support =========== // https://github.com/ant-design/ant-design/pull/19226 if (list.length === 0 && sorterStates.length) { return { ...stateToInfo(sorterStates[sorterStates.length - 1]), column: undefined, }; } if (list.length <= 1) { return list[0] || {}; } return list; } export function getSortData( data: readonly RecordType[], sortStates: SortState[], childrenColumnName: string, ): RecordType[] { const innerSorterStates = sortStates .slice() .sort((a, b) => (b.multiplePriority as number) - (a.multiplePriority as number)); const cloneData = data.slice(); const runningSorters = innerSorterStates.filter( ({ column: { sorter }, sortOrder }) => getSortFunction(sorter) && sortOrder, ); // Skip if no sorter needed if (!runningSorters.length) { return cloneData; } return cloneData .sort((record1, record2) => { for (let i = 0; i < runningSorters.length; i += 1) { const sorterState = runningSorters[i]; const { column: { sorter }, sortOrder, } = sorterState; const compareFn = getSortFunction(sorter); if (compareFn && sortOrder) { const compareResult = compareFn(record1, record2, sortOrder); if (compareResult !== 0) { return sortOrder === ASCEND ? compareResult : -compareResult; } } } return 0; }) .map((record) => { const subRecords = (record as any)[childrenColumnName]; if (subRecords) { return { ...record, [childrenColumnName]: getSortData(subRecords, sortStates, childrenColumnName), }; } return record; }); } interface SorterConfig { prefixCls: string; mergedColumns: ColumnsType; onSorterChange: ( sorterResult: SorterResult | SorterResult[], sortStates: SortState[], ) => void; sortDirections: SortOrder[]; tableLocale?: TableLocale; showSorterTooltip?: boolean | TooltipProps; } export default function useFilterSorter({ prefixCls, mergedColumns, onSorterChange, sortDirections, tableLocale, showSorterTooltip, }: SorterConfig): [ TransformColumns, SortState[], ColumnTitleProps, () => SorterResult | SorterResult[], ] { const [sortStates, setSortStates] = React.useState[]>( collectSortStates(mergedColumns, true), ); const mergedSorterStates = React.useMemo(() => { let validate = true; const collectedStates = collectSortStates(mergedColumns, false); // Return if not controlled if (!collectedStates.length) { return sortStates; } const validateStates: SortState[] = []; function patchStates(state: SortState) { if (validate) { validateStates.push(state); } else { validateStates.push({ ...state, sortOrder: null, }); } } let multipleMode: boolean | null = null; collectedStates.forEach((state) => { if (multipleMode === null) { patchStates(state); if (state.sortOrder) { if (state.multiplePriority === false) { validate = false; } else { multipleMode = true; } } } else if (multipleMode && state.multiplePriority !== false) { patchStates(state); } else { validate = false; patchStates(state); } }); return validateStates; }, [mergedColumns, sortStates]); // Get render columns title required props const columnTitleSorterProps = React.useMemo>(() => { const sortColumns = mergedSorterStates.map(({ column, sortOrder }) => ({ column, order: sortOrder, })); return { sortColumns, // Legacy sortColumn: sortColumns[0] && sortColumns[0].column, sortOrder: sortColumns[0] && sortColumns[0].order, }; }, [mergedSorterStates]); function triggerSorter(sortState: SortState) { let newSorterStates; if ( sortState.multiplePriority === false || !mergedSorterStates.length || mergedSorterStates[0].multiplePriority === false ) { newSorterStates = [sortState]; } else { newSorterStates = [ ...mergedSorterStates.filter(({ key }) => key !== sortState.key), sortState, ]; } setSortStates(newSorterStates); onSorterChange(generateSorterInfo(newSorterStates), newSorterStates); } const transformColumns = (innerColumns: ColumnsType) => injectSorter( prefixCls, innerColumns, mergedSorterStates, triggerSorter, sortDirections, tableLocale, showSorterTooltip, ); const getSorters = () => generateSorterInfo(mergedSorterStates); return [transformColumns, mergedSorterStates, columnTitleSorterProps, getSorters]; }