fix(BaseHeaderCell): sorting on resize fixed (#55)

gravity-ui · Sep 25, 2024 · 716a45b · 716a45b
1 parent 39b5709
commit 716a45b
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 21 deletions.
diff --git a/src/components/BaseHeaderCell/BaseHeaderCell.tsx b/src/components/BaseHeaderCell/BaseHeaderCell.tsx
@@ -11,6 +11,7 @@ import {
 } from '../../utils';
 import type {BaseResizeHandleProps} from '../BaseResizeHandle';
 import {BaseResizeHandle} from '../BaseResizeHandle';
+import {BaseSort} from '../BaseSort';
 import type {BaseSortIndicatorProps} from '../BaseSortIndicator';
 import {BaseSortIndicator} from '../BaseSortIndicator';
 import {b} from '../BaseTable/BaseTable.classname';
@@ -58,25 +59,29 @@ export const BaseHeaderCell = <TData, TValue>({
             className={b('header-cell', getHeaderCellClassModes(header), className)}
             colSpan={header.colSpan > 1 ? header.colSpan : undefined}
             rowSpan={rowSpan > 1 ? rowSpan : undefined}
-            onClick={header.column.getToggleSortingHandler()}
             aria-sort={getAriaSort(header.column.getIsSorted())}
             aria-colindex={getHeaderCellAriaColIndex(header)}
             {...attributes}
             style={getCellStyles(header, attributes?.style)}
         >
-            {flexRender(header.column.columnDef.header, header.getContext())}{' '}
-            {header.column.getCanSort() &&
-                (renderSortIndicator ? (
-                    renderSortIndicator({
-                        className: b('sort-indicator', sortIndicatorClassName),
-                        header,
-                    })
-                ) : (
-                    <BaseSortIndicator
-                        className={b('sort-indicator', sortIndicatorClassName)}
-                        header={header}
-                    />
-                ))}
+            {header.column.getCanSort() ? (
+                <BaseSort header={header}>
+                    {flexRender(header.column.columnDef.header, header.getContext())}{' '}
+                    {renderSortIndicator ? (
+                        renderSortIndicator({
+                            className: b('sort-indicator', sortIndicatorClassName),
+                            header,
+                        })
+                    ) : (
+                        <BaseSortIndicator
+                            className={b('sort-indicator', sortIndicatorClassName)}
+                            header={header}
+                        />
+                    )}
+                </BaseSort>
+            ) : (
+                flexRender(header.column.columnDef.header, header.getContext())
+            )}
             {header.column.getCanResize() &&
                 (renderResizeHandle ? (
                     renderResizeHandle({

diff --git a/src/components/BaseSort/BaseSort.tsx b/src/components/BaseSort/BaseSort.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {useActionHandlers} from '@gravity-ui/uikit';
+import type {Header} from '@tanstack/react-table';
+
+import {b} from '../BaseTable/BaseTable.classname';
+
+export interface BaseSortProps<TData, TValue>
+    extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'className' | 'onClick'> {
+    className?: string;
+    header: Header<TData, TValue>;
+}
+
+export const BaseSort = <TData, TValue>({
+    header,
+    className,
+    children,
+    ...restProps
+}: BaseSortProps<TData, TValue>) => {
+    const handleKeyDown = header.column.getToggleSortingHandler();
+    const {onKeyDown} = useActionHandlers(handleKeyDown);
+
+    return (
+        <span
+            className={b('sort', className)}
+            role="button"
+            tabIndex={0}
+            onClick={handleKeyDown}
+            onKeyDown={onKeyDown}
+            {...restProps}
+        >
+            {children}
+        </span>
+    );
+};
diff --git a/src/components/BaseSort/index.ts b/src/components/BaseSort/index.ts
@@ -0,0 +1 @@
+export * from './BaseSort';
diff --git a/src/components/BaseTable/BaseTable.scss b/src/components/BaseTable/BaseTable.scss
@@ -41,13 +41,6 @@ $block: '.#{variables.$ns}table';
         font-weight: 500;
     }
 
-    &__header-cell {
-        &_sortable {
-            cursor: pointer;
-            user-select: none;
-        }
-    }
-
     &__cell,
     &__header-cell,
     &__footer-cell {
@@ -63,6 +56,11 @@ $block: '.#{variables.$ns}table';
         }
     }
 
+    &__sort {
+        cursor: pointer;
+        user-select: none;
+    }
+
     &_with-row-virtualization {
         display: grid;