feat: use different icon for unsorted column

gravity-ui · Jan 19, 2024 · 174a5f2 · 174a5f2
1 parent f385233
commit 174a5f2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/src/components/Table/hoc/withTableSorting/SortIndicator/SortIndicator.tsx b/src/components/Table/hoc/withTableSorting/SortIndicator/SortIndicator.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {ArrowDown, ArrowUp} from '@gravity-ui/icons';
+import {ArrowDown, ArrowUp, ArrowUpArrowDown} from '@gravity-ui/icons';
 
 import {Icon} from '../../../../Icon';
 import {block} from '../../../../utils/cn';
@@ -13,10 +13,22 @@ export interface SortIndicatorProps {
 
 const b = block('sort-indicator');
 
-export function SortIndicator({order = 'asc'}: SortIndicatorProps) {
+export function SortIndicator({order}: SortIndicatorProps) {
+    let icon;
+    switch (order) {
+        case 'asc':
+            icon = ArrowUp;
+            break;
+        case 'desc':
+            icon = ArrowDown;
+            break;
+        default:
+            icon = ArrowUpArrowDown;
+    }
+
     return (
         <div className={b()}>
-            <Icon data={order === 'asc' ? ArrowUp : ArrowDown} size={14} className={b('icon')} />
+            <Icon data={icon} size={14} className={b('icon')} />
         </div>
     );
 }
diff --git a/src/components/Table/hoc/withTableSorting/withTableSorting.tsx b/src/components/Table/hoc/withTableSorting/withTableSorting.tsx
@@ -138,9 +138,7 @@ export function withTableSorting<I extends TableDataItem, E extends {} = {}>(
                                 </div>,
                                 <div key="spacer" className={b('sort-spacer')} />,
                                 <div key="indicator" className={b('sort-indicator')}>
-                                    <SortIndicator
-                                        order={sortOrder || this.getColumnDefaultSortOrder(column)}
-                                    />
+                                    <SortIndicator order={sortOrder} />
                                 </div>,
                             ];