Remove deprecated table header propery sort

Refs: #7015
public-ui · Dec 18, 2024 · 44384f0 · 44384f0
1 parent 746f7b5
commit 44384f0
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 102 deletions.
diff --git a/docs/BREAKING_CHANGES.v3.md b/docs/BREAKING_CHANGES.v3.md
@@ -18,19 +18,23 @@ The following components have been removed:
 
 ## Changed Components
 
+### All Input Components
+
+- The property `_alert` has been removed. It's not being handled automatically based on `_msg` and the touched state. See #6138.
+- The property `_error` has been removed. Use `_msg_` instead.
+
 ### kol-abbr
 
 - Visually, the tooltip has been replaced by a simple label shown in parentheses after the abbreviation.
 - The property `_tooltipAlign` has been removed.
 
 ### kol-modal
 
-- Remove property `_activeElement`
+- The property `_activeElement` has been removed. Use the methods `openModal` and `closeModal` instead.
 
-## All Input Components
+### kol-table-stateful
 
-- The property `_alert` has been removed. It's not being handled automatically based on `_msg` and the touched state. See #6138.
-- The property `_error` has been removed. Use `_msg_` instead.
+- The table header property `sort` has been removed. Use `compareFn` instead.
 
 ## `focus`-methods
 

diff --git a/packages/components/src/components/table-stateful/shadow.tsx b/packages/components/src/components/table-stateful/shadow.tsx
@@ -3,21 +3,20 @@ import type {
 	KoliBriDataCompareFn,
 	KoliBriPaginationButtonCallbacks,
 	KoliBriSortDirection,
-	KoliBriSortFunction,
 	KoliBriTableDataType,
 	KoliBriTableHeaderCellWithLogic,
 	KoliBriTableHeaders,
 	KoliBriTablePaginationProps,
-	KoliBriTableSelectedHead,
 	LabelPropType,
 	PaginationPositionPropType,
+	SortEventPayload,
 	Stringified,
 	TableAPI,
-	TableStatefulCallbacksPropType,
 	TableDataFootPropType,
 	TableDataPropType,
 	TableHeaderCells,
 	TableSelectionPropType,
+	TableStatefulCallbacksPropType,
 	TableStates,
 } from '../../schema';
 import {
@@ -36,11 +35,10 @@ import {
 	watchValidator,
 } from '../../schema';
 import type { JSX } from '@stencil/core';
-import { Component, h, Host, Method, Prop, State, Watch, Element } from '@stencil/core';
+import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 
 import { translate } from '../../i18n';
 import { KolPaginationTag, KolTableStatelessWcTag } from '../../core/component-names';
-import type { SortEventPayload } from '../../schema';
 import { tryToDispatchKoliBriEvent } from '../../utils/events';
 import { Events } from '../../schema/enums';
 
@@ -70,25 +68,12 @@ export class KolTableStateful implements TableAPI {
 		this.tableWcRef = ref;
 	};
 
-	/**
-	 * @deprecated only for backward compatibility
-	 */
-	private sortFunction?: KoliBriSortFunction;
-	/**
-	 * @deprecated only for backward compatibility
-	 */
-	private sortDirections: Map<KoliBriSortFunction, KoliBriSortDirection> = new Map();
 	private sortData: SortData[] = [];
 	private showPagination = false;
 	private pageStartSlice = 0;
 	private pageEndSlice = 10;
 	private disableSort = false;
 
-	/**
-	 * @deprecated only for backward compatibility
-	 */
-	private sortedColumnHead: KoliBriTableSelectedHead = { label: '', key: '', sortDirection: 'NOS' };
-
 	/**
 	 * Defines whether to allow multi sort.
 	 */
@@ -185,29 +170,11 @@ export class KolTableStateful implements TableAPI {
 		validatePaginationPosition(this, value);
 	}
 
-	/**
-	 * @deprecated only for backward compatibility
-	 */
-	private setSortDirection = (sort: KoliBriSortFunction, direction: KoliBriSortDirection) => {
-		/**
-		 * Durch des Clearen, ist es nicht möglich eine Mehr-Spalten-Sortierung
-		 * darzustellen. Das wäre der Fall, wenn man ggf. Daten in außerhalb der
-		 * Komponente sortiert und diese sortiert von außen rein gibt und der
-		 * Sortierungsalgorithmus mehrere Spalten zusammen sortierte.
-		 *
-		 * Beachte auch col.sort !== this.sortFunction
-		 */
-		this.sortDirections.clear();
-		this.sortDirections.set(sort, direction);
-		this.sortFunction = sort;
-	};
-
 	/**
 	 * Handles sorting logic for table columns.
 	 * If multi-sort is enabled (`_allowMultiSort`), multiple columns can be sorted at once.
 	 * Otherwise, sorting is cleared when switching between columns.
 	 */
-
 	private changeCellSort(headerCell: KoliBriTableHeaderCellWithLogic) {
 		if (typeof headerCell.compareFn === 'function') {
 			if (!this.state._allowMultiSort && headerCell.key != this.sortData[0]?.key) {
@@ -238,20 +205,7 @@ export class KolTableStateful implements TableAPI {
 				});
 			}
 
-			this.updateSortedData(headerCell as KoliBriTableSelectedHead);
-		} else if (typeof headerCell.sort === 'function') {
-			this.sortFunction = headerCell.sort;
-			switch (this.sortDirections.get(this.sortFunction)) {
-				case 'ASC':
-					this.setSortDirection(this.sortFunction, 'DESC');
-					break;
-				case 'DESC':
-					this.setSortDirection(this.sortFunction, 'NOS');
-					break;
-				default:
-					this.setSortDirection(this.sortFunction, 'ASC');
-			}
-			this.updateSortedData(headerCell as KoliBriTableSelectedHead);
+			this.updateSortedData();
 		}
 	}
 
@@ -292,9 +246,6 @@ export class KolTableStateful implements TableAPI {
 												this.sortData.push({ label: cell.label, key, compareFn: cell.compareFn, direction: sortDirection });
 											}
 											hasSortedCells = true;
-										} else if (typeof cell.sort === 'function') {
-											this.setSortDirection(cell.sort, sortDirection);
-											setTimeout(() => this.updateSortedData({ key, label: cell.label, sortDirection }));
 										}
 									}
 								});
@@ -438,11 +389,7 @@ export class KolTableStateful implements TableAPI {
 		}
 	}
 
-	/**
-	 *
-	 * @param cell only used for old single sort. Can be removed when sort is removed.
-	 */
-	private updateSortedData = (cell: KoliBriTableSelectedHead = this.sortedColumnHead) => {
+	private updateSortedData = () => {
 		if (this.disableSort) {
 			setState(this, '_sortedData', this.state._data);
 			return;
@@ -460,21 +407,6 @@ export class KolTableStateful implements TableAPI {
 				}
 				return 0;
 			});
-		} else if (typeof this.sortFunction === 'function') {
-			switch (this.sortDirections.get(this.sortFunction)) {
-				case 'ASC':
-					sortedData = this.sortFunction([...this.state._data]);
-					this.sortedColumnHead = { label: cell.label, key: cell.key, sortDirection: 'ASC' };
-					break;
-				case 'DESC':
-					sortedData = this.sortFunction([...this.state._data]).reverse();
-					this.sortedColumnHead = { label: cell.label, key: cell.key, sortDirection: 'DESC' };
-					break;
-				case 'NOS':
-				default:
-					sortedData = [...this.state._data];
-					this.sortedColumnHead = { label: '', key: '', sortDirection: 'NOS' };
-			}
 		}
 		setState(this, '_sortedData', sortedData);
 	};
@@ -521,10 +453,7 @@ export class KolTableStateful implements TableAPI {
 	}
 
 	private getHeaderCellSortState(headerCell: KoliBriTableHeaderCellWithLogic): KoliBriSortDirection | undefined {
-		if (!this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function')) {
-			if (headerCell.key === this.sortedColumnHead.key) {
-				return this.sortedColumnHead.sortDirection;
-			}
+		if (!this.disableSort && typeof headerCell.compareFn === 'function') {
 			if (headerCell.key) {
 				const data = this.sortData.find((value) => value.key === headerCell.key);
 				if (data?.direction) {

diff --git a/packages/components/src/schema/components/table.ts b/packages/components/src/schema/components/table.ts
@@ -5,19 +5,10 @@ import type { KoliBriTableDataType, KoliBriTableHeaderCell, Stringified, KoliBri
 import type { KoliBriPaginationProps } from './pagination';
 import type { PropPaginationPosition } from '../props/pagination-position';
 
-export type KoliBriTableSelectedHead = { key: string; label: string; sortDirection: KoliBriSortDirection };
-
-type KoliBriTableSort = <T>(data: T[]) => T[];
-
-export type KoliBriSortFunction = (data: KoliBriTableDataType[]) => KoliBriTableDataType[];
 export type KoliBriDataCompareFn = (a: KoliBriTableDataType, b: KoliBriTableDataType) => number;
 
 export type KoliBriTableHeaderCellWithLogic = KoliBriTableHeaderCell & {
 	compareFn?: KoliBriDataCompareFn;
-	/**
-	 * @deprecated use `compareFn` instead
-	 */
-	sort?: KoliBriTableSort;
 	sortDirection?: KoliBriSortDirection;
 };
 

diff --git a/packages/samples/react/src/components/table/sort-data.tsx b/packages/samples/react/src/components/table/sort-data.tsx
@@ -22,12 +22,11 @@ const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
 				key: 'date',
 				textAlign: 'center',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
-				sort: (data) =>
-					data.sort((data0, data1) => {
-						if ((data0 as Data).date < (data1 as Data).date) return -1;
-						else if ((data1 as Data).date < (data0 as Data).date) return 1;
-						else return 0;
-					}),
+				compareFn: (data0, data1) => {
+					if ((data0 as Data).date < (data1 as Data).date) return -1;
+					else if ((data1 as Data).date < (data0 as Data).date) return 1;
+					else return 0;
+				},
 			},
 		],
 	],
@@ -42,12 +41,11 @@ const HEADERS_VERTICAL: KoliBriTableHeaders = {
 				key: 'date',
 				textAlign: 'center',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
-				sort: (data) =>
-					data.sort((data0, data1) => {
-						if ((data0 as Data).date < (data1 as Data).date) return -1;
-						else if ((data1 as Data).date < (data0 as Data).date) return 1;
-						else return 0;
-					}),
+				compareFn: (data0, data1) => {
+					if ((data0 as Data).date < (data1 as Data).date) return -1;
+					else if ((data1 as Data).date < (data0 as Data).date) return 1;
+					else return 0;
+				},
 			},
 		],
 	],