From e9bbebe73793ef5f2471ef6e783c8cb2af9890fa Mon Sep 17 00:00:00 2001 From: MarcusNotheis Date: Thu, 2 Apr 2020 08:33:43 +0200 Subject: [PATCH 1/4] feat(AnalyticalTable): add possibility to clear sorting in column header --- .../ColumnHeader/ColumnHeaderModal.tsx | 39 +++++++++++++++---- .../AnalyticalTable/types/ColumnType.ts | 1 + 2 files changed, 33 insertions(+), 7 deletions(-) diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx index b482280ba03..dabe01b4d84 100644 --- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx +++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx @@ -1,3 +1,4 @@ +import '@ui5/webcomponents-icons/dist/icons/decline'; import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils'; import { CustomListItem } from '@ui5/webcomponents-react/lib/CustomListItem'; import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox'; @@ -20,13 +21,13 @@ export interface ColumnHeaderModalProperties { showGroup?: boolean; column: ColumnType; style: CSSProperties; - onSort?: (e: CustomEvent<{column: unknown; sortDirection: string}>) => void; - onGroupBy?: (e: CustomEvent<{column: unknown; isGrouped: boolean}>) => void; + onSort?: (e: CustomEvent<{ column: unknown; sortDirection: string }>) => void; + onGroupBy?: (e: CustomEvent<{ column: unknown; isGrouped: boolean }>) => void; } const staticStyle = { fontWeight: 'normal' }; -export const ColumnHeaderModal: FC = (props) => { +export const ColumnHeaderModal: FC = (props: ColumnHeaderModalProperties) => { const { showGroup, showSort, showFilter, column, style, openBy, onSort, onGroupBy } = props; const { Filter } = column; @@ -60,6 +61,17 @@ export const ColumnHeaderModal: FC = (props) => { ); } break; + case 'clear': + column.clearSortBy(); + if (typeof onSort === 'function') { + onSort( + enrichEventWithDetails(e, { + column, + sortDirection: sortType + }) + ); + } + break; case 'group': const willGroup = !column.isGrouped; column.toggleGroupBy(willGroup); @@ -80,6 +92,9 @@ export const ColumnHeaderModal: FC = (props) => { [column, popoverRef, onGroupBy] ); + const isSortedAscending = column.isSorted && column.isSortedDesc === false; + const isSortedDescending = column.isSorted && column.isSortedDesc === true; + return ( = (props) => { style={staticStyle as CSSProperties} > - {showSort && ( - + {isSortedAscending && ( + + Clear Sorting + + )} + {showSort && !isSortedAscending && ( + Sort Ascending )} - {showSort && ( - + {showSort && !isSortedDescending && ( + Sort Descending )} + {isSortedDescending && ( + + Clear Sorting + + )} {showFilter && !column.isGrouped && ( diff --git a/packages/main/src/components/AnalyticalTable/types/ColumnType.ts b/packages/main/src/components/AnalyticalTable/types/ColumnType.ts index a3f995f58c6..ab43f23fbbb 100644 --- a/packages/main/src/components/AnalyticalTable/types/ColumnType.ts +++ b/packages/main/src/components/AnalyticalTable/types/ColumnType.ts @@ -7,6 +7,7 @@ export interface ColumnType extends Column { id: string; Filter: ComponentType<{ column: ColumnType; popoverRef?: RefObject }>; toggleSortBy: (descending: boolean, multi?: any) => void; + clearSortBy: () => void; toggleGroupBy: (set: boolean) => void; canFilter: boolean; canResize: boolean; From a7dfd6f71418945d02f60898bd7f914e4a3e58aa Mon Sep 17 00:00:00 2001 From: MarcusNotheis Date: Thu, 2 Apr 2020 10:01:39 +0200 Subject: [PATCH 2/4] Update AnalyticalTable.test.tsx.snap --- .../__snapshots__/AnalyticalTable.test.tsx.snap | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap index 3253e7d6164..51f48374102 100644 --- a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap +++ b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap @@ -3520,12 +3520,12 @@ exports[`AnalyticalTable test Asc desc 2`] = ` Sort Ascending - Sort Descending + Clear Sorting @@ -4011,12 +4011,12 @@ exports[`AnalyticalTable test Asc desc 3`] = ` separators="All" > - Sort Ascending + Clear Sorting Date: Thu, 2 Apr 2020 13:33:02 +0200 Subject: [PATCH 3/4] Update AnalyticalTable.test.tsx.snap --- .../__snapshots__/AnalyticalTable.test.tsx.snap | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap index f743257e13c..15cc41589ec 100644 --- a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap +++ b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap @@ -3501,11 +3501,11 @@ exports[`AnalyticalTable test Asc desc 2`] = ` Sort Ascending - Clear Sorting + Sort Descending @@ -3985,11 +3985,11 @@ exports[`AnalyticalTable test Asc desc 3`] = ` separators="All" > - Clear Sorting + Sort Ascending Date: Thu, 2 Apr 2020 15:23:28 +0200 Subject: [PATCH 4/4] Update packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx Co-Authored-By: Lukas --- .../AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx index dabe01b4d84..a3a614dc9ca 100644 --- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx +++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx @@ -89,7 +89,7 @@ export const ColumnHeaderModal: FC = (props: Column popoverRef.current.close(); } }, - [column, popoverRef, onGroupBy] + [column, popoverRef, onGroupBy, onSort] ); const isSortedAscending = column.isSorted && column.isSortedDesc === false;